/* Theme Name: Amaterasu TCG Theme URI: https://example.com Description: Child theme de Storefront para Amaterasu TCG. Modo oscuro por defecto, acentos morado/rojo/amarillo, efecto cristal (glassmorphism) estilo Apple, tipografía Satoshi. Author: Amaterasu TCG Template: storefront Version: 1.1.0 Text Domain: amaterasu-tcg */ /* ============================================ 1. Fuente Satoshi (Fontshare) ============================================ */ @import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700&display=swap'); /* ============================================ 2. Paleta de color — variables globales ============================================ */ :root{ --am-bg: #0B0812; --am-bg-2: #14101F; --am-ink: #F4F1FB; --am-ink-dim: rgba(244,241,251,0.62); --am-lavender: #A78BFA; --am-lavender-soft: rgba(167,139,250,0.16); --am-red: #FF5A4E; --am-gold: #FFC738; --am-line: rgba(244,241,251,0.12); --am-glass-bg: rgba(255,255,255,0.06); --am-glass-bg-strong: rgba(255,255,255,0.1); --am-glass-border: rgba(255,255,255,0.14); --am-blur: 20px; } /* Modo claro — se activa añadiendo la clase .am-light al (toggle JS, ver inc/dark-mode.js) */ html.am-light{ --am-bg: #FBF9FF; --am-bg-2: #F3EEFC; --am-ink: #1B1526; --am-ink-dim: rgba(27,21,38,0.62); --am-lavender: #6B4FBB; --am-lavender-soft: #EFE9FD; --am-red: #D4342C; --am-gold: #FFC738; --am-line: rgba(27,21,38,0.1); --am-glass-bg: rgba(255,255,255,0.55); --am-glass-bg-strong: rgba(255,255,255,0.75); --am-glass-border: rgba(27,21,38,0.08); } /* ============================================ 3. Base ============================================ */ *{ box-sizing: border-box; } body{ background: var(--am-bg) !important; color: var(--am-ink) !important; font-family: 'Satoshi', sans-serif !important; font-weight: 500; transition: background .4s ease, color .4s ease; } h1, h2, h3, h4, h5, .site-title, .site-title a, .woocommerce-loop-product__title, .product_title{ font-family: 'Satoshi', sans-serif !important; font-weight: 700 !important; letter-spacing: -0.02em; color: var(--am-ink) !important; } p, span, li, label, dd, dt{ color: var(--am-ink-dim); } a{ color: var(--am-ink); } ::selection{ background: var(--am-red); color: #fff; } /* ============================================ 4. Cabecera — píldora flotante de cristal (header.php propio) ============================================ */ #am-nav{ position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 200; width: min(1120px, calc(100% - 32px)); border-radius: 28px; background: var(--am-glass-bg); backdrop-filter: blur(var(--am-blur)) saturate(180%); -webkit-backdrop-filter: blur(var(--am-blur)) saturate(180%); border: 1px solid var(--am-glass-border); box-shadow: 0 20px 40px -20px rgba(0,0,0,0.35); } .am-nav-inner{ height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px 0 22px; } .am-brand{ display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; color: var(--am-ink) !important; } .am-dot{ width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--am-gold), var(--am-red) 70%); box-shadow: 0 0 0 4px var(--am-lavender-soft); display: inline-block; } .am-nav-links ul{ list-style: none; display: flex; gap: 6px; margin: 0; padding: 5px; background: var(--am-glass-bg-strong); border-radius: 20px; border: 1px solid var(--am-glass-border); } .am-nav-links li{ margin: 0; } .am-nav-links a{ display: block; padding: 9px 16px; border-radius: 16px; font-size: 13.5px; font-weight: 600; color: var(--am-ink) !important; opacity: 0.72; transition: opacity .2s ease, background .2s ease; } .am-nav-links a:hover{ opacity: 1; background: var(--am-lavender-soft); } @media (max-width: 820px){ .am-nav-links{ display: none; } } .am-nav-right{ display: flex; align-items: center; gap: 10px; } .am-nav-cta{ background: var(--am-ink) !important; color: var(--am-bg) !important; padding: 11px 20px; border-radius: 18px; font-size: 13.5px; font-weight: 650; transition: transform .2s ease, opacity .2s ease; } .am-nav-cta:hover{ transform: translateY(-1px); opacity: 0.85; } .am-page-content{ padding-top: 110px; } .am-theme-toggle{ width: 58px; height: 32px; border-radius: 999px; background: var(--am-glass-bg-strong); border: 1px solid var(--am-glass-border); position: relative; padding: 4px; cursor: pointer; display: inline-flex; align-items: center; } .am-theme-toggle .am-knob{ width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, var(--am-gold), var(--am-red)); box-shadow: 0 2px 6px rgba(0,0,0,0.35); display: flex; align-items: center; justify-content: center; font-size: 11px; line-height: 1; transition: transform .3s cubic-bezier(.4,0,.2,1); } html.am-light .am-theme-toggle .am-knob{ transform: translateX(24px); } /* ============================================ 5. Botones ============================================ */ .button, button, input[type="submit"], .woocommerce a.button, .woocommerce button.button, .single_add_to_cart_button{ background: linear-gradient(120deg, var(--am-red), var(--am-gold)) !important; color: #fff !important; border: none !important; border-radius: 999px !important; font-weight: 650 !important; padding: 12px 26px !important; transition: transform .2s ease, box-shadow .2s ease !important; box-shadow: 0 14px 26px -14px rgba(255,90,78,0.55); } .button:hover, button:hover, .single_add_to_cart_button:hover{ transform: translateY(-2px); } /* ============================================ 6. Tarjetas de producto — vidrio esmerilado ============================================ */ ul.products li.product, .woocommerce ul.products li.product{ background: var(--am-glass-bg) !important; backdrop-filter: blur(var(--am-blur)) saturate(160%); -webkit-backdrop-filter: blur(var(--am-blur)) saturate(160%); border: 1px solid var(--am-glass-border) !important; border-radius: 24px !important; padding: 18px !important; transition: transform .25s ease, background .25s ease; } ul.products li.product:hover{ transform: translateY(-6px); background: var(--am-glass-bg-strong) !important; } ul.products li.product img{ border-radius: 16px !important; } .woocommerce ul.products li.product .price, .summary .price, p.price{ color: var(--am-gold) !important; font-weight: 700 !important; } /* ============================================ 7. Carrito, checkout, formularios ============================================ */ .woocommerce-cart-form, .cart-collaterals, .woocommerce-checkout-review-order, table.shop_table{ background: var(--am-glass-bg) !important; backdrop-filter: blur(var(--am-blur)); border: 1px solid var(--am-glass-border) !important; border-radius: 20px !important; color: var(--am-ink) !important; } table.shop_table th, table.shop_table td{ border-color: var(--am-line) !important; color: var(--am-ink) !important; } input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], textarea, select{ background: var(--am-bg-2) !important; color: var(--am-ink) !important; border: 1px solid var(--am-glass-border) !important; border-radius: 12px !important; } /* ============================================ 8. Homepage a medida (front-page.php) ============================================ */ .am-wrap{ max-width: 1180px; margin: 0 auto; padding: 0 32px; } .am-hero{ position: relative; padding: 220px 0 120px; text-align: center; overflow: hidden; } .am-sunburst{ position: absolute; top: -260px; left: 50%; width: 900px; height: 900px; transform: translateX(-50%); border-radius: 50%; background: conic-gradient(from 0deg, var(--am-gold) 0deg, var(--am-red) 40deg, transparent 90deg, var(--am-lavender) 160deg, transparent 210deg, var(--am-gold) 280deg, transparent 330deg, var(--am-gold) 360deg); filter: blur(70px) opacity(0.4); animation: am-spin 40s linear infinite; z-index: 0; -webkit-mask-image: radial-gradient(circle, black 45%, transparent 72%); mask-image: radial-gradient(circle, black 45%, transparent 72%); } @keyframes am-spin{ to{ transform: translateX(-50%) rotate(360deg); } } .am-eyebrow{ position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--am-lavender); background: var(--am-glass-bg); border: 1px solid var(--am-glass-border); padding: 8px 18px; border-radius: 999px; margin-bottom: 28px; } .am-eyebrow::before{ content:''; width:6px; height:6px; border-radius:50%; background: var(--am-red); } .am-hero h1{ position: relative; z-index: 1; font-size: clamp(38px, 6.5vw, 76px); line-height: 1; max-width: 900px; margin: 0 auto; } .am-hero h1 em{ font-style: normal; background: linear-gradient(100deg, var(--am-red) 10%, var(--am-gold) 55%, var(--am-lavender) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .am-hero .am-lede{ position: relative; z-index: 1; max-width: 520px; margin: 24px auto 0; font-size: 18px; line-height: 1.55; color: var(--am-ink-dim); } .am-hero-actions{ position: relative; z-index: 1; margin-top: 36px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .am-section{ padding: 100px 0; } .am-section-head{ max-width: 600px; margin-bottom: 56px; } .am-section-head h2{ font-size: clamp(28px,4vw,42px); line-height: 1.05; } .am-section-head p{ margin-top: 14px; font-size: 16px; color: var(--am-ink-dim); } .am-steps{ display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; } @media (max-width: 820px){ .am-steps{ grid-template-columns: 1fr; } } .am-step{ background: var(--am-glass-bg); backdrop-filter: blur(var(--am-blur)); border: 1px solid var(--am-glass-border); border-radius: 26px; padding: 34px 28px; } .am-step .am-tag{ font-size: 11.5px; color: var(--am-lavender); letter-spacing: 0.06em; text-transform: uppercase; display: block; margin-bottom: 14px; } .am-step h3{ font-size: 18px; margin-bottom: 8px; } .am-step p{ font-size: 14px; } .am-cta-band{ margin: 0 32px; border-radius: 32px; padding: 72px 40px; text-align: center; position: relative; overflow: hidden; background: linear-gradient(135deg, rgba(167,139,250,0.28), rgba(255,90,78,0.22)); } .am-cta-band h2{ font-size: clamp(26px,4vw,38px); max-width: 520px; margin: 0 auto 14px; } .am-cta-band p{ color: var(--am-ink-dim); max-width: 420px; margin: 0 auto 28px; } .am-marquee{ border-top: 1px solid var(--am-line); border-bottom: 1px solid var(--am-line); padding: 20px 0; overflow: hidden; white-space: nowrap; } .am-marquee-track{ display: inline-block; animation: am-scroll 26s linear infinite; } .am-marquee-track span{ font-size: 13px; color: var(--am-ink-dim); margin: 0 30px; letter-spacing: 0.03em; } @keyframes am-scroll{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} } footer.site-footer, #colophon{ background: var(--am-bg-2) !important; border-top: 1px solid var(--am-line) !important; color: var(--am-ink-dim) !important; }