/* Theme Name: Kadence DAP Theme URI: https://www.deporteargentinoplus.com.ar/ Description: Tema hijo de Kadence para Deporte Argentino Plus (DAP). Rediseno v2.0 (migracion de snippets WPCode a tema). Espeja la arquitectura de kadence-hap. Author: DAP Template: kadence Version: 1.0.0 Text Domain: kadence-dap */ /* ============================================================ * Variables de diseno (claro / oscuro). * El modo oscuro se activa con . * TODO: portar la paleta oscura EXACTA del snippet "DAP Modo Oscuro" al construir cada plantilla. * ============================================================ */ :root{ /* marca */ --dap-navy:#1A3A6B; --dap-blue:#2693F0; --dap-link:#0A5BA8; /* superficie / texto */ --bg:#E6EEF8; --ink:#0F172A; --muted:#64748B; --line:#E2E8F0; --panel:#FFFFFF; --topbar:#070D1A; /* logo halo (para cuando el header tenga fondo con fotos, como HAP) */ --halo:0; } :root{ --bg:#FFFFFF; } [data-theme="dark"]{ --bg:#0A1426; --ink:#F1F5FB; --muted:#9AA8C0; --line:#1F3050; --panel:#0F1B33; --halo:.9; } /* Reset/base minimo. El CSS de cada bloque (header, home, nota, etc.) se va agregando a medida que se construye cada plantilla. */ html{box-sizing:border-box} *,*::before,*::after{box-sizing:inherit} /* Blindaje (igual que HAP): ningun elemento ancho hace que la web se "vaya de ancho" en mobile (incluye el header sticky). Global, no solo en media query. */ html,body{overflow-x:hidden;max-width:100%} body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.55} /* Sin margin-top por defecto en titulos de tarjetas (causa "aire" pill->titulo). :where = 0 especificidad: gana al default del navegador pero respeta cualquier margen explicito. */ .dh-wrap :where(h1,h2,h3,h4,h5),.dcat-wrap :where(h1,h2,h3,h4,h5),.dn-wrap :where(h2,h3,h4,h5),.dp-wrap :where(h2,h3,h4,h5),.dba-wrap :where(h1,h2,h3,h4,h5),.d4-wrap :where(h2,h3,h4,h5){margin-top:0;margin-bottom:0} img{max-width:100%;height:auto} a{color:var(--dap-link)} .dap-container{max-width:1280px;margin:0 auto;padding:0 24px} /* ============================================================ * HEADER (topbar + nav multideporte). Portado de "DAP Header". * ============================================================ */ .admin-bar .dap-header{top:32px} @media screen and (max-width:782px){.admin-bar .dap-header{top:46px}} .dap-topbar{background:#070D1A;color:#fff;font-size:13px;padding:8px 0;font-family:'DM Sans',sans-serif} .dap-topbar .dap-container{display:flex;justify-content:space-between;align-items:center;gap:16px} .dap-date{color:#cbd5e1;text-transform:capitalize} .dap-topbar-right{display:flex;align-items:center;gap:18px} .dap-cafecito{display:inline-flex;align-items:center;gap:6px;color:#2693F0;font-weight:500;text-decoration:none} .dap-socials{display:flex;gap:12px} .dap-socials a{color:#cbd5e1;font-size:16px;text-decoration:none;transition:color .2s} .dap-socials a:hover{color:#2693F0} .dap-theme-toggle{background:transparent;border:1px solid rgba(255,255,255,.15);color:#cbd5e1;width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px} .dap-theme-toggle:hover{border-color:#2693F0;color:#2693F0} /* Header con collage de fotos de deportes esfumado (Guille 16/06, como HAP): velo + montaje difuminado + color base. */ .dap-header{background:radial-gradient(130% 150% at 5% 50%,rgba(230,238,248,.60),rgba(230,238,248,0) 42%),linear-gradient(rgba(230,238,248,.74),rgba(230,238,248,.74)),url(assets/img/header-collage.webp) center/cover no-repeat,#E6EEF8;border-bottom:1px solid #E2E8F0;position:sticky;top:0;z-index:999;font-family:'DM Sans',sans-serif} .dap-header::after{content:"";display:block;height:3px;background:linear-gradient(90deg,#1A3A6B 0%,#1A3A6B 55%,#2693F0 55%,#2693F0 100%)} .dap-header .dap-container{display:flex;align-items:center;padding-top:14px;padding-bottom:14px;gap:18px} .dap-logo-wrap{position:relative;display:inline-flex;align-items:center;flex-shrink:0;padding:8px 16px;text-decoration:none} .dap-logo-img{height:105px;width:auto;display:block} .dap-main-nav{display:flex;align-items:center;gap:4px;margin-left:auto} .dap-main-nav a{display:inline-flex;align-items:center;gap:4px;padding:10px 14px;font-size:14px;font-weight:700;color:#0F172A;border-radius:6px;text-transform:uppercase;letter-spacing:.3px;text-decoration:none;transition:all .2s;white-space:nowrap} .dap-main-nav a:hover{background:#F6F8FC;color:#0A5BA8} .dap-main-nav a.dap-active{color:#0A5BA8;background:#EBF4FF} .dap-has-arrow::after{content:"";display:inline-block;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid currentColor;margin-left:6px;opacity:.5} .dap-nav-item{position:relative} .dap-dropdown-menu,.dap-mega-menu{position:absolute;top:calc(100% + 8px);left:0;background:#fff;border:1px solid #E2E8F0;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.12);padding:6px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:all .2s;z-index:1000;min-width:220px} .dap-nav-item:hover .dap-dropdown-menu,.dap-nav-item:hover .dap-mega-menu{opacity:1;visibility:visible;transform:translateY(0)} .dap-dropdown-menu a{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:6px;font-size:12px;font-weight:600;color:#0F172A;text-transform:uppercase;letter-spacing:.4px;transition:all .2s;white-space:nowrap} .dap-dropdown-menu a:hover{background:#F6F8FC;color:#0A5BA8} .dap-dropdown-menu a i{font-size:15px;color:#0A5BA8;flex-shrink:0} .dap-mega-menu{min-width:640px;padding:20px;left:50%;transform:translateX(-50%) translateY(-6px)} .dap-nav-item:hover .dap-mega-menu{transform:translateX(-50%) translateY(0);opacity:1;visibility:visible} .dap-mega-label{font-size:10px;font-weight:700;color:#64748B;text-transform:uppercase;letter-spacing:1px;margin-bottom:14px} .dap-sports-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:3px} .dap-sports-grid a{display:flex;align-items:center;gap:7px;padding:9px 11px;border-radius:7px;font-size:11px;font-weight:600;color:#0F172A;text-transform:uppercase;letter-spacing:.4px;transition:all .18s;border:1px solid transparent;white-space:nowrap} .dap-sports-grid a:hover{background:#EBF4FF;color:#0A5BA8} .dap-sports-grid a i{font-size:17px;color:#2693F0;flex-shrink:0} .dap-radio-link{color:#0A5BA8 !important;font-weight:600 !important} /* Lupita de busqueda avanzada (en el header, al lado del menu / hamburguesa). */ .dap-search-link{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;color:#0F172A;background:transparent;border:1px solid #E2E8F0;font-size:20px;text-decoration:none;transition:all .2s;flex-shrink:0;margin-left:10px} .dap-search-link:hover{background:#EBF4FF;border-color:#2693F0;color:#0A5BA8} [data-theme="dark"] .dap-search-link{color:#F1F5FB;border-color:#1F3050} [data-theme="dark"] .dap-search-link:hover{background:rgba(38,147,240,.14);border-color:#2693F0;color:#6BB5F8} /* Link "Búsqueda avanzada" bajo el buscador del sidebar (subrayado, igual que HAP). */ .adv-link{margin:10px 0 0;text-align:center} .dh-sf + .adv-link{margin-top:4px} .dn-sf + .adv-link{margin-top:-16px} .adv-link a{color:#0A5BA8;text-decoration:underline;text-underline-offset:2px;font-weight:600;font-size:12px;display:inline-flex;align-items:center;gap:5px} .adv-link a:hover{color:#2693F0} .adv-link a i{font-size:13px} .sf + .adv-link{margin-top:4px} [data-theme="dark"] .adv-link a{color:#fff} [data-theme="dark"] .adv-link a:hover{color:#6BB5F8} /* Buscador reutilizable del sidebar (.sf) — mismo look que .dn-sf, disponible global (archivo/categoria/busqueda). Pildora blanca + boton redondo azul. */ .sf{display:flex;align-items:center;background:#FFFFFF;border:2px solid #E2E8F0;border-radius:50px;padding:6px 6px 6px 18px;transition:all .25s} .sf:focus-within{border-color:#2693F0;box-shadow:0 0 0 4px #EBF4FF} .sf>i{font-size:18px;color:#64748B;margin-right:10px;flex-shrink:0} .sf input{flex:1;background:transparent;border:0;outline:none;padding:10px 0;font-size:14px;color:#0F172A;font-family:inherit;min-width:0} .sf input::placeholder{color:#94A3B8} .sf button{background:#2693F0;color:#0A1530;border:0;width:38px;height:38px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0} .sf button:hover{background:#0A5BA8;color:#fff} [data-theme="dark"] .sf{background:#0F1B33;border-color:#1F3050} [data-theme="dark"] .sf input{color:#F1F5FB} [data-theme="dark"] .sf:focus-within{border-color:#2693F0;box-shadow:0 0 0 4px rgba(38,147,240,.18)} /* Boton redondo de busqueda MAS LINDO (Guille): flecha bien centrada + mas marcada (negrita simulada con text-stroke, la fuente de iconos es de un solo peso). */ .sf button i,.dn-sf button i,.dh-sf button i,.dp-sf button i{font-size:19px;line-height:1;-webkit-text-stroke:.6px currentColor} .dcat-tsearch button i{font-size:16px;line-height:1;-webkit-text-stroke:.5px currentColor} /* Header en modo oscuro */ [data-theme="dark"] .dap-header{background:radial-gradient(130% 150% at 5% 50%,rgba(12,24,53,.60),rgba(12,24,53,0) 44%),linear-gradient(rgba(12,24,53,.82),rgba(12,24,53,.82)),url(assets/img/header-collage.webp) center/cover no-repeat,#0C1835;border-bottom-color:#1F3050} [data-theme="dark"] .dap-main-nav a{color:#F1F5FB} [data-theme="dark"] .dap-main-nav a:hover{background:#16243F;color:#6BB5F8} [data-theme="dark"] .dap-main-nav a.dap-active{color:#6BB5F8;background:rgba(38,147,240,.14)} [data-theme="dark"] .dap-dropdown-menu,[data-theme="dark"] .dap-mega-menu{background:#0F1B33;border-color:#1F3050;box-shadow:0 8px 24px rgba(0,0,0,.5)} [data-theme="dark"] .dap-dropdown-menu a{color:#F1F5FB} [data-theme="dark"] .dap-dropdown-menu a:hover{background:#16243F;color:#6BB5F8} [data-theme="dark"] .dap-dropdown-menu a i{color:#6BB5F8} [data-theme="dark"] .dap-mega-label{color:#9AA8C0} [data-theme="dark"] .dap-sports-grid a{color:#F1F5FB} [data-theme="dark"] .dap-sports-grid a:hover{background:rgba(38,147,240,.14);color:#6BB5F8} [data-theme="dark"] .dap-radio-link{color:#6BB5F8 !important} [data-theme="dark"] .dap-logo-wrap::before{content:"";position:absolute;inset:-6px -10px;background:radial-gradient(ellipse at center,rgba(255,255,255,.95) 0%,rgba(255,255,255,.7) 40%,rgba(255,255,255,0) 75%);z-index:0;border-radius:24px;filter:blur(12px);pointer-events:none} [data-theme="dark"] .dap-logo-wrap img{position:relative;z-index:1} /* ============================================================ * HEADER MOVIL (hamburguesa <=900px). Portado de "DAP Header Movil". * ============================================================ */ .dap-burger{display:none;background:transparent;border:1px solid rgba(15,23,42,.18);color:#0F172A;width:44px;height:44px;border-radius:8px;align-items:center;justify-content:center;cursor:pointer;font-size:24px;flex-shrink:0} .dap-mobile-menu{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-top:1px solid #E2E8F0;box-shadow:0 12px 28px rgba(0,0,0,.18);max-height:calc(100vh - 90px);overflow-y:auto;-webkit-overflow-scrolling:touch;z-index:1001} .dap-mm-link{display:block;padding:15px 22px;font-family:'DM Sans',sans-serif;font-size:15px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;color:#0F172A;text-decoration:none;border-bottom:1px solid #EEF2F8} .dap-mm-sec{border-bottom:1px solid #EEF2F8} .dap-mm-head{display:flex;align-items:center;justify-content:space-between;width:100%;padding:15px 22px;background:none;border:none;font-family:'DM Sans',sans-serif;font-size:15px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;color:#0F172A;cursor:pointer;text-align:left} .dap-mm-chev{font-size:18px;color:#64748B;transition:transform .2s;flex-shrink:0} .dap-mm-sec.open .dap-mm-chev{transform:rotate(180deg)} .dap-mm-sub{display:none;padding:4px 0 12px;background:#F8FAFC} .dap-mm-sec.open .dap-mm-sub{display:block} .dap-mm-sub a{display:flex;align-items:center;gap:10px;padding:11px 30px;font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.3px;color:#0F172A;text-decoration:none} .dap-mm-sub a i{color:#2693F0;font-size:16px;flex-shrink:0} [data-theme="dark"] .dap-burger{border-color:rgba(255,255,255,.2);color:#E2E8F0} [data-theme="dark"] .dap-mobile-menu{background:#0F1B33;border-color:#1E2D4A} [data-theme="dark"] .dap-mm-link,[data-theme="dark"] .dap-mm-head,[data-theme="dark"] .dap-mm-sub a{color:#E2E8F0} [data-theme="dark"] .dap-mm-link,[data-theme="dark"] .dap-mm-sec{border-color:#1E2D4A} [data-theme="dark"] .dap-mm-sub{background:#0A1426} @media (max-width:900px){ .dap-main-nav{display:none !important} .dap-mobile-menu.open{display:block} .dap-topbar .dap-container{flex-wrap:wrap;gap:6px 14px} .dap-topbar-right{flex-wrap:wrap;justify-content:flex-end;gap:10px 14px;min-width:0} .dap-topbar{font-size:12px} /* El logo cuadrado debe llevar width explicito (si no, en flex reserva su ancho intrinseco 595px y empuja todo). Con 2 items (logo + hamburguesa) space-between es infalible. */ .dap-header .dap-container{gap:8px;padding-top:8px;padding-bottom:8px;flex-wrap:nowrap;justify-content:space-between} .dap-logo-wrap{padding:4px 6px;flex-shrink:0;min-width:0} .dap-logo-img{height:58px !important;width:58px !important} /* Lupita + hamburguesa: ambas a la derecha, lupita a la IZQUIERDA de la hamburguesa (patrón HAP). */ .dap-search-link{display:inline-flex !important;order:1;margin-left:auto;width:44px;height:44px} .dap-burger{display:inline-flex !important;order:2;margin-left:8px;flex-shrink:0} } /* ============================================================ * FOOTER. Portado de "DAP Footer". (Fondo navy fijo: igual en claro/oscuro.) * ============================================================ */ .dap-footer{background:#070D1A;color:#cbd5e1;padding:26px 0 14px;font-family:'DM Sans',sans-serif} .dap-footer .dap-container{max-width:1280px;margin:0 auto;padding:0 24px} .dap-footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;margin-bottom:16px;align-items:start} .dap-footer-brand .dap-logo-footer{position:relative;display:inline-flex;padding:8px 16px;text-decoration:none} .dap-footer-brand .dap-logo-footer::before{content:"";position:absolute;inset:-6px -10px;background:radial-gradient(ellipse at center,rgba(255,255,255,.97) 0%,rgba(255,255,255,.85) 35%,rgba(255,255,255,.45) 65%,rgba(255,255,255,0) 100%);opacity:.9;z-index:0;border-radius:24px;filter:blur(12px);pointer-events:none} .dap-footer-brand .dap-logo-footer img{position:relative;z-index:1;height:64px;width:auto;display:block} .dap-footer-brand p{font-size:13px;color:#94a3b8;line-height:1.6;margin-top:10px;max-width:300px} .dap-footer-col h5{font-family:'Bricolage Grotesque',sans-serif;font-size:13px;font-weight:600;color:#fff;text-transform:uppercase;letter-spacing:1.2px;margin-bottom:18px} .dap-footer-col ul{list-style:none;display:flex;flex-direction:column;gap:10px;padding:0;margin:0} .dap-footer-col a{font-size:13px;color:#94a3b8;text-decoration:none;transition:color .2s} .dap-footer-col a:hover{color:#2693F0} .dap-footer-socials{display:flex;gap:12px;margin-top:4px} .dap-footer-socials a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;font-size:18px;color:#cbd5e1;text-decoration:none;transition:all .2s} .dap-footer-socials a:hover{background:#2693F0;color:#fff} .dap-footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:24px;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#64748b;gap:16px;flex-wrap:wrap} .dap-footer-bottom .dap-legal{display:flex;gap:20px} .dap-footer-bottom .dap-legal a{color:#64748b;text-decoration:none;transition:color .2s} .dap-footer-bottom .dap-legal a:hover{color:#2693F0} @media (max-width:1024px){.dap-footer-grid{grid-template-columns:1fr 1fr;gap:32px}} @media (max-width:640px){.dap-footer{padding:22px 0 12px}.dap-footer-grid{grid-template-columns:1fr;gap:20px;margin-bottom:14px}.dap-footer-bottom{flex-direction:column;gap:10px;text-align:center;padding-top:14px}.dap-footer-col h5{margin-bottom:10px}.dap-footer-brand .dap-logo-footer img{height:52px}} /* ============================================================ * Widget "Seguinos en redes" (.dcat-sw) — global (home, categoría, nota, 404). * ============================================================ */ .dcat-sw{background:#fff;border:1px solid #E2E8F0;border-radius:14px;padding:20px} .dcat-sw-title{font-family:'Bricolage Grotesque',sans-serif;font-size:13px;font-weight:600;color:#0F172A;text-transform:uppercase;letter-spacing:.1em;margin-bottom:14px;text-align:center} .dcat-sgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px} .dcat-stile{display:flex;align-items:center;gap:10px;padding:12px;border-radius:9px;background:#F6F8FC;transition:all .25s;text-decoration:none;border:1px solid transparent;min-width:0} .dcat-stile>div{min-width:0} .dcat-stile:hover{transform:translateY(-2px);border-color:#2693F0;background:#EBF4FF} .dcat-stile i{font-size:22px;flex-shrink:0} .dcat-stile.fb i{color:#1877F2}.dcat-stile.ig i{color:#E4405F}.dcat-stile.x i{color:#0F172A}.dcat-stile.yt i{color:#FF0000} .dcat-stile .net{font-size:12px;font-weight:600;color:#0F172A;line-height:1.2} .dcat-stile .hand{font-size:10px;color:#64748b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} [data-theme="dark"] .dcat-sw{background:#0F1B33;border-color:#1F3050} [data-theme="dark"] .dcat-sw-title{color:#F1F5FB} [data-theme="dark"] .dcat-stile{background:#16243F} [data-theme="dark"] .dcat-stile:hover{background:rgba(38,147,240,.14);border-color:#2693F0} [data-theme="dark"] .dcat-stile .net{color:#F1F5FB} [data-theme="dark"] .dcat-stile.x i{color:#F1F5FB} /* ============================================================ * Cafecito (.??-caf) = mismas medidas que HAP (.caf) en todas las variantes * (home/nota/categoria/pagina/404). Paleta azul DAP. !important porque cada * plantilla define su propia variante en un CSS que carga despues de style.css. * ============================================================ */ .dcat-caf,.dn-caf,.dh-caf,.dp-caf,.d4-caf{border-radius:14px !important;padding:26px !important} .dcat-caf .ico,.dh-caf .ico,.dn-caf .dn-ci,.dp-caf .dp-ci,.d4-caf .d4-ci{font-size:34px !important;margin-bottom:10px !important} .dcat-caf h4,.dn-caf h4,.dh-caf h4,.dp-caf h4,.d4-caf h4{font-size:19px !important;margin-bottom:10px !important} .dcat-caf p,.dn-caf p,.dh-caf p,.dp-caf p,.d4-caf p{font-size:13px !important;max-width:240px;margin-bottom:18px !important} .dcat-caf a,.dn-caf a,.dh-caf a,.dp-caf a,.d4-caf a{padding:10px 20px !important;font-size:13px !important} /* ============================================================ * Anuncios AdSense (.dap-ad) — global (home, nota, categoria). Portado de "DAP Anuncios". * ============================================================ */ .dap-ad{margin:34px auto;text-align:center;max-width:100%;clear:both} .dap-ad .dap-ad-lbl{font-family:'DM Sans',sans-serif;font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:#94A3B8;margin-bottom:6px} .dap-ad ins{margin:0 auto} .dap-ad-end{margin:40px auto 4px} .dap-ad-sidebar{margin:0 0 24px} .dap-ad-ph{border:1px dashed #B9C6DA;border-radius:12px;padding:18px;background:repeating-linear-gradient(45deg,#F6F8FC,#F6F8FC 10px,#EEF2F8 10px,#EEF2F8 20px)} .dap-ad-ph .dap-ad-phx{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;color:#0A5BA8;font-size:13px;display:flex;align-items:center;justify-content:center;gap:8px} .dap-ad-sidebar.dap-ad-ph{min-height:250px;display:flex;flex-direction:column;justify-content:center} [data-theme="dark"] .dap-ad .dap-ad-lbl{color:#64748B} [data-theme="dark"] .dap-ad-ph{border-color:#243653;background:repeating-linear-gradient(45deg,#0F1B33,#0F1B33 10px,#16243F 10px,#16243F 20px)} [data-theme="dark"] .dap-ad-ph .dap-ad-phx{color:#5DD8E3}