/* ========================================================================== AETERNA — storefront design system (Woodmart child theme) Palette sampled from the logo: warm near-black ink on a warm light-grey ground, with a muted clay accent. Display type: Bodoni Moda — the Didone of the logo's "A". Text: Jost. Everything is scoped under body.ae so it wins over Woodmart CSS parts that load later in the page, without !important wars. Woodmart is re-skinned mostly through its own CSS variables. Contents 1. Tokens 7. Mobile menu 13. Footer 2. Base 8. Product cards 14. Reviews 3. Buttons & forms 9. Product page 15. 404 & pages 4. Announcement 10. Cart & checkout 16. Motion 5. Header 11. Trust & payments 17. Page transitions 6. Shop panel 12. Homepage 18. Reduced motion ========================================================================== */ /* 1. Tokens ---------------------------------------------------------------- */ /* * Palette sampled from the logo: warm near-black ink (#1E1110) on a warm * light-grey ground (#ECE7E5). The header uses the exact ground so the logo * artwork sits in it seamlessly. */ body.ae { --ae-ground: #ece7e5; --ae-ivory: #f4f1ef; --ae-paper: #fbfaf9; --ae-sand: #e2dcd9; --ae-sand-deep: #cfc7c3; --ae-ink: #1e1110; --ae-text: #3d3331; --ae-muted: #6f6462; --ae-espresso: #1e1110; --ae-espresso-deep: #140b0a; --ae-cognac: #8a5a48; --ae-gold: #b29d8d; --ae-media: #e6e0dd; --ae-logo-bg: transparent; --ae-font-display: "Bodoni Moda", "Bodoni 72", Didot, "Times New Roman", serif; --ae-font-text: "Jost", Futura, "Century Gothic", "Helvetica Neue", Arial, sans-serif; --ae-ease: cubic-bezier(.2, .7, .2, 1); --ae-ease-out: cubic-bezier(.16, 1, .3, 1); --ae-ease-in: cubic-bezier(.55, 0, .75, .2); --ae-shadow: 0 1px 2px rgba(30, 17, 16, .05), 0 18px 40px -22px rgba(30, 17, 16, .35); --ae-wrap: 1280px; --ae-gutter: 16px; --ae-section: clamp(56px, 8vw, 120px); /* Woodmart variables */ --wd-text-font: var(--ae-font-text); --wd-text-font-size: 15px; --wd-text-line-height: 1.7; --wd-title-font: var(--ae-font-display); --wd-title-font-weight: 500; --wd-entities-title-font: var(--ae-font-text); --wd-entities-title-font-weight: 500; --wd-alternative-font: var(--ae-font-display); --wd-widget-title-font: var(--ae-font-text); --wd-widget-title-font-weight: 600; --wd-widget-title-font-size: 12px; --wd-header-el-font: var(--ae-font-text); --wd-header-el-font-weight: 500; --wd-header-el-font-size: 12px; --wd-primary-color: var(--ae-ink); --wd-alternative-color: var(--ae-cognac); --wd-form-brd-radius: 0px; --wd-brd-radius: 0px; --wd-form-height: 48px; --btn-height: 52px; --btn-font-weight: 500; --btn-transform: uppercase; --btn-default-bgcolor: transparent; --btn-default-bgcolor-hover: var(--ae-ink); --btn-default-color: var(--ae-ink); --btn-default-color-hover: var(--ae-ground); --btn-accented-bgcolor: var(--ae-ink); --btn-accented-bgcolor-hover: #3a2522; --btn-accented-color: var(--ae-ground); --btn-accented-color-hover: #fff; --notices-success-bg: var(--ae-ink); --notices-success-color: var(--ae-ground); --notices-warning-bg: var(--ae-cognac); --notices-warning-color: #fff; background-color: var(--ae-ivory); color: var(--wd-text-color); /* Elementor's kit (.elementor-kit-8 on ) sets Montserrat, which is not loaded, so text fell back to Arial. */ font-family: var(--wd-text-font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Woodmart redefines colour variables inside these scopes; re-point them. */ body.ae, .ae .color-scheme-dark, .ae .whb-color-dark, .ae .wd-dropdown, .ae .wd-side-hidden, .ae .wd-popup, .ae .mfp-content { --wd-text-color: var(--ae-text); --wd-title-color: var(--ae-ink); --wd-widget-title-color: var(--ae-ink); --wd-entities-title-color: var(--ae-ink); --wd-entities-title-color-hover: var(--ae-cognac); --wd-link-color: var(--ae-ink); --wd-link-color-hover: var(--ae-cognac); --color-gray-300: var(--ae-sand-deep); --color-gray-400: #a2958f; --color-gray-500: var(--ae-muted); --color-gray-600: var(--ae-muted); --color-gray-700: var(--ae-text); --color-gray-800: var(--ae-ink); --color-gray-900: var(--ae-ink); --bgcolor-white-rgb: 251, 250, 249; --bgcolor-white: var(--ae-paper); --bgcolor-gray-100: var(--ae-ivory); --bgcolor-gray-200: var(--ae-ivory); --bgcolor-gray-300: var(--ae-ground); --brdcolor-gray-200: rgba(30, 17, 16, .08); --brdcolor-gray-300: rgba(30, 17, 16, .12); --brdcolor-gray-400: rgba(30, 17, 16, .18); --brdcolor-gray-500: rgba(30, 17, 16, .26); --wd-form-brd-color: rgba(30, 17, 16, .2); --wd-form-brd-color-focus: var(--ae-ink); --wd-form-placeholder-color: var(--ae-muted); --wd-main-bgcolor: var(--ae-ivory); } /* 2. Base ------------------------------------------------------------------ */ .ae .website-wrapper, .ae .main-page-wrapper { background-color: var(--ae-ivory); } .ae ::selection { background: var(--ae-ink); color: var(--ae-ground); } .ae :focus-visible { outline: 2px solid var(--ae-cognac); outline-offset: 3px; } .ae h1, .ae h2, .ae h3, .ae .title, .ae .page-title .title, .ae .woocommerce-Reviews-title, .ae .comment-reply-title { font-family: var(--ae-font-display); font-weight: 500; letter-spacing: -.01em; color: var(--ae-ink); } .ae h4, .ae h5, .ae h6 { font-family: var(--ae-font-text); font-weight: 500; letter-spacing: .04em; } .ae .entry-content a:not(.button):not(.btn), .ae .woocommerce-product-details__short-description a { color: var(--ae-cognac); text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; } .ae .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .ae .ae-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .ae .ae-icon { width: 20px; height: 20px; flex: none; } .ae-wrap { width: 100%; max-width: var(--ae-wrap); margin-inline: auto; padding-inline: var(--ae-gutter); } @media (min-width: 768px) { body.ae { --ae-gutter: 28px; } } /* 3. Buttons & forms ------------------------------------------------------- */ .ae .btn, .ae .button, .ae button[type="submit"]:not(.searchsubmit), .ae input[type="submit"], .ae .ae-btn { min-height: var(--btn-height); padding: 0 30px; border-radius: 0; font-family: var(--ae-font-text); font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; transition: background-color .35s var(--ae-ease), color .35s var(--ae-ease), border-color .35s var(--ae-ease), transform .35s var(--ae-ease); } .ae .ae-btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px; overflow: hidden; border: 1px solid var(--ae-ink); text-decoration: none; cursor: pointer; } /* Fill that sweeps in from the left on hover. */ .ae .ae-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ae-ink); transform: scaleX(0); transform-origin: right; transition: transform .55s var(--ae-ease-out); } .ae .ae-btn:hover::before { transform: scaleX(1); transform-origin: left; } .ae .ae-btn--solid { background: var(--ae-ink); color: var(--ae-ground); } .ae .ae-btn--solid::before { background: #3a2522; } .ae .ae-btn--solid:hover { color: #fff; } .ae .ae-btn--ghost { background: transparent; color: var(--ae-ink); } .ae .ae-btn--ghost:hover { color: var(--ae-ground); } .ae .ae-btn--light { border-color: var(--ae-ground); background: var(--ae-ground); color: var(--ae-ink); } .ae .ae-btn--light::before { background: var(--ae-ink); } .ae .ae-btn--light:hover { color: var(--ae-ground); } .ae .ae-link { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--ae-ink); background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .45s var(--ae-ease-out); padding-bottom: 4px; } .ae .ae-link:hover { background-size: 100% 1px; } .ae .ae-link .ae-icon { width: 16px; height: 16px; transition: transform .35s var(--ae-ease); } .ae .ae-link:hover .ae-icon { transform: translateX(4px); } .ae input[type="text"], .ae input[type="email"], .ae input[type="tel"], .ae input[type="password"], .ae input[type="search"], .ae input[type="number"], .ae select, .ae textarea { border-radius: 0; background-color: var(--ae-paper); font-size: 16px; /* 16px stops iOS from zooming into fields. */ transition: border-color .25s var(--ae-ease), box-shadow .25s var(--ae-ease); } .ae input:focus, .ae select:focus, .ae textarea:focus { box-shadow: 0 0 0 3px rgba(138, 90, 72, .16); } .ae .ae-chip { display: inline-flex; align-items: center; min-height: 42px; padding: 0 20px; border: 1px solid var(--ae-sand-deep); border-radius: 999px; font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ae-ink); transition: all .3s var(--ae-ease); } .ae .ae-chip:hover { border-color: var(--ae-ink); background: var(--ae-ink); color: var(--ae-ground); } /* 4. Announcement bar ------------------------------------------------------ */ .ae-announce { position: relative; z-index: 5; background: var(--ae-ink, #1e1110); color: var(--ae-ground, #ece7e5); view-transition-name: ae-announce; } .ae-announce__track { position: relative; display: grid; height: 36px; overflow: hidden; } .ae-announce__item { grid-area: 1 / 1; align-self: center; margin: 0; padding-inline: 12px; overflow: hidden; font-size: 10.5px; font-weight: 500; letter-spacing: .24em; line-height: 36px; text-align: center; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; opacity: 0; transform: translateY(10px); transition: opacity .7s var(--ae-ease), transform .7s var(--ae-ease-out); } .ae-announce__item.is-active { opacity: 1; transform: none; } /* 5. Header ---------------------------------------------------------------- */ .ae .whb-top-bar { display: none; /* Replaced by the announcement bar. */ } /* * The main header already forms its own stacking context (z-index 390), so a * view-transition-name here keeps it steady during page transitions without * trapping the Shop panel beneath the page content. */ .ae .whb-main-header { view-transition-name: ae-header; } /* Beats Woodmart's .whb-color-dark:not(.whb-with-bg) white, which loads later. */ .ae .whb-header .whb-main-header, .ae .whb-header .whb-row { background-color: var(--ae-ground); } .ae .whb-header .whb-general-header { border-bottom: 1px solid rgba(30, 17, 16, .08); } /* Logo: same artwork, blended into the matching ground so its tile disappears. */ .ae .site-logo .wd-logo { display: block; overflow: hidden; } .ae .site-logo .wd-logo img { width: auto; max-height: 84px; padding: 0; background: var(--ae-logo-bg); mix-blend-mode: darken; transform: scale(1.3); transition: transform .6s var(--ae-ease-out); } .ae .site-logo .wd-logo:hover img { transform: scale(1.38); } /* Navigation */ .ae .whb-header .wd-nav > li > a { font-family: var(--ae-font-text); font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--ae-ink); } .ae .whb-header .wd-nav > li > a .nav-link-text { position: relative; } .ae .whb-header .wd-nav > li > a .nav-link-text::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ae-ease-out); } .ae .whb-header .wd-nav > li:hover > a .nav-link-text::after, .ae .whb-header .wd-nav > li:focus-within > a .nav-link-text::after, .ae .whb-header .wd-nav > li.current-menu-item > a .nav-link-text::after { transform: scaleX(1); transform-origin: left; } .ae .wd-dropdown { border-top: 1px solid var(--ae-sand); box-shadow: var(--ae-shadow); } .ae .wd-dropdown .wd-sub-menu li > a { font-size: 13px; letter-spacing: .04em; } /* Search */ .ae .whb-header .searchform { --wd-form-height: 44px; --wd-search-btn-w: 48px; --wd-form-color: var(--ae-ink); } .ae .whb-header .searchform input.s { height: 44px; border: 1px solid rgba(30, 17, 16, .1); border-radius: 999px; background: var(--ae-paper); color: var(--ae-ink); /* The header colour scheme would make typed text #777 (4.3:1). */ padding-inline: 22px 52px; font-size: 14px; transition: border-color .3s var(--ae-ease), box-shadow .3s var(--ae-ease), background-color .3s var(--ae-ease); } .ae .whb-header .searchform input.s:focus { border-color: var(--ae-ink); background: #fff; box-shadow: 0 10px 30px -18px rgba(30, 17, 16, .45); } /* Icon-only submit, as Woodmart designs it (the label is for screen readers). */ .ae .searchform .searchsubmit { min-height: unset; padding: 0; border-radius: 0 999px 999px 0; background: transparent; color: var(--ae-ink); font-size: 0; letter-spacing: 0; } .ae .searchform .searchsubmit span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } /* Header icons: one quiet style for all of them. */ .ae .whb-header .wd-tools-element { --wd-header-el-color: var(--ae-ink); --wd-header-el-color-hover: var(--ae-cognac); --wd-count-size: 17px; } .ae .whb-header .wd-tools-element .wd-tools-icon::before { font-size: 21px; } .ae .whb-header .wd-tools-element:is(.wd-design-6, .wd-design-7) > a > :is(.wd-tools-inner, .wd-tools-icon) { width: auto; height: auto; border: 0; border-radius: 0; background: none; } .ae .whb-header .wd-tools-element .wd-tools-count { min-width: var(--wd-count-size); width: auto; height: var(--wd-count-size); padding: 0 4px; border-radius: 999px; background: var(--ae-ink); box-shadow: 0 0 0 2px var(--ae-ground); color: var(--ae-ground); font-family: var(--ae-font-text); font-size: 10px; font-weight: 600; line-height: var(--wd-count-size); letter-spacing: 0; } .ae .whb-header .wd-tools-element:is(.wd-design-6, .wd-design-7) .wd-tools-count { top: -7px; inset-inline-end: -10px; } /* Compare is noise for a clothing store. */ .ae .wd-header-compare, .ae .wd-compare-btn, .ae .product-compare-button { display: none !important; } /* Account: icon only (the name stays available to screen readers). */ .ae .whb-header .wd-header-my-account .wd-tools-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } /* Cart: bag icon with a count badge (subtotal lives in the side cart). */ .ae .whb-header .wd-header-cart.wd-design-1 > a { position: relative; } .ae .whb-header .wd-header-cart.wd-design-1 .wd-tools-text { margin: 0; } .ae .whb-header .wd-header-cart.wd-design-1 :is(.subtotal-divider, .wd-cart-subtotal) { display: none; } .ae .whb-header .wd-header-cart.wd-design-1 .wd-cart-number { position: absolute; top: 1px; inset-inline-end: 1px; display: inline-block; text-align: center; } .ae .whb-header .wd-header-cart .wd-cart-subtotal { font-weight: 600; color: var(--ae-ink); } @media (min-width: 1025px) { .ae .whb-general-header .whb-col-right { gap: 4px; } } @media (max-width: 1024px) { .ae .site-logo .wd-logo img { max-height: 56px; } .ae .whb-header .wd-tools-element > a { min-width: 44px; min-height: 44px; justify-content: center; } } /* 6. Shop panel ------------------------------------------------------------ */ .ae .whb-header .wd-nav > li.ae-has-mega { position: static; } .ae .ae-has-mega > .wd-dropdown-menu { display: none !important; } .ae .ae-mega { position: absolute; top: 100%; left: 0; right: 0; z-index: 50; padding: 36px 0 44px; border-top: 1px solid rgba(30, 17, 16, .08); background: var(--ae-paper); /* Second shadow dims the page behind the open panel; the clip keeps it off the header. */ box-shadow: 0 30px 60px -40px rgba(30, 17, 16, .45), 0 0 0 100vmax rgba(30, 17, 16, .16); clip-path: inset(0 -100vmax -100vmax -100vmax); text-align: left; visibility: hidden; opacity: 0; transform: translateY(-10px); pointer-events: none; transition: opacity .3s var(--ae-ease), transform .45s var(--ae-ease-out), visibility 0s linear .3s; } /* Keeps the panel open while the pointer travels down from the link. */ .ae .ae-mega::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 32px; } .ae .ae-has-mega:hover > .ae-mega, .ae .ae-has-mega:focus-within > .ae-mega, .ae .ae-has-mega.is-open > .ae-mega { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition-delay: .06s, .06s, 0s; } .ae .ae-mega__inner { display: grid; grid-template-columns: minmax(180px, 220px) 1fr; gap: 40px; align-items: start; } .ae .ae-mega__title { margin: 0 0 22px; font-family: var(--ae-font-display); font-size: 28px; font-style: italic; line-height: 1.15; color: var(--ae-ink); } .ae .ae-mega__links { margin: 0; padding: 0; list-style: none; } .ae .ae-mega__links li { margin: 0 0 10px; } .ae .ae-mega__links a { font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--ae-ink); background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .45s var(--ae-ease-out); } .ae .ae-mega__links a:hover { background-size: 100% 1px; } .ae .ae-mega__cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; } .ae .ae-mega__cats li { margin: 0; opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ae-ease), transform .7s var(--ae-ease-out); transition-delay: calc(var(--ae-i, 0) * 45ms); } .ae .ae-has-mega:hover .ae-mega__cats li, .ae .ae-has-mega:focus-within .ae-mega__cats li, .ae .ae-has-mega.is-open .ae-mega__cats li { opacity: 1; transform: none; } .ae .ae-mega__cat { display: block; color: var(--ae-ink); } .ae .ae-mega__img { display: block; overflow: hidden; aspect-ratio: 4 / 5; background: var(--ae-media); } .ae .ae-mega__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ae-ease-out); } .ae .ae-mega__cat:hover .ae-mega__img img { transform: scale(1.06); } .ae .ae-mega__label { display: block; padding-top: 12px; font-family: var(--ae-font-display); font-size: 16px; line-height: 1.2; } /* 7. Mobile menu & toolbar ------------------------------------------------- */ .ae .mobile-nav { background: var(--ae-paper); } .ae .mobile-nav .wd-nav-mobile > li > a { font-size: 13px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; } .ae .mobile-nav .wd-nav-mobile li a { border-bottom-color: var(--ae-sand); } .ae .mobile-nav .wd-nav-opener.wd-active { background-color: var(--ae-ink); } .ae .wd-toolbar { background: rgba(236, 231, 229, .94); border-top: 1px solid rgba(30, 17, 16, .08); box-shadow: 0 -12px 30px -26px rgba(30, 17, 16, .5); backdrop-filter: saturate(160%) blur(10px); -webkit-backdrop-filter: saturate(160%) blur(10px); } /* Sized so "MY ACCOUNT" fits a fifth of a 320px screen without an ellipsis. */ .ae .wd-toolbar .wd-toolbar-label { left: 0; right: 0; font-size: 9px; font-weight: 500; letter-spacing: .03em; text-transform: uppercase; color: var(--ae-text); } .ae .wd-toolbar .wd-tools-count { background-color: var(--ae-ink); color: var(--ae-ground); } /* The toolbar's "Shop" icon was an animated GIF; draw a clean line bag instead. */ .ae .wd-toolbar-link .wd-custom-icon img { display: none; } .ae .wd-toolbar-link .wd-custom-icon::before { content: ""; display: block; width: 20px; height: 20px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1 12H6z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1 12H6z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E") center / contain no-repeat; } /* 8. Product cards --------------------------------------------------------- */ .ae .product-grid-item .product-wrapper { display: flex; flex-direction: column; background: transparent; } /* Colour dots go under the price, so titles line up across a row whether a card has them or not. */ .ae .product-grid-item .wd-swatches-grid { order: 1; margin-top: 8px; } .ae .product-grid-item .product-element-top { overflow: hidden; background: var(--ae-media); } .ae .product-grid-item .product-image-link img, .ae .product-grid-item .hover-img img { transition: transform 1.2s var(--ae-ease-out), opacity .7s var(--ae-ease); } @media (hover: hover) and (pointer: fine) { .ae .product-grid-item:hover .product-image-link img, .ae .product-grid-item:hover .hover-img img { transform: scale(1.05); } .ae .product-grid-item .wd-buttons { opacity: 0; transform: translateX(8px); transition: opacity .4s var(--ae-ease), transform .4s var(--ae-ease); } .ae .product-grid-item:hover .wd-buttons, .ae .product-grid-item:focus-within .wd-buttons { opacity: 1; transform: none; } } /* Touch screens and phones: a clean card (tap opens the product). */ @media (hover: none), (max-width: 767px) { .ae .product-grid-item .wd-buttons, .ae .product-grid-item .wd-add-btn { display: none; } } .ae .product-grid-item .wd-buttons { border-radius: 0; background: rgba(251, 250, 249, .94); box-shadow: none; } .ae .product-grid-item .wd-entities-title { margin-top: 14px; margin-bottom: 6px; font-family: var(--ae-font-text); font-size: 12.5px; font-weight: 500; letter-spacing: .12em; line-height: 1.5; text-transform: uppercase; } .ae .product-grid-item .wd-product-cats { display: none; /* Category links under every title were clutter. */ } .ae .product-grid-item .price, .ae .product-grid-item .price .amount { font-size: 14px; font-weight: 500; color: var(--ae-ink); } .ae .product-grid-item .wd-add-btn .button { min-height: 46px; background: var(--ae-ink); color: var(--ae-ground); font-size: 11px; } .ae .product-grid-item .wd-add-btn .button:hover { background: #3a2522; } .ae .product-labels .product-label { min-width: 0; min-height: 0; padding: 6px 10px; border-radius: 0; font-family: var(--ae-font-text); font-size: 9.5px; font-weight: 500; letter-spacing: .22em; line-height: 1; text-transform: uppercase; } .ae .product-labels .product-label.new, .ae .product-labels .product-label.featured { background-color: var(--ae-paper); color: var(--ae-ink); } .ae .product-labels .product-label.onsale { background-color: var(--ae-cognac); color: #fff; } .ae .product-labels .product-label.out-of-stock { background-color: var(--ae-ink); color: var(--ae-ground); } /* Shop toolbar, filters, pagination */ .ae .shop-loop-head, .ae .wd-shop-tools { font-size: 13px; } .ae .woocommerce-pagination .page-numbers li a, .ae .woocommerce-pagination .page-numbers li span { border-radius: 0; } .ae .woocommerce-pagination .page-numbers li span.current { background: var(--ae-ink); color: var(--ae-ground); } /* Category navigation under shop titles. The theme settings still point the title bar at a Woodmart demo photo; use the brand ground instead. */ .ae .page-title, .ae .page-title-default { background-color: var(--ae-ground); background-image: none; } .ae .page-title .title { color: var(--ae-ink); letter-spacing: -.01em; text-transform: none; } .ae .page-title .breadcrumbs, .ae .page-title .breadcrumbs a, .ae .page-title .wd-nav-product-cat > li > a { color: var(--ae-text); } .ae .page-title .wd-nav-product-cat > li > a { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; } /* "55 products" under each category: Woodmart's light grey was 2.6:1. */ .ae .wd-nav-product-cat .nav-link-count { color: var(--ae-muted); } /* 9. Product page ---------------------------------------------------------- */ /* The product layout centres the summary; details and bullets read better aligned left. */ .ae.single-product .summary.text-center { --content-align: flex-start; --text-align: start; text-align: start; } .ae.single-product .product_title { font-size: clamp(30px, 3.6vw, 44px); font-weight: 400; line-height: 1.08; letter-spacing: -.015em; text-transform: none; } /* * Previous / back / next arrows beside the breadcrumbs: Woodmart draws them * 20px square and hides the "Back to products" text, leaving a link with no * name. Give them a finger-sized target and keep the text for screen readers. */ .ae .wd-product-nav-btn { width: 40px; height: 40px; } .ae .wd-product-nav-btn.wd-btn-back span { position: absolute; display: block; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .ae.single-product .summary-inner > .price, .ae.single-product .summary-inner > .price .amount { font-size: 20px; font-weight: 600; color: var(--ae-ink); } .ae.single-product .woocommerce-product-details__short-description ul { --li-mb: 6px; padding-left: 0; list-style: none; text-align: start; } .ae.single-product .woocommerce-product-details__short-description li { position: relative; padding-left: 18px; font-size: 14px; } .ae.single-product .woocommerce-product-details__short-description li::before { content: ""; position: absolute; left: 0; top: .75em; width: 8px; height: 1px; background: var(--ae-gold); } .ae .variations .label label { font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ae-ink); } .ae .wd-swatches-product .wd-swatch.wd-text { min-width: 48px; min-height: 44px; border: 1px solid var(--ae-sand-deep); border-radius: 0; background: var(--ae-paper); transition: border-color .25s var(--ae-ease), background-color .25s var(--ae-ease), color .25s var(--ae-ease); } .ae .wd-swatches-product .wd-swatch.wd-text .wd-swatch-text { font-size: 13px; font-weight: 600; letter-spacing: .06em; } .ae .wd-swatches-product .wd-swatch.wd-text:hover { border-color: var(--ae-espresso); } .ae .wd-swatches-product .wd-swatch.wd-text.wd-active { border-color: var(--ae-espresso); background: var(--ae-espresso); color: var(--ae-ivory); } /* Size buttons (built by initSizePills() in aeterna.js over the hidden select) */ .ae .ae-pills { display: flex; flex-wrap: wrap; gap: 8px; } .ae .ae-pill { min-width: 56px; min-height: 46px; padding: 0 16px; border: 1px solid var(--ae-sand-deep); border-radius: 0; background: var(--ae-paper); box-shadow: none; color: var(--ae-ink); font-family: var(--ae-font-text); font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: border-color .25s var(--ae-ease), background-color .25s var(--ae-ease), color .25s var(--ae-ease), transform .2s var(--ae-ease); } .ae .ae-pill:hover { border-color: var(--ae-ink); background: var(--ae-paper); color: var(--ae-ink); } .ae .ae-pill:active { transform: scale(.96); } .ae .ae-pill:focus-visible { outline: 2px solid var(--ae-cognac); outline-offset: 2px; } .ae .ae-pill[aria-pressed="true"] { border-color: var(--ae-ink); background: var(--ae-ink); color: var(--ae-ground); } .ae .ae-pill:disabled { border-color: var(--ae-sand); background: transparent; color: var(--ae-muted); text-decoration: line-through; opacity: .55; cursor: not-allowed; } /* * WooCommerce's "Clear" link, shown once a size is chosen: at least 24px to * tap. Woodmart places it 10px below the sizes in 40px it keeps free above * the quantity row, so it fits without an extra margin. */ .ae .reset_variations { min-height: 24px; } .ae .ae-select-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .ae .variations .value.cell { position: relative; } /* Quantity, Add to cart and Buy now: qty + add to cart on one row, Buy now (straight to checkout) below. */ .ae form.cart div.quantity { height: 52px; border: 1px solid var(--ae-sand-deep); background: var(--ae-paper); } .ae form.cart div.quantity input[type="button"] { min-width: 40px; height: 50px; border: 0; background: transparent; color: var(--ae-ink); font-size: 18px; font-weight: 400; transition: background-color .2s var(--ae-ease); } .ae form.cart div.quantity input[type="button"]:hover { background: var(--ae-ground); color: var(--ae-ink); } .ae form.cart div.quantity input[type="number"] { width: 36px; height: 50px; border: 0; background: transparent; color: var(--ae-ink); font-size: 15px; font-weight: 500; } .ae form.cart .single_add_to_cart_button { flex: 1 1 160px; } .ae form.cart .wd-buy-now-btn { flex: 1 1 100%; } .ae .single_add_to_cart_button.button { border: 1px solid var(--ae-espresso); background: transparent; color: var(--ae-espresso); } .ae .single_add_to_cart_button.button:hover { background: var(--ae-espresso); color: var(--ae-ivory); } .ae .wd-buy-now-btn.button { border: 1px solid var(--ae-espresso); background: var(--ae-espresso); color: var(--ae-ivory); } .ae .wd-buy-now-btn.button:hover { border-color: var(--ae-cognac); background: var(--ae-cognac); color: #fff; } /* * Until a size is chosen the buttons stay visible but muted (WooCommerce adds * .disabled). Muted with colour rather than opacity, so the labels stay * readable (4.5:1 or better). */ .ae form.cart .single_add_to_cart_button.button.disabled, .ae form.cart .single_add_to_cart_button.button.disabled:hover { border-color: var(--ae-sand-deep); background: transparent; color: var(--ae-muted); } .ae form.cart .wd-buy-now-btn.button.disabled, .ae form.cart .wd-buy-now-btn.button.disabled:hover { border-color: var(--ae-sand); background: var(--ae-sand); color: var(--ae-text); } .ae .woocommerce-tabs .wd-nav-tabs .wd-nav-link { font-size: 12px; font-weight: 600; letter-spacing: .16em; } .ae .wd-sizeguide-btn a, .ae .wd-sizeguide-icon { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ae-espresso); } .ae.single-product .product_meta.wd-layout-inline > span { margin: 0 24px 6px 0; font-size: 13px; } /* * Portrait tablets (600–768px) get the side-by-side layout too; stacked, the * photo alone is taller than the screen and the sizes sit two screens down. */ @media (min-width: 600px) and (max-width: 768.98px) { .ae.single-product .product-image-summary-inner > .col-md-6 { flex: 0 0 50%; max-width: 50%; } } /* Phones and tablets: shorter thumbnail strip so the price and sizes come up sooner. */ @media (max-width: 1024px) { .ae.single-product .thumbnails .product-image-thumbnail img { aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 30%; } } /* Mobile sticky add to cart */ .ae .wd-sticky-btn { background: rgba(251, 250, 249, .97); border-top: 1px solid var(--ae-sand); } /* 10. Cart & checkout ------------------------------------------------------ */ .ae .cart-totals-inner, .ae .checkout-order-review, .ae #order_review { border: 1px solid var(--ae-sand); background: var(--ae-paper); } .ae .checkout-button.button, .ae #place_order { width: 100%; min-height: 54px; background: var(--ae-espresso); color: var(--ae-ivory); font-size: 12.5px; } .ae .checkout-button.button:hover, .ae #place_order:hover { background: var(--ae-ink); } .ae #payment { background: transparent; } .ae #payment ul.payment_methods { padding: 0; border: 0; } .ae #payment ul.payment_methods > li { position: relative; margin-bottom: 10px; padding: 14px 16px; border: 1px solid var(--ae-sand-deep); background: var(--ae-paper); transition: border-color .25s var(--ae-ease), box-shadow .25s var(--ae-ease); } .ae #payment ul.payment_methods > li:has(> input:checked) { border-color: var(--ae-espresso); box-shadow: 0 0 0 1px var(--ae-espresso) inset; } .ae #payment ul.payment_methods > li > label { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; font-weight: 600; color: var(--ae-ink); } .ae #payment .payment_box { margin: 12px 0 0; padding: 14px 16px; background: var(--ae-ivory); color: var(--ae-text); font-size: 14px; } .ae #payment .payment_box::before { display: none; } .ae #payment .payment_box ol { margin: 0 0 12px; padding-left: 20px; } .ae #payment .payment_box ol li { margin-bottom: 6px; } /* bKash / Nagad plugin blocks */ .ae .bdpg-total-amount { margin: 10px 0; font-size: 15px; color: var(--ae-ink); } .ae .bdpg-available-accounts { display: grid; gap: 12px; } .ae .bdpg-s__acc { display: flex; align-items: center; gap: 14px; padding: 12px; border: 1px dashed var(--ae-sand-deep); background: var(--ae-paper); } .ae .bdpg-acc__qr-code img { width: 96px; height: auto; } .ae .bdpg-acc_d p { margin: 0 0 4px; font-size: 14px; } .ae .bdpg-acc_d b { font-size: 16px; letter-spacing: .06em; color: var(--ae-ink); } .ae .bdpg-user__acc { display: grid; gap: 10px; } .ae .bdpg-user__field label { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } .ae .bdpg-user__field input { width: 100%; } .ae .bdpg-g-details img { max-height: 40px; width: auto; } /* Side (mini) cart */ .ae .cart-widget-side .wd-heading .title { font-family: var(--ae-font-display); font-size: 18px; letter-spacing: .08em; } .ae .woocommerce-mini-cart__buttons .button { min-height: 50px; } .ae .woocommerce-mini-cart__buttons .button.checkout { background: var(--ae-espresso); color: var(--ae-ivory); } /* Free-delivery progress bar */ .ae .wd-free-progress-bar .progress-area { height: 4px; background: var(--ae-sand); } .ae .wd-free-progress-bar .progress-bar { background: var(--ae-cognac); } /* 11. Trust & payments ----------------------------------------------------- */ .ae .ae-pay { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; } .ae .ae-pay__label { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ae-muted); } .ae .ae-pay__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } .ae .ae-pay__item, .ae .ae-gateway-icon { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 60px; height: 34px; margin: 0; padding: 0 10px; border: 1px solid var(--ae-sand); border-radius: 6px; background: #fff; color: var(--ae-ink); font-size: 11px; font-weight: 700; letter-spacing: .06em; vertical-align: middle; } .ae .ae-pay__item .ae-icon { width: 18px; height: 18px; color: var(--ae-espresso); } .ae .ae-pay__logo { width: auto; max-width: 64px; height: 22px; object-fit: contain; } .ae .ae-pay__item--bkash .ae-pay__word { color: #e2136e; font-size: 13px; letter-spacing: 0; } .ae .ae-pay__item--nagad .ae-pay__word { color: #d4181f; /* Nagad's #ec1c24, a shade deeper to reach 4.5:1 on white. */ font-size: 13px; letter-spacing: 0; } .ae .ae-pay--compact { justify-content: center; margin-top: 12px; } .ae .ae-buybox { display: grid; gap: 16px; margin: 22px 0 18px; padding: 18px 0 0; border-top: 1px solid var(--ae-sand); } .ae .ae-buybox__promises { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .ae .ae-buybox__promises li { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 13.5px; color: var(--ae-text); } .ae .ae-buybox__promises .ae-icon { color: var(--ae-espresso); } .ae .ae-buybox__promises a { color: var(--ae-cognac); text-decoration: underline; text-underline-offset: .2em; } .ae .ae-cart-trust { display: grid; gap: 12px; margin-top: 16px; } .ae .ae-checkout-pay { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 26px 0 14px; } .ae .ae-checkout-pay__title { margin: 0; font-size: 18px; letter-spacing: .08em; } .ae .ae-exchange-note { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0; font-size: 13px; color: var(--ae-text); } .ae .ae-exchange-note .ae-icon { color: var(--ae-espresso); } .ae .ae-exchange-note a { color: var(--ae-cognac); text-decoration: underline; } .ae .ae-thankyou { margin-bottom: 26px; padding: 18px 20px; border-left: 2px solid var(--ae-gold); background: var(--ae-paper); } .ae .ae-trust { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; } .ae .ae-trust__item { display: flex; align-items: flex-start; gap: 14px; margin: 0; } .ae .ae-trust__item .ae-icon { width: 26px; height: 26px; margin-top: 2px; color: var(--ae-espresso); } .ae .ae-trust__item strong { display: block; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ae-ink); } .ae .ae-trust__item strong a { color: inherit; text-decoration: underline; text-underline-offset: .25em; } .ae .ae-trust__item span { font-size: 13.5px; color: var(--ae-muted); } @media (min-width: 768px) { .ae .ae-trust--grid, .ae .ae-trust--footer { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1025px) { .ae .ae-trust--grid, .ae .ae-trust--footer { grid-template-columns: repeat(4, 1fr); } } /* 12. Homepage ------------------------------------------------------------- */ .ae-home-page .main-page-wrapper { padding-top: 0; } /* Full-bleed sections are 100vw, which includes a desktop scrollbar: clip the overflow (unlike hidden, clip keeps sticky elements working). */ .ae-home-page .main-page-wrapper, .ae.error404 .main-page-wrapper { overflow-x: clip; } .ae .ae-home > section, .ae .ae-home > .ae-marquee, .ae .ae-404 > .ae-section { width: 100vw; margin-left: calc(50% - 50vw); } .ae .ae-eyebrow { margin: 0 0 14px; font-family: var(--ae-font-text); font-size: 11px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--ae-cognac); } .ae .ae-eyebrow--light { color: var(--ae-gold); } .ae .ae-section { padding-block: var(--ae-section); } .ae .ae-section__head { margin-bottom: clamp(28px, 4vw, 48px); text-align: center; } .ae .ae-section__head--split { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; text-align: left; } .ae .ae-section__title { margin: 0; font-size: clamp(32px, 4.4vw, 56px); font-weight: 400; line-height: 1.05; letter-spacing: -.02em; } /* Hero */ .ae .ae-hero { position: relative; overflow: hidden; padding-block: clamp(28px, 5vw, 72px) clamp(44px, 6vw, 88px); background: radial-gradient(90% 70% at 80% 20%, rgba(255, 255, 255, .55), transparent 65%), linear-gradient(180deg, var(--ae-ground) 0%, var(--ae-ivory) 100%); } .ae .ae-hero__monogram { position: absolute; right: -4vw; bottom: -12vw; z-index: 0; font-family: var(--ae-font-display); font-size: clamp(340px, 66vw, 900px); font-weight: 400; line-height: 1; color: rgba(30, 17, 16, .035); pointer-events: none; user-select: none; } .ae .ae-hero__inner { position: relative; z-index: 1; display: grid; gap: clamp(32px, 5vw, 64px); align-items: center; } .ae .ae-hero__title { margin: 0 0 22px; font-size: clamp(48px, 9.4vw, 112px); font-weight: 400; line-height: .95; letter-spacing: -.025em; color: var(--ae-ink); } .ae .ae-hero__title em { display: block; font-style: italic; font-weight: 400; color: var(--ae-cognac); } .ae .ae-hero__text { max-width: 34em; margin: 0 0 28px; font-size: clamp(15px, 1.4vw, 17px); color: var(--ae-text); } .ae .ae-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; } @media (max-width: 767px) { .ae .ae-hero__ctas .ae-btn { flex: 1 1 100%; } } .ae .ae-hero__proof { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 0; list-style: none; } .ae .ae-hero__proof li { position: relative; margin: 0; padding-left: 14px; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ae-muted); } .ae .ae-hero__proof li::before { content: ""; position: absolute; left: 0; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--ae-gold); transform: translateY(-50%); } .ae .ae-hero__media { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; transform: translate3d(0, var(--ae-parallax, 0px), 0); } .ae .ae-hero__card { position: relative; display: block; overflow: hidden; aspect-ratio: 5 / 8; background: var(--ae-media); animation: ae-unveil-soft 1.3s var(--ae-ease-out) backwards; animation-delay: calc(var(--ae-i, 0) * 120ms); } .ae .ae-hero__card img { width: 100%; height: 100%; object-fit: cover; animation: ae-settle 1.8s var(--ae-ease-out) backwards; transition: transform 1.1s var(--ae-ease-out); } .ae .ae-hero__card:hover img { transform: scale(1.04); } .ae .ae-hero__tag { position: absolute; left: 10px; right: 10px; bottom: 10px; display: none; justify-content: space-between; gap: 8px; padding: 10px 12px; background: rgba(251, 250, 249, .92); color: var(--ae-ink); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .ae .ae-hero__tag-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ae .ae-hero__tag-price, .ae .ae-hero__tag-price .amount { flex: none; color: var(--ae-espresso); } @media (min-width: 768px) { .ae .ae-hero__tag { display: flex; } } @media (min-width: 1025px) { .ae .ae-hero__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .ae .ae-hero__media { grid-template-columns: 1.25fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px; height: min(72vh, 640px); } .ae .ae-hero__card { aspect-ratio: auto; } .ae .ae-hero__card--1 { grid-row: 1 / span 2; } .ae .ae-hero__media[data-count="1"] { grid-template-columns: 1fr; } } /* Categories */ .ae .ae-cats__rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(62%, 1fr); gap: 12px; margin-inline: calc(var(--ae-gutter) * -1); padding-inline: var(--ae-gutter); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--ae-gutter); scrollbar-width: none; } .ae .ae-cats__rail::-webkit-scrollbar { display: none; } .ae .ae-cat { display: block; scroll-snap-align: start; color: var(--ae-ink); } .ae .ae-cat__media { display: block; overflow: hidden; aspect-ratio: 4 / 5; background: var(--ae-media); } .ae .ae-cat__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ae-ease-out); } .ae .ae-cat:hover .ae-cat__media img { transform: scale(1.05); } .ae .ae-cat__label { display: flex; align-items: center; justify-content: space-between; padding: 14px 2px 0; font-family: var(--ae-font-display); font-size: 22px; font-weight: 400; letter-spacing: -.01em; } .ae .ae-cat__label .ae-icon { width: 18px; height: 18px; transition: transform .4s var(--ae-ease); } .ae .ae-cat:hover .ae-cat__label .ae-icon { transform: translateX(5px); } @media (min-width: 768px) { .ae .ae-cats__rail { grid-auto-columns: minmax(30%, 1fr); } } @media (min-width: 1025px) { .ae .ae-cats__rail { grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-inline: 0; padding-inline: 0; overflow: visible; } } /* Product sections */ .ae .ae-products + .ae-products, .ae .ae-cats + .ae-products { padding-top: 0; } /* Brand statement band */ .ae .ae-statement { position: relative; overflow: hidden; padding-block: clamp(72px, 10vw, 136px); background: radial-gradient(80% 120% at 12% 0%, rgba(138, 90, 72, .35), transparent 62%), var(--ae-ink); color: var(--ae-ivory); text-align: center; } .ae .ae-statement__inner { max-width: 820px; } .ae .ae-statement__title { margin: 0 0 20px; font-size: clamp(34px, 5.4vw, 68px); font-style: italic; font-weight: 400; line-height: 1.05; letter-spacing: -.02em; color: var(--ae-ground); } .ae .ae-statement__text { max-width: 36em; margin: 0 auto 30px; color: rgba(236, 231, 229, .82); } /* Services */ .ae .ae-services { padding-block: clamp(40px, 5vw, 64px); border-top: 1px solid var(--ae-sand); border-bottom: 1px solid var(--ae-sand); background: var(--ae-paper); } /* Social */ .ae .ae-social { padding-block: clamp(48px, 6vw, 80px); } .ae .ae-social__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; } .ae .ae-social__title { margin: 0; font-size: clamp(24px, 3vw, 34px); } .ae .ae-social__links { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; } .ae .ae-social__links li { margin: 0; } .ae .ae-social__links a { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 18px; border: 1px solid var(--ae-sand-deep); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ae-ink); transition: all .3s var(--ae-ease); } .ae .ae-social__links a:hover { border-color: var(--ae-espresso); background: var(--ae-espresso); color: var(--ae-ivory); } /* Brand strip */ .ae .ae-marquee { overflow: hidden; border-block: 1px solid rgba(30, 17, 16, .1); background: var(--ae-ground); color: var(--ae-ink); } .ae .ae-marquee__track { display: flex; align-items: center; width: max-content; animation: ae-marquee 42s linear infinite; } /* Held still until the shopper first scrolls, taps or types (aeterna.js adds `ae-engaged`), so the first paint settles instead of drifting forever. */ .ae-js:not(.ae-engaged) .ae .ae-marquee__track, .ae .ae-marquee:hover .ae-marquee__track { animation-play-state: paused; } .ae .ae-marquee__item { padding: 18px 26px; font-size: 12px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; white-space: nowrap; } .ae .ae-marquee__mark { font-family: var(--ae-font-display); font-size: 22px; line-height: 1; color: var(--ae-cognac); } /* 13. Footer --------------------------------------------------------------- */ .ae .ae-footer { background: var(--ae-espresso-deep); color: rgba(236, 231, 229, .78); } .ae .ae-footer a { color: rgba(236, 231, 229, .86); } .ae .ae-footer a:hover { color: #fff; } /* The homepage already ends with the same promises. */ .ae-home-page .ae-footer__promises { display: none; } .ae .ae-footer__promises { padding-block: 34px; border-bottom: 1px solid rgba(236, 231, 229, .12); } .ae .ae-footer .ae-trust__item .ae-icon, .ae .ae-footer .ae-trust__item strong { color: var(--ae-ivory); } .ae .ae-footer .ae-trust__item span { color: rgba(236, 231, 229, .66); } .ae .ae-footer__main { display: grid; gap: 36px; padding-block: 56px 40px; } .ae .ae-footer__wordmark { display: inline-block; font-family: var(--ae-font-display); font-size: 30px; font-weight: 500; letter-spacing: .32em; color: var(--ae-ivory) !important; } .ae .ae-footer__tagline { margin: 6px 0 16px; font-size: 10.5px; font-weight: 600; letter-spacing: .34em; text-transform: uppercase; color: var(--ae-gold); } .ae .ae-footer__about { max-width: 26em; font-size: 14px; } .ae .ae-footer__social { display: flex; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; } .ae .ae-footer__social li { margin: 0; } .ae .ae-footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid rgba(236, 231, 229, .22); border-radius: 50%; transition: all .3s var(--ae-ease); } .ae .ae-footer__social a:hover { border-color: var(--ae-ivory); background: var(--ae-ivory); color: var(--ae-espresso); } .ae .ae-footer__social .ae-icon { width: 18px; height: 18px; } .ae .ae-footer__title { margin: 0 0 16px; font-family: var(--ae-font-text); font-size: 11px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--ae-gold); } .ae .ae-footer__col ul { margin: 0; padding: 0; list-style: none; } .ae .ae-footer__col li { margin-bottom: 4px; font-size: 14px; } .ae .ae-footer__col li a, .ae .ae-footer__col li span { display: inline-flex; align-items: flex-start; gap: 10px; padding-block: 6px; } .ae .ae-footer__contact .ae-icon { width: 17px; height: 17px; margin-top: 3px; opacity: .8; } .ae .ae-footer__bottom { padding-block: 22px 26px; border-top: 1px solid rgba(236, 231, 229, .12); } .ae .ae-footer__bottom-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; } .ae .ae-footer__legal { margin: 0; font-size: 12px; letter-spacing: .04em; } .ae .ae-footer__credit { display: inline-block; margin-left: 8px; opacity: .75; } /* A link inside a line of text needs more than colour to stand out. */ .ae .ae-footer__credit a { text-decoration: underline; text-underline-offset: .2em; } .ae .ae-pay--footer .ae-pay__item { border-color: transparent; } @media (min-width: 768px) { .ae .ae-footer__main { grid-template-columns: 1.4fr 1fr 1fr; } .ae .ae-footer__contact { grid-column: 1 / -1; } } @media (min-width: 1025px) { .ae .ae-footer__main { grid-template-columns: 1.5fr 1fr 1fr 1.4fr; } .ae .ae-footer__contact { grid-column: auto; } } /* Leave room for Woodmart's mobile bottom toolbar. */ @media (max-width: 1024px) { .ae.sticky-toolbar-on .ae-footer { padding-bottom: 56px; } } /* 14. Reviews -------------------------------------------------------------- */ .ae .ae-review-prompt { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: -4px 0 16px; font-size: 13px; } .ae .ae-review-link { color: var(--ae-cognac); font-weight: 600; text-decoration: underline; text-underline-offset: .22em; } .ae .ae-stars { color: var(--ae-sand-deep); letter-spacing: .12em; } .ae .woocommerce-Reviews .comment-form-rating .stars a { color: var(--ae-gold); } .ae .woocommerce-Reviews #respond { padding: clamp(18px, 3vw, 30px); border: 1px solid var(--ae-sand); background: var(--ae-paper); } .ae .woocommerce-Reviews .star-rating span::before, .ae .star-rating span::before { color: var(--ae-gold); } /* 15. 404 & pages ---------------------------------------------------------- */ .ae .ae-404 { text-align: center; } .ae .ae-404__inner { max-width: 720px; margin: 0 auto; padding-block: clamp(56px, 9vw, 120px) 24px; } .ae .ae-404__code { margin: 0; font-family: var(--ae-font-display); font-size: clamp(96px, 20vw, 200px); line-height: 1; color: rgba(30, 17, 16, .12); } .ae .ae-404__title { margin: -0.35em 0 16px; font-size: clamp(28px, 4.4vw, 44px); } .ae .ae-404__text { margin: 0 auto 28px; max-width: 32em; } .ae .ae-search { display: flex; gap: 8px; max-width: 520px; margin: 0 auto 24px; } .ae .ae-search input[type="search"] { flex: 1; height: 50px; padding-inline: 18px; border: 1px solid var(--ae-sand-deep); } .ae .ae-404__cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 28px; } .ae .ae-404__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } .ae .woocommerce-message, .ae .woocommerce-info { border-radius: 0; } .ae .scrollToTop { border-radius: 0; background: var(--ae-paper); box-shadow: var(--ae-shadow); } /* Long-form policy pages */ .ae .ae-policy { max-width: 760px; margin-inline: auto; } .ae .ae-policy h2 { margin-top: 1.8em; font-size: clamp(20px, 2.4vw, 26px); } .ae .ae-policy .ae-policy__summary { padding: 20px 24px; border-left: 2px solid var(--ae-gold); background: var(--ae-paper); } /* 16. Motion --------------------------------------------------------------- */ @keyframes ae-settle { from { transform: scale(1.08); } to { transform: none; } } @keyframes ae-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } @keyframes ae-line { from { transform: translateY(.32em); } to { transform: none; } } @keyframes ae-unveil { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } } @keyframes ae-unveil-soft { from { clip-path: inset(14% 0 0 0); } to { clip-path: inset(0 0 0 0); } } @keyframes ae-marquee { to { transform: translate3d(-50%, 0, 0); } } /* * Reveal on scroll. `ae-js` is set by a one-line inline script in ; * if aeterna.js never arrives, the failsafe shows everything after 3.5s. */ @keyframes ae-failsafe { to { opacity: 1; transform: none; } } .ae-js .ae-reveal { opacity: 0; transform: translateY(26px); animation: ae-failsafe .01s 3.5s forwards; } .ae-reveal-ready .ae-reveal { animation: none; } .ae-js .ae-reveal.is-inview { animation: ae-rise 1s var(--ae-ease-out) both; animation-delay: calc(var(--ae-i, 0) * 80ms); } .ae-js .ae-reveal.is-static { opacity: 1; transform: none; animation: none; } /* Product and category photography unveils upward as it enters. */ .ae-js .product-grid-item.ae-reveal.is-inview .product-element-top, .ae-js .ae-cat.ae-reveal.is-inview .ae-cat__media { animation: ae-unveil 1.1s var(--ae-ease-out) backwards; animation-delay: calc(var(--ae-i, 0) * 80ms + 60ms); } .ae-js .product-grid-item.ae-reveal.is-inview .product-image-link img, .ae-js .ae-cat.ae-reveal.is-inview .ae-cat__media img { animation: ae-settle 1.6s var(--ae-ease-out) backwards; animation-delay: calc(var(--ae-i, 0) * 80ms + 60ms); } /* Hero: the headline paints on the first frame (it is the LCP), then settles. */ .ae .ae-hero__title .ae-line { display: block; animation: ae-line 1.1s var(--ae-ease-out) backwards; animation-delay: calc(var(--ae-i, 0) * 110ms); } .ae .ae-hero__copy > :not(.ae-hero__title) { animation: ae-rise 1s var(--ae-ease-out) both; } .ae .ae-hero__copy > .ae-eyebrow { animation-delay: .05s; } .ae .ae-hero__copy > .ae-hero__text { animation-delay: .22s; } .ae .ae-hero__copy > .ae-hero__ctas { animation-delay: .32s; } .ae .ae-hero__copy > .ae-hero__proof { animation-delay: .42s; } .ae .ae-hero__card--1 { animation: none; /* The first photo is the LCP on desktop: never hide it. */ } /* 17. Page transitions ------------------------------------------------------ */ /* * The header and announcement bar carry view-transition-names (sections 4 * and 5). The transition rules themselves are printed inline in by * aeterna_view_transition_styles() (inc/setup.php), next to the script that * drives the product-photo morph. */ /* 18. Reduced motion ------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .ae *, .ae *::before, .ae *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .ae-js .ae-reveal { opacity: 1; transform: none; } .ae .ae-marquee__track { animation: none; } .ae .ae-hero__media { transform: none; } }