/** * Blade Legend Theme - Main Styles * * A sleek, modern dark theme for titanium tools * * @package Blade_Legend * @version 1.0.0 *//* ================================================================= CSS Variables ================================================================= */:root { /* Colors */ --color-bg: #121212; --color-bg-elevated: #1a1a1a; --color-bg-card: #202020; --color-bg-hover: #2a2a2a; --color-text: #fafafa; --color-text-muted: #a1a1aa; --color-text-subtle: #71717a; --color-primary: #f59e0b; --color-primary-hover: #fbbf24; --color-primary-muted: rgba(245, 158, 11, 0.15); --color-accent: #3b82f6; --color-success: #22c55e; --color-error: #ef4444; --color-border: #27272a; --color-border-hover: #3f3f46; /* Typography */ --font-display: 'Space Grotesk', system-ui, sans-serif; --font-body: 'DM Sans', system-ui, sans-serif; /* Spacing */ --section-padding: clamp(80px, 10vw, 140px); --container-max: 1280px; --container-padding: clamp(20px, 5vw, 40px); /* Transitions */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease; /* Shadows */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5); --shadow-glow: 0 0 40px rgba(245, 158, 11, 0.15); /* Border Radius */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-full: 9999px; }/* ================================================================= Reset & Base ================================================================= */*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }body { font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--color-text); background-color: var(--color-bg); overflow-x: hidden; }img { max-width: 100%; height: auto; display: block; }a { color: inherit; text-decoration: none; transition: color var(--transition-fast); }button { font-family: inherit; cursor: pointer; border: none; background: none; }ul, ol { list-style: none; }/* ================================================================= Layout ================================================================= */html { height: 100%; }body { min-height: 100%; display: flex; flex-direction: column; }.site-main, .archive-page, .single-post-wrapper { flex: 1 0 auto; }.site-footer { flex-shrink: 0; }.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-padding); }.container-narrow { max-width: min(800px, var(--container-max)); margin: 0 auto; padding: 0 var(--container-padding); }.site-main { padding-top: 112px; /* top notice 30px + 72px header + 10px spacing */ }body.top-notice-hidden .site-main { padding-top: 82px; /* 72px header + 10px spacing */ }/* 棣栭〉涓嶉渶瑕侀澶栫殑padding-top锛屽洜涓篽ero-section鏈夎嚜宸辩殑padding */.home .site-main,body.home .site-main { padding-top: 0; }/* ================================================================= Typography ================================================================= */h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }.section-tag { display: inline-block; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.15em; color: var(--color-primary); margin-bottom: 1rem; }.section-title { font-size: clamp(2rem, 5vw, 3.5rem); margin-bottom: 1rem; }.section-desc { font-size: 1.125rem; color: var(--color-text-muted); max-width: 600px; }.section-header { text-align: center; margin-bottom: clamp(40px, 6vw, 80px); }.section-header .section-desc { margin: 0 auto; }/* ================================================================= Buttons ================================================================= */.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.875rem 1.75rem; font-family: var(--font-display); font-size: 0.9375rem; font-weight: 600; border-radius: var(--radius-full); transition: all var(--transition-base); white-space: nowrap; }.btn svg { transition: transform var(--transition-base); }.btn:hover svg { transform: translateX(4px); }.btn-primary { background: var(--color-primary); color: #000; }.btn-primary:hover { background: var(--color-primary-hover); box-shadow: var(--shadow-glow); }.btn-outline { background: transparent; color: var(--color-text); border: 1px solid var(--color-border); }.btn-outline:hover { border-color: var(--color-primary); color: var(--color-primary); }.btn-ghost { background: transparent; color: var(--color-text-muted); }.btn-ghost:hover { color: var(--color-text); }.btn-lg { padding: 1rem 2rem; font-size: 1rem; }/* ================================================================= Header ================================================================= */.site-header { position: fixed; top: 30px; /* 椤堕儴閫氱煡鏉?30px */ left: 0; right: 0; z-index: 1000; background: rgba(10, 10, 11, 0.8); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--color-border); transition: all var(--transition-base); }/* 閫氱煡鏉￠殣钘忔椂锛宧eader 椤堕儴浣嶇疆璋冩暣 */body.top-notice-hidden .site-header { top: 0; }/* Top notice bar (10px). Hover 鏄剧ず鏂囧瓧鎻愮ず */.top-notice-bar { position: fixed; top: 0; left: 0; right: 0; height: 30px; background: var(--color-primary); z-index: 1100; }.top-notice-bar .container { height: 30px; display: flex; align-items: center; justify-content: center; pointer-events: auto; /* 鍏佽鍐呭鍐呴摼鎺ュ彲浜や簰 */ }.top-notice-text { display: inline-block; pointer-events: auto; color: #000; background: transparent; padding: 0; border-radius: 0; position: static; /* 寮哄埗鍗曡鏄剧ず锛岄厤鍚?marquee 鍔ㄧ敾婊氬姩 */ white-space: nowrap; overflow: visible; font-size: 0.85rem; line-height: 30px; /* 鍨傜洿灞呬腑瀵归綈 */ font-family: 'Inter', var(--font-body); font-weight: 300; margin: 0; text-align: left; }/* Marquee animation wrapper */.top-notice-marquee-wrapper { position: relative; width: 100%; height: 30px; overflow: hidden; }.top-notice-marquee { display: inline-block; white-space: nowrap; will-change: transform; /* 浠庡乏寰€鍙虫粴鍔紙璧风偣鍦ㄥ乏杈瑰渚э紝缁堢偣鍦ㄥ彸杈瑰渚э級 */ transform: translateX(-100%); /* 鍘熼€?12s锛岄檷浣庨€熷害 30% => 12s * 1.3 = 15.6s */ animation: notice-marquee 15.6s linear infinite; padding-left: 0; }.top-notice-text a { color: inherit; text-decoration: underline; }@keyframes notice-marquee { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }/* Respect users' reduced motion preference */@media (prefers-reduced-motion: reduce) { .top-notice-marquee { animation: none !important; transform: none !important; } }/* Pause animation when user hovers or focuses the wrapper (accessibility) */.top-notice-marquee-wrapper:hover .top-notice-marquee,.top-notice-marquee-wrapper:focus-within .top-notice-marquee,.top-notice-marquee-wrapper:focus .top-notice-marquee { animation-play-state: paused !important; will-change: auto; }.site-header .container { max-width: 100%; }.header-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }.site-logo .logo-text { font-family: var(--font-display); font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em; }.site-logo a:hover { color: var(--color-primary); }/* Navigation */.main-nav .nav-menu { display: flex; align-items: center; gap: 2.5rem; }.main-nav .nav-menu a { font-size: 0.9375rem; font-weight: 500; color: var(--color-text-muted); position: relative; }.main-nav .nav-menu a:hover,.main-nav .nav-menu .current-menu-item a { color: var(--color-text); }.main-nav .nav-menu a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: var(--color-primary); transition: width var(--transition-base); }.main-nav .nav-menu a:hover::after { width: 100%; }/* 褰撳墠椤甸潰椤圭殑涓嬪垝绾匡紝浣嗗綋榧犳爣鎮仠鍒板叾浠栭」鏃堕殣钘?*/.main-nav .nav-menu .current-menu-item a::after { width: 100%; }/* 褰撻紶鏍囨偓鍋滃埌浠讳綍鑿滃崟椤规椂锛岄殣钘忓綋鍓嶉〉闈㈤」鐨勪笅鍒掔嚎 */.main-nav .nav-menu:hover .current-menu-item a::after { width: 0; }/* 濡傛灉鎮仠鐨勯」姝ｅソ鏄綋鍓嶉〉闈㈤」锛屽垯鏄剧ず涓嬪垝绾?*/.main-nav .nav-menu .current-menu-item a:hover::after { width: 100%; }/* Header Actions */.header-actions { display: flex; align-items: center; gap: 1rem; }.header-cart { position: relative; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-full); color: var(--color-text-muted); transition: all var(--transition-fast); }.header-cart:hover { color: var(--color-text); background: var(--color-bg-hover); }.cart-count { position: absolute; top: 4px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px; font-size: 0.6875rem; font-weight: 700; line-height: 18px; text-align: center; color: #000; background: var(--color-primary); border-radius: var(--radius-full); }/* Mobile Toggle */.mobile-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; }.mobile-toggle span { display: block; width: 100%; height: 2px; background: #fafafa; border-radius: 1px; transition: all var(--transition-base); }/* ================================================================= Hero Section ================================================================= */.hero-section { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: calc(72px + var(--section-padding)) var(--container-padding) var(--section-padding); background-color: var(--color-bg); background-size: cover; background-position: center; overflow: hidden; }.hero-overlay { position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(10, 10, 11, 0.7) 0%, rgba(10, 10, 11, 0.5) 50%, rgba(10, 10, 11, 0.9) 100% ); }.hero-particles { position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 30%, rgba(245, 158, 11, 0.08) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(59, 130, 246, 0.06) 0%, transparent 50%); }.hero-section .container { position: relative; z-index: 1; }.hero-content { max-width: 800px; margin: 0 auto; text-align: center; }.hero-title { font-size: clamp(2.5rem, 7vw, 5rem); margin-bottom: 1.5rem; background: linear-gradient(135deg, #fff 0%, #a1a1aa 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; position: relative; }/* Typing caret & animation */.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }/* Per-letter reveal for hero title *//* typing effect removed - keep visually-hidden for accessibility fallback */.hero-subtitle { font-size: clamp(1.125rem, 2vw, 1.375rem); color: var(--color-text-muted); margin-bottom: 2.5rem; max-width: 600px; margin-left: auto; margin-right: auto; }.hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }/* Scroll Indicator */.scroll-indicator { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.75rem; color: var(--color-text-subtle); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.2em; }.scroll-line { width: 1px; height: 60px; background: linear-gradient(to bottom, var(--color-text-subtle), transparent); animation: scroll-pulse 2s ease-in-out infinite; }@keyframes scroll-pulse { 0%, 100% { opacity: 0.3; transform: scaleY(0.5); } 50% { opacity: 1; transform: scaleY(1); } }/* ================================================================= About Section ================================================================= */.about-section { padding: var(--section-padding) 0; background: var(--color-bg); }.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 80px); align-items: center; }.about-image { position: relative; }.about-image img { width: 100%; border-radius: var(--radius-lg); aspect-ratio: 4/3; object-fit: cover; }.about-image-placeholder { width: 100%; aspect-ratio: 4/3; background: var(--color-bg-card); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; color: var(--color-text-subtle); }.about-decor { position: absolute; border-radius: var(--radius-lg); z-index: -1; }.about-decor-1 { width: 60%; height: 60%; bottom: -20px; right: -20px; background: var(--color-primary-muted); }.about-decor-2 { width: 100px; height: 100px; top: -15px; left: -15px; border: 2px solid var(--color-border); }.about-content .section-tag { margin-bottom: 0.75rem; }.about-content .section-title { margin-bottom: 1.5rem; }.about-text { color: var(--color-text-muted); margin-bottom: 2rem; }.about-text p { margin-bottom: 1rem; }/* Stats */.about-stats { display: flex; gap: 2rem; margin-bottom: 2rem; padding: 1.5rem 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }.stat-item { text-align: left; }.stat-number { font-family: var(--font-display); font-size: 2.5rem; font-weight: 700; color: var(--color-primary); line-height: 1; }.stat-suffix { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--color-primary); }.stat-label { display: block; font-size: 0.875rem; color: var(--color-text-muted); margin-top: 0.25rem; }.about-actions { display: flex; gap: 1rem; }/* ================================================================= Projects Section (Kickstarter) ================================================================= */.projects-section { padding: var(--section-padding) 0; background: var(--color-bg-elevated); }.projects-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }.project-card { background: var(--color-bg-card); border-radius: var(--radius-lg); overflow: hidden; transition: all var(--transition-base); }.project-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }.project-link { display: block; }.project-image { position: relative; overflow: hidden; }/* 棣栭〉section淇濇寔鍥哄畾姣斾緥 */.projects-section .project-image { aspect-ratio: 3/2; }/* Archive椤甸潰鍏佽鑷劧楂樺害 */.projects-grid-archive .project-image { aspect-ratio: auto; }.project-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); }.project-card:hover .project-image img { transform: scale(1.05); }.project-placeholder { width: 100%; height: 100%; background: var(--color-bg-hover); display: flex; align-items: center; justify-content: center; color: var(--color-text-subtle); }.project-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity var(--transition-base); }.project-card:hover .project-overlay { opacity: 1; }.project-view { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.25rem; background: var(--color-primary); color: #000; font-size: 0.875rem; font-weight: 600; border-radius: var(--radius-full); transform: translateY(10px); transition: transform var(--transition-base); }.project-card:hover .project-view { transform: translateY(0); }.project-info { padding: 1.25rem; }.project-title { font-size: 1.125rem; font-weight: 600; margin-bottom: 0.5rem; transition: color var(--transition-fast); }.project-card:hover .project-title { color: var(--color-primary); }.project-excerpt { font-size: 0.875rem; color: var(--color-text-muted); margin-bottom: 0.75rem; }.project-badge { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; font-size: 0.75rem; font-weight: 600; color: #05ce78; background: rgba(5, 206, 120, 0.1); border-radius: var(--radius-full); }/* Archive Page - Masonry Layout */.projects-archive { padding-top: 112px; /* top notice 30px + 72px header + 10px spacing */ padding-bottom: var(--section-padding); background: var(--color-bg); }body.top-notice-hidden .projects-archive { padding-top: 82px; /* 72px header + 10px spacing */ }.projects-archive .archive-header { text-align: center; margin-bottom: clamp(40px, 6vw, 80px); padding-top: 0; }.projects-archive .archive-title { font-size: clamp(2rem, 5vw, 3.5rem); margin-bottom: 1rem; }.projects-archive .archive-desc { font-size: 1.125rem; color: var(--color-text-muted); max-width: 600px; margin: 0 auto; }/* 鐎戝竷娴佸竷灞€ - 浣跨敤 CSS Columns */.projects-grid-archive { column-count: 4; column-gap: 1.5rem; column-fill: balance; }.projects-grid-archive .project-card { break-inside: avoid; margin-bottom: 1.5rem; display: inline-block; width: 100%; }/* 鍝嶅簲寮忚皟鏁?*/@media (max-width: 1200px) { .projects-grid-archive { column-count: 3; } }@media (max-width: 768px) { .projects-grid-archive { column-count: 2; column-gap: 1rem; } }@media (max-width: 480px) { .projects-grid-archive { column-count: 1; } }.projects-footer,.products-footer { text-align: center; margin-top: clamp(40px, 5vw, 60px); }.projects-empty,.products-empty { text-align: center; padding: 60px 20px; color: var(--color-text-muted); }/* ================================================================= Products Section (WooCommerce) ================================================================= */.products-section { padding: var(--section-padding) 0; background: var(--color-bg); }.products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }.product-card { background: var(--color-bg-card); border-radius: var(--radius-lg); overflow: hidden; transition: all var(--transition-base); }.product-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }.product-link { display: block; }.product-image { position: relative; overflow: hidden; background: var(--color-bg-hover); /* responsive square: fill column width and keep 1:1 ratio */ width: 100%; aspect-ratio: 1; }.product-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); display: block; }.product-card:hover .product-image img { transform: scale(1.05); }.product-badge { position: absolute; top: 1rem; left: 1rem; padding: 0.375rem 0.75rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; border-radius: var(--radius-sm); }.product-badge.sale { background: var(--color-error); color: #fff; }.product-actions { position: absolute; bottom: 1rem; right: 1rem; opacity: 0; transform: translateY(10px); transition: all var(--transition-base); }.product-card:hover .product-actions { opacity: 1; transform: translateY(0); }.add-to-cart-btn { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: var(--color-primary); color: #000; border-radius: var(--radius-full); transition: all var(--transition-fast); }.add-to-cart-btn:hover { background: var(--color-primary-hover); transform: scale(1.1); }.product-info { padding: 1.25rem; }.product-title { font-size: 1rem; font-weight: 600; margin-bottom: 0.5rem; transition: color var(--transition-fast); }.product-card:hover .product-title { color: var(--color-primary); }.product-rating { display: flex; align-items: center; gap: 0.25rem; margin-bottom: 0.5rem; }.product-rating .star { color: var(--color-text-subtle); }.product-rating .star.filled { color: var(--color-primary); }.rating-count { font-size: 0.75rem; color: var(--color-text-subtle); margin-left: 0.25rem; }.product-price { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; }.product-price del { color: var(--color-text-subtle); font-weight: 400; font-size: 0.875rem; margin-right: 0.5rem; }.product-price ins { text-decoration: none; color: var(--color-primary); }/* ================================================================= Testimonials Section ================================================================= */.testimonials-section { padding: var(--section-padding) 0; background: var(--color-bg-elevated); }.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }.testimonial-card { background: var(--color-bg-card); border-radius: var(--radius-lg); padding: 2rem; position: relative; transition: all var(--transition-base); }.testimonial-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }.testimonial-quote-icon { position: absolute; top: 1.5rem; right: 1.5rem; }.testimonial-rating { display: flex; gap: 0.25rem; margin-bottom: 1rem; color: var(--color-primary); }.testimonial-text { font-size: 1.0625rem; line-height: 1.7; color: var(--color-text); margin-bottom: 1.5rem; }.testimonial-author { display: flex; align-items: center; gap: 0.75rem; }.author-avatar { width: 44px; height: 44px; background: var(--color-primary-muted); color: var(--color-primary); font-weight: 700; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; }.author-name { display: block; font-weight: 600; }.author-location { display: flex; align-items: center; gap: 0.25rem; font-size: 0.875rem; color: var(--color-text-muted); }/* ================================================================= Newsletter Section ================================================================= */.newsletter-section { padding: var(--section-padding) 0; background: var(--color-bg); }.newsletter-inner { position: relative; background: var(--color-bg-card); border-radius: var(--radius-lg); padding: clamp(40px, 6vw, 80px); overflow: hidden; }.newsletter-bg { position: absolute; inset: 0; overflow: hidden; }.newsletter-shape { position: absolute; border-radius: 50%; filter: blur(80px); }.newsletter-shape-1 { width: 400px; height: 400px; background: var(--color-primary-muted); top: -200px; right: -100px; }.newsletter-shape-2 { width: 300px; height: 300px; background: rgba(59, 130, 246, 0.1); bottom: -150px; left: -50px; }.newsletter-content { position: relative; max-width: 600px; margin: 0 auto; text-align: center; }.newsletter-title { font-size: clamp(1.75rem, 4vw, 2.5rem); margin-bottom: 1rem; }.newsletter-desc { color: var(--color-text-muted); margin-bottom: 2rem; }.newsletter-form .form-group { display: flex; gap: 0.75rem; max-width: 480px; margin: 0 auto 1rem; }.newsletter-form input[type="email"] { flex: 1; padding: 1rem 1.25rem; font-size: 1rem; color: var(--color-text); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-full); outline: none; transition: all var(--transition-fast); }.newsletter-form input[type="email"]:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-muted); }.newsletter-form input[type="email"]::placeholder { color: var(--color-text-subtle); }.newsletter-form .btn { flex-shrink: 0; }.newsletter-form .btn-loading { display: none; }.newsletter-form.is-loading .btn-text,.newsletter-form.is-loading .btn-icon { display: none; }.newsletter-form.is-loading .btn-loading { display: block; }.form-note { display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-size: 0.875rem; color: var(--color-text-subtle); }.newsletter-success { text-align: center; padding: 2rem 0; }.newsletter-success svg { color: var(--color-success); margin-bottom: 1rem; }.newsletter-success h3 { font-size: 1.5rem; margin-bottom: 0.5rem; }.newsletter-success p { color: var(--color-text-muted); }/* ================================================================= Footer ================================================================= */.site-footer { background: var(--color-bg); border-top: 1px solid var(--color-border); padding: clamp(60px, 8vw, 100px) 0 40px; }.footer-grid { display: grid; /* 涓夌瓑鍒嗗垪锛氬搧鐗?/ Information / Follow+Newsletter */ grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-bottom: 2.5rem; align-items: start; /* 璁╁垪椤堕儴瀵归綈 */ }.footer-logo { margin-bottom: 1rem; }.footer-logo .logo-text { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; }.footer-tagline { color: var(--color-text-muted); margin-bottom: 1.5rem; }.footer-social { display: flex; gap: 0.75rem; }.footer-social a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--color-text-muted); background: var(--color-bg-card); border-radius: var(--radius-full); transition: all var(--transition-fast); }.footer-social a:hover { color: var(--color-text); background: var(--color-bg-hover); transform: translateY(-2px); }.footer-col .widget-title { font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1.25rem; }.footer-widget ul { display: flex; flex-direction: column; gap: 0.75rem; }.footer-widget a { color: var(--color-text-muted); font-size: 0.9375rem; transition: color var(--transition-fast); }.footer-widget a:hover { color: var(--color-primary); }.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 2rem; border-top: 1px solid var(--color-border); }/* Center copyright text visually on larger screens without affecting nav */.footer-bottom { position: relative; }.footer-bottom .copyright { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; }@media (max-width: 768px) { /* On small screens the footer becomes column; restore normal flow */ .footer-bottom .copyright { position: static; transform: none; margin: 0; text-align: center; } }.copyright { font-size: 0.875rem; color: var(--color-text-subtle); }.footer-menu { display: flex; gap: 2rem; }.footer-menu a { font-size: 0.875rem; color: var(--color-text-muted); }.footer-menu a:hover { color: var(--color-text); }/* ================================================================= Footer - Refinements (typography, spacing, newsletter, social) ================================================================= */.footer-col h3,.footer-col .widget-title { color: var(--color-text); font-size: 0.95rem; margin-bottom: 0.75rem; letter-spacing: 0.02em; }.footer-slogan { font-family: var(--font-body); font-weight: 500; color: var(--color-text-muted); margin-bottom: 1rem; font-size: 0.95rem; }.footer-address { font-size: 0.9rem; color: var(--color-text-subtle); line-height: 1.5; margin-bottom: 0.75rem; }.footer-links,.footer-links ul { display: flex; flex-direction: column; gap: 0.35rem; /* 缂╁皬姣忛」闂磋窛锛屼娇鍒楄〃鏇寸揣鍑?*/ padding: 0; margin: 0; align-items: center; /* 鍒椾腑灞呬腑瀵归綈 */ }/* 涓績瀵归綈姣忎釜绛夊垎鍐呯殑鏂囧瓧骞朵娇鐢ㄥ垪甯冨眬 */.footer-col { text-align: center; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; }.footer-links a { color: var(--color-text-muted); font-size: 0.95rem; transition: color var(--transition-fast), transform var(--transition-fast); display: inline-block; padding: 2px 0; /* 鏇寸揣鍑戠殑鍨傜洿鍐呴棿璺?*/ }.footer-links a:hover { color: var(--color-primary); transform: translateX(4px); }.social-list { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; padding: 0; margin: 0; --icon-size: 20px; --icon-gap: 12px; --icon-color: var(--color-text-muted); gap: var(--icon-gap); }.social-list li { list-style: none; }.social-list .social-link { display: inline-flex; align-items: center; justify-content: center; width: calc(var(--icon-size) + 16px); height: calc(var(--icon-size) + 16px); border-radius: 50%; transition: all var(--transition-fast); color: var(--icon-color); text-decoration: none; }.social-list .social-link i { font-size: var(--icon-size); line-height: 1; }.social-list .social-link:hover { transform: translateY(-3px); color: var(--color-text); }/* Brand Theme - Uses official brand colors */.social-theme-brand .social-item-facebook .social-link { color: #1877f2; }.social-theme-brand .social-item-youtube .social-link { color: #ff0000; }.social-theme-brand .social-item-instagram .social-link { color: #e4405f; }.social-theme-brand .social-item-twitter .social-link { color: #000000; }.social-theme-brand .social-item-linkedin .social-link { color: #0a66c2; }.social-theme-brand .social-item-pinterest .social-link { color: #bd081c; }.social-theme-brand .social-item-tiktok .social-link { color: #000000; }.social-theme-brand .social-item-whatsapp .social-link { color: #25d366; }.social-theme-brand .social-item-reddit .social-link { color: #ff4500; }.social-theme-brand .social-item-twitch .social-link { color: #9146ff; }.social-theme-brand .social-item-discord .social-link { color: #5865f2; }.social-theme-brand .social-link:hover { background: rgba(0,0,0,0.05); }/* Solid Theme - Uniform solid icons (white/gray) */.social-theme-solid .social-link { color: var(--color-text); background: rgba(0,0,0,0.08); }.social-theme-solid .social-link:hover { background: rgba(0,0,0,0.15); color: var(--color-text); }/* Regular Theme - 淇濇寔鍝佺墝鍥炬爣锛屼粎鐢ㄥ渾鍦堟弿杈规晥鏋滐紙鍝佺墝鍥炬爣鏃?outline 鐗堟湰锛?*/.social-theme-regular .social-link { background: transparent; border: 2px solid var(--icon-color); color: var(--icon-color); }.social-theme-regular .social-link:hover { background: var(--icon-color); color: #fff; border-color: var(--icon-color); }.footer-newsletter .newsletter-row { display: flex; gap: 0.5rem; align-items: center; }/* 璋冩暣绗笁鍒楀竷灞€锛岃Follow Us鍖哄煙鍚戜笂瀵归綈 */.footer-follow-newsletter { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; /* 浠庨《閮ㄥ紑濮?*/ }.footer-follow-newsletter .follow-block { flex-shrink: 0; margin-bottom: 2rem; text-align: center; margin-top: 0; /* 纭繚娌℃湁椤堕儴闂磋窛 */ }.footer-follow-newsletter .newsletter-block { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }.footer-follow-newsletter h3 { margin-bottom: 0.5rem; }.footer-follow-newsletter .newsletter-row { display: flex; gap: 0.5rem; align-items: center; justify-content: center; max-width: 480px; margin: 0 auto; width: 100%; }.footer-follow-newsletter input[type="email"] { flex: 1; padding: 0.6rem 0.9rem; font-size: 0.95rem; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: transparent; color: var(--color-text); max-width: 360px; width: 100%; }.footer-follow-newsletter .btn-subscribe { background: var(--color-primary); color: #000; padding: 0.55rem 0.9rem; border-radius: var(--radius-md); font-weight: 700; font-size: 0.95rem; cursor: pointer; transition: background var(--transition-fast), transform var(--transition-fast); border: none; }.footer-newsletter input[type="email"] { flex: 1; padding: 0.6rem 0.9rem; font-size: 0.95rem; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: transparent; color: var(--color-text); }.footer-newsletter .btn-subscribe { background: var(--color-primary); color: #000; padding: 0.55rem 0.9rem; border-radius: var(--radius-md); font-weight: 700; font-size: 0.95rem; cursor: pointer; transition: background var(--transition-fast), transform var(--transition-fast); border: none; }.footer-newsletter .btn-subscribe:hover { background: var(--color-primary-hover); transform: translateY(-2px); }/* Small visual tweak: reduce footer vertical density on smaller screens */@media (max-width: 1024px) { .site-footer { padding-top: clamp(40px, 6vw, 70px); } }/* ================================================================= About Page ================================================================= */.about-page { padding-top: 112px;}body.top-notice-hidden .about-page { padding-top: 82px;}/* Meet The Founders Hero */.about-hero { padding: var(--section-padding) 0; background: var(--color-bg);}.founders-hero { position: relative; margin-bottom: clamp(60px, 8vw, 100px);}.founders-giant { font-family: var(--font-display); font-size: clamp(3rem, 10vw, 8rem); font-weight: 700; line-height: 0.9; letter-spacing: -0.03em; margin-bottom: 2rem; background: linear-gradient(135deg, #999999 60%, #71717a 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;}.founders-image-wrap { position: relative; width: 100%; max-width: 900px; border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 2.5rem;}.founders-main-image { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block;}.founders-profiles-under { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;}.founder-profile { padding: 1.5rem; background: var(--color-bg-card); border-radius: var(--radius-md); border: 1px solid var(--color-border); transition: border-color var(--transition-base);}.founder-profile:hover { border-color: var(--color-primary);}.founder-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem;}.founder-arrow { color: var(--color-primary); font-size: 1.25rem; font-weight: 700;}.founder-name { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; color: var(--color-text);}.founder-role { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-primary); margin-bottom: 1rem;}.founder-bio p { font-size: 0.9375rem; color: var(--color-text-muted); line-height: 1.65;}/* About Hero Grid */.about-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 60px); align-items: center; padding: clamp(40px, 6vw, 80px) 0; border-top: 1px solid var(--color-border);}.about-hero-title h1 { font-size: clamp(1.75rem, 4vw, 3rem); line-height: 1.15;}.about-hero-content p { font-size: 1rem; color: var(--color-text-muted); line-height: 1.7; margin-bottom: 1.5rem;}/* Featured Image Section */.about-image { padding: var(--section-padding) 0; background: var(--color-bg);}.about-image-wrapper { width: 100%; border-radius: var(--radius-lg); overflow: hidden;}.about-image-wrapper img { width: 100%; aspect-ratio: auto; height: auto; object-fit: cover; display: block;}/* Our Team Section */.about-team { padding: var(--section-padding) 0; background: var(--color-bg-elevated);}.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;}.team-card { background: var(--color-bg-card); border-radius: var(--radius-lg); padding: 2.5rem 1.5rem 2rem; text-align: center; border: 1px solid var(--color-border); transition: all var(--transition-base); position: relative; overflow: hidden;}.team-card::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 60%; height: 3px; background: linear-gradient(90deg, transparent, var(--color-primary), transparent); opacity: 0; transition: opacity var(--transition-base);}.team-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: rgba(245,158,11,0.3);}.team-card:hover::before { opacity: 1;}.team-avatar { width: 120px; height: 120px; border-radius: 50%; overflow: hidden; margin: 0 auto 1.5rem; border: 3px solid var(--color-primary); box-shadow: 0 0 0 4px var(--color-bg), 0 8px 24px rgba(0,0,0,0.3); background: var(--color-bg-hover); display: flex; align-items: center; justify-content: center; transition: transform var(--transition-base), box-shadow var(--transition-base);}.team-card:hover .team-avatar { transform: scale(1.05); box-shadow: 0 0 0 4px var(--color-bg), 0 12px 32px rgba(245,158,11,0.2);}.team-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block;}.team-name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; margin-bottom: 0.35rem; color: var(--color-text);}.team-role { display: inline-block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; color: var(--color-primary); margin-bottom: 1rem; padding: 0.25rem 0.75rem; background: var(--color-primary-muted); border-radius: var(--radius-full);}.team-bio { font-size: 0.875rem; color: var(--color-text-muted); line-height: 1.65; margin-bottom: 1.25rem;}.team-social { display: flex; justify-content: center; gap: 0.75rem;}.team-social a { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--color-bg-hover); color: var(--color-text-muted); font-size: 0.875rem; transition: all var(--transition-fast); border: 1px solid var(--color-border);}.team-social a:hover { background: var(--color-primary); color: #000; border-color: var(--color-primary); transform: translateY(-3px);}/* About Team Responsive */@media (max-width: 900px) { .team-grid { grid-template-columns: 1fr 1fr; }}@media (max-width: 768px) { .about-hero-grid { grid-template-columns: 1fr; } .founders-profiles-under { grid-template-columns: 1fr; } .team-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }}/* ================================================================= Animations ================================================================= */[data-animate] { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; }[data-animate="fade-up"].is-visible { opacity: 1; transform: translateY(0); }[data-animate="fade-left"] { transform: translateX(-30px); }[data-animate="fade-left"].is-visible { opacity: 1; transform: translateX(0); }[data-animate="fade-right"] { transform: translateX(30px); }[data-animate="fade-right"].is-visible { opacity: 1; transform: translateX(0); }/* ================================================================= Responsive ================================================================= */@media (max-width: 1024px) { :root { --container-padding: 20px; } .projects-grid, .products-grid { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 1fr 1fr; } }@media (max-width: 768px) { :root { --container-padding: 16px; --section-padding: clamp(50px, 8vw, 90px); } /* 榛樿闅愯棌涓诲鑸鍣紝閬垮厤鍦ㄦ湭鎵撳紑鏃跺崰鎹浐瀹氬尯鍩?*/ .main-nav { display: none; position: static; background: transparent; padding: 0; } /* 浠呭綋琚爣璁颁负鎵撳紑鏃舵墠浣滀负瑕嗙洊灞傛樉绀猴紙鐭殏閫傞厤鏈寕杞藉埌 portal 鐨勬儏鍐碉級 */ .main-nav.is-open { display: flex; position: fixed; top: 102px; /* top notice 30px + header 72px */ left: 0; right: 0; bottom: 0; background: rgba(10, 10, 11, 0.8); padding: 2rem; transform: none; transition: none; } /* 閫氱煡鏉￠殣钘忔椂锛岃彍鍗曟墦寮€浣嶇疆璋冩暣 */ body.top-notice-hidden .main-nav.is-open { top: 72px; /* 浠?header 72px */ } /* 榛樿闅愯棌涓诲鑸唴鐨勮彍鍗曪紙绉诲姩绔粎鍦ㄦ墦寮€鏃舵樉绀烘垨琚寕杞藉埌portal锛?*/ .main-nav .nav-menu { display: none; flex-direction: column; gap: 1.5rem; } /* 褰撲富瀵艰埅琚爣璁颁负鎵撳紑鏃讹紝鏄剧ず鍐呴儴鑿滃崟锛堝湪鎸傝浇鍓嶇煭鏆傜敓鏁堬級 */ .main-nav.is-open .nav-menu { display: block; } .main-nav .nav-menu a { font-size: 1.25rem; } .mobile-toggle { display: flex; } .about-grid { grid-template-columns: 1fr; } .about-image { order: -1; } .about-stats { flex-wrap: wrap; } .testimonials-grid { grid-template-columns: 1fr; } .projects-grid, .products-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; gap: 2rem; } .footer-bottom { flex-direction: column; gap: 1rem; text-align: center; } .newsletter-form .form-group { flex-direction: column; } .newsletter-inner { padding: 32px 20px; } .newsletter-form .form-group .btn { width: 100%; } .hero-cta { flex-direction: column; } .hero-cta .btn { width: 100%; } .about-actions { flex-direction: column; } .about-actions .btn { width: 100%; } .footer-follow-newsletter .newsletter-row { flex-direction: column; } .footer-follow-newsletter .newsletter-row input[type="email"] { max-width: 100%; } .footer-follow-newsletter .newsletter-row .btn-subscribe { width: 100%; } }/* ------------------------------------------------------------------ Mobile fixes: ensure top notice visible and add frosted glass menu ------------------------------------------------------------------ */@media (max-width: 768px) { /* 寮哄埗纭繚椤堕儴閫氱煡鏉″湪灏忓睆鍙锛堟煇浜涚幆澧冧細琚鐩栵級 */ .top-notice-bar { display: block !important; position: fixed; top: 0; left: 0; right: 0; height: 30px; z-index: 1200; background: var(--color-primary); } /* 淇濊瘉 header 鍦?notice 涓嬮潰 */ .site-header { top: 30px !important; /* 涓?notice 楂樺害涓€鑷?*/ z-index: 1100; } /* 閫氱煡鏉￠殣钘忔椂锛宧eader 椤堕儴浣嶇疆璋冩暣 */ body.top-notice-hidden .site-header { top: 0 !important; } /* 纾ㄧ爞鐜荤拑鏁堟灉锛氬崐閫忔槑鑳屾櫙 + backdrop blur */ .main-nav { background: rgba(10, 10, 11, 0.8) !important; background-color: rgba(10, 10, 11, 0.8) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 1150 !important; } /* 鑿滃崟椤瑰湪纾ㄧ爞鑳屾櫙涓婃洿鏄撹 */ .main-nav .nav-menu a { color: var(--color-text) !important; } /* 纭繚鎵撳紑鏃惰儗鏅笉琚鐩栵細褰撹彍鍗曟墦寮€鏃跺己鍒惰儗鏅壊 */ .main-nav.is-open { background: rgba(10, 10, 11, 0.8) !important; background-color: rgba(10, 10, 11, 0.8) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; } /* 鏀逛负鍗曚竴閫忔槑姣涚幓鐠冨崱鐗囷紙钖勭櫧杈广€侀珮妯＄硦銆佸渾瑙掞級锛屽苟绉婚櫎姣忛」鍗＄墖鍖栨牱寮忥紝閾炬帴鐧借壊灞呬腑 */ .main-nav .nav-menu { position: relative; z-index: 1160; /* 榛樿鍦ㄧЩ鍔ㄧ闅愯棌锛堜粎鍦ㄦ墦寮€鎴栨寕杞芥椂鏄剧ず锛?*/ display: none; flex-direction: column; gap: 1rem; padding: 2rem 1.5rem; margin: 0.8rem auto 0; width: calc(100% - 3rem); max-width: 720px; /* 閫忔槑鐜荤拑闈㈡澘锛氫繚鎸佽儗鏅彲瑙佸悓鏃舵湁鐧借壊钖勮竟 */ background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); border: 1px solid rgba(255,255,255,0.75); border-radius: 28px; box-shadow: 0 14px 40px rgba(0,0,0,0.45); backdrop-filter: blur(30px) saturate(140%); -webkit-backdrop-filter: blur(30px) saturate(140%); overflow: visible; } /* 鍐呬晶楂樺厜锛岃惀閫犺竟缂橀珮浜晥鏋滐紙涓嶉樆濉炰氦浜掞級 */ .main-nav .nav-menu::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -8px 20px rgba(0,0,0,0.12); } /* 閬僵绋嶆殫浣嗕笉杩囧己锛屼富瑕侀潬闈㈡澘杈规鍜屾ā绯婁笌鑳屾櫙鍒嗙 */ .main-nav::before { content: ''; position: fixed; inset: 0; background: rgba(0,0,0,0.42); z-index: 1140; display: none; } .main-nav.is-open::before { display: block; } /* 瑕嗙洊鍏堝墠缁欐瘡涓摼鎺ョ殑鍗＄墖鏍峰紡锛氱Щ闄よ儗鏅笌杈规锛岃閾炬帴浠ョ櫧鑹插眳涓枃鏈樉绀?*/ .main-nav .nav-menu li, .main-nav .nav-menu li a { background: transparent !important; border: none !important; box-shadow: none !important; } .main-nav .nav-menu a { display: block; padding: 0.6rem 0 !important; margin: 0; color: #ffffff !important; font-weight: 600; font-size: 1.05rem; text-align: center; text-shadow: none; transition: color 140ms ease, transform 120ms ease; } .main-nav .nav-menu a:hover, .main-nav .nav-menu a:focus { color: var(--color-primary) !important; transform: translateY(-2px); } .main-nav .nav-menu .sub-menu { background: transparent; padding-left: 0.5rem; } /* 褰?nav-menu 琚寕杞藉埌 body锛坧ortal锛夋椂锛岃皟鏁翠负娴姩鍗＄墖鏍峰紡 */ .nav-menu.is-mounted { position: relative; /* 鏀逛负鐩稿瀹氫綅锛岀敱portal鎺у埗浣嶇疆 */ max-width: 400px; width: 100%; max-height: 70vh; /* 闄愬埗楂樺害锛岄伩鍏嶅崰鐢ㄨ繃澶氬睆骞?*/ overflow: auto; -webkit-overflow-scrolling: touch; /* 浣跨敤娣辫壊鍗婇€忔槑鑳屾櫙锛屼繚鎸佹瘺鐜荤拑鎰熷悓鏃朵笌椤甸潰鍒嗙 */ background: rgba(10,10,11,0.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,0.06); color: var(--color-text); /* 纭繚鍐呴儴鏂囧瓧涓烘祬鑹?*/ display: block; /* 纭繚鎸傝浇鍚庡彲瑙?*/ } /* Portal overlay - 鏀逛负娴姩妯″紡锛屼笉鍏ㄥ睆瑕嗙洊 */ .bl-menu-portal { position: fixed; inset: 0; display: flex; align-items: center; /* 鍨傜洿灞呬腑 */ justify-content: center; /* 姘村钩灞呬腑 */ z-index: 1145; padding: 2rem; /* 娣诲姞鍐呰竟璺濓紝闃叉鑿滃崟璐磋竟 */ -webkit-tap-highlight-color: transparent; } .bl-menu-portal[aria-hidden="true"] { display: none; } /* 涓簆ortal娣诲姞鍗婇€忔槑鑳屾櫙閬僵锛屼絾涓嶄娇鐢ㄥ叏灞忔瘺鐜荤拑 */ .bl-menu-portal::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .bl-menu-portal .nav-menu { position: relative; z-index: 1; margin-top: 0; /* 绉婚櫎椤堕儴杈硅窛锛岃flex灞呬腑鐢熸晥 */ box-shadow: 0 20px 60px rgba(0,0,0,0.5); border-radius: 20px; overflow: hidden; } /* Force menu items to center and remove any boxed backgrounds that came from other rules */ .bl-menu-portal .nav-menu, .bl-menu-portal .nav-menu ul { width: 100%; display: block; padding: 1rem 0; /* 娣诲姞鍨傜洿鍐呰竟璺?*/ } .bl-menu-portal .nav-menu li { list-style: none; margin: 0; padding: 0; width: 100%; text-align: center; background: transparent !important; border: none !important; box-shadow: none !important; } .bl-menu-portal .nav-menu a { display: block !important; width: 100% !important; padding: 1rem 1.5rem !important; /* 澧炲姞鍐呰竟璺?*/ margin: 0; text-align: center !important; color: #ffffff !important; background: transparent !important; border: none !important; transition: background-color var(--transition-fast); } .bl-menu-portal .nav-menu a:hover { background: rgba(0,0,0,0.1) !important; } /* 瀛愯彍鍗曚繚鎸佸唴缂╀笖鍙锛堜繚鐣欙級 */ .main-nav .nav-menu .sub-menu { background: transparent; padding-left: 0.5rem; } } /* ================================================================= Language Switcher (Polylang) ================================================================= */ .lang-switcher{position:relative;display:inline-flex} .lang-toggle{display:flex;align-items:center;gap:0.5rem;padding:0.375rem 0.75rem;background:transparent;border:1px solid var(--color-border);border-radius:var(--radius-full);color:var(--color-text-muted);font-size:0.8125rem;font-weight:500;cursor:pointer;transition:all var(--transition-fast);white-space:nowrap} .lang-toggle:hover,.lang-toggle:focus-visible,.lang-switcher:hover .lang-toggle,.lang-switcher.lang-open .lang-toggle{color:var(--color-text);border-color:var(--color-primary);background:var(--color-bg-hover)} .lang-toggle .lang-flag{display:inline-flex;align-items:center;line-height:1} .lang-toggle .lang-flag img{width:18px;height:12px;border-radius:2px;object-fit:cover} .lang-chevron{opacity:0.5;transition:transform var(--transition-fast)} .lang-switcher:hover .lang-chevron,.lang-switcher.lang-open .lang-chevron{opacity:1;transform:rotate(180deg)} .lang-dropdown{position:absolute;top:calc(100% + 0.5rem);right:0;margin:0;padding:0.5rem 0;list-style:none;background:rgba(20,20,22,0.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--color-border);border-radius:12px;min-width:150px;opacity:0;visibility:hidden;transform:translateY(-4px);transition:all var(--transition-fast);z-index:1001;box-shadow:0 12px 40px rgba(0,0,0,0.4)} .lang-switcher:hover .lang-dropdown,.lang-switcher.lang-open .lang-dropdown,.lang-toggle:focus-visible+.lang-dropdown,.lang-dropdown:focus-within{opacity:1;visibility:visible;transform:translateY(0)} .lang-dropdown li{margin:0;padding:0} .lang-dropdown a{display:flex;align-items:center;gap:0.5rem;padding:0.5rem 1rem;color:var(--color-text-muted);font-size:0.8125rem;font-weight:500;text-decoration:none;transition:all var(--transition-fast)} .lang-dropdown a:hover{color:var(--color-text);background:var(--color-bg-hover)} .lang-dropdown .lang-flag img{width:18px;height:12px;border-radius:2px;object-fit:cover} @media(max-width:767px){.lang-toggle{padding:0.5rem 0.625rem;font-size:0.75rem;min-height:38px}.lang-toggle .lang-name{display:none}.lang-toggle .lang-flag img{width:20px;height:14px}.lang-chevron{width:10px;height:10px}.lang-dropdown{min-width:160px;right:auto;left:0;padding:0.375rem 0;border-radius:10px;top:calc(100% + 0.375rem)}.lang-dropdown a{padding:0.5rem 0.875rem;font-size:0.8125rem}} /* ================================================================= Footer - Unified dark theme across all pages Blog/WooCommerce pages override CSS variables to light theme, so we force footer to always use dark black-gold variables. ================================================================= */ .site-footer.site-footer { --color-bg: #0a0a0a !important; --color-bg-elevated: #141414 !important; --color-bg-card: #202020 !important; --color-bg-hover: #2a2a2a !important; --color-text: #fafafa !important; --color-text-muted: #a1a1aa !important; --color-text-subtle: #71717a !important; --color-border: #27272a !important; --color-border-hover: #3f3f46 !important; --color-primary: #f59e0b !important; --color-primary-hover: #fbbf24 !important; background-color: #0a0a0a !important; color: #a1a1aa !important; border-top-color: #27272a !important; } .site-footer.site-footer .footer-logo, .site-footer.site-footer .logo-text, .site-footer.site-footer h3, .site-footer.site-footer .widget-title, .site-footer.site-footer .footer-col h3 { color: #fafafa !important; } .site-footer.site-footer a:not(.social-link):not(.btn-subscribe) { color: #a1a1aa !important; } .site-footer.site-footer a:not(.social-link):not(.btn-subscribe):hover { color: #f59e0b !important; } .site-footer.site-footer .btn-subscribe { background: #f59e0b !important; color: #000 !important; } .site-footer.site-footer .btn-subscribe:hover { background: #fbbf24 !important; } .site-footer.site-footer input[type="email"] { background: transparent !important; border-color: #27272a !important; color: #fafafa !important; } .site-footer.site-footer .footer-bottom { border-top-color: #27272a !important; } .site-footer.site-footer .copyright { color: #71717a !important; }