/* Theme Name: Logic Node Forge Theme URI: https://logic-node.com Author: Logic Node Author URI: https://logic-node.com Description: High-conversion variant of the Logic Node theme. Compact layout, four switchable color schemes (Cyber, Volt, Matrix, Ember), and optimized product pages. Self-hosted AI chatbots, automations, and indie web hosting — locally run on real hardware. Version: 1.0.0 Requires at least: 6.0 Tested up to: 6.7 Requires PHP: 8.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: ln-forge Tags: dark, technology, woocommerce, custom-menu, full-width-template */ /* ============================================================= GOOGLE FONTS ============================================================= */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap'); /* ============================================================= COLOR SCHEMES Apply via Default is scheme-cyber ============================================================= */ /* ── Cyber (default) — electric cyan on deep navy ── */ :root, body.scheme-cyber { --accent: #00d2ff; --accent-2: #0090cc; --accent-glow: rgba(0,210,255,0.18); --accent-faint: rgba(0,210,255,0.06); --badge-bg: rgba(0,210,255,0.1); --badge-border: rgba(0,210,255,0.3); --bg: #03070e; --bg2: #050d1a; --surf: #091524; --surf2: #0d1f35; --bdr: rgba(0,210,255,0.10); --bdr-md: rgba(0,210,255,0.22); --bdr-hi: rgba(0,210,255,0.50); --text: #ddeeff; --text-muted: #6b84a3; --text-dim: #314d68; --green: #00e676; --purple: #7c3aed; --orange: #ff8c00; --scheme-name: "Cyber"; } /* ── Volt — electric violet + magenta ── */ body.scheme-volt { --accent: #a855f7; --accent-2: #7c3aed; --accent-glow: rgba(168,85,247,0.18); --accent-faint: rgba(168,85,247,0.06); --badge-bg: rgba(168,85,247,0.10); --badge-border: rgba(168,85,247,0.30); --bg: #07030f; --bg2: #0d0520; --surf: #130828; --surf2: #1a0d35; --bdr: rgba(168,85,247,0.10); --bdr-md: rgba(168,85,247,0.22); --bdr-hi: rgba(168,85,247,0.50); --text: #eddeff; --text-muted: #8a6aa3; --text-dim: #4d3168; --scheme-name: "Volt"; } /* ── Matrix — terminal green on near-black ── */ body.scheme-matrix { --accent: #00e676; --accent-2: #00b248; --accent-glow: rgba(0,230,118,0.15); --accent-faint: rgba(0,230,118,0.05); --badge-bg: rgba(0,230,118,0.08); --badge-border: rgba(0,230,118,0.25); --bg: #020804; --bg2: #041008; --surf: #071a0c; --surf2: #0a2412; --bdr: rgba(0,230,118,0.10); --bdr-md: rgba(0,230,118,0.22); --bdr-hi: rgba(0,230,118,0.50); --text: #d4ffe6; --text-muted: #5a8a6a; --text-dim: #284d36; --green: #00e676; --purple: #a855f7; --orange: #ff8c00; --scheme-name: "Matrix"; } /* ── Ember — hot orange on charcoal ── */ body.scheme-ember { --accent: #ff6b00; --accent-2: #cc4400; --accent-glow: rgba(255,107,0,0.16); --accent-faint: rgba(255,107,0,0.05); --badge-bg: rgba(255,107,0,0.08); --badge-border: rgba(255,107,0,0.25); --bg: #0a0602; --bg2: #130a03; --surf: #1c0f04; --surf2: #261405; --bdr: rgba(255,107,0,0.10); --bdr-md: rgba(255,107,0,0.22); --bdr-hi: rgba(255,107,0,0.50); --text: #fff0e6; --text-muted: #a07050; --text-dim: #5a3820; --green: #00e676; --purple: #a855f7; --orange: #ff6b00; --scheme-name: "Ember"; } /* ============================================================= SHARED DESIGN TOKENS ============================================================= */ :root { --font-display: 'Space Grotesk', sans-serif; --font-body: 'Inter', sans-serif; --font-mono: 'JetBrains Mono', monospace; --radius-sm: 6px; --radius: 10px; --radius-lg: 16px; --t: 0.2s ease; --t-md: 0.35s ease; --max-w: 1200px; --sp: 56px; /* section padding — compact vs old 100px */ --card-p: 1.4rem; /* card padding — tight */ } /* ============================================================= RESET & BASE ============================================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 0.95rem; line-height: 1.65; overflow-x: hidden; -webkit-font-smoothing: antialiased; } /* Scanline texture */ body::before { content: ''; position: fixed; inset: 0; background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.025) 2px, rgba(0,0,0,0.025) 4px); pointer-events: none; z-index: 9999; } a { color: var(--accent); text-decoration: none; transition: color var(--t); } a:hover { color: var(--text); } img { max-width: 100%; height: auto; display: block; } h1,h2,h3,h4,h5,h6 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: var(--text); } p { margin-bottom: 0.85em; } p:last-child { margin-bottom: 0; } ul, ol { padding-left: 1.5rem; } li { margin-bottom: 0.3em; } code, pre { font-family: var(--font-mono); font-size: 0.88em; background: var(--surf); border: 1px solid var(--bdr); border-radius: var(--radius-sm); } code { padding: 0.1em 0.4em; } pre { padding: 1rem 1.25rem; overflow-x: auto; margin-bottom: 1.2rem; } /* ============================================================= LAYOUT ============================================================= */ .container { max-width: var(--max-w); margin: 0 auto; padding: 0 20px; } .section { padding: var(--sp) 0; } .section-eyebrow { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 8px; margin-bottom: 0.6rem; } .section-eyebrow::before { content: ''; width: 20px; height: 2px; background: var(--accent); display: block; } .section-title { font-size: clamp(1.7rem, 3.5vw, 2.6rem); margin-bottom: 0.75rem; } .section-title span { color: var(--accent); } .section-sub { font-size: 0.97rem; color: var(--text-muted); line-height: 1.75; max-width: 520px; } /* ============================================================= BUTTONS — high-conversion style ============================================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 24px; border-radius: var(--radius); font-family: var(--font-display); font-size: 0.88rem; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; border: none; transition: all var(--t); position: relative; white-space: nowrap; } .btn-primary { background: var(--accent); color: var(--bg); box-shadow: 0 0 0 0 var(--accent-glow); } .btn-primary:hover { filter: brightness(1.12); box-shadow: 0 0 24px var(--accent-glow), 0 4px 16px rgba(0,0,0,0.4); transform: translateY(-1px); color: var(--bg); } .btn-outline { background: transparent; color: var(--accent); border: 1.5px solid var(--bdr-md); } .btn-outline:hover { border-color: var(--accent); background: var(--accent-faint); color: var(--accent); } .btn-ghost { background: rgba(255,255,255,0.04); color: var(--text-muted); border: 1px solid var(--bdr); } .btn-ghost:hover { background: rgba(255,255,255,0.08); color: var(--text); } /* CTA button — bigger, punchier */ .btn-cta { padding: 14px 32px; font-size: 0.95rem; font-weight: 700; background: var(--accent); color: var(--bg); border-radius: var(--radius); box-shadow: 0 0 32px var(--accent-glow); } .btn-cta:hover { filter: brightness(1.1); box-shadow: 0 0 48px var(--accent-glow); transform: translateY(-2px); color: var(--bg); } /* ============================================================= CARDS ============================================================= */ .card { background: var(--surf); border: 1px solid var(--bdr); border-radius: var(--radius-lg); padding: var(--card-p); transition: all var(--t-md); position: relative; overflow: hidden; } .card:hover { border-color: var(--bdr-md); transform: translateY(-3px); box-shadow: 0 16px 48px rgba(0,0,0,0.5), 0 0 32px var(--accent-glow); } .card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0; transition: opacity var(--t); } .card:hover::before { opacity: 0.6; } /* ============================================================= HEADER / NAV — compact 60px ============================================================= */ #site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; transition: all var(--t-md); height: 60px; } #site-header.scrolled { background: rgba(3,7,14,0.94); backdrop-filter: blur(18px); border-bottom: 1px solid var(--bdr); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 60px; gap: 16px; } .nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; } .nav-logo-icon { width: 32px; height: 32px; } .nav-logo-text { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; letter-spacing: 0.03em; color: var(--text); line-height: 1; } .nav-logo-text span { color: var(--accent); } .nav-menu { display: flex; align-items: center; gap: 28px; list-style: none; padding: 0; margin: 0; } .nav-menu a { font-family: var(--font-display); font-size: 0.83rem; font-weight: 500; letter-spacing: 0.04em; color: var(--text-muted); transition: color var(--t); position: relative; } .nav-menu a::after { content: ''; position: absolute; bottom: -3px; left: 0; right: 0; height: 1.5px; background: var(--accent); transform: scaleX(0); transition: transform var(--t); } .nav-menu a:hover { color: var(--accent); } .nav-menu a:hover::after { transform: scaleX(1); } .nav-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } /* Scheme switcher pills in nav */ .scheme-switcher { display: flex; gap: 5px; align-items: center; padding: 4px 8px; background: var(--surf); border: 1px solid var(--bdr); border-radius: 100px; } .scheme-dot { width: 12px; height: 12px; border-radius: 50%; cursor: pointer; transition: transform var(--t), box-shadow var(--t); border: 1.5px solid transparent; } .scheme-dot:hover { transform: scale(1.3); } .scheme-dot.active { border-color: var(--text); } .scheme-dot[data-scheme="cyber"] { background: #00d2ff; } .scheme-dot[data-scheme="volt"] { background: #a855f7; } .scheme-dot[data-scheme="matrix"] { background: #00e676; } .scheme-dot[data-scheme="ember"] { background: #ff6b00; } /* Cart icon */ .ln-cart-icon { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: var(--radius); background: var(--surf); border: 1px solid var(--bdr); color: var(--text-muted); font-size: 0.83rem; transition: all var(--t); } .ln-cart-icon:hover { border-color: var(--bdr-md); color: var(--accent); } .cart-count { position: absolute; top: -5px; right: -5px; width: 16px; height: 16px; background: var(--accent); color: var(--bg); font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700; border-radius: 50%; display: flex; align-items: center; justify-content: center; } /* Mobile hamburger */ .hamburger { display: none; flex-direction: column; gap: 4px; cursor: pointer; padding: 4px; background: none; border: none; } .hamburger span { display: block; width: 22px; height: 2px; background: var(--text); transition: all var(--t); } .hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(4px,4px); } .hamburger.open span:nth-child(2) { opacity: 0; } .hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(4px,-4px); } .mobile-menu { display: none; position: fixed; inset: 0; top: 60px; background: rgba(3,7,14,0.98); backdrop-filter: blur(20px); z-index: 999; padding: 1.5rem; flex-direction: column; gap: 1rem; } .mobile-menu.open { display: flex; } .mobile-menu a { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; color: var(--text-muted); padding: 0.7rem 0; border-bottom: 1px solid var(--bdr); transition: color var(--t); } .mobile-menu a:hover { color: var(--accent); } /* ============================================================= HERO — compact, conversion-focused ============================================================= */ .hero { position: relative; min-height: 92vh; display: flex; align-items: center; overflow: hidden; padding-top: 60px; } #hero-canvas { position: absolute; inset: 0; z-index: 0; } .hero-glow { position: absolute; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%); top: 50%; left: 35%; transform: translate(-50%,-50%); pointer-events: none; } .hero-content { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 420px; gap: 48px; align-items: center; width: 100%; } .hero-left {} .hero-badge { display: inline-flex; align-items: center; gap: 7px; background: var(--badge-bg); border: 1px solid var(--badge-border); border-radius: 100px; padding: 5px 14px 5px 7px; margin-bottom: 1.2rem; font-family: var(--font-mono); font-size: 0.7rem; color: var(--accent); letter-spacing: 0.07em; } .badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: pulse 2s ease infinite; } @keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(0,230,118,0.4); } 50% { box-shadow: 0 0 0 5px rgba(0,230,118,0); } } .hero-title { font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.03em; margin-bottom: 1rem; } .hero-title .grad { background: linear-gradient(135deg, var(--accent), var(--accent-2) 60%, var(--purple, #7c3aed)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero-sub { font-size: 1rem; color: var(--text-muted); line-height: 1.75; margin-bottom: 1.5rem; max-width: 480px; } .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 1.75rem; } /* Honest hosting disclaimer */ .hero-disclaimer { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-dim); letter-spacing: 0.05em; padding: 6px 12px; background: rgba(255,255,255,0.025); border: 1px solid var(--bdr); border-radius: var(--radius); } .hero-disclaimer svg { flex-shrink: 0; } /* Trust chips */ .hero-trust { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1rem; } .trust-chip { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-muted); letter-spacing: 0.04em; padding: 4px 10px; background: var(--surf); border: 1px solid var(--bdr); border-radius: 100px; } .trust-chip .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--green); } /* Hero right — compact pricing preview card */ .hero-card { background: var(--surf); border: 1px solid var(--bdr-md); border-radius: var(--radius-lg); overflow: hidden; position: relative; } .hero-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--accent-2), var(--accent)); } .hero-card-header { padding: 1rem 1.2rem 0.75rem; border-bottom: 1px solid var(--bdr); display: flex; align-items: center; justify-content: space-between; } .hero-card-title { font-family: var(--font-display); font-size: 0.82rem; font-weight: 600; color: var(--text-muted); letter-spacing: 0.04em; } .hero-card-live { display: flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 0.65rem; color: var(--green); letter-spacing: 0.08em; } .hero-card-plans { padding: 0.5rem 0; } .hcp-row { display: flex; align-items: center; justify-content: space-between; padding: 0.65rem 1.2rem; border-bottom: 1px solid var(--bdr); transition: background var(--t); cursor: pointer; text-decoration: none; gap: 10px; } .hcp-row:last-child { border-bottom: none; } .hcp-row:hover { background: var(--accent-faint); } .hcp-row.featured { background: var(--badge-bg); } .hcp-icon { font-size: 1.2rem; flex-shrink: 0; } .hcp-info { flex: 1; min-width: 0; } .hcp-name { font-family: var(--font-display); font-size: 0.85rem; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 6px; } .hcp-name .badge-popular { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); background: var(--badge-bg); border: 1px solid var(--badge-border); padding: 1px 6px; border-radius: 100px; } .hcp-desc { font-size: 0.72rem; color: var(--text-dim); margin-top: 1px; } .hcp-price { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--accent); flex-shrink: 0; } .hcp-period { font-family: var(--font-mono); font-size: 0.62rem; color: var(--text-dim); } .hero-card-footer { padding: 0.85rem 1.2rem; background: var(--surf2); display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.65rem; color: var(--text-dim); letter-spacing: 0.04em; } /* ============================================================= FEATURES — tight 3-col grid ============================================================= */ .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .feat-card { background: var(--surf); border: 1px solid var(--bdr); border-radius: var(--radius); padding: 1.25rem; transition: all var(--t-md); position: relative; overflow: hidden; } .feat-card:hover { border-color: var(--bdr-md); background: linear-gradient(135deg, var(--surf2), var(--surf)); } .feat-icon { width: 40px; height: 40px; border-radius: 8px; background: var(--badge-bg); border: 1px solid var(--bdr); display: flex; align-items: center; justify-content: center; margin-bottom: 0.9rem; font-size: 1.2rem; } .feat-title { font-size: 0.92rem; font-weight: 600; margin-bottom: 0.4rem; color: var(--text); } .feat-desc { font-size: 0.82rem; color: var(--text-muted); line-height: 1.65; margin: 0; } /* ============================================================= PRICING — compact three columns ============================================================= */ .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; } .price-card { background: var(--surf); border: 1px solid var(--bdr); border-radius: var(--radius-lg); padding: 1.5rem; position: relative; overflow: hidden; transition: all var(--t-md); } .price-card:hover { border-color: var(--bdr-md); transform: translateY(-4px); box-shadow: 0 20px 60px rgba(0,0,0,0.5); } .price-card.featured { border-color: var(--bdr-hi); background: linear-gradient(160deg, var(--surf2) 0%, var(--surf) 100%); } .price-card.featured::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--accent-2), var(--accent)); } .pc-eyebrow { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 0.3rem; } .pc-name { font-size: 1.15rem; font-weight: 700; margin-bottom: 0.2rem; } .pc-tagline { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 1rem; } .pc-badge { display: inline-block; background: var(--badge-bg); border: 1px solid var(--badge-border); color: var(--accent); font-family: var(--font-mono); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 10px; border-radius: 100px; margin-bottom: 0.75rem; } .pc-price { display: flex; align-items: flex-end; gap: 3px; margin-bottom: 1.1rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--bdr); } .pc-price-currency { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; color: var(--text-muted); line-height: 2.2; } .pc-price-amount { font-family: var(--font-display); font-size: 2.8rem; font-weight: 700; color: var(--accent); line-height: 1; } .pc-price-period { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-dim); line-height: 2; } .pc-features { list-style: none; padding: 0; margin: 0 0 1.25rem; display: flex; flex-direction: column; gap: 0.65rem; } .pc-features li { display: flex; align-items: flex-start; gap: 8px; font-size: 0.82rem; color: var(--text-muted); margin: 0; } .pc-check { width: 15px; height: 15px; border-radius: 50%; background: rgba(0,230,118,0.1); border: 1px solid rgba(0,230,118,0.25); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--green); font-size: 0.55rem; margin-top: 1px; } /* Buy button on price card */ .pc-cta { display: flex; flex-direction: column; gap: 8px; } .pc-buy { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; width: 100% !important; padding: 12px 20px !important; border-radius: var(--radius) !important; font-family: var(--font-display) !important; font-size: 0.88rem !important; font-weight: 700 !important; cursor: pointer !important; border: none !important; transition: all var(--t) !important; text-decoration: none !important; } .pc-buy-primary { background: var(--accent) !important; color: var(--bg) !important; } .pc-buy-primary:hover { filter: brightness(1.1) !important; box-shadow: 0 0 24px var(--accent-glow) !important; transform: translateY(-1px) !important; color: var(--bg) !important; } .pc-buy-outline { background: transparent !important; color: var(--accent) !important; border: 1.5px solid var(--bdr-md) !important; } .pc-buy-outline:hover { border-color: var(--accent) !important; background: var(--accent-faint) !important; color: var(--accent) !important; } .pc-guarantee { text-align: center; font-family: var(--font-mono); font-size: 0.65rem; color: var(--text-dim); letter-spacing: 0.04em; } /* ============================================================= PAYMENT METHODS — compact strip ============================================================= */ .payment-strip { background: var(--surf); border-top: 1px solid var(--bdr); border-bottom: 1px solid var(--bdr); padding: 18px 0; } .payment-strip-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; } .payment-label { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); flex-shrink: 0; } .payment-chips { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; } .payment-chip { display: flex; align-items: center; gap: 5px; background: var(--bg2); border: 1px solid var(--bdr); border-radius: 6px; padding: 5px 12px; font-family: var(--font-display); font-size: 0.78rem; font-weight: 500; color: var(--text-muted); transition: all var(--t); } .payment-chip:hover { border-color: var(--bdr-md); color: var(--text); } .payment-chip-icon { font-size: 1rem; } /* ============================================================= ABOUT / WHY SECTION — compact ============================================================= */ .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } /* Terminal — more compact */ .terminal { background: #020c18; border: 1px solid var(--bdr); border-radius: var(--radius); overflow: hidden; } .terminal-bar { background: var(--surf); border-bottom: 1px solid var(--bdr); padding: 8px 14px; display: flex; align-items: center; gap: 6px; } .t-dot { width: 10px; height: 10px; border-radius: 50%; } .t-red { background: #ff5f57; } .t-yellow { background: #febc2e; } .t-green { background: #28c840; } .t-title { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-dim); margin: 0 auto; } .terminal-body { padding: 1.1rem 1.25rem; font-family: var(--font-mono); font-size: 0.78rem; line-height: 1.75; } .t-p { color: var(--accent); } .t-c { color: var(--text); } .t-o { color: var(--text-muted); } .t-ok { color: var(--green); } .t-hi { color: var(--orange); } .t-dim{ color: var(--text-dim); } .t-cur { display: inline-block; width: 7px; height: 1em; background: var(--accent); vertical-align: text-bottom; animation: blink 1.1s step-end infinite; } @keyframes blink { 0%,100%{opacity:1}50%{opacity:0} } /* About points — compact */ .about-points { display: flex; flex-direction: column; gap: 1.1rem; margin-top: 1.5rem; } .about-point { display: flex; gap: 12px; align-items: flex-start; } .ap-icon { width: 36px; height: 36px; border-radius: 8px; background: var(--badge-bg); border: 1px solid var(--bdr); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1rem; } .ap-text h4 { font-size: 0.88rem; font-weight: 600; margin-bottom: 0.2rem; } .ap-text p { font-size: 0.8rem; color: var(--text-muted); margin: 0; line-height: 1.6; } /* Honest hosting disclaimer box */ .honest-box { background: rgba(255,140,0,0.06); border: 1px solid rgba(255,140,0,0.2); border-radius: var(--radius); padding: 1rem 1.25rem; display: flex; gap: 12px; align-items: flex-start; margin-top: 1.5rem; } .honest-box-icon { font-size: 1.25rem; flex-shrink: 0; } .honest-box p { font-size: 0.8rem; color: var(--text-muted); margin: 0; line-height: 1.65; } .honest-box strong { color: var(--orange); } /* ============================================================= AI SERVICES SECTION — compact two-col ============================================================= */ .ai-services-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; } .ai-service-card { background: var(--surf); border: 1px solid var(--bdr); border-radius: var(--radius-lg); overflow: hidden; } .ai-service-head { padding: 1.2rem 1.4rem 1rem; border-bottom: 1px solid var(--bdr); position: relative; overflow: hidden; } .ai-service-head::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 80% 50%, var(--accent-faint) 0%, transparent 70%); } .ai-service-head > * { position: relative; z-index: 1; } .ai-service-icon { font-size: 1.8rem; margin-bottom: 0.5rem; } .ai-service-title { font-size: 1rem; font-weight: 700; margin-bottom: 0.25rem; } .ai-service-desc { font-size: 0.78rem; color: var(--text-muted); margin: 0; line-height: 1.6; } .ai-service-plans { padding: 0.75rem 0; } .asp-row { display: flex; align-items: center; justify-content: space-between; padding: 0.55rem 1.2rem; border-bottom: 1px solid var(--bdr); gap: 10px; } .asp-row:last-child { border-bottom: none; } .asp-name { font-size: 0.82rem; font-weight: 600; color: var(--text); } .asp-detail { font-size: 0.7rem; color: var(--text-dim); } .asp-price { font-family: var(--font-display); font-size: 0.95rem; font-weight: 700; color: var(--accent); flex-shrink: 0; } .ai-service-footer { padding: 0.85rem 1.2rem; border-top: 1px solid var(--bdr); background: var(--bg2); } .ai-service-footer a { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 9px; border-radius: 7px; border: 1.5px solid var(--bdr-md); color: var(--accent); font-family: var(--font-display); font-size: 0.82rem; font-weight: 600; transition: all var(--t); } .ai-service-footer a:hover { border-color: var(--accent); background: var(--accent-faint); } /* Local AI privacy strip */ .privacy-strip { background: linear-gradient(135deg, rgba(124,58,237,0.08), var(--accent-faint)); border: 1px solid rgba(124,58,237,0.2); border-radius: var(--radius); padding: 1.1rem 1.5rem; display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; } .privacy-icon { font-size: 2rem; flex-shrink: 0; } .privacy-text h4 { font-size: 0.92rem; font-weight: 700; margin-bottom: 0.25rem; } .privacy-text p { font-size: 0.78rem; color: var(--text-muted); margin: 0; line-height: 1.6; } .privacy-badges { display: flex; flex-direction: column; gap: 5px; flex-shrink: 0; margin-left: auto; } .privacy-badge { display: flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: 0.75rem; font-weight: 600; color: var(--text); } /* Web design card */ .wd-card { background: linear-gradient(135deg, var(--surf2), var(--surf)); border: 1px solid var(--bdr-md); border-radius: var(--radius-lg); padding: 1.4rem 1.75rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; position: relative; overflow: hidden; flex-wrap: wrap; } .wd-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--purple, #7c3aed), var(--accent), transparent); } .wd-card-info { flex: 1; min-width: 200px; } .wd-card-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.4rem; } .wd-card-desc { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.85rem; line-height: 1.6; } .wd-chips { display: flex; flex-wrap: wrap; gap: 6px; } .wd-chip { font-family: var(--font-mono); font-size: 0.65rem; color: var(--text-dim); background: var(--bg2); border: 1px solid var(--bdr); border-radius: 5px; padding: 3px 8px; letter-spacing: 0.04em; } .wd-card-price { text-align: center; flex-shrink: 0; } .wd-amount { font-family: var(--font-display); font-size: 2.5rem; font-weight: 700; color: var(--purple, #7c3aed); line-height: 1; margin-bottom: 2px; } .wd-period { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-dim); margin-bottom: 0.75rem; } /* ============================================================= WOOCOMMERCE — SHOP PAGE ============================================================= */ .woo-main { padding-top: 60px; } .woo-shop-header { background: var(--bg2); border-bottom: 1px solid var(--bdr); padding: 40px 0 30px; position: relative; overflow: hidden; } .woo-shop-header::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 100%, var(--accent-faint), transparent 70%); } .woo-shop-header .container { position: relative; z-index: 1; } .woocommerce ul.products { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important; gap: 16px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; float: none !important; clear: both; } .woocommerce ul.products li.product { width: auto !important; float: none !important; margin: 0 !important; padding: 0 !important; } /* Product card — tighter */ .ln-product-card { background: var(--surf); border: 1px solid var(--bdr); border-radius: var(--radius-lg); overflow: hidden; transition: all var(--t-md); display: flex; flex-direction: column; height: 100%; position: relative; } .ln-product-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0; transition: opacity var(--t); } .ln-product-card:hover { border-color: var(--bdr-md); transform: translateY(-4px); box-shadow: 0 16px 48px rgba(0,0,0,0.5), 0 0 32px var(--accent-glow); } .ln-product-card:hover::before { opacity: 0.7; } .ln-product-img { background: linear-gradient(135deg, var(--surf2), var(--bg)); padding: 1.75rem; display: flex; align-items: center; justify-content: center; min-height: 160px; position: relative; overflow: hidden; } .ln-product-img::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at center, var(--accent-faint), transparent 70%); } .ln-product-img-placeholder { font-size: 3.5rem; position: relative; z-index: 1; } .ln-product-body { padding: 1.2rem; display: flex; flex-direction: column; flex: 1; gap: 0; } .ln-product-tier { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 0.25rem; } .woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--font-display) !important; font-size: 1rem !important; font-weight: 700 !important; color: var(--text) !important; padding: 0 0 0.25rem !important; margin: 0 0 0.25rem !important; line-height: 1.2 !important; } .ln-product-tagline { font-size: 0.78rem; color: var(--text-muted); line-height: 1.55; margin-bottom: 0.85rem; flex: 1; } .woocommerce ul.products li.product .price, .woocommerce .price { display: flex !important; align-items: baseline !important; gap: 3px !important; margin-bottom: 1rem !important; color: var(--accent) !important; font-family: var(--font-display) !important; } .woocommerce .price .amount { font-size: 1.8rem !important; font-weight: 700 !important; color: var(--accent) !important; line-height: 1 !important; } .ln-price-period { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-dim); align-self: flex-end; padding-bottom: 2px; } .ln-product-features { list-style: none; padding: 0; margin: 0 0 1.1rem; display: flex; flex-direction: column; gap: 0.45rem; border-top: 1px solid var(--bdr); padding-top: 1rem; } .ln-product-features li { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; color: var(--text-muted); margin: 0; } .check-icon { width: 14px; height: 14px; border-radius: 50%; background: rgba(0,230,118,0.1); border: 1px solid rgba(0,230,118,0.25); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.5rem; color: var(--green); } /* Loop add-to-cart */ .woocommerce ul.products li.product .button, .woocommerce ul.products li.product a.button { display: flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; width: 100% !important; padding: 11px 16px !important; background: var(--accent) !important; color: var(--bg) !important; border: none !important; border-radius: var(--radius) !important; font-family: var(--font-display) !important; font-size: 0.85rem !important; font-weight: 700 !important; cursor: pointer !important; transition: all var(--t) !important; text-decoration: none !important; margin-top: auto !important; } .woocommerce ul.products li.product .button:hover, .woocommerce ul.products li.product a.button:hover { filter: brightness(1.1) !important; box-shadow: 0 0 20px var(--accent-glow) !important; } .woocommerce ul.products li.product .added_to_cart { display: none !important; } .woocommerce span.onsale { background: linear-gradient(135deg, var(--purple, #7c3aed), var(--accent)) !important; color: #fff !important; font-family: var(--font-mono) !important; font-size: 0.62rem !important; letter-spacing: 0.1em !important; padding: 3px 10px !important; border-radius: 100px !important; top: 10px !important; right: 10px !important; left: auto !important; min-height: auto !important; min-width: auto !important; line-height: 1.5 !important; } /* Shop toolbar */ .ln-shop-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--bdr); } .woocommerce-result-count { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-dim); letter-spacing: 0.07em; margin: 0 !important; } .woocommerce-ordering select { background: var(--surf); border: 1px solid var(--bdr); color: var(--text-muted); font-family: var(--font-body); font-size: 0.82rem; padding: 7px 32px 7px 12px; border-radius: var(--radius-sm); outline: none; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2300d2ff' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; } /* Pagination */ .woocommerce nav.woocommerce-pagination ul { display: flex !important; justify-content: center !important; gap: 6px !important; margin-top: 2.5rem !important; border: none !important; list-style: none; padding: 0; } .woocommerce nav.woocommerce-pagination ul li { border: none !important; padding: 0 !important; } .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { display: flex !important; align-items: center !important; justify-content: center !important; width: 38px !important; height: 38px !important; border-radius: 7px !important; background: var(--surf) !important; border: 1px solid var(--bdr) !important; color: var(--text-muted) !important; font-family: var(--font-display) !important; font-size: 0.82rem !important; transition: all var(--t) !important; } .woocommerce nav.woocommerce-pagination ul li a:hover { border-color: var(--accent) !important; color: var(--accent) !important; } .woocommerce nav.woocommerce-pagination ul li span.current { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--bg) !important; font-weight: 700 !important; } /* ============================================================= SINGLE PRODUCT PAGE — compact, conversion-focused ============================================================= */ .woo-single-product { padding: 28px 0 56px; } .woo-product-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: start; margin-bottom: 40px; } .product-visual { position: sticky; top: 72px; } .product-visual-placeholder { background: linear-gradient(135deg, var(--surf2), var(--bg2)); border: 1px solid var(--bdr); border-radius: var(--radius-lg); min-height: 320px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; position: relative; overflow: hidden; } .product-visual-placeholder::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at center, var(--accent-faint), transparent 70%); } .pvp-icon { font-size: 4rem; position: relative; z-index: 1; } .pvp-tier { position: relative; z-index: 1; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); background: var(--badge-bg); border: 1px solid var(--badge-border); border-radius: 100px; padding: 4px 14px; } /* Product trust grid — compact 2x2 */ .product-trust { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; } .pt-item { background: var(--surf); border: 1px solid var(--bdr); border-radius: var(--radius); padding: 10px 12px; display: flex; align-items: center; gap: 9px; } .pt-icon { font-size: 1.1rem; } .pt-label { font-family: var(--font-display); font-size: 0.75rem; font-weight: 600; color: var(--text); } .pt-sub { font-family: var(--font-mono); font-size: 0.62rem; color: var(--text-dim); letter-spacing: 0.04em; } /* Product summary — compact */ .woocommerce div.product .product_title { font-family: var(--font-display) !important; font-size: clamp(1.5rem, 2.8vw, 2rem) !important; font-weight: 700 !important; line-height: 1.15 !important; margin-bottom: 0.5rem !important; color: var(--text) !important; } .woocommerce div.product p.price { display: flex !important; align-items: baseline !important; gap: 4px !important; font-family: var(--font-display) !important; margin: 0.6rem 0 1rem !important; padding: 0.85rem 1rem !important; background: var(--badge-bg) !important; border: 1px solid var(--bdr) !important; border-left: 3px solid var(--accent) !important; border-radius: var(--radius) !important; } .woocommerce div.product p.price .amount { font-size: 2.4rem !important; font-weight: 700 !important; color: var(--accent) !important; line-height: 1 !important; } .woocommerce div.product p.price .woocommerce-Price-currencySymbol { font-size: 1.2rem !important; color: var(--text-muted) !important; font-weight: 600 !important; align-self: flex-start !important; padding-top: 4px !important; } .woocommerce div.product div.summary .woocommerce-product-details__short-description { font-size: 0.88rem; color: var(--text-muted); line-height: 1.7; margin-bottom: 1rem; } .woocommerce div.product div.summary .woocommerce-product-details__short-description p { margin-bottom: 0.6rem; } /* Quantity hidden for digital */ .woocommerce div.product .quantity { display: none !important; } /* ── MAIN BUY BUTTON ── bold, unmissable */ .woocommerce div.product form.cart button[type="submit"], .woocommerce div.product form.cart .single_add_to_cart_button { display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; width: 100% !important; padding: 16px 28px !important; background: var(--accent) !important; color: var(--bg) !important; border: none !important; border-radius: var(--radius) !important; font-family: var(--font-display) !important; font-size: 1rem !important; font-weight: 700 !important; letter-spacing: 0.02em !important; cursor: pointer !important; transition: all var(--t) !important; box-shadow: 0 0 0 0 var(--accent-glow) !important; } .woocommerce div.product form.cart button[type="submit"]:hover { filter: brightness(1.1) !important; box-shadow: 0 0 32px var(--accent-glow), 0 6px 20px rgba(0,0,0,0.4) !important; transform: translateY(-2px) !important; } /* Post-buy trust row */ .buy-trust-row { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 10px; flex-wrap: wrap; } .btr-item { display: flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 0.65rem; color: var(--text-dim); letter-spacing: 0.04em; } .btr-icon { font-size: 0.85rem; } /* Features panel on single page */ .product-includes { background: var(--surf); border: 1px solid var(--bdr); border-radius: var(--radius); padding: 1.1rem 1.25rem; margin-top: 1rem; } .product-includes-title { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 0.9rem; } .product-includes ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; } .product-includes ul li { display: flex; align-items: center; gap: 7px; font-size: 0.78rem; color: var(--text-muted); margin: 0; } /* Privacy + payment notes compact */ .product-note { display: flex; align-items: flex-start; gap: 10px; padding: 0.85rem 1rem; border-radius: var(--radius); margin-top: 10px; font-size: 0.78rem; color: var(--text-dim); line-height: 1.55; } .product-note-privacy { background: rgba(124,58,237,0.04); border: 1px solid rgba(124,58,237,0.15); } .product-note-payment { background: var(--badge-bg); border: 1px solid var(--bdr); } .product-note-icon { font-size: 1rem; flex-shrink: 0; } /* Product meta */ .woocommerce div.product .product_meta { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--bdr); font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-dim); display: flex; gap: 1rem; flex-wrap: wrap; } .woocommerce div.product .product_meta a { color: var(--accent); } /* Tabs */ .woocommerce div.product .woocommerce-tabs { margin-top: 32px; border-top: 1px solid var(--bdr); padding-top: 32px; } .woocommerce div.product .woocommerce-tabs .tabs { display: flex; gap: 0; list-style: none; padding: 0; margin: 0 0 0 !important; border-bottom: 1px solid var(--bdr) !important; overflow-x: auto; } .woocommerce div.product .woocommerce-tabs .tabs li { margin: 0 !important; padding: 0 !important; border: none !important; border-radius: 0 !important; } .woocommerce div.product .woocommerce-tabs .tabs li a { display: block; padding: 10px 20px !important; font-family: var(--font-display) !important; font-size: 0.82rem !important; font-weight: 600 !important; letter-spacing: 0.04em !important; color: var(--text-dim) !important; border: none !important; border-bottom: 2px solid transparent !important; margin-bottom: -1px !important; transition: all var(--t) !important; background: none !important; white-space: nowrap; } .woocommerce div.product .woocommerce-tabs .tabs li a:hover { color: var(--accent) !important; } .woocommerce div.product .woocommerce-tabs .tabs li.active a { color: var(--accent) !important; border-bottom-color: var(--accent) !important; background: none !important; } .woocommerce div.product .woocommerce-tabs .panel { padding: 1.5rem 0 !important; background: transparent !important; border: none !important; margin: 0 !important; } .woocommerce div.product .woocommerce-tabs .panel p { color: var(--text-muted); font-size: 0.88rem; line-height: 1.75; } .woocommerce div.product .woocommerce-tabs .panel h2 { font-size: 1.2rem; margin-bottom: 0.75rem; } /* Specs table */ .woocommerce table.shop_attributes { width: 100%; border-collapse: collapse; } .woocommerce table.shop_attributes tr { border-bottom: 1px solid var(--bdr); } .woocommerce table.shop_attributes th { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); padding: 9px 0; width: 36%; font-weight: 500; } .woocommerce table.shop_attributes td { color: var(--text-muted); font-size: 0.85rem; padding: 9px 0; } /* Related products */ .related.products { margin-top: 40px; } .related.products > h2 { font-size: 1.4rem; margin-bottom: 1.5rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--bdr); } /* ============================================================= CART ============================================================= */ .woocommerce table.shop_table { width: 100%; border-collapse: collapse; font-size: 0.88rem; } .woocommerce table.shop_table thead tr { border-bottom: 2px solid var(--bdr-md); } .woocommerce table.shop_table thead th { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); padding: 12px 14px; font-weight: 500; text-align: left; border: none; background: transparent; } .woocommerce table.shop_table tbody tr { border-bottom: 1px solid var(--bdr); } .woocommerce table.shop_table tbody td { padding: 14px; vertical-align: middle; border: none; color: var(--text-muted); } .woocommerce table.cart td.product-name { color: var(--text); font-weight: 500; } .woocommerce table.cart td.product-name a { color: var(--text); font-weight: 600; font-family: var(--font-display); font-size: 0.88rem; } .woocommerce table.cart td.product-name a:hover { color: var(--accent); } .woocommerce table.cart td.product-thumbnail img { border-radius: 7px; border: 1px solid var(--bdr); background: var(--surf); width: 56px; height: 56px; object-fit: cover; } .woocommerce table.cart a.remove { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 6px; background: rgba(255,82,82,0.07); border: 1px solid rgba(255,82,82,0.2); color: #ff5252 !important; font-size: 1rem; transition: all var(--t); } .woocommerce table.cart a.remove:hover { background: rgba(255,82,82,0.18); } .woocommerce table.cart td.product-price .amount, .woocommerce table.cart td.product-subtotal .amount { font-family: var(--font-display); font-weight: 700; color: var(--accent); font-size: 1rem; } /* Cart totals */ .woocommerce .cart_totals { background: var(--surf); border: 1px solid var(--bdr); border-radius: var(--radius-lg); padding: 1.4rem; max-width: 380px; width: 100%; } .woocommerce .cart_totals h2 { font-size: 1rem; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--bdr); } .woocommerce .cart_totals table { width: 100%; border-collapse: collapse; margin-bottom: 1.25rem; } .woocommerce .cart_totals table tr { border-bottom: 1px solid var(--bdr); } .woocommerce .cart_totals table th { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); padding: 10px 0; text-align: left; font-weight: 500; } .woocommerce .cart_totals table td { color: var(--text-muted); padding: 10px 0; text-align: right; } .woocommerce .cart_totals table tr.order-total td .amount { color: var(--accent); font-size: 1.3rem; font-weight: 700; font-family: var(--font-display); } .woocommerce .cart_totals .wc-proceed-to-checkout a.checkout-button { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; width: 100% !important; padding: 14px !important; background: var(--accent) !important; color: var(--bg) !important; border-radius: var(--radius) !important; font-family: var(--font-display) !important; font-weight: 700 !important; font-size: 0.92rem !important; transition: all var(--t) !important; text-decoration: none !important; } .woocommerce .cart_totals .wc-proceed-to-checkout a:hover { filter: brightness(1.1) !important; box-shadow: 0 0 24px var(--accent-glow) !important; } /* ============================================================= CHECKOUT — compact ============================================================= */ .woocommerce form .form-row { margin-bottom: 0.85rem; } .woocommerce form .form-row label { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); display: block; margin-bottom: 5px; } .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select { background: var(--surf) !important; border: 1px solid var(--bdr) !important; border-radius: var(--radius-sm) !important; color: var(--text) !important; padding: 10px 14px !important; width: 100% !important; font-family: var(--font-body) !important; font-size: 0.88rem !important; transition: border-color var(--t) !important; outline: none !important; } .woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus, .woocommerce form .form-row select:focus { border-color: var(--bdr-hi) !important; } .woocommerce-checkout h3 { font-size: 1.1rem; margin-bottom: 1.2rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--bdr); } /* Payment methods */ .woocommerce-checkout #payment { background: var(--surf) !important; border: 1px solid var(--bdr) !important; border-radius: var(--radius) !important; } .woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--bdr) !important; padding: 1rem !important; } .woocommerce-checkout #payment ul.payment_methods li { color: var(--text-muted); font-size: 0.88rem; } .woocommerce-checkout #payment ul.payment_methods li label { color: var(--text) !important; font-family: var(--font-display) !important; font-weight: 500 !important; } .woocommerce-checkout #payment div.payment_box { background: var(--badge-bg) !important; border: 1px solid var(--bdr) !important; color: var(--text-muted) !important; font-size: 0.82rem !important; border-radius: 7px !important; } /* Place order — big, visible, unmissable */ .woocommerce-checkout #payment #place_order { display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; width: 100% !important; padding: 16px !important; background: var(--accent) !important; color: var(--bg) !important; border: none !important; border-radius: var(--radius) !important; font-family: var(--font-display) !important; font-weight: 700 !important; font-size: 1rem !important; cursor: pointer !important; transition: all var(--t) !important; } .woocommerce-checkout #payment #place_order:hover { filter: brightness(1.1) !important; box-shadow: 0 0 32px var(--accent-glow), 0 6px 20px rgba(0,0,0,0.4) !important; transform: translateY(-2px) !important; } /* ============================================================= NOTICES ============================================================= */ .woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notices-wrapper .woocommerce-message, .woocommerce-notices-wrapper .woocommerce-info, .woocommerce-notices-wrapper .woocommerce-error { background: var(--surf); border: 1px solid var(--bdr); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 16px; color: var(--text); font-size: 0.88rem; display: flex; align-items: center; gap: 10px; list-style: none; } .woocommerce-message { border-left: 3px solid var(--green); } .woocommerce-info { border-left: 3px solid var(--accent); } .woocommerce-error { border-left: 3px solid #ff5252; } .woocommerce-message .button, .woocommerce-info .button { margin-left: auto; background: transparent; border: 1px solid var(--bdr-md); color: var(--accent); font-family: var(--font-display); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; padding: 5px 14px; border-radius: 6px; cursor: pointer; transition: all var(--t); text-decoration: none; } .woocommerce-message .button:hover, .woocommerce-info .button:hover { border-color: var(--accent); background: var(--badge-bg); color: var(--accent); } /* ============================================================= MY ACCOUNT ============================================================= */ .woocommerce-MyAccount-navigation { background: var(--surf); border: 1px solid var(--bdr); border-radius: var(--radius); padding: 0.75rem; margin-bottom: 1.25rem; } .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; } .woocommerce-MyAccount-navigation ul li a { display: block; padding: 8px 14px; border-radius: 7px; font-family: var(--font-display); font-size: 0.82rem; font-weight: 500; color: var(--text-muted); transition: all var(--t); } .woocommerce-MyAccount-navigation ul li a:hover, .woocommerce-MyAccount-navigation ul li.is-active a { background: var(--badge-bg); color: var(--accent); } /* ============================================================= CTA SECTION ============================================================= */ .cta-section { background: linear-gradient(180deg, var(--bg2) 0%, var(--bg) 100%); border-top: 1px solid var(--bdr); border-bottom: 1px solid var(--bdr); padding: var(--sp) 0; text-align: center; position: relative; overflow: hidden; } .cta-section::before { content: ''; position: absolute; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%); top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } .cta-inner { position: relative; z-index: 1; } .cta-title { font-size: clamp(1.6rem, 3.5vw, 2.5rem); margin-bottom: 0.6rem; } .cta-sub { font-size: 0.95rem; color: var(--text-muted); margin-bottom: 1.75rem; } .cta-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; } /* ============================================================= FOOTER ============================================================= */ #site-footer { background: var(--bg); border-top: 1px solid var(--bdr); padding: 48px 0 24px; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 36px; } .footer-logo { display: flex; align-items: center; gap: 9px; margin-bottom: 0.85rem; text-decoration: none; } .footer-logo-icon { width: 28px; height: 28px; } .footer-logo-text { font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: 0.03em; color: var(--text); } .footer-logo-text span { color: var(--accent); } .footer-desc { font-size: 0.8rem; color: var(--text-dim); line-height: 1.7; max-width: 240px; margin-bottom: 1.1rem; } .footer-social { display: flex; gap: 8px; } .social-btn { width: 32px; height: 32px; border-radius: 6px; background: var(--surf); border: 1px solid var(--bdr); display: flex; align-items: center; justify-content: center; color: var(--text-dim); font-size: 0.8rem; transition: all var(--t); text-decoration: none; } .social-btn:hover { border-color: var(--bdr-md); color: var(--accent); background: var(--badge-bg); } .footer-col-title { font-family: var(--font-display); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.9rem; } .footer-links { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; } .footer-links a { font-size: 0.8rem; color: var(--text-dim); transition: color var(--t); } .footer-links a:hover { color: var(--accent); } .footer-bottom { border-top: 1px solid var(--bdr); padding-top: 24px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; } .footer-copy { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-dim); } .footer-copy a { color: var(--accent); } .footer-badges { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .footer-badge { font-family: var(--font-mono); font-size: 0.62rem; color: var(--text-dim); background: var(--surf); border: 1px solid var(--bdr); border-radius: 5px; padding: 3px 9px; } .footer-status { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-dim); } .status-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--green); animation: pulse 2s ease infinite; } /* ============================================================= SCROLL REVEAL ============================================================= */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal.visible { opacity: 1; transform: none; } .reveal-d1 { transition-delay: 0.08s; } .reveal-d2 { transition-delay: 0.16s; } .reveal-d3 { transition-delay: 0.24s; } /* ============================================================= RESPONSIVE ============================================================= */ @media (max-width: 1024px) { .hero-content { grid-template-columns: 1fr; } .hero-card { max-width: 420px; } .about-grid { grid-template-columns: 1fr; gap: 32px; } .footer-grid { grid-template-columns: 1fr 1fr; } .features-grid { grid-template-columns: repeat(2, 1fr); } .pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; } .woo-product-layout { grid-template-columns: 1fr; gap: 24px; } .product-visual { position: static; } } @media (max-width: 768px) { :root { --sp: 40px; --card-p: 1.1rem; } .nav-menu, .scheme-switcher { display: none; } .hamburger { display: flex; } .features-grid { grid-template-columns: 1fr; } .ai-services-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; gap: 24px; } .footer-bottom { flex-direction: column; text-align: center; } .product-includes ul { grid-template-columns: 1fr; } .wd-card { flex-direction: column; } } @media (max-width: 480px) { .hero-actions, .cta-actions { flex-direction: column; } .btn-cta, .btn-primary, .btn-outline { width: 100%; } } /* ============================================================= WORDPRESS STANDARD ============================================================= */ .site-main { padding-top: 60px; min-height: 60vh; } .entry-content { max-width: 720px; margin: 0 auto; padding: 2.5rem 0; } .entry-content p { color: var(--text-muted); font-size: 0.97rem; line-height: 1.85; } .entry-content h2, .entry-content h3 { margin: 2rem 0 0.75rem; } .entry-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .entry-content blockquote { border-left: 3px solid var(--accent); padding-left: 1.25rem; margin: 1.5rem 0; font-style: italic; color: var(--text-muted); } .page-header { padding: 80px 0 40px; background: var(--bg2); border-bottom: 1px solid var(--bdr); position: relative; overflow: hidden; } .page-header::before { content: ''; position: absolute; width: 400px; height: 400px; background: radial-gradient(circle, var(--accent-faint), transparent 70%); top: 50%; left: 50%; transform: translate(-50%,-50%); pointer-events: none; } .page-header-inner { position: relative; z-index: 1; } .page-header-label { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.5rem; } .page-header-title { font-size: clamp(1.7rem, 3.5vw, 2.6rem); } .error-404 { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 60vh; padding: 3rem 0; } .error-code { font-family: var(--font-display); font-size: clamp(5rem, 15vw, 10rem); font-weight: 700; color: var(--surf2); line-height: 1; } .error-code span { color: var(--accent); } .woo-breadcrumb { padding: 14px 0 0; font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-dim); letter-spacing: 0.05em; } .woo-breadcrumb a { color: var(--text-dim); transition: color var(--t); } .woo-breadcrumb a:hover { color: var(--accent); } .breadcrumb-sep { margin: 0 6px; opacity: 0.35; } .ln-cat-badge { display: inline-flex; align-items: center; gap: 5px; background: var(--badge-bg); border: 1px solid var(--bdr); border-radius: 100px; padding: 4px 12px; font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-dim); letter-spacing: 0.07em; cursor: pointer; transition: all var(--t); text-decoration: none; } .ln-cat-badge:hover, .ln-cat-badge.active { border-color: var(--accent); color: var(--accent); background: var(--badge-bg); } .alignleft { float: left; margin-right: 1.25rem; margin-bottom: 0.75rem; } .alignright { float: right; margin-left: 1.25rem; margin-bottom: 0.75rem; } .aligncenter { display: block; margin: 0 auto 1.25rem; }