/* ========================================================================== Cosplay Pro — Main Stylesheet Dark modern design with purple accents ========================================================================== */ /* -------------------------------------------------------------------------- CSS Custom Properties (Design Tokens) -------------------------------------------------------------------------- */ :root { /* Colors */ --color-bg: #0D0D0D; --color-bg-alt: #111122; --color-surface: #1A1A2E; --color-surface-hover: #24243E; --color-border: #2A2A4A; --color-primary: #9B59B6; --color-primary-light: #BB77D6; --color-primary-dark: #7D3C98; --color-accent: #F39C12; --color-text: #E0E0E0; --color-text-muted: #8888AA; --color-text-heading: #FFFFFF; --color-success: #2ECC71; --color-error: #E74C3C; --color-warning: #F39C12; /* Typography */ --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-heading: 'Orbitron', 'Inter', sans-serif; --fs-xs: 0.75rem; /* 12px */ --fs-sm: 0.875rem; /* 14px */ --fs-base: 1rem; /* 16px */ --fs-md: 1.125rem; /* 18px */ --fs-lg: 1.25rem; /* 20px */ --fs-xl: 1.5rem; /* 24px */ --fs-2xl: 2rem; /* 32px */ --fs-3xl: 2.5rem; /* 40px */ --fs-4xl: 3.5rem; /* 56px */ --fw-normal: 400; --fw-medium: 500; --fw-semibold:600; --fw-bold: 700; --fw-black: 900; --lh-tight: 1.2; --lh-normal: 1.6; --lh-relaxed: 1.8; /* Spacing */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4rem; --space-4xl: 6rem; /* Layout */ --container-max: clamp(1280px, 90vw, 1600px); --container-pad: 1.5rem; --header-height: 72px; /* Borders & Radius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full:9999px; /* Shadows */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5); --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.6); --shadow-glow: 0 0 20px rgba(155, 89, 182, 0.3); /* Scrollbar */ --scrollbar-size: 8px; --scrollbar-track: rgba(25, 18, 36, 0.92); --scrollbar-thumb: linear-gradient(90deg, rgba(125, 60, 152, 0.9), rgba(155, 89, 182, 0.86)); --scrollbar-thumb-hover: linear-gradient(90deg, rgba(155, 89, 182, 0.95), rgba(187, 119, 214, 0.9)); --scrollbar-thumb-color: rgba(155, 89, 182, 0.78); /* Transitions */ --transition-fast: 150ms ease; --transition-normal: 250ms ease; --transition-slow: 400ms ease; } /* -------------------------------------------------------------------------- Reset & Base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; /* overflow-x on html instead of body to preserve position:sticky */ overflow-x: clip; } body { font-family: var(--font-body); font-size: var(--fs-base); font-weight: var(--fw-normal); line-height: var(--lh-normal); color: var(--color-text); background-color: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Do NOT set overflow-x: hidden here — it breaks position:sticky because browsers implicitly set overflow-y: auto, creating a new scroll container. Use overflow-x: clip on instead. */ } img, picture, video, svg { display: block; max-width: 100%; height: auto; } a { color: var(--color-primary-light); text-decoration: none; transition: color var(--transition-fast); } a:hover, a:focus { color: var(--color-primary); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: var(--fw-bold); line-height: var(--lh-tight); color: var(--color-text-heading); } h1 { font-size: var(--fs-3xl); } h2 { font-size: var(--fs-2xl); } h3 { font-size: var(--fs-xl); } h4 { font-size: var(--fs-lg); } ul, ol { list-style: none; } input, textarea, button, select { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: none; } /* Screen reader only */ .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; word-wrap: normal !important; } .screen-reader-text:focus { background-color: var(--color-surface); color: var(--color-text); clip: auto !important; display: block; font-size: var(--fs-sm); height: auto; left: 5px; padding: var(--space-md); top: 5px; width: auto; z-index: 100000; } /* -------------------------------------------------------------------------- Layout -------------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); } /* Mobile fallback by body class (plugin-driven device detect) */ body.shirtzero-mobile .container { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-inline: auto !important; box-sizing: border-box !important; padding-left: 8px !important; padding-right: 8px !important; } body.cosplay-force-mobile-layout .container { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-inline: auto !important; box-sizing: border-box !important; padding-left: 8px !important; padding-right: 8px !important; } .site-content { min-height: calc(100vh - var(--header-height) - 300px); } .section { padding-block: var(--space-4xl); } .section--alt { background-color: var(--color-bg-alt); } .section__title { text-align: center; margin-bottom: var(--space-3xl); font-size: var(--fs-2xl); letter-spacing: 0.05em; text-transform: uppercase; } .section__title::after { content: ''; display: block; width: 60px; height: 3px; background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light)); margin: var(--space-md) auto 0; border-radius: var(--radius-full); } .section__cta { text-align: center; margin-top: var(--space-3xl); } /* -------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); padding: 0.75rem 2rem; font-family: var(--font-heading); font-size: var(--fs-sm); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.1em; border-radius: var(--radius-md); border: 2px solid transparent; transition: all var(--transition-normal); cursor: pointer; } .btn--primary { background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); color: #fff; border-color: var(--color-primary); } .btn--primary:hover { background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary)); box-shadow: var(--shadow-glow); color: #fff; transform: translateY(-2px); } .btn--outline { background: transparent; color: var(--color-primary-light); border-color: var(--color-primary); } .btn--outline:hover { background: var(--color-primary); color: #fff; transform: translateY(-2px); } .btn--lg { padding: 1rem 2.5rem; font-size: var(--fs-base); } /* -------------------------------------------------------------------------- Header -------------------------------------------------------------------------- */ .header-trust-bar { background: rgba(155, 89, 182, 0.12); border-bottom: 1px solid var(--color-border); } .header-trust-bar__inner { display: flex; align-items: center; justify-content: center; gap: var(--space-lg); min-height: 36px; padding-block: 0.25rem; } .header-trust-bar__item { font-size: var(--fs-xs); color: var(--color-text-muted); white-space: nowrap; } @media (hover: hover) { .header-trust-bar__item:hover { color: var(--color-primary-light); } } @media (max-width: 768px) { .header-trust-bar__inner { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; } .header-trust-bar__inner::-webkit-scrollbar { display: none; } } .site-header-wrap { height: var(--header-height); /* No overflow:hidden — would clip lang switcher dropdown. Use clip-path on header instead. */ } .site-header { position: sticky; top: 0; z-index: 1000; transition: transform 0.3s ease, box-shadow 0.3s ease; background: linear-gradient(180deg, rgba(13, 13, 13, 0.98) 0%, rgba(16, 16, 32, 0.96) 100%); border-bottom: 1px solid rgba(155, 89, 182, 0.14); box-shadow: 0 4px 28px rgba(0, 0, 0, 0.45); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* M7: Scroll header — hide when scrolling down, show when scrolling up */ body.header-scrolled-down .site-header { transform: translateY(-100%); clip-path: inset(100% 0 0 0); background: linear-gradient(180deg, rgba(13, 13, 13, 0.98) 0%, rgba(16, 16, 32, 0.96) 100%); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(155, 89, 182, 0.12); height: var(--header-height); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: clamp(var(--space-md), 2vw, var(--space-xl)); height: var(--header-height); } /* Inline search: desktop top row only (see @media min-width 993px). */ .header-search-inline { display: none; min-width: 0; } .header-search-inline .widget_product_search .widget-title, .header-search-inline .widget_product_search .widgettitle { display: none; margin: 0; } .header-search-inline .woocommerce-product-search, .header-search-inline .search-form { position: relative; display: block; margin: 0; } .header-search-inline .woocommerce-product-search label, .header-search-inline .search-form label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Desktop: 双行头部（顶栏 + 全宽导航条）；色调与主题全局 .site-header 一致，不另起浅色体系。 */ @media (min-width: 993px) { :root { --header-top-row-height: 68px; /* 与 .main-navigation 条实际高度（margin + padding + 链接行高）一致，供 mega fixed top 对齐 */ /* 须覆盖：nav 条 margin + padding-block + 链接上下 padding + line-height */ --header-nav-row-height: 40px; /* 勿再加「垫高」：原先 +0.42rem + min-height:var(--header-height) 会在类目行下制造大块空蓝 */ --header-height: calc(var(--header-top-row-height) + var(--header-nav-row-height)); } .site-header-wrap { height: auto; min-height: 0; } .site-header { /* 继承主题顶栏渐变与紫边，勿改为浅灰 */ background: linear-gradient(180deg, rgba(13, 13, 13, 0.98) 0%, rgba(16, 16, 32, 0.96) 100%); border-bottom: 1px solid rgba(155, 89, 182, 0.14); box-shadow: 0 4px 28px rgba(0, 0, 0, 0.45); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } body.header-scrolled-down .site-header { background: linear-gradient(180deg, rgba(13, 13, 13, 0.98) 0%, rgba(16, 16, 32, 0.96) 100%); border-bottom: 1px solid rgba(155, 89, 182, 0.12); height: auto; min-height: 0; } /* * 宽屏用 Grid 固定「第二行 = 全宽导航」。 * 纯 flex + flex-basis:100% 在顶行较宽时偶发仍把 nav 留在第一行（被 flex:1 挤到右侧并换行），Grid 无歧义。 */ .header-inner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: minmax(var(--header-top-row-height), auto) auto; align-items: center; column-gap: clamp(0.65rem, 1.5vw, 1.25rem); row-gap: 0; height: auto; min-height: 0; padding-top: 0.35rem; padding-bottom: 0; } .header-inner .site-branding { grid-column: 1; grid-row: 1; } .header-search-inline { grid-column: 2; grid-row: 1; display: flex; justify-content: center; justify-self: center; min-width: 0; width: 100%; max-width: min(640px, 46vw); } .header-inner .header-actions { grid-column: 3; grid-row: 1; margin-left: 0; } .header-search-inline > .widget, .header-search-inline .woocommerce-product-search, .header-search-inline .search-form { width: 100%; max-width: min(640px, 46vw); } .header-search-inline .search-field, .header-search-inline .woocommerce-product-search .search-field { width: 100%; padding: 0.55rem 2.75rem 0.55rem 1rem; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 999px; color: var(--color-text); font-size: 0.875rem; box-shadow: none; } .header-search-inline .search-field::placeholder, .header-search-inline .woocommerce-product-search .search-field::placeholder { color: var(--color-text-muted); opacity: 0.85; } .header-search-inline .search-field:focus, .header-search-inline .woocommerce-product-search .search-field:focus { border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(155, 89, 182, 0.2); } .header-search-inline .search-submit, .header-search-inline .woocommerce-product-search button[type="submit"], .header-search-inline .woocommerce-product-search button { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 2rem; height: 2rem; padding: 0; background: rgba(155, 89, 182, 0.15); color: transparent; border: 1px solid rgba(155, 89, 182, 0.35); border-radius: 999px; font-size: 0; line-height: 0; cursor: pointer; transition: background var(--transition-fast), border-color var(--transition-fast); } @media (hover: hover) { .header-search-inline .search-submit:hover, .header-search-inline .woocommerce-product-search button[type="submit"]:hover, .header-search-inline .woocommerce-product-search button:hover { background: rgba(155, 89, 182, 0.28); border-color: var(--color-primary-light); } } .header-search-inline .search-submit::before, .header-search-inline .woocommerce-product-search button[type="submit"]::before, .header-search-inline .woocommerce-product-search button::before { content: ""; display: block; width: 14px; height: 14px; margin: 0 auto; background: center / 14px 14px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E0E0E0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E"); } .header-search-toggle { display: none !important; } /* 桌面用顶栏内联搜索，避免与抽屉/遮罩重复抢占焦点 */ .header-search-overlay { display: none !important; visibility: hidden; pointer-events: none; } .header-actions .header-account, .header-actions .header-cart { color: var(--color-text); } @media (hover: hover) { .header-actions .header-account:hover, .header-actions .header-cart:hover { color: var(--color-primary-light); background-color: rgba(155, 89, 182, 0.1); } } /* 与全站 .cp-lang-switcher--compact 一致，不强制白底黑字 */ .header-actions .cp-lang-switcher--compact .cp-lang-switcher__summary, .header-actions .cp-lang-switcher--compact button.cp-lang-switcher__summary { background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text); } .site-header .header-inner > .main-navigation { grid-column: 1 / -1; grid-row: 2; /* 压过全局 `.main-navigation { flex:1 }`（此处为 grid 子项，不设 flex 即可） */ flex: none !important; align-self: stretch; width: 100vw !important; max-width: 100vw !important; min-width: 0 !important; margin: 0.28rem calc(50% - 50vw) 0; margin-bottom: 0.12rem; padding: 0.32rem max(var(--container-pad), calc((100vw - min(100vw, var(--container-max))) / 2)) 0.36rem; min-height: 0; background: linear-gradient(180deg, rgba(8, 8, 16, 0.98) 0%, rgba(13, 13, 22, 0.96) 100%); border-top: none; box-sizing: border-box; justify-content: center; } .site-header .header-inner > .main-navigation .primary-menu { justify-content: center; flex-wrap: wrap; gap: 0.18rem 0.22rem; width: 100%; max-width: 100%; } .site-header .main-navigation .primary-menu > li > a { padding: 0.3rem 0.55rem; color: var(--color-text); letter-spacing: 0.06em; border-radius: var(--radius-sm); background: transparent; box-shadow: none; font-size: 0.74rem; line-height: 1.28; } @media (hover: hover) { .site-header .main-navigation .primary-menu li a:hover { color: var(--color-primary-light); background-color: rgba(155, 89, 182, 0.12); box-shadow: inset 0 0 0 1px rgba(155, 89, 182, 0.22); } } .site-header .main-navigation .primary-menu li.current-menu-item > a, .site-header .main-navigation .primary-menu li.current-menu-ancestor > a { color: var(--color-text-heading); background: linear-gradient(180deg, rgba(155, 89, 182, 0.22), rgba(155, 89, 182, 0.08)); box-shadow: inset 0 0 0 1px rgba(187, 119, 214, 0.45), 0 0 20px rgba(155, 89, 182, 0.12); } } /* Branding */ .site-branding { min-width: 0; } .site-branding .site-title { font-family: var(--font-heading); font-size: var(--fs-xl); font-weight: var(--fw-black); color: var(--color-text-heading); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; } @media (hover: hover) { .site-branding .site-title:hover { color: var(--color-primary-light); } } .site-branding .custom-logo { height: 58px; width: auto; max-width: 280px; object-fit: contain; } /* Navigation */ .main-navigation { flex: 1; display: flex; justify-content: center; min-width: 0; } .primary-menu { display: flex; align-items: center; flex-wrap: nowrap; justify-content: center; gap: clamp(0.2rem, 0.45vw, 0.55rem); } /* When mobile menu is assigned: desktop shows primary, mobile shows mobile menu */ .main-navigation.has-mobile-menu .primary-menu--desktop { display: flex; } .main-navigation.has-mobile-menu .primary-menu--mobile { display: none; } @media (max-width: 992px) { .main-navigation.has-mobile-menu .primary-menu--desktop { display: none; } .main-navigation.has-mobile-menu .primary-menu--mobile { display: flex; flex-direction: column; width: 100%; gap: 0; } } .primary-menu li { position: relative; } .primary-menu li a { display: block; padding: 0.45rem 0.55rem; color: var(--color-text); font-size: 0.78rem; font-weight: var(--fw-medium); letter-spacing: 0.055em; text-transform: uppercase; border-radius: var(--radius-md); transition: color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast); } @media (min-width: 1200px) { .primary-menu li a { padding: 0.5rem 0.65rem; font-size: 0.8125rem; } } /* N3: Hover only on devices that support it (avoid sticky hover on touch) */ @media (hover: hover) { .primary-menu li a:hover { color: var(--color-primary-light); background-color: rgba(155, 89, 182, 0.12); box-shadow: inset 0 0 0 1px rgba(155, 89, 182, 0.22); } } /* Current section — always visible (touch + desktop) */ .primary-menu li.current-menu-item > a, .primary-menu li.current-menu-ancestor > a { color: var(--color-text-heading); background: linear-gradient(180deg, rgba(155, 89, 182, 0.22), rgba(155, 89, 182, 0.08)); box-shadow: inset 0 0 0 1px rgba(187, 119, 214, 0.45), 0 0 20px rgba(155, 89, 182, 0.12); } /* N6: Touch active feedback */ .primary-menu li a:active { background-color: rgba(155, 89, 182, 0.15); } /* Sub-menu arrow (J3) */ .primary-menu li.menu-item-has-children > a::after { content: ''; display: inline-block; margin-left: 0.35em; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; vertical-align: 0.2em; opacity: 0.8; } [dir="rtl"] .primary-menu li.menu-item-has-children > a::after { margin-left: 0; margin-right: 0.35em; border-left-width: 4px; border-right-width: 4px; } /* Dropdown — match theme dark + purple accent */ .primary-menu li ul.sub-menu { display: none; position: absolute; top: 100%; left: 0; margin-top: 4px; min-width: 220px; max-width: min(800px, calc(100vw - 2rem)); padding: var(--space-sm) 0; background-color: var(--color-surface); border: 1px solid var(--color-border); border-top: 2px solid var(--color-primary); border-radius: var(--radius-md); box-shadow: var(--shadow-lg), 0 0 24px rgba(155, 89, 182, 0.15); z-index: 100; transition: opacity var(--transition-fast); } /* Prevent dropdown from overflowing viewport on the right (exclude mega — it has its own layout) */ .primary-menu li:last-child:not(.menu-item-has-mega) > ul.sub-menu, .primary-menu li:nth-last-child(2):not(.menu-item-has-mega) > ul.sub-menu { left: auto; right: 0; } .primary-menu li:hover > ul.sub-menu, .primary-menu li.mega-open > ul.sub-menu { display: block; } /* RTL: mirror menu layout (E2/E3) */ [dir="rtl"] .primary-menu { flex-direction: row-reverse; } [dir="rtl"] .primary-menu li ul.sub-menu { left: auto; right: 0; } [dir="rtl"] .primary-menu li:last-child:not(.menu-item-has-mega) > ul.sub-menu, [dir="rtl"] .primary-menu li:nth-last-child(2):not(.menu-item-has-mega) > ul.sub-menu { left: 0; right: auto; } [dir="rtl"] .primary-menu li ul.sub-menu .sub-menu { left: auto; right: 100%; } /* Sub-menu links — match primary menu hover style */ .primary-menu li ul.sub-menu a { display: block; text-transform: none; padding: var(--space-sm) var(--space-lg); color: var(--color-text); font-size: var(--fs-sm); font-weight: var(--fw-medium); transition: color var(--transition-fast), background-color var(--transition-fast); } @media (hover: hover) { .primary-menu li ul.sub-menu a:hover { color: var(--color-primary-light); background-color: rgba(155, 89, 182, 0.1); } } .primary-menu li ul.sub-menu .current-menu-item > a { color: var(--color-primary-light); background-color: rgba(155, 89, 182, 0.1); } /* L7: Mega menu — desktop；主题深色 + 紫强调（与全局下拉一致）；top 贴双行 --header-height */ /* 二级多栏；三级 dense grid + 两行省略。Visibility: :hover OR .mega-open */ @media (min-width: 993px) { .primary-menu li.menu-item-has-mega > ul.sub-menu { position: fixed !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; top: var(--header-height) !important; width: 100vw !important; max-width: 100vw !important; max-height: min(68vh, 640px); overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; margin: 0 !important; box-sizing: border-box; column-count: 5; column-gap: clamp(1rem, 1.75vw, 1.65rem); column-rule: 1px solid rgba(155, 89, 182, 0.12); padding: var(--space-lg) max(var(--container-pad), calc((100vw - var(--container-max)) / 2 + var(--container-pad))) !important; padding-top: calc(var(--space-lg) + 0.2rem) !important; background: linear-gradient(180deg, rgba(24, 24, 44, 0.98) 0%, rgba(13, 13, 22, 0.97) 100%); border: none; border-bottom: 1px solid rgba(155, 89, 182, 0.12); border-top: 2px solid var(--color-primary); border-radius: 0; box-shadow: var(--shadow-lg), 0 12px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(155, 89, 182, 0.08); z-index: 999; } @media (min-width: 1200px) { .primary-menu li.menu-item-has-mega > ul.sub-menu { column-count: 6; } } @media (min-width: 1440px) { .primary-menu li.menu-item-has-mega > ul.sub-menu { column-count: 7; } } /* 二级分组标题（A–E 等）— 主题紫系，与旧版 mega 一致 */ .primary-menu li.menu-item-has-mega > ul.sub-menu > li.menu-item-has-children > a { display: block; font-size: 0.68rem; font-weight: var(--fw-bold); letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-primary-light); padding: 0.45rem 0.6rem 0.4rem 0.6rem; margin-bottom: 0.35rem; border-radius: var(--radius-md); background: linear-gradient(135deg, rgba(155, 89, 182, 0.12), rgba(155, 89, 182, 0.03)); border: 1px solid rgba(155, 89, 182, 0.28); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04); } @media (hover: hover) { .primary-menu li.menu-item-has-mega > ul.sub-menu > li.menu-item-has-children > a:hover { color: var(--color-text-heading); background: linear-gradient(135deg, rgba(155, 89, 182, 0.22), rgba(155, 89, 182, 0.08)); border-color: rgba(187, 119, 214, 0.45); } } /* 三级：两行截断 + 主题正文字色 */ .primary-menu li.menu-item-has-mega > ul.sub-menu > li > ul.sub-menu a { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; word-break: break-word; hyphens: auto; font-size: 0.72rem; font-weight: var(--fw-medium); letter-spacing: 0.01em; text-transform: none; line-height: 1.28; min-height: 2.45em; color: var(--color-text); padding: 0.32rem 0.4rem; margin: 0; border-radius: var(--radius-sm); background: transparent; border: none; box-shadow: none; } @media (hover: hover) { .primary-menu li.menu-item-has-mega > ul.sub-menu > li > ul.sub-menu a:hover { color: var(--color-primary-light); background-color: rgba(155, 89, 182, 0.1); } } /* * Mega 内：三级及以下子菜单始终展开（不依赖悬停二级项），避免移入另一列时闪动。 * 选择器：第一层 mega ul 之后的任意嵌套 ul.sub-menu。 */ .primary-menu li.menu-item-has-mega.mega-open > ul.sub-menu ul.sub-menu, .primary-menu li.menu-item-has-mega:hover > ul.sub-menu ul.sub-menu { display: block !important; visibility: visible !important; opacity: 1 !important; } } .primary-menu li.menu-item-has-mega > ul.sub-menu > li { position: relative; break-inside: avoid; padding-bottom: var(--space-sm); } /* Mega 内三级：dense grid + 区域滚动（控制面板总高度）；display 由「始终展开」规则接管 */ @media (min-width: 993px) { .primary-menu li.menu-item-has-mega > ul.sub-menu > li.menu-item-has-children > ul.sub-menu { position: static !important; left: auto !important; right: auto !important; top: auto !important; width: 100% !important; min-width: 0 !important; max-width: none !important; margin: 0.3rem 0 0 !important; padding: var(--space-xs) 0 0 !important; border: none !important; box-shadow: none !important; background: transparent !important; display: grid !important; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0.12rem 0.45rem; column-count: unset !important; column-gap: unset !important; max-height: min(44vh, 380px); overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; align-content: start; } .primary-menu li.menu-item-has-mega > ul.sub-menu > li.menu-item-has-children > ul.sub-menu > li { break-inside: avoid; min-width: 0; } /* * Mega 滚动条：细、紫系，与 :root --scrollbar-* 一致（避免系统默认白色粗条）。 */ .primary-menu li.menu-item-has-mega > ul.sub-menu, .primary-menu li.menu-item-has-mega > ul.sub-menu > li.menu-item-has-children > ul.sub-menu { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track); } .primary-menu li.menu-item-has-mega > ul.sub-menu::-webkit-scrollbar, .primary-menu li.menu-item-has-mega > ul.sub-menu > li.menu-item-has-children > ul.sub-menu::-webkit-scrollbar { width: 5px; height: 5px; } .primary-menu li.menu-item-has-mega > ul.sub-menu::-webkit-scrollbar-track, .primary-menu li.menu-item-has-mega > ul.sub-menu > li.menu-item-has-children > ul.sub-menu::-webkit-scrollbar-track { background: var(--scrollbar-track); border-radius: 100px; } .primary-menu li.menu-item-has-mega > ul.sub-menu::-webkit-scrollbar-thumb, .primary-menu li.menu-item-has-mega > ul.sub-menu > li.menu-item-has-children > ul.sub-menu::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 100px; border: 1px solid rgba(155, 89, 182, 0.2); } @media (hover: hover) { .primary-menu li.menu-item-has-mega > ul.sub-menu::-webkit-scrollbar-thumb:hover, .primary-menu li.menu-item-has-mega > ul.sub-menu > li.menu-item-has-children > ul.sub-menu::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); border-color: rgba(187, 119, 214, 0.35); } } .primary-menu li.menu-item-has-mega > ul.sub-menu::-webkit-scrollbar-corner, .primary-menu li.menu-item-has-mega > ul.sub-menu > li.menu-item-has-children > ul.sub-menu::-webkit-scrollbar-corner { background: var(--scrollbar-track); } } /* Menu toggle (mobile) */ .menu-toggle { display: none; flex-direction: column; gap: 5px; padding: var(--space-sm); } .mobile-menu-close { display: none; } .hamburger-line { display: block; width: 24px; height: 2px; background-color: var(--color-text); transition: all var(--transition-normal); border-radius: 1px; } /* Header Actions */ .header-actions { display: flex; align-items: center; gap: var(--space-md); position: relative; flex-shrink: 0; } /* Desktop: search left of language, then account/cart */ @media (min-width: 993px) { .header-actions { gap: var(--space-sm); } .menu-toggle { order: 1; } .header-search-toggle { order: 2; } .cp-lang-switcher--header, .header-actions > *:not(.menu-toggle):not(.header-search-toggle):not(.header-account):not(.header-cart) { order: 3; } .header-account { order: 4; } .header-cart { order: 5; } /* Divider between language and cart */ .cp-lang-switcher--header { margin-right: var(--space-sm); padding-right: var(--space-sm); border-right: 1px solid var(--color-border); } .header-account, .header-cart { margin-left: var(--space-xs); } [dir="rtl"] .cp-lang-switcher--header { margin-right: 0; margin-left: var(--space-sm); padding-right: var(--space-sm); padding-left: 0; border-right: none; border-left: 1px solid var(--color-border); } [dir="rtl"] .header-account, [dir="rtl"] .header-cart { margin-left: 0; margin-right: var(--space-xs); } } .header-search-toggle, .header-account, .header-cart { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--color-text); border-radius: var(--radius-md); transition: all var(--transition-fast); } @media (hover: hover) { .header-search-toggle:hover, .header-account:hover, .header-cart:hover { color: var(--color-primary-light); background-color: rgba(155, 89, 182, 0.1); } } .header-cart { position: relative; } .cart-count { position: absolute; top: 2px; right: 2px; background: var(--color-primary); color: #fff; font-size: 10px; font-weight: var(--fw-bold); width: 18px; height: 18px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; line-height: 1; } /* Search Overlay — match theme dropdown style */ .header-search-overlay { display: none; position: absolute; top: 100%; left: 0; right: 0; background-color: var(--color-surface); border-bottom: 1px solid var(--color-border); border-top: 2px solid var(--color-primary); padding: var(--space-lg) 0; box-shadow: var(--shadow-lg), 0 0 24px rgba(155, 89, 182, 0.1); } .header-search-overlay.is-active { display: block; } .header-search-overlay .search-form, .header-search-overlay .woocommerce-product-search { position: relative; display: block; } .header-search-overlay .woocommerce-product-search label { display: none; } .header-search-overlay .widget_product_search .widget-title, .header-search-overlay .widget_product_search .widgettitle { display: none; margin: 0; } .header-search-overlay .search-field, .header-search-overlay .woocommerce-product-search .search-field { width: 100%; padding: var(--space-sm) calc(var(--space-md) + 34px) var(--space-sm) var(--space-md); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text); font-size: var(--fs-base); } .header-search-overlay .search-field:focus, .header-search-overlay .woocommerce-product-search .search-field:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(155, 89, 182, 0.2); } .header-search-overlay .search-submit, .header-search-overlay .woocommerce-product-search button { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 30px; height: 30px; padding: 0; background: rgba(155, 89, 182, 0.15); color: transparent; border: 1px solid rgba(155, 89, 182, 0.35); border-radius: var(--radius-sm); font-size: 0; line-height: 0; cursor: pointer; transition: background var(--transition-fast), border-color var(--transition-fast); } .header-search-overlay .search-submit::before, .header-search-overlay .woocommerce-product-search button::before { content: ""; display: block; width: 14px; height: 14px; margin: 0 auto; background: center / 14px 14px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E0E0E0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E"); } .header-search-overlay .search-submit:hover, .header-search-overlay .woocommerce-product-search button:hover { background: rgba(155, 89, 182, 0.28); border-color: var(--color-primary-light); } /* -------------------------------------------------------------------------- Hero -------------------------------------------------------------------------- */ .hero { position: relative; display: flex; align-items: center; min-height: 80vh; padding-block: var(--space-4xl); background: linear-gradient(135deg, #0D0D0D 0%, #1A1A2E 50%, #16213E 100%); overflow: hidden; } .hero__overlay { position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 80%, rgba(155, 89, 182, 0.15) 0%, transparent 50%), radial-gradient(ellipse at 80% 20%, rgba(155, 89, 182, 0.1) 0%, transparent 50%); pointer-events: none; } .hero__content { position: relative; z-index: 1; max-width: 700px; } .hero__title { font-size: clamp(var(--fs-2xl), 5vw, var(--fs-4xl)); font-weight: var(--fw-black); letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: var(--space-lg); background: linear-gradient(135deg, #fff 0%, var(--color-primary-light) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero__subtitle { font-size: var(--fs-lg); color: var(--color-text-muted); line-height: var(--lh-relaxed); margin-bottom: var(--space-2xl); max-width: 550px; } /* -------------------------------------------------------------------------- Page Hero (Archive, Search, Blog) -------------------------------------------------------------------------- */ .page-hero { text-align: center; padding-block: var(--space-3xl); margin-bottom: var(--space-2xl); } .page-hero__title { margin-bottom: var(--space-md); } .page-hero__subtitle { color: var(--color-text-muted); font-size: var(--fs-md); max-width: 600px; margin-inline: auto; } /* -------------------------------------------------------------------------- Category Cards (Front Page) -------------------------------------------------------------------------- */ /* * 显式断点链，避开让 6 项余 1 的 5 列布局，3 列对 6/9/12 项都完美： * <520px : 1 列 * 520-859px : 2 列 → 6 项 = 2×3 * 860-1499px : 3 列 → 6 项 = 3×2 (整齐) * ≥1500px : 3 列 (保持整齐；如果以后类目数变多自然适配) */ .categories-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); } @media (min-width: 520px) { .categories-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 860px) { .categories-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .category-card { position: relative; display: block; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); transition: all var(--transition-normal); } .category-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-glow); border-color: var(--color-primary); } .category-card__image { aspect-ratio: 4 / 3; overflow: hidden; } .category-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); } .category-card:hover .category-card__image img { transform: scale(1.05); } .category-card__info { padding: var(--space-lg); } .category-card__title { font-size: var(--fs-md); margin-bottom: var(--space-xs); color: var(--color-text-heading); } .category-card__count { font-size: var(--fs-sm); color: var(--color-text-muted); } /* -------------------------------------------------------------------------- Feature Cards (Front Page) -------------------------------------------------------------------------- */ .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-xl); } .feature-card { text-align: center; padding: var(--space-2xl) var(--space-lg); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); transition: all var(--transition-normal); } .feature-card:hover { border-color: var(--color-primary); transform: translateY(-2px); } .feature-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; background: rgba(155, 89, 182, 0.1); border-radius: var(--radius-full); margin-bottom: var(--space-lg); color: var(--color-primary-light); } .feature-card__title { font-size: var(--fs-md); margin-bottom: var(--space-sm); } .feature-card p { color: var(--color-text-muted); font-size: var(--fs-sm); line-height: var(--lh-relaxed); } /* -------------------------------------------------------------------------- Home Facts / FAQ / Deferred blocks -------------------------------------------------------------------------- */ .home-facts__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-lg); } .home-facts__item { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-lg); } .home-facts__item h3 { font-size: var(--fs-md); margin-bottom: var(--space-sm); } .home-facts__item p { color: var(--color-text-muted); font-size: var(--fs-sm); line-height: var(--lh-relaxed); } .home-faq__list { display: grid; gap: var(--space-md); max-width: 900px; margin-inline: auto; } .home-faq__item { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-md) var(--space-lg); } .home-faq__item summary { cursor: pointer; font-weight: var(--fw-semibold); color: var(--color-text-heading); } .home-faq__item p { margin-top: var(--space-sm); color: var(--color-text-muted); font-size: var(--fs-sm); } /* Hint browser to skip offscreen rendering work for below-the-fold blocks. */ .home-deferred-block { content-visibility: auto; contain-intrinsic-size: 800px; } /* -------------------------------------------------------------------------- Policy quick facts block -------------------------------------------------------------------------- */ .cp-policy-quick-facts { margin-bottom: var(--space-xl); padding: var(--space-lg); background: linear-gradient(180deg, rgba(155, 89, 182, 0.08), rgba(155, 89, 182, 0.02)); border: 1px solid var(--color-border); border-radius: var(--radius-lg); } .cp-policy-quick-facts h2 { margin: 0 0 var(--space-sm); font-size: var(--fs-lg); } .cp-policy-quick-facts ul { margin: 0 0 var(--space-sm); padding-left: 1rem; color: var(--color-text-muted); } .cp-policy-quick-facts li + li { margin-top: 0.25rem; } .cp-policy-quick-facts__links { margin: 0 0 var(--space-sm); font-size: var(--fs-sm); } .cp-policy-quick-facts__links a { color: var(--color-primary-light); } .cp-policy-quick-facts details { margin-top: var(--space-sm); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-sm) var(--space-md); } .cp-policy-quick-facts summary { cursor: pointer; font-weight: var(--fw-semibold); } .cp-policy-quick-facts details p { margin-top: var(--space-xs); color: var(--color-text-muted); font-size: var(--fs-sm); } /* -------------------------------------------------------------------------- Post Cards (Blog Grid) -------------------------------------------------------------------------- */ .posts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-xl); } .post-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; transition: all var(--transition-normal); } .post-card:hover { border-color: var(--color-primary); transform: translateY(-3px); box-shadow: var(--shadow-md); } .post-card__thumbnail { aspect-ratio: 3 / 4; overflow: hidden; } .post-card__thumbnail img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); } .post-card:hover .post-card__thumbnail img { transform: scale(1.05); } .post-card__content { padding: var(--space-lg); } .post-card__meta { display: flex; align-items: center; gap: var(--space-md); font-size: var(--fs-xs); color: var(--color-text-muted); margin-bottom: var(--space-sm); text-transform: uppercase; letter-spacing: 0.05em; } .post-card__category a { color: var(--color-primary-light); } .post-card__title { font-family: var(--font-body); font-size: var(--fs-lg); font-weight: var(--fw-semibold); margin-bottom: var(--space-sm); } .post-card__title a { color: var(--color-text-heading); } .post-card__title a:hover { color: var(--color-primary-light); } .post-card__excerpt { color: var(--color-text-muted); font-size: var(--fs-sm); line-height: var(--lh-relaxed); margin-bottom: var(--space-md); } .post-card__read-more { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--fs-sm); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-primary-light); } .post-card__read-more:hover { color: var(--color-primary); } /* -------------------------------------------------------------------------- Single Content -------------------------------------------------------------------------- */ .single-content { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); padding-block: var(--space-2xl); box-sizing: border-box; } .single-content--photo-reviews { max-width: var(--container-max); padding-block: var(--space-xl); } .single-content--social-wall { max-width: var(--container-max); padding-block: var(--space-xl); } .entry-header { margin-bottom: var(--space-2xl); text-align: center; } .entry-title { margin-bottom: var(--space-md); } .entry-meta { display: flex; justify-content: center; gap: var(--space-lg); color: var(--color-text-muted); font-size: var(--fs-sm); } .entry-thumbnail { margin-bottom: var(--space-2xl); border-radius: var(--radius-lg); overflow: hidden; } .entry-content { font-size: var(--fs-md); line-height: var(--lh-relaxed); } .entry-content p { margin-bottom: var(--space-lg); } .entry-content h2, .entry-content h3, .entry-content h4 { margin-top: var(--space-2xl); margin-bottom: var(--space-md); } .entry-content ul, .entry-content ol { margin-bottom: var(--space-lg); padding-left: var(--space-xl); } .entry-content ul { list-style: disc; } .entry-content ol { list-style: decimal; } .entry-content li { margin-bottom: var(--space-sm); } .entry-content blockquote { border-left: 3px solid var(--color-primary); padding-left: var(--space-lg); margin: var(--space-xl) 0; font-style: italic; color: var(--color-text-muted); } .entry-content img { border-radius: var(--radius-md); } .entry-content a { text-decoration: underline; text-underline-offset: 2px; } /* Post Navigation */ .post-navigation { margin-top: var(--space-3xl); padding-top: var(--space-2xl); border-top: 1px solid var(--color-border); } .post-navigation .nav-links { display: flex; justify-content: space-between; gap: var(--space-xl); } .post-navigation .nav-label { display: block; font-size: var(--fs-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: var(--space-xs); } .post-navigation .nav-next { text-align: right; } /* Entry Footer */ .entry-footer { margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-border); } .entry-tags { font-size: var(--fs-sm); color: var(--color-text-muted); } .entry-tags a { color: var(--color-primary-light); } /* -------------------------------------------------------------------------- 404 Page -------------------------------------------------------------------------- */ .error-404 { text-align: center; padding-block: var(--space-4xl); } .error-404__code { font-size: clamp(5rem, 15vw, 12rem); font-weight: var(--fw-black); background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; margin-bottom: var(--space-md); } .error-404__title { font-size: var(--fs-2xl); margin-bottom: var(--space-md); } .error-404__message { color: var(--color-text-muted); font-size: var(--fs-md); max-width: 500px; margin-inline: auto; margin-bottom: var(--space-2xl); } .error-404__actions { display: flex; justify-content: center; gap: var(--space-md); margin-bottom: var(--space-2xl); flex-wrap: wrap; } .error-404__search { max-width: 400px; margin-inline: auto; } /* -------------------------------------------------------------------------- Pagination -------------------------------------------------------------------------- */ .pagination { margin-top: var(--space-3xl); text-align: center; } .pagination .nav-links { display: flex; justify-content: center; align-items: center; gap: var(--space-sm); flex-wrap: wrap; } .pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 var(--space-sm); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text); font-size: var(--fs-sm); font-weight: var(--fw-medium); transition: all var(--transition-fast); } .pagination .page-numbers:hover { border-color: var(--color-primary); color: var(--color-primary-light); } .pagination .page-numbers.current { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } /* -------------------------------------------------------------------------- No Results -------------------------------------------------------------------------- */ .no-results { text-align: center; padding-block: var(--space-4xl); } .no-results h2 { margin-bottom: var(--space-md); } .no-results p { color: var(--color-text-muted); margin-bottom: var(--space-xl); } .no-results .search-form { max-width: 400px; margin-inline: auto; display: flex; gap: var(--space-sm); } .no-results .search-field { flex: 1; padding: var(--space-sm) var(--space-md); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); } .no-results .search-field:focus { outline: none; border-color: var(--color-primary); } .no-results .search-submit { padding: var(--space-sm) var(--space-lg); background: var(--color-primary); color: #fff; border: none; border-radius: var(--radius-md); cursor: pointer; } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ .site-footer { background-color: var(--color-bg-alt); border-top: 1px solid var(--color-border); padding-top: var(--space-4xl); } .footer-widgets { display: grid; grid-template-columns: minmax(220px, 1.15fr) minmax(180px, 0.9fr) minmax(320px, 1.5fr) minmax(220px, 1fr); gap: var(--space-2xl); padding-bottom: var(--space-3xl); border-bottom: 1px solid var(--color-border); } .footer-widget-area { min-width: 0; } .footer-widget-area .widget-title { font-size: var(--fs-md); margin-bottom: var(--space-lg); color: var(--color-text-heading); text-transform: uppercase; letter-spacing: 0.05em; } .footer-widget-area p { color: var(--color-text-muted); font-size: var(--fs-sm); line-height: var(--lh-relaxed); margin-bottom: var(--space-sm); } .footer-menu { display: flex; flex-direction: column; gap: var(--space-sm); margin: 0; padding: 0; list-style: none; } .footer-menu a { color: var(--color-text-muted); font-size: var(--fs-sm); display: inline-block; transition: color var(--transition-fast); } .footer-menu a:hover { color: var(--color-primary-light); } .footer-company-text a, .footer-support-link { color: var(--color-primary-light); font-weight: var(--fw-medium); } .footer-widget-area--contact .footer-support-link { display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem 0.875rem; border: 1px solid rgba(155, 89, 182, 0.55); border-radius: var(--radius-md); background: rgba(155, 89, 182, 0.12); color: #f1dcff; font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: 1.2; transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast); } .footer-widget-area--contact .footer-support-link:hover { background: rgba(155, 89, 182, 0.22); border-color: rgba(155, 89, 182, 0.85); color: #ffffff; transform: translateY(-1px); } .footer-widget-area--policy .footer-policy-nav > .footer-menu { display: grid; grid-template-columns: repeat(2, minmax(140px, 1fr)); gap: var(--space-lg) var(--space-xl); } .footer-widget-area--policy .footer-menu > li > a { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-heading); } .footer-widget-area--policy .footer-menu .sub-menu { margin-top: var(--space-sm); padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.375rem; } .footer-widget-area--policy .footer-menu .sub-menu a { font-size: var(--fs-sm); font-weight: var(--fw-normal); letter-spacing: 0; text-transform: none; color: var(--color-text-muted); } /* Widget styles */ .widget { margin-bottom: var(--space-xl); } .widget:last-child { margin-bottom: 0; } .widget ul { display: flex; flex-direction: column; gap: var(--space-sm); } .widget ul a { color: var(--color-text-muted); font-size: var(--fs-sm); } .widget ul a:hover { color: var(--color-primary-light); } /* Footer Bottom */ .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-block: var(--space-xl); } .footer-copyright p { font-size: var(--fs-sm); color: var(--color-text-muted); } .footer-copyright a { color: var(--color-primary-light); } .back-to-top { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text-muted); transition: all var(--transition-fast); } .back-to-top:hover { border-color: var(--color-primary); color: var(--color-primary-light); transform: translateY(-2px); } /* -------------------------------------------------------------------------- Forms (Generic) -------------------------------------------------------------------------- */ input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="url"], input[type="tel"], input[type="number"], textarea, select { width: 100%; padding: 0.625rem var(--space-md); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text); font-size: var(--fs-base); transition: border-color var(--transition-fast); } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(155, 89, 182, 0.2); } ::placeholder { color: var(--color-text-muted); opacity: 0.7; } /* -------------------------------------------------------------------------- Plugin Accommodation — Generic Containers -------------------------------------------------------------------------- These styles provide sensible dark-theme defaults for common plugin-injected elements (badges, notices, modals) so they don't appear unstyled. Plugins should ship their own CSS and can override these with higher specificity. -------------------------------------------------------------------------- */ /* Generic badge styling (e.g. "New", "Hot", "Sale" from plugins) */ .woocommerce ul.products li.product [class*="badge"] { font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.08em; border-radius: var(--radius-sm); z-index: 5; } /* Generic notice box (plugins may inject before add-to-cart form) */ .woocommerce div.product .woocommerce-variation-add-to-cart .single_add_to_cart_button, .woocommerce div.product [class*="notice"], .woocommerce div.product [class*="info-box"] { border-radius: var(--radius-md); } /* Ensure plugin modals/overlays sit above the header */ [class*="modal-overlay"], [class*="popup-overlay"], [class*="lightbox-overlay"] { z-index: 10000; } [class*="modal-content"], [class*="popup-content"], [class*="lightbox-content"] { z-index: 10001; } /* -------------------------------------------------------------------------- Responsive -------------------------------------------------------------------------- */ @media (max-width: 992px) { /* B7: Safe area for notch devices — width/insets explicit to avoid parent clipping */ .main-navigation { position: fixed; top: var(--header-height); left: 0; right: 0; bottom: 0; width: 100vw; height: calc(100vh - var(--header-height)); background: var(--color-surface); border-right: 1px solid var(--color-border); box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4); justify-content: flex-start; align-items: flex-start; padding: var(--space-xl); padding-bottom: max(var(--space-xl), env(safe-area-inset-bottom)); padding-left: max(var(--space-xl), env(safe-area-inset-left)); transform: translateX(-100%); transition: transform var(--transition-normal); z-index: 9999; overflow: hidden; } .main-navigation.is-toggled { transform: translateX(0); } /* Purple accent strip on mobile menu panel */ .main-navigation::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-light) 100%); opacity: 0.9; } [dir="rtl"] .main-navigation::before { left: auto; right: 0; } [dir="rtl"] .main-navigation { border-right: none; border-left: 1px solid var(--color-border); transform: translateX(100%); box-shadow: -4px 0 24px rgba(0, 0, 0, 0.4); } [dir="rtl"] .main-navigation.is-toggled { transform: translateX(0); } /* Mobile 2-column nav: left=level1 fixed, right=submenu scroll */ .main-navigation { /* Adaptive left rail: keep usable min, cap max, preserve space for right content */ --mnav-left-col-min: 92px; --mnav-left-col-max: 122px; --mnav-left-col: clamp(var(--mnav-left-col-min), 27vw, var(--mnav-left-col-max)); --mnav-right-gap: var(--space-sm); /* Remove vertical gaps so right panel is flush top/bottom */ padding-top: 0; padding-bottom: 0; padding-left: max(var(--space-md), env(safe-area-inset-left)); padding-right: 0; } .primary-menu { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; padding-right: 0; } .primary-menu > li { position: static; width: var(--mnav-left-col); } .primary-menu > li > a { padding: 0.7rem 0.6rem; min-height: 44px; font-size: 12px; letter-spacing: 0.02em; text-transform: uppercase; border-bottom: 1px solid var(--color-border); border-radius: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .primary-menu > li.active-top > a { background: rgba(155, 89, 182, 0.18); color: var(--color-primary-light); border-left: 2px solid var(--color-primary); padding-left: calc(0.6rem - 2px); } /* Keep current page styles neutral in mobile drawer to avoid multi-highlight */ .primary-menu > li.current-menu-item > a, .primary-menu > li.current-menu-ancestor > a { background: transparent; color: var(--color-text); border-left: none; padding-left: 0.6rem; } /* Right column: show only active top-level submenu */ .primary-menu > li > ul.sub-menu { display: none; position: absolute; top: 0; left: calc(var(--mnav-left-col) + var(--mnav-right-gap)); right: 0; bottom: 0; width: calc(100% - var(--mnav-left-col) - var(--mnav-right-gap)); min-width: calc(100% - var(--mnav-left-col) - var(--mnav-right-gap)); max-width: calc(100% - var(--mnav-left-col) - var(--mnav-right-gap)); margin: 0; padding: 0 0 0 0.5rem !important; overflow-y: auto; scrollbar-gutter: stable; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: rgba(10, 10, 18, 0.88); border-left: 1px solid rgba(155, 89, 182, 0.22); box-shadow: inset 8px 0 18px rgba(0, 0, 0, 0.2); } .mobile-submenu-header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; min-height: 34px; padding: 0.35rem 2.6rem 0.35rem 0.65rem; margin-left: -0.5rem; background: rgba(13, 13, 22, 0.96); border-bottom: 1px solid rgba(155, 89, 182, 0.24); } .mobile-submenu-title { font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-heading); } .mobile-submenu-all { display: inline-flex; align-items: center; justify-content: center; height: 22px; padding: 0 0.5rem; font-size: 10px; font-weight: var(--fw-semibold); color: var(--color-primary-light); background: rgba(155, 89, 182, 0.14); border: 1px solid rgba(155, 89, 182, 0.35); border-radius: var(--radius-full); } .primary-menu > li.active-top > ul.sub-menu, .primary-menu > li.sub-menu-open > ul.sub-menu { display: block; } /* Level 2 / 3 rows in right column */ .primary-menu > li > ul.sub-menu li { position: relative; width: 100%; } .primary-menu > li > ul.sub-menu a { display: flex; align-items: center; min-height: 42px; padding: 0.6rem 0.75rem; font-size: 13px; text-transform: none; border-bottom: 1px solid rgba(155, 89, 182, 0.12); } .primary-menu > li > ul.sub-menu li.menu-item-has-children > a { font-weight: var(--fw-semibold); } .primary-menu > li > ul.sub-menu li > ul.sub-menu { display: none; position: static; margin: 0; padding: 0 0 0 0.75rem !important; border-left: 1px solid rgba(155, 89, 182, 0.3); background: rgba(155, 89, 182, 0.06); } .primary-menu > li > ul.sub-menu li.sub-menu-open > ul.sub-menu { display: block; } .primary-menu > li > ul.sub-menu li > ul.sub-menu a { font-size: 12px; min-height: 38px; padding: 0.5rem 0.7rem 0.5rem 1rem; position: relative; } .primary-menu > li > ul.sub-menu li > ul.sub-menu a::before { content: ''; position: absolute; left: 0.45rem; top: 50%; width: 0.3rem; height: 0.3rem; border-radius: 999px; background: rgba(187, 119, 214, 0.75); transform: translateY(-50%); } /* Neutralize desktop mega multicolumn in mobile panel */ .primary-menu li.menu-item-has-mega > ul.sub-menu { column-count: 1 !important; column-gap: 0 !important; } /* Hide desktop advanced mega panel on mobile drawer */ .main-navigation .cp-mega-advanced-panel { display: none !important; } /* Mobile: render advanced custom HTML at right-column bottom */ .primary-menu > li > ul.sub-menu > li.mobile-submenu-custom-html { border: 0; padding: 0.5rem 0.65rem 0.8rem; } .mobile-submenu-custom-html-inner { padding-top: 0.55rem; border-top: 1px solid rgba(155, 89, 182, 0.22); } .mobile-submenu-custom-html .cp-mega-html-grid, .mobile-submenu-custom-html .cp-mega-character-grid { display: grid; grid-template-columns: 1fr; gap: 8px; } .mobile-submenu-custom-html .cp-mega-card, .mobile-submenu-custom-html .cp-mega-character, .mobile-submenu-custom-html .cp-mega-editorial a { display: block; min-height: 0; padding: 8px 10px; border: 1px solid rgba(155, 89, 182, 0.24); border-radius: var(--radius-sm); background: rgba(155, 89, 182, 0.08); color: var(--color-text); text-transform: none; } .mobile-submenu-custom-html .cp-mega-card__badge { display: inline-flex; align-items: center; justify-content: center; height: 16px; padding: 0 6px; border-radius: var(--radius-full); font-size: 9px; font-weight: 700; color: #fff; background: var(--color-primary); margin-bottom: 5px; } .mobile-submenu-custom-html .cp-mega-card__title, .mobile-submenu-custom-html .cp-mega-character strong { display: block; font-size: 12px; font-weight: var(--fw-semibold); color: var(--color-text-heading); margin-bottom: 3px; } .mobile-submenu-custom-html .cp-mega-card__desc, .mobile-submenu-custom-html .cp-mega-character span { display: block; font-size: 11px; line-height: 1.4; color: var(--color-text-muted); } .mobile-submenu-custom-html .cp-mega-promo { padding: 9px 10px; border: 1px solid rgba(155, 89, 182, 0.24); border-radius: var(--radius-sm); background: rgba(155, 89, 182, 0.1); } .mobile-submenu-custom-html .cp-mega-promo__kicker { display: inline-flex; height: 16px; padding: 0 6px; border-radius: var(--radius-full); font-size: 9px; font-weight: 700; color: #fff; background: var(--color-primary); } .mobile-submenu-custom-html .cp-mega-promo__title { margin: 6px 0 4px; font-size: 12px; color: var(--color-text-heading); } .mobile-submenu-custom-html .cp-mega-promo__text { margin: 0 0 7px; font-size: 11px; line-height: 1.4; color: var(--color-text-muted); } .mobile-submenu-custom-html .cp-mega-promo__actions { display: flex; flex-wrap: wrap; gap: 6px; } .mobile-submenu-custom-html .cp-mega-chip { display: inline-flex; align-items: center; justify-content: center; height: 24px; padding: 0 9px; border-radius: var(--radius-full); font-size: 10px; color: var(--color-primary-light); background: rgba(155, 89, 182, 0.12); border: 1px solid rgba(155, 89, 182, 0.32); } [dir="rtl"] .primary-menu > li.active-top > a, [dir="rtl"] .primary-menu > li.current-menu-item > a, [dir="rtl"] .primary-menu > li.current-menu-ancestor > a { border-right: none; padding-left: 0.6rem; padding-right: 0.6rem; } [dir="rtl"] .primary-menu > li.active-top > a { border-right: 2px solid var(--color-primary); padding-left: 0.6rem; padding-right: calc(0.6rem - 2px); } [dir="rtl"] .primary-menu > li > ul.sub-menu { left: 0; right: calc(var(--mnav-left-col) + var(--mnav-right-gap)); width: calc(100% - var(--mnav-left-col) - var(--mnav-right-gap)); min-width: calc(100% - var(--mnav-left-col) - var(--mnav-right-gap)); max-width: calc(100% - var(--mnav-left-col) - var(--mnav-right-gap)); padding-left: 0 !important; padding-right: 0.5rem !important; border-left: none; border-right: 1px solid rgba(155, 89, 182, 0.22); box-shadow: inset -8px 0 18px rgba(0, 0, 0, 0.2); } [dir="rtl"] .mobile-submenu-header { margin-left: 0; margin-right: -0.5rem; } [dir="rtl"] .primary-menu > li > ul.sub-menu li > ul.sub-menu { padding-left: 0 !important; padding-right: 0.75rem !important; border-left: none; border-right: 1px solid rgba(155, 89, 182, 0.3); } [dir="rtl"] .primary-menu > li > ul.sub-menu li > ul.sub-menu a { padding: 0.5rem 1rem 0.5rem 0.7rem; } [dir="rtl"] .primary-menu > li > ul.sub-menu li > ul.sub-menu a::before { left: auto; right: 0.45rem; } @media (max-width: 360px) { .main-navigation { --mnav-left-col-min: 84px; --mnav-left-col-max: 108px; --mnav-left-col: clamp(var(--mnav-left-col-min), 29vw, var(--mnav-left-col-max)); } } /* Rotate arrow when sub-menu open on mobile */ .primary-menu li.menu-item-has-children.sub-menu-open > a::after { transform: rotate(180deg); } .menu-toggle { display: flex; } .mobile-menu-close { position: absolute; top: max(6px, env(safe-area-inset-top)); right: max(4px, env(safe-area-inset-right)); display: none; align-items: center; justify-content: center; width: 30px; height: 30px; background: rgba(26, 26, 46, 0.92); border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text); font-size: 16px; line-height: 1; z-index: 10002; } .main-navigation.is-toggled .mobile-menu-close { display: inline-flex; } [dir="rtl"] .mobile-menu-close { right: auto; left: max(4px, env(safe-area-inset-left)); } [dir="rtl"] .mobile-submenu-header { padding-left: 2.6rem; padding-right: 0.65rem; } /* B6: Fullscreen overlay when menu open (mobile only) — theme dark + subtle purple */ .menu-overlay { display: none; position: fixed; inset: 0; background: rgba(13, 13, 13, 0.85); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 998; opacity: 0; transition: opacity 0.25s ease; } body.menu-open .menu-overlay { display: block; opacity: 1; } /* B8: Prevent background scroll when menu open */ body.menu-open { overflow: hidden; touch-action: none; } /* Fix: When menu open, header must not be clipped — main-navigation is inside header */ body.menu-open.header-scrolled-down .site-header { transform: none !important; clip-path: none !important; } } /* Hide overlay on desktop */ @media (min-width: 993px) { .menu-overlay { display: none !important; } } @media (max-width: 768px) { :root { --container-pad: 1rem; --header-height: 64px; } .hero { min-height: 60vh; } .hero__title { font-size: var(--fs-2xl); } .posts-grid { grid-template-columns: 1fr; } .features-grid { grid-template-columns: 1fr; } .footer-widgets { grid-template-columns: 1fr; gap: var(--space-xl); } .footer-widget-area--policy .footer-policy-nav > .footer-menu { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; gap: var(--space-md); text-align: center; } .post-navigation .nav-links { flex-direction: column; } .post-navigation .nav-next { text-align: left; } } @media (max-width: 480px) { .error-404__actions { flex-direction: column; align-items: center; } .btn--lg { width: 100%; } } /* -------------------------------------------------------------------------- Mobile Hardening (theme-wide) -------------------------------------------------------------------------- */ @media (max-width: 992px) { /* Mobile: 3-column layout — hamburger left, LOGO center, icons right */ .header-inner { position: relative; display: flex; justify-content: space-between; gap: 0; } .site-branding { position: absolute; left: 50%; transform: translateX(-50%); width: auto; max-width: 56%; min-width: 0; justify-content: center; text-align: center; pointer-events: auto; } .site-branding a { display: flex; justify-content: center; align-items: center; } .site-branding .site-title { font-size: clamp(0.9rem, 3.8vw, 1.15rem); letter-spacing: 0.03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .header-actions { flex: 1; display: flex; justify-content: flex-start; align-items: center; gap: 0; } /* Left pair (hamburger+search) and right pair (lang+cart) closer together */ .menu-toggle { margin-right: 2px; } .header-cart { margin-left: 2px; } /* Spacer pushes hamburger+search left, lang+cart right; LOGO overlays center */ .header-actions::before { content: ''; flex: 1; order: 3; min-width: 0; } /* Order: hamburger, search (next to menu), spacer, language, cart */ .menu-toggle { order: 1; flex-shrink: 0; } .header-search-toggle { order: 2; flex-shrink: 0; } .header-actions > *:not(.menu-toggle):not(.header-search-toggle):not(.header-account):not(.header-cart) { order: 4; flex-shrink: 0; } .header-account { order: 5; flex-shrink: 0; } .header-cart { order: 6; } /* Touch targets ≥44px for accessibility (B1/B2) */ .header-search-toggle, .header-account, .header-cart, .menu-toggle { min-width: 40px; min-height: 40px; width: 40px; height: 40px; } .menu-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 0; } .menu-toggle .hamburger-line { width: 18px; height: 2px; } .main-navigation { padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: max(var(--space-md), env(safe-area-inset-left)) !important; } [dir="rtl"] .main-navigation { padding-left: 0 !important; padding-right: max(var(--space-md), env(safe-area-inset-right)) !important; } } @media (max-width: 768px) { .container { padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)); } .header-inner { gap: 0; } .site-branding { max-width: 60%; } .header-search-overlay { padding: var(--space-md) 0; } .header-search-overlay .search-field, .header-search-overlay .woocommerce-product-search .search-field { padding-right: 40px; } .header-search-overlay .search-submit, .header-search-overlay .woocommerce-product-search button { width: 28px; height: 28px; right: 5px; } .site-main { min-height: calc(100vh - var(--header-height) - 240px); } } @media (max-width: 480px) { .site-branding { max-width: 62%; } .site-branding .custom-logo { height: 44px; max-height: 44px; max-width: 180px; } } /* -------------------------------------------------------------------------- Language Switcher (Phase 1) -------------------------------------------------------------------------- */ .cp-lang-switcher { margin: var(--space-md) 0; } .cp-lang-switcher__list { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; } .cp-lang-switcher__item a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 32px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted); font-size: 12px; font-weight: 600; text-decoration: none; transition: all 0.2s ease; } .cp-lang-switcher__item a:hover { color: var(--color-text); border-color: var(--color-primary-light); } .cp-lang-switcher__item.is-current a { background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light)); border-color: transparent; color: #fff; } .cp-lang-switcher--footer { max-width: var(--container-max); margin: 14px auto 0; padding-inline: var(--container-pad); } .cp-lang-switcher--header { margin: 0; } /* Mobile: compact language button to match search/cart icon size */ @media (max-width: 992px) { .cp-lang-switcher--compact.cp-lang-switcher--header .cp-lang-switcher__summary { width: 36px; min-width: 36px; max-width: 36px; min-height: 36px; height: 36px; justify-content: center; padding: 0 2px; gap: 1px; font-size: 10px; border-radius: 999px; } .cp-lang-switcher--compact.cp-lang-switcher--header .cp-lang-switcher__summary::after { width: 3px; height: 3px; } } .cp-lang-switcher--menu { margin: 0; } .menu-item-language-switcher { display: flex; align-items: center; } /* Compact dropdown mode for header/menu to avoid occupying large space */ .cp-lang-switcher--compact .cp-lang-switcher__dropdown { position: relative; z-index: 10002; } .cp-lang-switcher--compact .cp-lang-switcher__summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); font-size: 12px; font-weight: 600; font-family: inherit; } .cp-lang-switcher--compact button.cp-lang-switcher__summary { cursor: pointer; } .cp-lang-switcher--compact .cp-lang-switcher__summary { -webkit-appearance: none; appearance: none; } .cp-lang-switcher--compact .cp-lang-switcher__summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid var(--color-text-muted); border-bottom: 1.5px solid var(--color-text-muted); transform: rotate(45deg) translateY(-1px); } .cp-lang-switcher--compact .cp-lang-switcher__dropdown.is-open .cp-lang-switcher__summary::after { transform: rotate(-135deg) translateY(-1px); } /* Mobile header final override: keep language switcher compact. */ @media (max-width: 992px) { .cp-lang-switcher--compact.cp-lang-switcher--header .cp-lang-switcher__summary, .cp-lang-switcher--compact.cp-lang-switcher--header button.cp-lang-switcher__summary { width: 36px !important; min-width: 36px !important; max-width: 36px !important; height: 36px !important; min-height: 36px !important; padding: 0 2px !important; gap: 1px !important; font-size: 10px !important; line-height: 1 !important; border-radius: 999px !important; justify-content: center !important; } .cp-lang-switcher--compact.cp-lang-switcher--header .cp-lang-switcher__summary::after { width: 3px !important; height: 3px !important; } } .cp-lang-switcher--compact .cp-lang-switcher__dropdown.is-open .cp-lang-switcher__menu { display: block !important; } .cp-lang-switcher--compact .cp-lang-switcher__menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 10002; min-width: 78px; padding: 6px; margin: 0; list-style: none; border: 1px solid var(--color-border); border-top: 2px solid var(--color-primary); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-lg), 0 0 20px rgba(155, 89, 182, 0.12); } .cp-lang-switcher__menu-item a { display: block; padding: 6px 8px; border-radius: 8px; text-align: center; font-size: 12px; font-weight: 600; color: var(--color-text-muted); text-decoration: none; } .cp-lang-switcher__menu-item a:hover { background: var(--color-bg-alt); color: var(--color-text); } .cp-lang-switcher__menu-item.is-current a { background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light)); color: #fff; } /* -------------------------------------------------------------------------- C7: High contrast focus outline for accessibility -------------------------------------------------------------------------- */ .menu-toggle:focus-visible, .header-search-toggle:focus-visible, .header-account:focus-visible, .header-cart:focus-visible, .primary-menu a:focus-visible { outline: 2px solid var(--color-primary-light); outline-offset: 2px; } /* -------------------------------------------------------------------------- Reduced motion (C6) — respect user preference -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .main-navigation, .primary-menu li a, .primary-menu li ul.sub-menu, .menu-toggle, .header-search-toggle, .header-account, .header-cart, .header-search-overlay, .site-header, .menu-overlay { transition: none !important; } } /* -------------------------------------------------------------------------- Hero (P1 upgrade): background carousel + eyebrow + double CTA + quick facts -------------------------------------------------------------------------- */ .hero { min-height: 70vh; } @media (max-width: 768px) { .hero { min-height: 60vh; } } .hero--has-bg { background: #0d0d0d !important; } .hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 900ms ease-in-out; will-change: opacity; } .hero__slide.is-active { opacity: 1; } .hero__bg img, .hero__bg picture, .hero__bg-img, .hero__slide img, .hero__slide picture { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; } .hero--has-bg .hero__overlay { background: linear-gradient(105deg, rgba(13, 13, 13, 0.62) 0%, rgba(13, 13, 13, 0.32) 45%, rgba(13, 13, 13, 0.05) 75%, rgba(13, 13, 13, 0) 100%), linear-gradient(180deg, rgba(13, 13, 13, 0) 50%, rgba(13, 13, 13, 0.55) 100%), radial-gradient(ellipse at 80% 20%, rgba(155, 89, 182, 0.16) 0%, transparent 55%); } .hero__dots { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 3; margin: 0; padding: 0; list-style: none; } .hero__dot { width: 32px; height: 4px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, 0.35); cursor: pointer; padding: 0; transition: background var(--transition-fast, 0.2s); } .hero__dot:hover, .hero__dot:focus-visible { background: rgba(255, 255, 255, 0.6); outline: none; } .hero__dot.is-active { background: #fff; width: 48px; } @media (prefers-reduced-motion: reduce) { .hero__slide { transition: none; } } .hero__eyebrow { display: inline-block; color: var(--color-primary-light, #d8b4fe); font-size: var(--fs-xs); letter-spacing: 0.18em; text-transform: uppercase; font-weight: var(--fw-semibold, 600); margin: 0 0 var(--space-md); padding: 6px 12px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(2px); } .hero__cta-row { display: flex; flex-wrap: wrap; gap: var(--space-md); margin: var(--space-xl) 0 var(--space-2xl); } .hero__quick-facts { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); max-width: 640px; } .hero__quick-facts li { display: flex; flex-direction: column; gap: 2px; color: rgba(255, 255, 255, 0.86); font-size: var(--fs-sm); line-height: var(--lh-snug, 1.35); padding-left: var(--space-md); border-left: 1px solid rgba(255, 255, 255, 0.22); } .hero__quick-facts strong { font-size: var(--fs-md); font-weight: var(--fw-bold, 700); color: #fff; } .hero__quick-facts span { color: rgba(255, 255, 255, 0.7); } /* -------------------------------------------------------------------------- Section heading helper -------------------------------------------------------------------------- */ .section__heading { text-align: center; margin-bottom: var(--space-2xl); } .section__heading .section__title { margin-bottom: var(--space-sm); } .section__subtitle { color: var(--color-text-muted); font-size: var(--fs-md); max-width: 620px; margin-inline: auto; line-height: var(--lh-relaxed); } /* -------------------------------------------------------------------------- IP Picks grid (Shop by Series) -------------------------------------------------------------------------- */ /* * 显式断点链，刻意避开让 8 项余 1 的 7 列布局： * <560px : 2 列 → 8 项 = 2×4 * 560-859px : 3 列 → 8 项 = 3+3+2 * 860-1199px : 4 列 → 8 项 = 4×2 (整齐) * 1200-1499px : 5 列 → 8 项 = 5+3 * ≥1500px : 6 列 → 8 项 = 6+2 * 未来项数变动 (6/9/10/12) 也都能落到饱满或接近饱满的最后一行。 */ .ip-picks-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); } @media (min-width: 560px) { .ip-picks-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 860px) { .ip-picks-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 1200px) { .ip-picks-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } } @media (min-width: 1500px) { .ip-picks-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } } .ip-pick { --ip-accent: var(--color-primary, #6b3fa0); position: relative; display: flex; flex-direction: column; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal); color: inherit; text-decoration: none; } .ip-pick:hover { transform: translateY(-4px); border-color: var(--ip-accent); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25); } .ip-pick__media { aspect-ratio: 1 / 1; overflow: hidden; background: linear-gradient(135deg, var(--ip-accent) 0%, rgba(0, 0, 0, 0.6) 100%); position: relative; } .ip-pick__media img, .ip-pick__media picture { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--transition-slow); } .ip-pick:hover .ip-pick__media img, .ip-pick:hover .ip-pick__media picture { transform: scale(1.05); } .ip-pick__placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: var(--space-md); text-align: center; color: #fff; font-weight: var(--fw-bold, 700); font-size: var(--fs-lg); letter-spacing: 0.04em; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); background: linear-gradient(135deg, var(--ip-accent) 0%, rgba(0, 0, 0, 0.6) 100%); } .ip-pick__label { display: flex; align-items: center; justify-content: space-between; padding: var(--space-md) var(--space-lg); font-size: var(--fs-sm); font-weight: var(--fw-semibold, 600); color: var(--color-text-heading); } .ip-pick__arrow { color: var(--ip-accent); transition: transform var(--transition-normal); } .ip-pick:hover .ip-pick__arrow { transform: translateX(4px); } /* -------------------------------------------------------------------------- Home "About DonkiCosplay" GEO facts block - 自然语言段 + 事实卡片 dl，让 LLM/AI Overview 可摘抄 -------------------------------------------------------------------------- */ .home-about .container--narrow { max-width: 920px; } .home-about__intro { font-size: var(--fs-md); line-height: 1.85; color: rgba(255, 255, 255, 0.88); max-width: 780px; margin: 0 auto var(--space-2xl); text-align: center; } .home-about__facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); margin: 0; padding: 0; } .home-about__fact { display: grid; grid-template-columns: minmax(0, 220px) 1fr; gap: var(--space-lg); padding: var(--space-md) var(--space-lg); background: var(--color-surface, #1A1A2E); border: 1px solid var(--color-border); border-radius: var(--radius-md); transition: border-color var(--transition-normal), transform var(--transition-normal); } .home-about__fact:hover { border-color: var(--color-primary-light, #9b7fc4); transform: translateY(-2px); } .home-about__fact dt { margin: 0; font-family: var(--font-heading); font-size: var(--fs-sm); font-weight: var(--fw-bold, 700); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-primary-light, #c5a3ff); } .home-about__fact dd { margin: 0; font-size: var(--fs-sm); line-height: 1.7; color: rgba(255, 255, 255, 0.82); } @media (max-width: 640px) { .home-about__intro { text-align: left; font-size: var(--fs-sm); } .home-about__fact { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); padding: var(--space-md); } .home-about__fact dt { font-size: var(--fs-xs); } } /* -------------------------------------------------------------------------- Home trust bar (payments & shipping) -------------------------------------------------------------------------- */ .home-trust-bar { background: var(--color-bg-alt, #111122); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); padding-block: var(--space-2xl); } .home-trust-bar__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-xl); } .home-trust-bar__group { display: flex; flex-direction: column; gap: var(--space-sm); } .home-trust-bar__label { font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); font-weight: var(--fw-semibold, 600); } .home-trust-bar__tags { display: flex; flex-wrap: wrap; gap: 8px; } .home-trust-bar__tags span { display: inline-flex; align-items: center; padding: 5px 12px; border: 1px solid var(--color-border); background: var(--color-surface, #1A1A2E); color: rgba(255, 255, 255, 0.88); border-radius: var(--radius-md, 6px); font-size: var(--fs-xs); font-weight: var(--fw-medium, 500); letter-spacing: 0.02em; transition: border-color var(--transition-fast, 0.2s), color var(--transition-fast, 0.2s), background var(--transition-fast, 0.2s); } .home-trust-bar__tags span:hover { border-color: rgba(187, 119, 214, 0.55); color: #fff; background: var(--color-surface-hover, #24243E); } @media (max-width: 640px) { .hero__quick-facts { grid-template-columns: 1fr; max-width: none; } .hero__quick-facts li { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.22); padding: var(--space-sm) 0 0; } .ip-picks-grid { gap: var(--space-md); } } /* -------------------------------------------------------------------------- Print (N4) — hide mobile UI, show full menu -------------------------------------------------------------------------- */ @media print { .menu-toggle, .menu-overlay { display: none !important; } .site-header-wrap { overflow: visible; } .main-navigation { position: static !important; transform: none !important; background: transparent !important; padding: 0 !important; } .primary-menu { flex-direction: row; flex-wrap: wrap; } .primary-menu li ul.sub-menu { position: static; display: block; max-height: none; padding: 0 0 0 var(--space-lg); } }