/* Theme Name: Aurelle Theme URI: https://example.com/aurelle Author: Studio Author URI: https://example.com Description: Salon-perfumery WooCommerce theme on a porcelain-white base with deep indigo-ink typography and a restrained rouge-blush accent. Hero is a split panel: solid ink copy block and one full-height product photo sharing a hard vertical seam. Flat solid colour blocking throughout (no gradients, no grid backgrounds), 4px corners, trapezoid-foot buttons, generous whitespace, configurable homepage sections, generic spec tables with reusable presets, floating contact rail with QR modals. All copy and imagery is managed from the admin, so the theme fits any product category. Version: 1.0.0 Requires at least: 6.4 Tested up to: 6.8 Requires PHP: 8.0 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: aurelle Tags: e-commerce, custom-menu, custom-logo, featured-images, translation-ready Fonts: DM Serif Display (headings) & Lato (body), both licensed under the SIL Open Font License 1.1 (commercial web use permitted), loaded from Google Fonts. https://fonts.google.com/specimen/DM+Serif+Display https://fonts.google.com/specimen/Lato */ /* ================= Design tokens ================= */ :root { --bg: #faf8f6; --surface: #ffffff; --surface-2: #f1ece9; --ink: #232c3d; --ink-soft: #485062; --muted: #676b79; --accent: #d98a94; --accent-deep: #c06a76; --accent-soft: #f4dfe2; --accent-text: #a84e5c; --sage: #4e7057; --dark: #232c3d; --dark-2: #1a2231; --dark-ink: #f4f1ef; --dark-muted: #a8aebc; --danger: #a83a4a; --line: rgba(35, 44, 61, 0.12); --line-dark: rgba(244, 241, 239, 0.14); --radius: 4px; --radius-sm: 3px; --shadow: 0 26px 48px -32px rgba(35, 44, 61, 0.35); --font-display: "DM Serif Display", "Times New Roman", Georgia, serif; --font-body: "Lato", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --wrap: 1200px; } /* ================= Base ================= */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* clip, not hidden: hidden would break the sticky header */ html, body { overflow-x: clip; } body { margin: 0; font-family: var(--font-body); font-size: 16.5px; line-height: 1.72; color: var(--ink-soft); background: var(--bg); } img, video { max-width: 100%; height: auto; } a { color: inherit; } ::selection { background: var(--accent); color: #ffffff; } :focus-visible { outline: 3px solid var(--accent-deep); outline-offset: 3px; border-radius: 4px; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; line-height: 1.12; margin: 0; color: var(--ink); letter-spacing: 0.012em; } p { margin: 0; } .wrap { width: min(var(--wrap), calc(100% - 48px)); margin-inline: auto; } .section-pad { padding-block: 96px; } .sec { padding-block: 104px; position: relative; } .screen-reader-text, .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip-link { position: absolute; top: -60px; left: 16px; z-index: 200; background: var(--ink); color: var(--dark-ink); padding: 10px 18px; border-radius: 0 0 var(--radius-sm) var(--radius-sm); text-decoration: none; transition: top 0.2s ease; } .skip-link:focus { top: 0; } body.no-scroll { overflow: hidden; } /* ================= Reveal animation ================= Default CSS hides nothing: only when JS adds .fx to (and the visitor has not requested reduced motion) do the [data-rv] elements start hidden and drift in like settling mist. */ html.fx [data-rv] { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.65, 0.25, 1); will-change: opacity, transform; } html.fx [data-rv].rv-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html.fx [data-rv] { opacity: 1; transform: none; transition: none; } } /* ================= Buttons: trapezoid foot ================= A thin stroked trapezoid sits beneath every button like a small stand base -- static decoration, echoes the hero's display stand. */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 30px; margin-bottom: 11px; border-radius: var(--radius); background: var(--ink); color: var(--dark-ink); font-family: var(--font-body); font-size: 12.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; border: 1px solid var(--ink); cursor: pointer; position: relative; transition: background 0.24s ease, color 0.24s ease, border-color 0.24s ease, transform 0.24s ease, box-shadow 0.24s ease; } .btn::after { content: ""; position: absolute; left: 50%; bottom: -6px; translate: -50% 0; width: 34%; height: 6px; background: currentColor; clip-path: polygon(14% 0, 86% 0, 100% 100%, 0% 100%); /* 这个底座用 currentColor,在深色区按钮上就是一条高对比白条, 看着像渲染错误而不是装饰 —— 压到刚好能看见的程度。 */ opacity: 0.55; pointer-events: none; } .btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #ffffff; transform: translateY(-2px); box-shadow: 0 16px 28px -18px rgba(192, 106, 118, 0.75); } /* 白字压品牌粉只有 2.62:1,远不达标。改用墨色 5.35:1 —— 保住品牌色本身, 顺带让 ::after 底座跟着变成墨色,深色区那条刺眼白楔子一并消失。 */ .btn-accent { background: var(--accent); border-color: var(--accent); color: var(--ink); } .btn-accent:hover { background: var(--ink); border-color: var(--ink); color: #ffffff; } /* 浅色描边按钮的底座是奶白色,压在深色区同样扎眼 */ .btn-ghost-light::after { opacity: 0.3; } .btn-ghost { background: transparent; border-color: rgba(35, 44, 61, 0.32); color: var(--ink); } .btn-ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--dark-ink); } .btn-ghost-light { background: rgba(244, 241, 239, 0.05); border-color: rgba(244, 241, 239, 0.5); color: #f6f3f1; } .btn-ghost-light:hover { background: rgba(244, 241, 239, 0.94); border-color: rgba(244, 241, 239, 0.94); color: var(--ink); } .btn-dark-on-accent { background: var(--ink); border-color: var(--ink); color: var(--dark-ink); } .btn-dark-on-accent:hover { background: #ffffff; border-color: #ffffff; color: var(--ink); } .btn-sm { padding: 10px 18px; font-size: 11.5px; } .btn .icon { flex: none; transition: transform 0.22s ease; } .btn:hover .icon { transform: translateX(3px); } .text-link { display: inline-flex; align-items: center; gap: 8px; color: var(--accent-text); font-family: var(--font-body); font-weight: 700; font-size: 13px; letter-spacing: 0.15em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s ease, gap 0.2s ease; } .text-link:hover { border-color: var(--accent-deep); gap: 12px; } /* ================= Section headings ================= */ .kicker { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 16px; font-family: var(--font-body); font-weight: 700; font-size: 12.5px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--accent-text); } /* bottle-shoulder chip: a slender arc stroke, like the curve of a flacon */ .kicker::before { content: ""; width: 30px; height: 11px; border: 1.4px solid var(--accent-deep); border-bottom: 0; border-radius: 100% 100% 0 0 / 200% 200% 0 0; flex: none; opacity: 0.85; } .sec-head { max-width: 660px; margin-bottom: 54px; } .sec-title { font-size: clamp(32px, 4.2vw, 46px); text-wrap: balance; } .sec-sub { margin-top: 16px; font-size: 17px; color: var(--muted); } .sec-dark { background: var(--dark); position: relative; overflow: hidden; } /* wide bottle-shoulder arc hairline along the top edge */ .sec-dark::after { content: ""; position: absolute; top: 16px; left: 50%; translate: -50% 0; width: min(560px, 74vw); height: 30px; border: 1px solid rgba(244, 241, 239, 0.16); border-bottom: 0; border-radius: 100% 100% 0 0 / 200% 200% 0 0; pointer-events: none; } .sec-dark > .wrap { position: relative; z-index: 1; } .sec-dark .sec-title { color: var(--dark-ink); } .sec-dark .sec-sub { color: var(--dark-muted); } .sec-dark .kicker { color: var(--accent); } .sec-dark .kicker::before { border-color: var(--accent); } /* ================= Header ================= */ .site-header { position: sticky; top: 0; z-index: 90; background: rgba(250, 248, 246, 0.94); border-bottom: 1px solid transparent; transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } /* solid accent bar across the very top of the site */ .site-header::before { content: ""; display: block; height: 3px; background: var(--accent); } .site-header.scrolled { background: rgba(255, 255, 255, 0.97); border-bottom-color: var(--line); box-shadow: 0 16px 32px -26px rgba(35, 44, 61, 0.38); } .header-bar { display: flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 78px; } .brand { flex: none; display: flex; align-items: center; } .brand img { max-height: 52px; width: auto; } .brand-text { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; } .brand-mark { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50% 50% var(--radius) var(--radius); background: var(--ink); color: var(--accent); box-shadow: 0 10px 20px -12px rgba(35, 44, 61, 0.75); } .brand-name { font-family: var(--font-display); font-weight: 400; font-size: 22px; letter-spacing: 0.08em; color: var(--ink); } .main-nav { flex: 1; min-width: 0; display: flex; justify-content: center; } .nav-list { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; } .nav-list > li { position: relative; } .nav-list > li > a { display: inline-flex; align-items: center; gap: 5px; padding: 9px 14px; border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-soft); text-decoration: none; white-space: nowrap; transition: background 0.2s ease, color 0.2s ease; } .nav-list > li > a:hover, .nav-list > li.current-menu-item > a, .nav-list > li.current-menu-ancestor > a { background: rgba(217, 138, 148, 0.16); color: var(--ink); } .nav-list > li.menu-item-has-children > a::after { content: ""; width: 7px; height: 7px; border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: 0.55; } .nav-list .sub-menu { position: absolute; top: calc(100% + 12px); left: 50%; translate: -50% 0; min-width: 236px; margin: 0; padding: 10px; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; z-index: 40; } /* slender arc hairline along the dropdown top */ .nav-list .sub-menu::before { content: ""; display: block; margin: 0 auto 8px; width: 56px; height: 12px; border: 1px solid rgba(192, 106, 118, 0.45); border-bottom: 0; border-radius: 100% 100% 0 0 / 200% 200% 0 0; } .nav-list > li:hover > .sub-menu, .nav-list > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; } .nav-list .sub-menu a { display: block; padding: 10px 14px; border-radius: var(--radius-sm); font-size: 14.5px; font-weight: 600; color: var(--ink-soft); text-decoration: none; } .nav-list .sub-menu a:hover { background: rgba(217, 138, 148, 0.15); color: var(--ink); } .header-actions { flex: none; display: flex; align-items: center; gap: 8px; } .hbtn { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid transparent; background: transparent; color: var(--ink); cursor: pointer; position: relative; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .hbtn:hover { background: rgba(217, 138, 148, 0.18); border-color: rgba(192, 106, 118, 0.4); } .cart-count { position: absolute; top: -3px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center; /* 11px 白字压 --accent-deep 是 3.77:1,不够 */ background: var(--accent-text); color: #ffffff; font-size: 11px; font-weight: 700; border-radius: 9px; line-height: 1; } .nav-toggle { display: none; } /* ================= Drawer (mobile nav) ================= */ .drawer, .search-layer, .qr-modal { position: fixed; inset: 0; z-index: 160; } .drawer[hidden], .search-layer[hidden], .qr-modal[hidden] { display: none; } .drawer-scrim, .search-scrim, .qr-scrim { position: absolute; inset: 0; background: rgba(26, 34, 49, 0.58); opacity: 0; transition: opacity 0.24s ease; } .drawer.open .drawer-scrim, .search-layer.open .search-scrim, .qr-modal.open .qr-scrim { opacity: 1; } .drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(360px, 88vw); background: var(--surface); display: flex; flex-direction: column; padding: 20px 24px 32px; overflow-y: auto; transform: translateX(100%); transition: transform 0.28s cubic-bezier(0.22, 0.65, 0.25, 1); border-left: 3px solid var(--accent); } .drawer.open .drawer-panel { transform: none; } .drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 14px; } .drawer-title { font-family: var(--font-display); font-weight: 400; font-size: 20px; letter-spacing: 0.06em; color: var(--ink); } .drawer-nav { list-style: none; margin: 0; padding: 0; } .drawer-nav > li { border-bottom: 1px solid var(--line); } .drawer-nav a { display: block; padding: 14px 4px; font-family: var(--font-display); font-size: 18px; font-weight: 400; letter-spacing: 0.04em; color: var(--ink); text-decoration: none; border-radius: var(--radius-sm); } .drawer-nav a:hover { color: var(--accent-text); } .drawer-nav .sub-menu { list-style: none; margin: 0 0 10px; padding: 0 0 0 16px; } .drawer-nav .sub-menu a { padding: 8px 4px; font-family: var(--font-body); font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--ink-soft); } .drawer-links { margin-top: 18px; display: grid; gap: 4px; } .drawer-links a { display: inline-flex; align-items: center; gap: 10px; padding: 10px 4px; font-weight: 700; color: var(--ink-soft); text-decoration: none; } /* ================= Search overlay ================= */ .search-panel { position: absolute; left: 50%; top: 18vh; translate: -50% 0; width: min(620px, calc(100vw - 40px)); display: flex; align-items: center; gap: 10px; background: var(--surface); border-radius: var(--radius); border-top: 3px solid var(--accent); padding: 14px; box-shadow: var(--shadow); opacity: 0; transform: translateY(14px); transition: opacity 0.24s ease, transform 0.24s ease; } .search-layer.open .search-panel { opacity: 1; transform: none; } .search-layer .search-form { flex: 1; } .search-layer .hbtn { flex: none; } .search-form { display: flex; align-items: center; gap: 8px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 6px 4px 18px; transition: border-color 0.2s ease; } .search-form:focus-within { border-color: var(--accent-deep); } .search-field { flex: 1; min-width: 0; border: 0; background: transparent; font-family: var(--font-body); font-size: 15.5px; color: var(--ink); padding: 9px 0; outline: none; } .search-field::placeholder { color: var(--muted); } .search-submit { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--ink); color: var(--dark-ink); cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } .search-submit:hover { background: var(--accent-deep); color: #ffffff; } /* ================= Hero: H-3D split panel (simplified) ================= */ /* Rebuilt after human review flagged the earlier free-standing "display stand" layout as a dead beige void with a tiny clipped photo. Now a conventional split hero: solid ink copy panel left, one full-height photo right, hard vertical seam, no gradients. The trapezoid "foot" motif stays alive site-wide via .btn::after and is not repeated here. */ .hero { position: relative; background: var(--surface-2); overflow: hidden; } .hero-split { display: grid; grid-template-columns: minmax(0, 44%) minmax(0, 1fr); align-items: stretch; min-height: clamp(480px, 62vh, 660px); } /* the copy panel: solid-colour, carries all hero copy, vertically centred */ .hero-copy { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; background: var(--dark); color: #f6f3f1; padding: 64px clamp(32px, 4.4vw, 68px); } .hero-kicker { color: var(--accent); } .hero-kicker::before { border-color: var(--accent); } .hero-title { font-size: clamp(34px, 3.4vw, 50px); color: #faf8f7; text-wrap: balance; letter-spacing: 0.015em; } .hero-sub { margin-top: 20px; max-width: 440px; font-size: 16.5px; line-height: 1.65; color: rgba(246, 243, 241, 0.85); } .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; } /* fine hairline above the stats row */ .hero-stats { /* flex 下列宽由内容决定,实测三列差 21px。等分轨道才对得齐。 */ display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 28px; margin: 34px 0 0; padding-top: 22px; border-top: 1px solid rgba(244, 241, 239, 0.26); } .hero-stats .stat { display: grid; gap: 3px; } .hero-stats dd { margin: 0; font-family: var(--font-display); font-size: 30px; font-weight: 400; color: var(--accent); order: -1; } .hero-stats dt { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(246, 243, 241, 0.62); } /* the photo panel: one coherent full-height image, no fragmentation */ .hero-photo { position: relative; overflow: hidden; } .hero-photo-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 76% 42%; } /* single unidirectional dark scrim along the seam edge only: it bridges the ink copy panel into the photo without darkening the whole image */ .hero-photo::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 34%; background: linear-gradient(to right, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0)); z-index: 1; pointer-events: none; } @media (max-width: 900px) { .hero-split { grid-template-columns: minmax(0, 1fr); min-height: 0; } .hero-photo { height: 320px; order: -1; } .hero-copy { padding: 40px clamp(20px, 6vw, 40px) 44px; } } /* ================= Perks ================= */ .perks { padding-block: 46px; background: var(--bg); } .perks-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; padding-block: 30px; border-block: 1px solid var(--line); } .perk { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: center; padding: 14px 6px; } .perk:hover .perk-icon { transform: translateY(-3px); } /* solid porcelain medallion with a blush hairline ring */ .perk-icon { grid-row: span 2; display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--surface); border: 1px solid rgba(192, 106, 118, 0.4); color: var(--accent-text); transition: transform 0.25s ease; } .perk-title { font-family: var(--font-display); font-size: 18px; font-weight: 400; align-self: end; } .perk-text { font-size: 14px; color: var(--muted); line-height: 1.55; align-self: start; } /* ================= 定高容器里的图片 ================= 写法统一为「容器 position:relative + 图片 position:absolute; inset:0」。 原来是容器用 aspect-ratio 定高、图片写 height:100%，但按 CSS 规范， aspect-ratio 推导出来的高度对子元素来说是「不确定高度」，百分比高度 要退化成 auto —— Safari 严格照做，图片就按原始像素高（864px）铺开， 撑爆容器、盖住下面的标题；Chrome 宽容处理，所以桌面端完全看不出来。 绝对定位不依赖百分比高度，各引擎表现一致。 */ /* ================= Category grid ================= */ .cats { background: var(--bg); position: relative; } .cats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; position: relative; } .cat-card { position: relative; display: block; border-radius: var(--radius); overflow: hidden; text-decoration: none; background: var(--surface-2); border: 1px solid var(--line); box-shadow: 0 18px 32px -28px rgba(35, 44, 61, 0.4); transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease; } .cat-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: rgba(192, 106, 118, 0.5); } .cat-media { position: relative; display: block; aspect-ratio: 4 / 3.4; overflow: hidden; background: var(--surface-2); } .cat-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.55s ease; } .cat-card:hover .cat-media img { transform: scale(1.05); } /* porcelain label bar pinned to the bottom, hairline along its top edge */ .cat-meta { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 1px; padding: 15px 18px; padding-right: 66px; background: rgba(255, 255, 255, 0.93); border-top: 1px solid rgba(192, 106, 118, 0.28); transition: background 0.25s ease; } .cat-card:hover .cat-meta { background: #ffffff; } .cat-name { font-family: var(--font-display); font-weight: 400; font-size: 20px; letter-spacing: 0.03em; color: var(--ink); } .cat-count { font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .cat-arrow { position: absolute; right: 12px; bottom: 12px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: #ffffff; transform: translateY(6px); opacity: 0; transition: transform 0.25s ease, opacity 0.25s ease; z-index: 1; } .cat-card:hover .cat-arrow, .cat-card:focus-visible .cat-arrow { transform: none; opacity: 1; } /* ================= Product cards (front page) ================= */ .prod-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; } .prod-card { background: rgba(244, 241, 239, 0.04); border: 1px solid var(--line-dark); border-radius: var(--radius); overflow: hidden; transition: transform 0.28s ease, background 0.28s ease, border-color 0.28s ease; } .prod-card:hover { transform: translateY(-5px); background: rgba(244, 241, 239, 0.08); border-color: rgba(217, 138, 148, 0.45); } .prod-media { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: #ece7e3; } .prod-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.55s ease; } .prod-card:hover .prod-media img { transform: scale(1.05); } .badge { display: inline-block; padding: 5px 12px; border-radius: 999px; background: var(--surface-2); color: var(--ink-soft); font-family: var(--font-body); font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } .badge-sale { position: absolute; top: 12px; left: 12px; /* 白字压 --accent 只有 2.62:1,同 .flash-badge 一起降到最深一档 5.37:1 */ background: var(--accent-text); color: #ffffff; } .prod-body { padding: 18px 20px 22px; display: grid; gap: 8px; justify-items: start; } .prod-name { font-size: 16.5px; font-weight: 700; line-height: 1.3; letter-spacing: 0; font-family: var(--font-body); } .prod-name a { color: var(--dark-ink); text-decoration: none; transition: color 0.2s ease; } .prod-name a:hover { color: var(--accent); } .prod-price { font-family: var(--font-display); font-size: 17.5px; font-weight: 400; color: var(--dark-muted); letter-spacing: 0.03em; } .prod-price del { opacity: 0.6; margin-right: 8px; font-weight: 400; } .prod-price ins { text-decoration: none; color: var(--accent); font-weight: 400; } .prod-btn { margin-top: 6px; background: transparent; border-color: rgba(244, 241, 239, 0.4); color: var(--dark-ink); } .prod-btn:hover { background: var(--accent); border-color: var(--accent); color: #ffffff; } /* ================= Split (image + copy) ================= */ .split { background: var(--bg); } .split-in { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr); gap: 72px; align-items: center; } .split-media { position: relative; } /* slender arc outline framing the photo, no fill */ .split-media::before { content: ""; position: absolute; inset: 26px -26px -26px 26px; border-radius: 140px var(--radius) 140px var(--radius); border: 1px solid rgba(192, 106, 118, 0.38); z-index: 0; } /* arched alcove crop, like a niche in a salon wall */ .split-media img { position: relative; width: 100%; aspect-ratio: 4 / 3.1; object-fit: cover; border-radius: 140px 140px var(--radius) var(--radius); box-shadow: var(--shadow); } .split-flip .split-media { order: 2; } .split-flip .split-media::before { inset: 26px 26px -26px -26px; border-radius: var(--radius) 140px var(--radius) 140px; } .split-body .sec-title { margin-bottom: 20px; } .split-text { color: var(--muted); font-size: 16.5px; margin-bottom: 28px; } /* ================= Steps ================= */ .steps { background: var(--surface-2); position: relative; overflow: hidden; } .steps-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; list-style: none; margin: 0; padding: 0; counter-reset: step; } .step { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px 26px 30px; overflow: hidden; } /* solid accent rule along each card's top edge */ .step::before { content: ""; position: absolute; top: 0; left: 0; width: 46px; height: 3px; background: var(--accent); } .step-num { display: inline-block; font-family: var(--font-display); font-size: 44px; font-weight: 400; line-height: 1; color: var(--accent-deep); margin-bottom: 16px; letter-spacing: 0; } .step-title { font-size: 20px; margin-bottom: 9px; } .step-text { font-size: 14.5px; color: var(--muted); line-height: 1.62; } /* ================= Quotes ================= */ .quotes-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } /* soft-arched vellum cards on the ink panel */ .quote { margin: 0; background: rgba(244, 241, 239, 0.05); border: 1px solid var(--line-dark); border-radius: 56px var(--radius) var(--radius) var(--radius); padding: 30px 28px; display: grid; gap: 16px; align-content: start; } .quote-mark { color: var(--accent); opacity: 0.9; } .quote blockquote { margin: 0; font-family: var(--font-body); font-size: 17px; font-weight: 400; line-height: 1.62; color: var(--dark-ink); } .quote figcaption { display: grid; gap: 2px; } .quote-name { font-family: var(--font-display); font-weight: 400; font-size: 16.5px; letter-spacing: 0.05em; color: var(--dark-ink); } .quote-role { font-size: 13px; color: var(--dark-muted); } /* ================= Blog teaser ================= */ .post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .post-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease; } .post-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: rgba(192, 106, 118, 0.45); } .post-media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-2); } .post-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.55s ease; } .post-card:hover .post-media img { transform: scale(1.04); } .post-body { padding: 24px 26px 28px; display: grid; gap: 10px; justify-items: start; } .post-date { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-text); font-weight: 700; } .post-title { font-size: 21px; line-height: 1.26; letter-spacing: 0.01em; } .post-title a { color: var(--ink); text-decoration: none; transition: color 0.2s ease; } .post-title a:hover { color: var(--accent-text); } .post-excerpt { font-size: 15px; color: var(--muted); line-height: 1.66; } .post-card .text-link { margin-top: 4px; } /* ================= CTA band ================= */ .cta-band { background: var(--accent); position: relative; overflow: hidden; padding-block: 78px; } /* twin bottle-shoulder arc hairlines along the band's edges */ .cta-band::after { content: ""; position: absolute; left: 50%; top: 14px; bottom: 14px; translate: -50% 0; width: min(680px, 86vw); border-top: 1px solid rgba(255, 255, 255, 0.4); border-bottom: 1px solid rgba(35, 44, 61, 0.22); border-radius: 100% 100% 0 0 / 26px 26px 0 0; pointer-events: none; } .cta-in { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 34px; } /* 整条通栏是品牌粉底。白字在上面标题只有 2.62:1、正文 2.45:1,两项都不过。 墨色 5.35:1,而且粉底配深字本来就比配白字更像高档柜台的印刷品。 */ .cta-title { font-size: clamp(30px, 3.8vw, 44px); color: var(--ink); } .cta-text { margin-top: 12px; color: rgba(35, 44, 61, 0.94); font-size: 16.5px; max-width: 560px; } /* ================= Page hero ================= */ .page-hero { position: relative; background: var(--surface-2); padding: 80px 0 58px; overflow: hidden; border-bottom: 1px solid var(--line); } .page-hero .wrap { position: relative; z-index: 1; } .page-hero .kicker { margin-bottom: 12px; } .page-hero-title { font-size: clamp(34px, 4.8vw, 54px); text-wrap: balance; } .page-hero-sub { margin-top: 14px; max-width: 640px; color: var(--muted); font-size: 17px; } /* ================= Entry content ================= */ .entry { max-width: 820px; } .entry-content > * + * { margin-top: 20px; } .entry-content h2 { font-size: 29px; margin-top: 46px; } .entry-content h3 { font-size: 22px; margin-top: 34px; } .entry-content a { color: var(--accent-text); text-decoration-thickness: 1.5px; text-underline-offset: 3px; } .entry-content img { border-radius: var(--radius); } .entry-content ul, .entry-content ol { padding-left: 26px; margin: 20px 0 0; } .entry-content li { margin-top: 8px; } .entry-content blockquote { margin: 26px 0 0; padding: 22px 28px; border-left: 3px solid var(--accent); background: var(--surface); border-radius: 0 var(--radius) var(--radius) 0; font-family: var(--font-display); font-size: 19px; font-weight: 400; color: var(--ink); } .entry-content table { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: var(--radius); overflow: hidden; } .entry-content th, .entry-content td { padding: 12px 16px; border-bottom: 1px solid var(--line); text-align: left; } /* FAQ-style accordions */ .entry-content details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 0; overflow: hidden; } .entry-content details + details { margin-top: 12px; } .entry-content summary { list-style: none; cursor: pointer; padding: 18px 54px 18px 22px; position: relative; font-weight: 700; color: var(--ink); transition: background 0.2s ease; } .entry-content summary:hover { background: rgba(217, 138, 148, 0.1); } .entry-content summary::-webkit-details-marker { display: none; } .entry-content summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 9px; height: 9px; border-right: 1.6px solid var(--accent-deep); border-bottom: 1.6px solid var(--accent-deep); transform: translateY(-70%) rotate(45deg); transition: transform 0.2s ease; } .entry-content details[open] summary::after { transform: translateY(-30%) rotate(225deg); } .entry-content details > *:not(summary) { margin: 0; padding: 0 22px 6px; color: var(--ink-soft); } .entry-content details > p:last-child { padding-bottom: 20px; } .entry-hero-img { margin: 0 0 36px; } .entry-hero-img img { width: 100%; aspect-ratio: 16 / 8.5; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); } .entry-single .entry-hero-img { margin-top: -20px; } .post-nav { display: flex; justify-content: space-between; gap: 18px; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); } .post-nav a { color: var(--accent-text); font-weight: 700; text-decoration: none; max-width: 44ch; } .post-nav a:hover { text-decoration: underline; } .post-nav-next { text-align: right; margin-left: auto; } /* ================= Contact cards ================= */ .contact-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 10px; } .contact-card { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: var(--radius); padding: 28px 26px; } .contact-card h3 { font-size: 20px; margin-bottom: 8px; } .contact-card p { color: var(--muted); font-size: 15px; margin-top: 4px; } .contact-card a { color: var(--accent-text); font-weight: 700; text-decoration: none; } .contact-card a:hover { text-decoration: underline; } /* ================= Pagination ================= */ .pagination-nav { margin-top: 48px; display: flex; justify-content: center; } .pagination-nav .page-numbers { display: inline-grid; place-items: center; min-width: 42px; height: 42px; padding: 0 10px; margin: 0 3px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); font-family: var(--font-body); font-weight: 700; font-size: 14.5px; text-decoration: none; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .pagination-nav .page-numbers.current { background: var(--ink); border-color: var(--ink); color: #ffffff; } .pagination-nav a.page-numbers:hover { background: var(--accent); border-color: var(--accent); color: #ffffff; } /* ================= Search results ================= */ .search-again { max-width: 560px; margin-bottom: 40px; } .result-list { display: grid; gap: 14px; } .result-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 20px; transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; } .result-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: rgba(192, 106, 118, 0.45); } .result-media { display: block; width: 76px; height: 76px; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-2); } .result-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .result-body { min-width: 0; display: grid; gap: 5px; justify-items: start; } .result-body .badge { background: var(--accent-soft); color: var(--accent-text); } .result-title { font-size: 20px; } .result-title a { color: var(--ink); text-decoration: none; } .result-title a:hover { color: var(--accent-text); } .result-excerpt { color: var(--muted); font-size: 14.5px; } .result-price { color: var(--ink-soft); font-family: var(--font-display); font-weight: 400; font-size: 16.5px; } .result-price ins { text-decoration: none; color: var(--accent-text); } .result-arrow { color: var(--accent-deep); } /* ================= Empty state ================= */ .empty-state { max-width: 560px; margin-inline: auto; text-align: center; padding: 64px 20px; } .empty-state h2 { font-size: 32px; margin-bottom: 12px; } .empty-state p { color: var(--muted); margin-bottom: 24px; } .empty-search { margin: 26px 0; } .empty-search .search-form { max-width: 420px; margin-inline: auto; } .empty-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; } /* ================= Footer ================= */ .site-footer { background: var(--dark); color: var(--dark-muted); position: relative; overflow: hidden; } /* solid accent bar along the footer's top edge */ .site-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent); z-index: 1; } .footer-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 56px; padding-block: 80px 56px; } .f-col { min-width: 0; } .f-brand .brand-text { margin-bottom: 18px; } .f-brand .brand-mark { width: 36px; height: 36px; } .f-brand .brand-name { color: var(--dark-ink); } .f-logo { display: block; max-height: 46px; width: auto; } .brand-text-logo { gap: 0; } .f-about { font-size: 15px; line-height: 1.75; max-width: 38ch; margin-bottom: 22px; } .f-title { font-family: var(--font-body); font-size: 12.5px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); margin-bottom: 20px; } .f-menu { list-style: none; margin: 0; padding: 0; } .f-menu li { margin-bottom: 11px; } .f-menu a { color: var(--dark-muted); text-decoration: none; font-size: 15px; transition: color 0.2s ease; } .f-menu a:hover { color: var(--accent); } .f-contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; } .f-contact-list li { display: flex; align-items: flex-start; gap: 11px; font-size: 15px; } .f-contact-list .icon { flex: none; margin-top: 4px; color: var(--accent); } .f-contact-list a { color: var(--dark-muted); text-decoration: none; } .f-contact-list a:hover { color: var(--accent); } .social-row { display: flex; flex-wrap: wrap; gap: 9px; } .social-link { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-dark); background: transparent; color: var(--dark-muted); cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .social-link:hover { background: var(--accent); border-color: var(--accent); color: #ffffff; } /* hairline above the legal strip */ .footer-bottom { position: relative; z-index: 1; border-top: 1px solid rgba(244, 241, 239, 0.16); } .footer-bottom-in { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-block: 24px; } .copyright { font-size: 13.5px; } .policy-menu { list-style: none; display: flex; flex-wrap: wrap; gap: 20px; margin: 0; padding: 0; } .policy-menu a { font-size: 13.5px; color: var(--dark-muted); text-decoration: none; } .policy-menu a:hover { color: var(--accent); } /* ================= Contact rail & QR modal ================= */ .contact-rail { position: fixed; top: 50%; translate: 0 -50%; /* below the sticky header (90) so an open mega panel is never covered */ z-index: 80; display: grid; gap: 8px; padding: 9px; background: rgba(255, 255, 255, 0.95); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow); } .contact-rail.rail-right { right: 18px; } .contact-rail.rail-left { left: 18px; } /* JS parks the rail while a stacked hero is still on screen (<=900px), so the rail never sits on top of hero copy or buttons on first load. visibility is toggled too, not just opacity, so the buttons are genuinely non-interactive. */ .contact-rail.rail-hero-clear { opacity: 0; visibility: hidden; transform: translateY(10px); pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s; } .rail-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; color: var(--ink-soft); cursor: pointer; transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; } .rail-btn:hover { background: var(--accent); color: #ffffff; transform: scale(1.06); } .qr-panel { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: min(360px, calc(100vw - 40px)); background: var(--surface); border-radius: var(--radius); border-top: 3px solid var(--accent); box-shadow: var(--shadow); padding: 32px 28px; text-align: center; opacity: 0; transform: scale(0.94); transition: opacity 0.24s ease, transform 0.24s ease; } .qr-modal.open .qr-panel { opacity: 1; transform: scale(1); } .qr-close { position: absolute; top: 10px; right: 10px; } .qr-title { font-size: 23px; margin-bottom: 16px; } .qr-img { width: 210px; height: auto; border-radius: var(--radius-sm); border: 1px solid rgba(192, 106, 118, 0.4); padding: 8px; background: #fff; } .qr-text { margin-top: 14px; font-size: 14px; color: var(--muted); } .qr-btn { margin-top: 18px; } /* ================= WooCommerce: breadcrumb & shop header ================= */ .woocommerce-breadcrumb { font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .woocommerce-breadcrumb a { color: var(--ink-soft); text-decoration: none; } .woocommerce-breadcrumb a:hover { color: var(--accent-text); } .bc-sep { margin: 0 8px; opacity: 0.5; } .page-hero-shop { padding: 40px 0 30px; } .page-hero-shop .woocommerce-breadcrumb { margin-bottom: 0; } .single-bc { padding: 28px 0 0; } .single-bc .woocommerce-breadcrumb { margin: 0; } .wc-page .page-title { font-size: clamp(32px, 4.2vw, 46px); margin-bottom: 8px; } .shop-sub { color: var(--muted); max-width: 620px; margin: 8px 0 0; font-size: 16.5px; } .woocommerce-result-count { color: var(--muted); font-size: 14px; margin: 26px 0 0; float: left; } .woocommerce-ordering { float: right; margin: 20px 0 0; } select, .woocommerce select, .woocommerce-ordering select { appearance: none; -webkit-appearance: none; padding: 10px 38px 10px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23485062' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 16px center; font-family: var(--font-body); font-size: 14.5px; color: var(--ink); cursor: pointer; } .wc-page .woocommerce-notices-wrapper:not(:empty) { margin-bottom: 24px; } /* ================= WooCommerce: product loop ================= */ ul.products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; list-style: none; margin: 36px 0 0; padding: 0; clear: both; } /* kill Woo's clearfix pseudo elements: they become grid items */ ul.products::before, ul.products::after { content: none !important; } ul.products li.product { width: auto !important; float: none !important; margin: 0 !important; min-width: 0; position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.26s ease, box-shadow 0.26s ease, border-color 0.26s ease; } ul.products li.product:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: rgba(192, 106, 118, 0.45); } ul.products li.product > a.woocommerce-LoopProduct-link { display: flex; flex-direction: column; flex: 1; text-decoration: none; color: inherit; } ul.products li.product img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: var(--surface-2); } ul.products li.product .onsale { position: absolute; top: 12px; left: 12px; z-index: 2; padding: 5px 12px; border-radius: 999px; background: var(--accent); color: #ffffff; font-family: var(--font-body); font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } ul.products li.product .woocommerce-loop-product__title { font-size: 16.5px; font-weight: 700; line-height: 1.35; padding: 16px 18px 0; color: var(--ink); letter-spacing: 0; font-family: var(--font-body); } ul.products li.product .price { padding: 6px 18px 0; color: var(--ink-soft); font-family: var(--font-display); font-weight: 400; font-size: 17px; letter-spacing: 0.03em; } ul.products li.product .price del { opacity: 0.55; margin-right: 7px; font-weight: 400; } ul.products li.product .price ins { text-decoration: none; color: var(--accent-text); font-weight: 400; } ul.products li.product .button { margin: 14px 18px 20px; align-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: var(--radius-sm); border: 1px solid var(--ink); background: var(--ink); color: var(--dark-ink); font-family: var(--font-body); font-size: 11.5px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; text-decoration: none; cursor: pointer; position: relative; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } ul.products li.product .button::after { content: ""; position: absolute; left: 50%; bottom: -7px; translate: -50% 0; width: 40%; height: 6px; border: 1.2px solid currentColor; border-top: 0; clip-path: polygon(14% 0, 86% 0, 100% 100%, 0% 100%); opacity: 0.5; pointer-events: none; } ul.products li.product .button:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #ffffff; } ul.products li.product .button.loading { opacity: 0.6; pointer-events: none; } ul.products li.product .added_to_cart { margin: -8px 18px 20px; font-size: 13.5px; font-weight: 700; color: var(--accent-text); text-decoration: none; } .woocommerce-pagination { margin-top: 48px; display: flex; justify-content: center; clear: both; } .woocommerce-pagination ul.page-numbers { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0; } .woocommerce-pagination .page-numbers li .page-numbers { display: inline-grid; place-items: center; min-width: 42px; height: 42px; padding: 0 10px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); font-family: var(--font-body); font-weight: 700; font-size: 14.5px; text-decoration: none; transition: background 0.2s ease, color 0.2s ease; } .woocommerce-pagination .page-numbers li .page-numbers.current { background: var(--ink); border-color: var(--ink); color: #ffffff; } .woocommerce-pagination .page-numbers li a.page-numbers:hover { background: var(--accent); border-color: var(--accent); color: #ffffff; } .woocommerce-no-products-found { padding: 60px 0; text-align: center; color: var(--muted); } /* ================= WooCommerce: notices ================= */ .woocommerce-message, .woocommerce-info, .woocommerce-error { list-style: none; margin: 0 0 22px; padding: 15px 20px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--ink); color: var(--ink-soft); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; font-size: 15px; } .woocommerce-message { border-left-color: var(--accent); } .woocommerce-error { border-left-color: var(--danger); } .woocommerce-error li { margin: 0; } .woocommerce-message .button, .woocommerce-info .button, .woocommerce-error .button { order: 2; display: inline-flex; padding: 9px 16px; border-radius: var(--radius-sm); background: var(--ink); color: var(--dark-ink); font-family: var(--font-body); font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; border: 0; cursor: pointer; } .woocommerce-message .button:hover, .woocommerce-info .button:hover, .woocommerce-error .button:hover { background: var(--accent-deep); color: #ffffff; } /* ================= WooCommerce: single product ================= */ .wc-page div.product { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: 60px; align-items: start; position: relative; } .wc-page div.product .woocommerce-product-gallery { min-width: 0; max-width: 100%; } .wc-page div.product .summary { min-width: 0; float: none !important; width: auto !important; } .wc-page div.product > .onsale { position: absolute; top: 14px; left: 14px; z-index: 5; padding: 6px 14px; border-radius: 999px; background: var(--accent); color: #ffffff; font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } .woocommerce-product-gallery { position: relative; float: none !important; width: auto !important; } .woocommerce-product-gallery__wrapper { margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); box-shadow: var(--shadow); } .woocommerce-product-gallery img { width: 100%; height: auto; display: block; } .woocommerce-product-gallery .flex-control-thumbs { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 0; padding: 0; } .woocommerce-product-gallery .flex-control-thumbs li { width: 84px; } .woocommerce-product-gallery .flex-control-thumbs img { border-radius: var(--radius-sm); border: 2px solid transparent; cursor: pointer; opacity: 0.75; transition: opacity 0.2s ease, border-color 0.2s ease; } .woocommerce-product-gallery .flex-control-thumbs img.flex-active, .woocommerce-product-gallery .flex-control-thumbs img:hover { opacity: 1; border-color: var(--accent-deep); } .woocommerce-product-gallery__trigger { position: absolute; top: 14px; right: 14px; z-index: 9; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, 0.92); text-indent: -9999px; overflow: hidden; border: 1px solid var(--line); } .woocommerce-product-gallery__trigger::after { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23232c3d' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat center; } .summary .product_title { font-size: clamp(30px, 3.6vw, 42px); margin-bottom: 14px; } .summary .price { font-size: 27px; font-family: var(--font-display); font-weight: 400; color: var(--ink); margin-bottom: 18px; display: block; letter-spacing: 0.02em; } .summary .price del { opacity: 0.5; margin-right: 10px; font-size: 0.8em; font-weight: 400; } .summary .price ins { text-decoration: none; color: var(--accent-text); } .summary .woocommerce-product-details__short-description { color: var(--muted); font-size: 16.5px; margin-bottom: 24px; } .summary form.cart { display: flex; align-items: center; gap: 14px; margin: 6px 0 26px; } .summary .quantity .qty { width: 84px; padding: 13px 8px 13px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); font-family: var(--font-body); font-size: 15.5px; color: var(--ink); } .summary .single_add_to_cart_button { display: inline-flex; align-items: center; gap: 9px; padding: 15px 32px; margin-bottom: 10px; border-radius: var(--radius); border: 1px solid var(--accent-deep); background: var(--accent-deep); color: #ffffff; font-family: var(--font-body); font-size: 12.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; position: relative; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .summary .single_add_to_cart_button::after { content: ""; position: absolute; left: 50%; bottom: -8px; translate: -50% 0; width: 42%; height: 7px; border: 1.4px solid currentColor; border-top: 0; clip-path: polygon(14% 0, 86% 0, 100% 100%, 0% 100%); opacity: 0.55; pointer-events: none; } .summary .single_add_to_cart_button:hover { background: var(--ink); border-color: var(--ink); transform: translateY(-2px); } /* hairline above the meta block */ .summary .product_meta { display: grid; gap: 6px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); } .summary .product_meta > span { display: block; } .summary .product_meta a { color: var(--accent-text); text-decoration: none; } .summary .stock.in-stock { color: var(--sage); font-weight: 700; } .summary .stock.out-of-stock { color: var(--danger); font-weight: 700; } /* ================= WooCommerce: tabs & specs ================= */ .woocommerce-tabs { grid-column: 1 / -1; margin-top: 26px; } .woocommerce-tabs ul.tabs { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; padding: 0; border-bottom: 1px solid var(--line); } .woocommerce-tabs ul.tabs li a { display: inline-block; padding: 11px 20px; border-radius: var(--radius-sm) var(--radius-sm) 0 0; font-family: var(--font-body); font-weight: 700; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; } .woocommerce-tabs ul.tabs li.active a, .woocommerce-tabs ul.tabs li a:hover { color: var(--ink); border-bottom-color: var(--accent-deep); } .woocommerce-tabs .panel { color: var(--ink-soft); } .woocommerce-tabs .panel > h2:first-child { display: none; } .prod-specs { grid-column: 1 / -1; margin-top: 40px; } .prod-specs-title { font-size: 27px; margin-bottom: 18px; } .prod-specs-scroll { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); } .prod-specs-table { width: 100%; border-collapse: collapse; min-width: 420px; } .prod-specs-table th { width: 34%; text-align: left; padding: 14px 22px; font-weight: 700; color: var(--ink); border-bottom: 1px solid var(--line); background: rgba(217, 138, 148, 0.09); } .prod-specs-table td { padding: 14px 22px; border-bottom: 1px solid var(--line); color: var(--ink-soft); } .prod-specs-table tr:last-child td, .prod-specs-table tr:last-child th { border-bottom: 0; } .wc-page div.product .up-sells, .wc-page div.product .related.products { grid-column: 1 / -1; margin-top: 48px; } .up-sells > h2, .related.products > h2 { font-size: 29px; margin-bottom: 8px; } .up-sells ul.products, .related.products ul.products { margin-top: 22px; } /* ================= WooCommerce: forms ================= */ .woocommerce form .form-row { margin-bottom: 16px; padding: 0; } .woocommerce form .form-row label { display: block; font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 6px; } .woocommerce input[type="text"], .woocommerce input[type="email"], .woocommerce input[type="tel"], .woocommerce input[type="password"], .woocommerce input[type="number"], .woocommerce input[type="search"], .woocommerce textarea { width: 100%; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); font-family: var(--font-body); font-size: 15.5px; color: var(--ink); transition: border-color 0.2s ease; } .woocommerce input:focus, .woocommerce textarea:focus { outline: none; border-color: var(--accent-deep); } .woocommerce .required { color: var(--danger); text-decoration: none; } .select2-container .select2-selection--single { height: 47px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); } .select2-container .select2-selection--single .select2-selection__rendered { line-height: 44px; padding-left: 16px; color: var(--ink); } .select2-container .select2-selection--single .select2-selection__arrow { height: 44px; right: 8px; } /* ================= WooCommerce: cart ================= */ table.shop_table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } table.shop_table th, table.shop_table td { padding: 16px 18px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; } table.shop_table thead th { background: rgba(217, 138, 148, 0.1); font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); } table.shop_table tbody tr:last-child td, table.shop_table tbody tr:last-child th { border-bottom: 0; } table.shop_table .product-thumbnail img { width: 74px; height: 74px; object-fit: cover; border-radius: var(--radius-sm); display: block; } table.shop_table .product-name a { color: var(--ink); font-weight: 700; text-decoration: none; } table.shop_table .product-name a:hover { color: var(--accent-text); } table.shop_table .product-remove a { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--surface-2); color: var(--ink-soft); font-size: 19px; text-decoration: none; transition: background 0.2s ease, color 0.2s ease; } table.shop_table .product-remove a:hover { background: var(--danger); color: #fff; } table.shop_table .quantity .qty { width: 76px; padding: 9px 6px 9px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); font-family: var(--font-body); font-size: 14.5px; } .woocommerce-cart-form { margin-bottom: 30px; } .woocommerce-cart-form .coupon { display: flex; align-items: center; gap: 10px; float: left; } .woocommerce-cart-form .coupon .input-text { width: 190px; padding: 11px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); font-family: var(--font-body); font-size: 14px; } .woocommerce-cart-form td.actions { padding: 16px 18px; } /* generic Woo buttons (coupon, update cart, form submits) */ button.wp-element-button, .woocommerce button.button, .woocommerce a.button, .woocommerce input.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: var(--radius-sm); border: 1px solid var(--ink); background: var(--ink); color: var(--dark-ink); font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } button.wp-element-button:hover, .woocommerce button.button:hover, .woocommerce a.button:hover, .woocommerce input.button:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #ffffff; } .woocommerce-cart-form td.actions > .button:disabled { opacity: 0.45; cursor: not-allowed; } .cart-collaterals { display: flex; justify-content: flex-end; } .cart-collaterals .cart_totals { width: min(430px, 100%); float: none !important; } .cart-collaterals .cart_totals > h2 { font-size: 25px; margin-bottom: 14px; } .wc-proceed-to-checkout { padding-top: 18px; } .wc-proceed-to-checkout .checkout-button { width: 100%; justify-content: center; padding: 15px 28px; font-size: 13px; letter-spacing: 0.16em; background: var(--accent-deep); border-color: var(--accent-deep); color: #ffffff; } .wc-proceed-to-checkout .checkout-button:hover { background: var(--ink); border-color: var(--ink); color: #ffffff; } /* ================= WooCommerce: checkout ================= */ .woocommerce-checkout form.checkout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 44px; align-items: start; } .woocommerce-checkout form.checkout > #customer_details { min-width: 0; } .woocommerce-checkout form.checkout > #order_review_heading, .woocommerce-checkout form.checkout > #order_review { grid-column: 2; min-width: 0; } .woocommerce-checkout #order_review_heading { font-size: 25px; margin: 0 0 14px; } .woocommerce-checkout #order_review { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: var(--radius); padding: 26px; position: sticky; top: 100px; } .woocommerce-checkout #order_review table.shop_table { border: 0; border-radius: 0; background: transparent; } .woocommerce-billing-fields > h3, .woocommerce-additional-fields > h3 { font-size: 25px; margin: 0 0 18px; } .woocommerce-additional-fields > h3 { margin-top: 26px; } #payment ul.wc_payment_methods { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; } #payment ul.wc_payment_methods li { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; } .woocommerce input[type="radio"], .woocommerce input[type="checkbox"] { accent-color: var(--accent-deep); margin-right: 8px; } #payment div.payment_box { margin-top: 10px; font-size: 14px; color: var(--muted); } .woocommerce #payment #place_order { width: 100%; justify-content: center; padding: 15px 28px; font-size: 13px; letter-spacing: 0.16em; background: var(--accent-deep); border-color: var(--accent-deep); color: #ffffff; } .woocommerce #payment #place_order:hover { background: var(--ink); border-color: var(--ink); } .woocommerce-terms-and-conditions-wrapper { margin-bottom: 16px; font-size: 14px; color: var(--muted); } /* ================= WooCommerce: account ================= */ body.woocommerce-account .woocommerce { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 44px; align-items: start; } body.woocommerce-account .woocommerce > h2 { grid-column: 1 / -1; } .woocommerce-MyAccount-navigation { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; } .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .woocommerce-MyAccount-navigation li a { display: block; padding: 11px 16px; border-radius: var(--radius-sm); font-weight: 700; font-size: 14.5px; color: var(--ink-soft); text-decoration: none; transition: background 0.2s ease, color 0.2s ease; } .woocommerce-MyAccount-navigation li.is-active a, .woocommerce-MyAccount-navigation li a:hover { background: rgba(217, 138, 148, 0.16); color: var(--ink); } .woocommerce-MyAccount-content { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; } .woocommerce-MyAccount-content > h3 { font-size: 23px; margin-bottom: 16px; } .woocommerce-MyAccount-content fieldset { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 18px; margin: 22px 0; } .woocommerce-MyAccount-content legend { font-weight: 700; color: var(--ink); padding: 0 8px; } .woocommerce-ResetPassword, .woocommerce-form-login, .woocommerce-form-register { max-width: 460px; } .woocommerce-ResetPassword .button, .woocommerce-form-login .button, .woocommerce-form-register .button { margin-top: 8px; } .woocommerce-LostPassword { font-size: 14px; margin-top: 12px; } .woocommerce-privacy-policy-text { font-size: 13.5px; color: var(--muted); margin: 12px 0; } .woocommerce-privacy-policy-text a { color: var(--accent-text); } .show-password-input { display: none; } .woocommerce-order ul.order_details { list-style: none; display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 30px; padding: 20px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); } .woocommerce-order ul.order_details li { flex: 1 1 160px; padding: 6px 18px; border-right: 1px solid var(--line); font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); } .woocommerce-order ul.order_details li:last-child { border-right: 0; } .woocommerce-order ul.order_details li strong { display: block; margin-top: 4px; font-size: 16px; text-transform: none; letter-spacing: 0; color: var(--ink); } .woocommerce-order .woocommerce-notice { font-size: 19px; font-weight: 700; color: var(--sage); margin-bottom: 22px; } .woocommerce-customer-details address { font-style: normal; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px; line-height: 1.8; } .woocommerce-column__title { font-size: 22px; margin: 26px 0 12px; } /* ================= Responsive ================= */ /* ================= Mega menu (desktop) ================= A "Brands" item with 15 maisons must never become a 15-row dropdown that runs off the fold. Items flagged .mega / .mega-brands / .mega-cats open a full-width panel anchored to the sticky header instead: brands split into labelled columns, categories shown as thumbnail tiles, plus one promo card. */ .nav-list > li.has-mega { position: static; } .nav-list > li.has-mega > a::after { content: ""; width: 7px; height: 7px; border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: 0.55; } .mega-panel { position: absolute; top: 100%; left: 0; right: 0; z-index: 45; padding: 34px 0 24px; background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 30px 44px -30px rgba(35, 44, 61, 0.4); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s; } /* thin accent rule along the panel's top edge, echoing the header bar */ .mega-panel::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: var(--accent); } .nav-list > li.has-mega:hover > .mega-panel, .nav-list > li.has-mega:focus-within > .mega-panel, .nav-list > li.has-mega.mega-open > .mega-panel { opacity: 1; visibility: visible; transform: none; } .mega-inner, .mega-foot { width: min(var(--wrap), calc(100% - 48px)); margin-inline: auto; } .mega-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 46px; align-items: start; } .mega-cols { display: grid; grid-auto-flow: column; /* cap the columns so the name and its count stay next to each other instead of drifting to opposite ends of a 470px track */ grid-auto-columns: minmax(0, 264px); justify-content: start; gap: 32px; list-style: none; margin: 0; padding: 0; } .mega-col > .mega-col-title, .mega-col-title { display: block; padding: 0 0 12px; margin-bottom: 10px; border-bottom: 1px solid var(--line); font-family: var(--font-body); font-size: 11.5px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-text); text-decoration: none; white-space: normal; } a.mega-col-title:hover { color: var(--ink); } .mega-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; } .mega-links a { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 7px 10px 7px 9px; border-radius: var(--radius-sm); font-family: var(--font-display); font-size: 16px; letter-spacing: 0.02em; color: var(--ink); text-decoration: none; transition: background 0.18s ease, color 0.18s ease, padding-left 0.18s ease; } .mega-links a:hover { background: rgba(217, 138, 148, 0.14); padding-left: 14px; } .mega-link-count { flex: none; font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: var(--muted); } /* category panel: thumbnail tiles instead of a plain link list */ .mega-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 24px; } .mega-tile { display: flex; align-items: center; gap: 14px; padding: 8px 10px; border-radius: var(--radius-sm); text-decoration: none; transition: background 0.18s ease; } .mega-tile:hover { background: rgba(217, 138, 148, 0.14); } .mega-tile-media { flex: none; width: 52px; height: 52px; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-2); } .mega-tile-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .mega-tile-body { display: grid; gap: 3px; min-width: 0; } .mega-tile-name { font-family: var(--font-display); font-size: 16px; color: var(--ink); } .mega-tile-count { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } /* 分类少的时候（<=4）紧凑行只有 68px 高，旁边的推广卡有 317px， 面板中间会空出一大片。这时改成整幅卡片并拉到与推广卡等高。 */ .mega-panel-cats-few .mega-inner { align-items: stretch; } .mega-tiles-cards { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 18px; } .mega-tiles-cards .mega-tile { flex-direction: column; align-items: stretch; gap: 0; height: 100%; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); transition: border-color 0.2s ease, transform 0.24s ease, box-shadow 0.24s ease; } .mega-tiles-cards .mega-tile:hover { background: var(--surface); border-color: rgba(192, 106, 118, 0.45); transform: translateY(-3px); box-shadow: 0 20px 32px -26px rgba(35, 44, 61, 0.45); } .mega-tiles-cards .mega-tile-media { width: auto; height: auto; flex: 1; min-height: 140px; border-radius: 0; } .mega-tiles-cards .mega-tile-body { flex: none; padding: 13px 15px 15px; border-top: 1px solid var(--line); } .mega-tiles-cards .mega-tile-name { font-size: 18px; } .mega-promo { width: 262px; display: block; padding: 16px; background: var(--surface-2); border-radius: var(--radius); } .mega-promo-media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius-sm); margin-bottom: 14px; background: #ece7e3; } .mega-promo-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .mega-promo-body { display: grid; gap: 7px; } .mega-promo-kicker { font-size: 10.5px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent-text); } .mega-promo-title { font-family: var(--font-display); font-size: 20px; line-height: 1.2; color: var(--ink); } .mega-promo-text { font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); } .mega-promo-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 2px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-text); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s ease, gap 0.2s ease; } .mega-promo:hover .mega-promo-link { border-color: var(--accent-deep); gap: 11px; } .mega-foot { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); } /* ================= Drawer accordion (mobile nav) ================= */ .drawer-nav .drawer-row { display: flex; align-items: center; gap: 10px; } .drawer-nav .drawer-row > a { flex: 1; min-width: 0; } .drawer-toggle { flex: none; width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: transparent; color: var(--ink-soft); cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .drawer-toggle[aria-expanded="true"] { background: var(--ink); border-color: var(--ink); color: var(--dark-ink); transform: rotate(45deg); } .drawer-sub { list-style: none; margin: 0 0 10px; padding: 0 0 0 14px; display: none; border-left: 1px solid var(--line); } .drawer-nav li.is-open > .drawer-sub { display: block; } /* 自动品牌列表里的分组标题没有自己的展开按钮， 父级一展开就该连着下面的品牌一起显示 */ .drawer-nav li.drawer-group > .drawer-sub { display: block; margin-bottom: 4px; padding-left: 12px; } .drawer-sub a { padding: 9px 4px; font-family: var(--font-body); font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--ink-soft); } .drawer-group-title { display: block; padding: 12px 4px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-text); } /* ================= Countdown ================= Server renders real digits so the block is already correct without JS; the script only keeps them ticking. */ .countdown { display: flex; align-items: stretch; gap: 8px; } .countdown[hidden] { display: none; } .cd-unit { min-width: 70px; padding: 12px 10px 10px; border-radius: var(--radius); background: var(--dark-ink); text-align: center; font-variant-numeric: tabular-nums; } .cd-num { display: block; font-family: var(--font-display); font-size: 32px; line-height: 1; color: var(--ink); letter-spacing: 0.02em; } .cd-lab { display: block; margin-top: 7px; font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); } .countdown-sm .cd-unit { min-width: 56px; padding: 8px 8px 7px; background: var(--surface-2); } .countdown-sm .cd-num { font-size: 23px; } .countdown-sm .cd-lab { margin-top: 4px; font-size: 9px; } /* ================= Flash sale band ================= */ .flash { padding-block: 84px; } .flash-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 44px; align-items: end; margin-bottom: 40px; } .flash-intro .sec-title, .flash-intro .sec-sub { margin: 0; } .flash-title { color: var(--dark-ink); } .flash-sub { margin-top: 14px; max-width: 52ch; color: var(--dark-muted); } .flash-timer { flex: none; padding: 20px 22px 18px; border: 1px solid var(--line-dark); border-radius: var(--radius); background: rgba(244, 241, 239, 0.04); text-align: right; } .flash-timer-label { margin-bottom: 12px; font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); } .flash-timer-note { margin-top: 12px; font-size: 12px; color: var(--dark-muted); max-width: 34ch; margin-left: auto; line-height: 1.5; } .flash-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; } .flash-card { display: flex; flex-direction: column; background: var(--surface); border-radius: var(--radius); overflow: hidden; transition: transform 0.28s ease, box-shadow 0.28s ease; } .flash-card:hover { transform: translateY(-5px); box-shadow: 0 26px 40px -28px rgba(0, 0, 0, 0.7); } .flash-media { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: #ece7e3; } .flash-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.55s ease; } .flash-card:hover .flash-media img { transform: scale(1.05); } .flash-badge { position: absolute; top: 12px; left: 12px; padding: 6px 11px; border-radius: var(--radius-sm); /* accent-deep 配白字只有 3.77:1,换更深一档到 5.37:1 */ background: var(--accent-text); color: #ffffff; font-family: var(--font-body); font-size: 12px; font-weight: 900; letter-spacing: 0.08em; line-height: 1; } .flash-body { flex: 1; display: flex; flex-direction: column; gap: 9px; padding: 16px 18px 20px; } .flash-name { font-family: var(--font-display); font-size: 19px; line-height: 1.25; letter-spacing: 0.01em; } .flash-name a { color: var(--ink); text-decoration: none; transition: color 0.2s ease; } .flash-name a:hover { color: var(--accent-text); } .flash-price { font-family: var(--font-display); font-size: 18px; color: var(--ink-soft); letter-spacing: 0.03em; } .flash-price del { opacity: 0.55; margin-right: 8px; } .flash-price ins { text-decoration: none; color: var(--accent-text); } .flash-stock { margin-top: auto; padding-top: 4px; display: grid; gap: 7px; } .flash-bar { height: 5px; border-radius: 999px; background: var(--surface-2); overflow: hidden; } .flash-bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--accent-deep); } .flash-stock-note { display: flex; justify-content: space-between; gap: 10px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } .flash-stock-note .is-low { color: var(--danger); } .flash-actions { margin-top: 4px; } .flash-actions .button { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: var(--radius-sm); border: 1px solid var(--ink); background: var(--ink); color: var(--dark-ink); font-family: var(--font-body); font-size: 11.5px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; text-decoration: none; cursor: pointer; position: relative; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .flash-actions .button::after { content: ""; position: absolute; left: 50%; bottom: -7px; translate: -50% 0; width: 40%; height: 6px; border: 1.2px solid currentColor; border-top: 0; clip-path: polygon(14% 0, 86% 0, 100% 100%, 0% 100%); opacity: 0.5; pointer-events: none; } .flash-actions .button:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #ffffff; } .flash-actions .button.loading { opacity: 0.6; pointer-events: none; } .flash-actions .added_to_cart { display: inline-block; margin-left: 12px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-text); text-decoration: none; } .flash-foot { margin-top: 38px; padding-top: 26px; border-top: 1px solid var(--line-dark); display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap; } .flash-note { display: inline-flex; align-items: center; gap: 10px; color: var(--dark-muted); font-size: 14.5px; } .flash-note .icon { flex: none; color: var(--accent); } /* single product page: countdown for a scheduled sale end */ .sale-timer { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 0 0 22px; padding: 14px 16px; border: 1px solid var(--accent-soft); border-left: 3px solid var(--accent-deep); border-radius: var(--radius); background: rgba(217, 138, 148, 0.08); } .sale-timer-label { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-body); font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-text); } /* ================= Brands ================= */ .brand-eyebrow { display: block; font-family: var(--font-body); font-size: 10.5px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-text); text-decoration: none; } a.brand-eyebrow:hover { color: var(--ink); } .brand-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; } .brand-card { display: flex; flex-direction: column; height: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-decoration: none; transition: transform 0.26s ease, border-color 0.26s ease, box-shadow 0.26s ease; } .brand-card:hover { transform: translateY(-5px); border-color: rgba(192, 106, 118, 0.45); box-shadow: var(--shadow); } .brand-plate { position: relative; display: grid; place-items: center; aspect-ratio: 3 / 2; overflow: hidden; background: var(--surface-2); transition: background 0.26s ease; } /* bottle-shoulder arc above the monogram, same motif as .kicker */ .brand-plate::before { content: ""; position: absolute; top: 20px; left: 50%; translate: -50% 0; width: 38px; height: 13px; border: 1.2px solid var(--accent-deep); border-bottom: 0; border-radius: 100% 100% 0 0 / 200% 200% 0 0; opacity: 0.5; transition: opacity 0.26s ease, border-color 0.26s ease; } .brand-plate-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 22px; display: block; } .brand-mono { font-family: var(--font-display); font-size: 32px; line-height: 1; letter-spacing: 0.14em; text-indent: 0.14em; color: var(--ink); transition: color 0.26s ease; } .brand-card:hover .brand-plate { background: var(--ink); } .brand-card:hover .brand-mono { color: var(--accent); } .brand-card:hover .brand-plate::before { border-color: var(--accent); opacity: 0.9; } /* 有品牌图时：去掉花体版面那套装饰，图片自己就是标识； 悬停也不换底色，否则会在产品图周围翻出一圈深色边 */ .brand-card-img .brand-plate::before { display: none; } /* 官方产品图基本都是白底，版面也用白底才不会在图周围翻出一圈米色方框 */ .brand-card-img .brand-plate, .brand-card-img:hover .brand-plate { background: #ffffff; } .brand-card-img .brand-plate-img { padding: 10px; } .brand-card-img .brand-plate-img { transition: transform 0.4s cubic-bezier(0.22, 0.65, 0.25, 1); } .brand-card-img:hover .brand-plate-img { transform: scale(1.04); } .brand-foot { display: grid; gap: 4px; padding: 15px 16px 17px; } .brand-card-name { font-family: var(--font-display); font-size: 18px; line-height: 1.25; color: var(--ink); letter-spacing: 0.01em; } .brand-card-count { font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); } .brands-foot { margin-top: 42px; display: flex; justify-content: center; } /* brand directory page */ .brand-intro { padding-top: 54px; } .brand-block + .brand-block { margin-top: 58px; } .brand-block-title { margin-bottom: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--line); font-size: 24px; letter-spacing: 0.03em; } /* brand archive header */ .brand-head { display: flex; align-items: center; gap: 30px; margin: 0 0 8px; padding: 26px 28px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius); } .brand-head-mark { flex: none; display: grid; place-items: center; width: 108px; height: 108px; border-radius: var(--radius); background: var(--surface-2); overflow: hidden; } .brand-head-mark img { width: 100%; height: 100%; object-fit: contain; padding: 12px; } .brand-head-mark .brand-mono { font-size: 30px; } .brand-head-body { min-width: 0; } .brand-head-body .kicker { margin-bottom: 10px; } .brand-head-desc p { margin: 0; font-size: 16px; color: var(--ink-soft); max-width: 68ch; } .brand-head-count { margin-top: 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } /* brand line inside WooCommerce product cards / single product */ ul.products li.product .brand-eyebrow { padding: 16px 18px 0; } ul.products li.product .brand-eyebrow + .woocommerce-loop-product__title { padding-top: 5px; } .wc-page div.product .brand-eyebrow { margin-bottom: 10px; } @media (max-width: 1200px) { .prod-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .up-sells ul.products, .related.products ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 1024px) { .main-nav { display: none; } .nav-toggle { display: inline-grid; } .cats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .perks-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; } ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); } body.woocommerce-account .woocommerce { grid-template-columns: minmax(0, 1fr); gap: 26px; } } @media (max-width: 900px) { .sec { padding-block: 72px; } .section-pad { padding-block: 66px; } .prod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .quotes-grid { grid-template-columns: minmax(0, 1fr); } .split-in { grid-template-columns: minmax(0, 1fr); gap: 46px; } .split-flip .split-media { order: 0; } .wc-page div.product { grid-template-columns: minmax(0, 1fr); gap: 34px; } .woocommerce-checkout form.checkout { grid-template-columns: minmax(0, 1fr); } .woocommerce-checkout form.checkout > #order_review_heading, .woocommerce-checkout form.checkout > #order_review { grid-column: 1; } .woocommerce-checkout #order_review { position: static; } .contact-cards { grid-template-columns: minmax(0, 1fr); } ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); } .up-sells ul.products, .related.products ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 768px) { body { font-size: 16px; } .wrap { width: calc(100% - 36px); } .hero { min-height: 540px; } .hero-in { padding-block: 92px 84px; } .hero-stats { gap: 26px; flex-wrap: wrap; } .hero::after { height: 30px; } .cta-in { flex-direction: column; align-items: flex-start; } .perks-grid { grid-template-columns: minmax(0, 1fr); gap: 4px; padding-block: 14px; } .split-media img, .split-flip .split-media img { border-radius: 90px 90px var(--radius) var(--radius); } .woocommerce-result-count, .woocommerce-ordering { float: none; margin: 10px 0 0; } .woocommerce-ordering { margin-bottom: 4px; } /* cart table collapses into stacked rows */ table.shop_table.cart { border: 0; background: transparent; } table.shop_table.cart > thead { display: none; } table.shop_table.cart > tbody, table.shop_table.cart > tbody > tr { display: block; } table.shop_table.cart > tbody > tr { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 14px; margin-bottom: 14px; } table.shop_table.cart > tbody > tr > td { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px dashed var(--line); padding: 12px 4px; } table.shop_table.cart > tbody > tr > td:last-child { border-bottom: 0; } table.shop_table.cart td[data-title]::before { content: attr(data-title); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } table.shop_table.cart td.product-thumbnail::before, table.shop_table.cart td.actions::before { content: none; } .woocommerce-cart-form .coupon { float: none; flex-wrap: wrap; } .woocommerce-cart-form .coupon .input-text { flex: 1; min-width: 0; } .woocommerce-cart-form td.actions { display: grid !important; gap: 12px; } .cart-collaterals { justify-content: stretch; } .cart-collaterals .cart_totals { width: 100%; } .contact-rail { top: auto; translate: 0 0; bottom: 14px; display: flex; padding: 8px; transition: opacity 0.2s ease, transform 0.2s ease; } /* clear of the hero panel: hidden until the visitor scrolls past it, so the rail never sits on top of hero buttons/copy on short viewports. visibility (not just opacity) is toggled so the buttons are genuinely non-interactive while parked over the hero, not just invisible. */ .contact-rail.rail-hero-clear { opacity: 0; visibility: hidden; transform: translateY(10px); pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s; } .contact-rail.rail-right { right: 14px; } .contact-rail.rail-left { left: 14px; } .rail-btn { width: 42px; height: 42px; } .rail-no-mobile { display: none; } } @media (max-width: 560px) { .header-bar { min-height: 62px; gap: 12px; } .brand-mark { width: 34px; height: 34px; } .brand-name { font-size: 18px; } .hbtn { width: 38px; height: 38px; } .header-actions { gap: 4px; } .post-grid { grid-template-columns: minmax(0, 1fr); } .cats-grid { grid-template-columns: minmax(0, 1fr); } .steps-grid { grid-template-columns: minmax(0, 1fr); } .prod-grid { grid-template-columns: minmax(0, 1fr); } .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-block: 56px 42px; } .footer-bottom-in { flex-direction: column; align-items: flex-start; gap: 10px; } .hero-actions .btn { width: 100%; justify-content: center; } .split-media::before { inset: 14px -14px -14px 14px; border-radius: 80px var(--radius) 80px var(--radius); } .split-flip .split-media::before { inset: 14px 14px -14px -14px; border-radius: var(--radius) 80px var(--radius) 80px; } .summary form.cart { flex-wrap: wrap; } .summary form.cart .single_add_to_cart_button { flex: 1 1 100%; justify-content: center; } ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } ul.products li.product .woocommerce-loop-product__title { font-size: 14.5px; padding: 12px 14px 0; } ul.products li.product .price { padding: 4px 14px 0; } ul.products li.product .button { margin: 10px 14px 16px; } .up-sells ul.products, .related.products ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* 390px band: keep all four header buttons on one row */ @media (max-width: 400px) { .header-bar { gap: 8px; } .brand-text { gap: 7px; } .brand-mark { width: 30px; height: 30px; } .brand-name { font-size: 16px; letter-spacing: 0.04em; } .header-actions { gap: 2px; } .header-actions > a.hbtn:not(.cart-btn) { display: none; } .hbtn { width: 36px; height: 36px; } .wrap { width: calc(100% - 28px); } ul.products { grid-template-columns: minmax(0, 1fr); } } /* ================= Contact rail: mid-width docking ================= Above ~1380px the 1200px content column leaves a gutter wide enough for the floating rail. Below that there is no gutter left, so the rail would sit on top of body copy -- dock it to the bottom-right corner instead. */ @media (min-width: 769px) and (max-width: 1380px) { .contact-rail { top: auto; bottom: 18px; translate: 0 0; display: flex; padding: 8px; } .contact-rail.rail-right { right: 16px; } .contact-rail.rail-left { left: 16px; } } /* ================= Shop: on-sale filter chip ================= */ .shop-filter-chip { margin: 0 0 6px; clear: both; } .shop-chip { display: inline-flex; align-items: center; gap: 9px; padding: 7px 10px 7px 14px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); font-family: var(--font-body); font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } .shop-chip a { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-deep); color: #ffffff; text-decoration: none; transition: background 0.2s ease; } .shop-chip a:hover { background: var(--ink); } /* ================= Responsive: mega menu / flash sale / brands ================= */ @media (max-width: 1200px) { .mega-inner { gap: 32px; } .mega-cols { gap: 22px; } .mega-promo { width: 224px; } .mega-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .brand-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 1024px) { .brand-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 900px) { .flash { padding-block: 66px; } .flash-top { grid-template-columns: minmax(0, 1fr); gap: 30px; align-items: start; } .flash-timer { text-align: left; } .flash-timer-note { margin-left: 0; } .flash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .brand-head { gap: 22px; padding: 22px; } .brand-head-mark { width: 84px; height: 84px; } } @media (max-width: 768px) { .brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .cd-unit { min-width: 62px; padding: 10px 8px 9px; } .cd-num { font-size: 26px; } .flash-foot { flex-direction: column; align-items: flex-start; gap: 18px; } .brand-head { flex-direction: column; align-items: flex-start; } .brand-block-title { font-size: 21px; } } @media (max-width: 560px) { /* 图片 logo 不像文字站名那样会自动缩，窄屏要手动收， 否则会把搜索/购物车/汉堡按钮挤出去 */ .brand img { max-height: 40px; } .countdown { gap: 6px; } .cd-unit { min-width: 0; flex: 1; padding: 9px 4px 8px; } .cd-num { font-size: 22px; } .cd-lab { font-size: 9px; letter-spacing: 0.12em; } .flash-timer { width: 100%; padding: 16px; } .brand-mono { font-size: 26px; } .brand-card-name { font-size: 16px; } } @media (max-width: 480px) { .flash-grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 400px) { .brand img { max-height: 34px; } } /* ================= 手机端联系条:浮动药丸 -> 底部通栏 ================= 浮动药丸在 390px 下固定占住右下角 210x60,实测压住了「View Product」 这类小按钮 23% 的面积,而且按钮中心点被药丸接走 —— 点上去打开的是 联系菜单,不是商品。页脚的 Privacy Policy / Terms of Service 同样被压。 换成通栏底部条,再给 body 留出等高的 padding,就不存在遮挡了:占掉的 那 58px 是明说的,不是随机盖在别人身上的。 放在文件末尾是因为 <=768 那一档里已经写了 rail 的定位,媒体查询不加 特异性,只有靠后才盖得住。 */ @media (max-width: 560px) { body { padding-bottom: 58px; } .contact-rail, .contact-rail.rail-right, .contact-rail.rail-left { top: auto; bottom: 0; left: 0; right: 0; translate: 0 0; display: flex; justify-content: space-around; align-items: center; gap: 0; width: 100%; padding: 7px 4px; border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; border-top: 1px solid var(--line); background: rgba(255, 255, 255, 0.97); box-shadow: 0 -10px 26px -20px rgba(35, 44, 61, 0.5); } /* 通栏条是固定高度的常驻元素,进场用位移而不是淡出,免得挡住又看不见 */ .contact-rail.rail-hero-clear { opacity: 0; visibility: hidden; transform: translateY(100%); pointer-events: none; } .rail-btn { width: 44px; height: 44px; } } /* ================= 语言切换器 ================= 交付规范要求切换入口自建、嵌进站点设计，插件自带的右下角悬浮按钮已在 设置里关闭（fanyi2_switcher_visible=0）。这里的样式对齐页头既有的 .hbtn， 让它读起来是导航的一部分而不是外挂控件。 结构用
/：无 JS 也能展开、键盘可达、Escape 由浏览器接管。 */ .lang-switch { position: relative; } .lang-switch > summary { display: inline-flex; align-items: center; gap: 5px; list-style: none; cursor: pointer; width: auto; padding: 0 9px; } /* Safari 不认 list-style:none，得单独关掉这个伪元素 */ .lang-switch > summary::-webkit-details-marker { display: none; } .lang-code { font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; } .lang-menu { position: absolute; top: calc(100% + 10px); right: 0; z-index: 95; min-width: 178px; padding: 6px; display: grid; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } .lang-opt { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 12px; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font-size: 14px; transition: background 0.18s ease, color 0.18s ease; } .lang-opt:hover, .lang-opt:focus-visible { background: var(--surface-2); } .lang-opt.is-current { background: var(--accent-soft); font-weight: 700; } .lang-opt-code { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: var(--muted); } .lang-opt.is-current .lang-opt-code { color: var(--accent-text); } /* 抽屉与页脚里的平铺样式 */ .lang-row { display: grid; gap: 10px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); } .lang-row-label { font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } .lang-row-opts { display: flex; flex-wrap: wrap; gap: 8px; } .lang-pill { padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); text-decoration: none; font-size: 14px; line-height: 1; transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease; } .lang-pill:hover, .lang-pill:focus-visible { border-color: var(--ink); } .lang-pill.is-current { background: var(--accent-soft); border-color: var(--accent); font-weight: 700; } /* 页脚在深色底上，线和字都要换成浅色一套 */ .lang-row-footer { max-width: var(--wrap); margin: 26px auto 0; padding: 20px 24px 0; border-top-color: var(--line-dark); } .lang-row-footer .lang-row-label { color: var(--dark-muted); } .lang-row-footer .lang-pill { border-color: var(--line-dark); color: var(--dark-ink); } .lang-row-footer .lang-pill:hover, .lang-row-footer .lang-pill:focus-visible { border-color: rgba(244, 241, 239, 0.55); } .lang-row-footer .lang-pill.is-current { background: rgba(217, 138, 148, 0.18); border-color: var(--accent); color: #ffffff; } /* 窄屏用抽屉里那一排就够了，页头图标区不再挤第五个按钮 */ @media (max-width: 900px) { .lang-switch { display: none; } }