/* ═══════════════════════════════════════════════ GICELL ACADEMY — Brand Baseline (Tutor LMS 4.0 + WooCommerce) Mapea la UI NATIVA de Tutor (panel de instructor, azul #4979e8) y de WooCommerce (my-account / checkout / cart, default) a los tokens de marca monocromo-luxury, SIN overridear plantillas. Carga site-wide DESPUÉS de tutor.min.css / woocommerce.css (enqueue prioridad 25). Depende de gicell-tokens.css → var(--gold), var(--line), var(--radius)… ═══════════════════════════════════════════════ */ /* ═══════════ 1. TUTOR — remap de la escala de marca a dorado ═══════════ Tutor deriva su acento de una escala de custom-props. Su color efectivo se inyecta inline como :root{ --tutor-color-primary:#3E64DE } (classes/Assets.php) y --tutor-actions-brand-* quedan PRE-RESUELTOS en :root a partir de --tutor-brand-500 (#4979e8). Por eso NO basta remapear la escala: hay que fijar valores LITERALES en body. Al declararlos en ganan a :root para TODO el subárbol (body está más cerca en el árbol de herencia que ), así que toda la UI de Tutor hereda el dorado sin tocar tutor.min.css. */ body { --tutor-brand-500: var(--gold); /* #C9A86A */ --tutor-brand-600: #b8965a; /* dorado -10% (hover/secundario) */ --tutor-brand-700: #a5854b; /* dorado -20% (active/pressed) */ --tutor-actions-brand-primary: var(--gold); --tutor-actions-brand-secondary: #b8965a; --tutor-color-primary: var(--gold); --tutor-color-primary-hover: #b8965a; --tutor-color-primary-rgb: 201, 168, 106; /* gold en RGB: tints/focus-rings rgba(var(--…-rgb)) dejan de salir azules */ } /* ═══════════ 2. TUTOR — clases base ═══════════ */ /* Cuerpo del panel → tipografía de marca (seguro: sólo wrappers de Tutor). */ .tutor-dashboard, .tutor-wrap { font-family: var(--font-body); } /* Botón primario: usa background-color:var(--tutor-color-primary) (ya dorado por el remap), pero forzamos texto oscuro legible sobre dorado + radius de marca. !important para ganar al color:#fff hardcodeado en tutor.min.css. */ .tutor-btn-primary { background-color: var(--gold) !important; border-color: var(--gold) !important; color: #14110a !important; border-radius: var(--radius); } .tutor-btn-primary:hover, .tutor-btn-primary:focus { background-color: #b8965a !important; border-color: #b8965a !important; color: #14110a !important; } /* Outline / ghost: borde y texto dorados; hover se rellena de dorado. */ .tutor-btn-outline-primary { border-color: var(--gold) !important; color: var(--gold) !important; } .tutor-btn-outline-primary:hover, .tutor-btn-outline-primary:focus { background-color: var(--gold) !important; border-color: var(--gold) !important; color: #14110a !important; } .tutor-btn-ghost { color: var(--gold) !important; } .tutor-btn-ghost:hover, .tutor-btn-ghost:focus { color: #b8965a !important; } /* Radius de marca en cualquier botón de Tutor. */ .tutor-btn { border-radius: var(--radius); } /* Nav links del dashboard: el estado activo hereda gold vía --tutor-color-primary, lo reforzamos por si algún tema pisa el color; hover también dorado. */ .tutor-nav-link.is-active { color: var(--gold); } .tutor-nav-link:hover { color: var(--gold); } /* Inputs / selects: hairline de marca en reposo, dorado en foco. .tutor-form-control fija border-color:#ececed!important → necesitamos !important. No tocamos border-radius aquí (Tutor agrupa inputs+botón en el buscador). */ .tutor-form-control, .tutor-form-select, .tutor-form-wrap input { border: 1px solid var(--line) !important; } .tutor-form-control:focus, .tutor-form-select:focus, .tutor-form-wrap input:focus { border-color: var(--gold) !important; box-shadow: 0 0 0 3px rgba(201, 168, 106, 0.18) !important; outline: none; } /* Barras de progreso: el fill nativo usa verde (--tutor-actions-success-primary); lo llevamos a dorado de marca. Cubrimos las variantes reales de Tutor 4 (.tutor-progress-bar-fill / .tutor-progress-filled) + genérico defensivo. */ .tutor-progress-bar span, .tutor-progress-bar-fill, .tutor-progress-filled, [class*="progress"][class*="fill"] { background-color: var(--gold) !important; } /* Headings del dashboard → serif de marca (Playfair). */ .tutor-dashboard h1, .tutor-dashboard h2, .tutor-dashboard h3, .tutor-dashboard-title { font-family: var(--font-display); } /* Tarjetas: hairline y radius de marca (gana a border-idle por orden de carga). */ .tutor-card { border: 1px solid var(--line); border-radius: var(--radius); } /* ═══════════ 3. WOOCOMMERCE ═══════════ */ /* Botones (add-to-cart, proceed, place-order, submit review): dorado + texto oscuro + radius de marca, sin sombra/relieve chillón del skin default. */ .woocommerce a.button, .woocommerce button.button, .woocommerce button.button.alt, .woocommerce #respond input#submit { background-color: var(--gold); color: #14110a; border-radius: var(--radius); box-shadow: none; text-shadow: none; } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce button.button.alt:hover, .woocommerce #respond input#submit:hover, .woocommerce a.button:focus, .woocommerce button.button:focus, .woocommerce button.button.alt:focus, .woocommerce #respond input#submit:focus { background-color: #b8965a; color: #14110a; } /* Navegación de "Mi cuenta": item activo (li.is-active) y hover en dorado. */ .woocommerce-MyAccount-navigation ul li.is-active a, .woocommerce-MyAccount-navigation a:hover { color: var(--gold); } /* Precios: serif de marca + tinta principal (dan peso editorial). */ .woocommerce .price, .woocommerce-Price-amount { font-family: var(--font-display); color: var(--ink); } /* Avisos (message / info): acento lateral dorado en vez de la barra de color default; recoloreamos también el borde superior nativo para coherencia. */ .woocommerce-message, .woocommerce-info { border-left: 4px solid var(--gold); border-top-color: var(--gold); } /* Inputs de formularios (checkout / edit-account): hairline de marca + foco dorado. */ .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select { border: 1px solid var(--line); border-radius: var(--radius); } .woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus, .woocommerce form .form-row select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201, 168, 106, 0.18); outline: none; } /* Headings del área de cuenta → serif de marca (acotado al contenido Woo para no tocar el chrome header/footer del sitio). */ .woocommerce-account .woocommerce-MyAccount-content h1, .woocommerce-account .woocommerce-MyAccount-content h2, .woocommerce-account .woocommerce-MyAccount-content h3, .woocommerce-account .woocommerce-MyAccount-content .woocommerce-column__title { font-family: var(--font-display); } /* ═══════════ Neutralizar el color de link rosado del reset del tema padre ═══════════ hello-elementor/assets/css/reset.css pinta los links "desnudos" en #cc3366 (rosa). gicell-brand.css carga en prioridad 25 (después del reset) → gana por orden a igual especificidad. Los links con estilo propio (nav, footer, cards, usermenu, CTAs) tienen mayor especificidad y no se ven afectados. NOTA: NO se neutraliza `button` aquí: setear color en `button`/[type=submit] a este nivel (0,1,0) pisaría por orden a botones ya estilados (p.ej. .gcauth__btn blanco), dejándolos ilegibles. Los botones "tab" del reset ya se resuelven con especificidad propia (.gicell-tabs .gicell-tab-btn). */ a { color: var(--gold); } a:hover { color: var(--gold-soft); } /* ═══════════ WooCommerce → My Account: encaje con la marca ═══════════ Selectores verificados en vivo (body.woocommerce-account, .woocommerce-MyAccount-*). */ /* Título de página redundante ("My account") — la cuenta ya tiene su contexto. */ .woocommerce-account .page-header { display: none; } /* Nav lateral como lista branded (card + hairlines + activo dorado). */ .woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0 0 24px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--white); } .woocommerce-account .woocommerce-MyAccount-navigation ul li { margin: 0; border-bottom: 1px solid var(--line); } .woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child { border-bottom: none; } .woocommerce-account .woocommerce-MyAccount-navigation ul li a { display: block; padding: 12px 18px; font-family: var(--font-body); color: var(--ink) !important; text-decoration: none; transition: background .15s ease, color .15s ease; } .woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover { background: var(--paper-2); color: var(--gold) !important; } .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a { background: rgba(201, 168, 106, 0.12); color: var(--ink) !important; box-shadow: inset 3px 0 0 var(--gold); font-weight: 500; } /* Contenido: tipografía y encabezados de marca. */ .woocommerce-account .woocommerce-MyAccount-content { font-family: var(--font-body); color: var(--ink); } .woocommerce-account .woocommerce-MyAccount-content h1, .woocommerce-account .woocommerce-MyAccount-content h2, .woocommerce-account .woocommerce-MyAccount-content h3 { font-family: var(--font-display); } /* Tablas (pedidos / descargas) con hairlines de marca. */ .woocommerce-account table.shop_table { border: 1px solid var(--line); border-radius: var(--radius); border-collapse: separate; border-spacing: 0; overflow: hidden; } .woocommerce-account table.shop_table th, .woocommerce-account table.shop_table td { border-color: var(--line) !important; } /* ═══════════ WooCommerce Blocks (Cart / Checkout) → marca ═══════════ Selectores verificados en vivo (.wc-block-cart, .wc-block-cart__submit-button, etc.). */ /* Título de página redundante ("Cart" / "Checkout"). */ .woocommerce-cart .page-header, .woocommerce-checkout .page-header { display: none; } /* CTA principal (Proceder al pago / Realizar pedido) → dorado. */ .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button, .wc-block-components-button.wp-element-button.contained { background-color: var(--gold) !important; color: #14110a !important; border-radius: 999px !important; box-shadow: none !important; } .wc-block-cart__submit-button:hover, .wc-block-components-checkout-place-order-button:hover, .wc-block-components-button.wp-element-button.contained:hover { background-color: #b8965a !important; } /* Tipografía de marca en los bloques. */ .wc-block-cart, .wc-block-checkout { font-family: var(--font-body); color: var(--ink); } .wc-block-cart h1, .wc-block-cart h2, .wc-block-checkout h1, .wc-block-checkout h2, .wc-block-components-title { font-family: var(--font-display) !important; } /* Total destacado en serif de marca. */ .wc-block-components-totals-item__value, .wc-block-formatted-money-amount { font-family: var(--font-display); }