/* ============================================================================ ckanext-sgc-theme — Branding UPeU · Portal de Datos Abiertos del SGC Paleta institucional (brand-tokens.md): azul brand #003865 · azul profundo #023052 · ámbar accent #F8A900 Se mapea sobre Bootstrap 5 + el CSS base de CKAN 2.11 (public/base/css/main.css), que define --bs-primary: #206b82 y compila botones/masthead con valores fijos. Este archivo SOLO sobreescribe; no toca el core. Carga después de `base/main`. ============================================================================ */ :root { --upeu-blue: #003865; /* brand primario (SVG oficial upeu.edu.pe) */ --upeu-blue-deep: #023052; /* hover / franjas oscuras */ --upeu-amber: #F8A900; /* acento institucional (barra del logo) */ --upeu-amber-600: #e59c00; /* ámbar hover */ --upeu-amber-700: #c98a00; /* ámbar active */ /* Bootstrap: variable primaria de CKAN 2.11 (#206b82 -> azul UPeU) */ --bs-primary: #003865; --bs-primary-rgb: 0, 56, 101; --bs-link-color: #003865; --bs-link-color-rgb: 0, 56, 101; --bs-link-hover-color: #023052; } /* ---- Cabecera estilo upeu.edu.pe -------------------------------------------- Barra superior (utilidades / Iniciar Sesión) azul profundo #023052 y barra principal (logo + menú) gris claro #EAEAEA con texto navy. Colores muestreados del propio upeu.edu.pe: top bar rgb(2,48,82) = #023052 · texto #F2F2F2 main bar rgb(234,234,234)= #EAEAEA · texto #00263D (~#003865) ------------------------------------------------------------------------- */ /* Barra superior — azul profundo (CKAN base: .account-masthead{#003647}) */ .account-masthead { background: #023052 !important; } /* El navegador pinta el lienzo bajo el contenido con el fondo de . Se iguala al footer para que no aparezca una franja blanca al fondo si la página es más corta que la pantalla. */ html { background-color: #023052; } /* Barra principal — gris claro (CKAN base: .masthead{#005d7a}) */ .masthead { background: #EAEAEA !important; border-bottom: 3px solid var(--upeu-blue); color: var(--upeu-blue); } /* Menú principal en navy; hover/activo con tinte azul suave (base: color:#fff) */ .masthead .main-navbar ul li a { color: var(--upeu-blue); } .masthead .main-navbar ul li:hover a, .masthead .main-navbar ul li:focus a, .masthead .main-navbar ul li.active a { color: var(--upeu-blue); background-color: rgba(0, 56, 101, .10); } /* Buscador del masthead sobre fondo claro (base lo asumía sobre azul) */ .masthead .section.controls .form-control, .masthead .site-search .form-control, .masthead .search-input-group .form-control { background: #fff; border-color: rgba(0, 56, 101, .35); color: var(--upeu-blue); } .masthead .site-search button, .masthead .section.controls .btn, .masthead .search-input-group .btn { color: var(--upeu-blue); } /* Logo SVG del masthead: contenerlo (el asset es el wordmark blanco+ámbar). Se iguala la especificidad de CKAN (.masthead .navbar .logo img{max-height:60px}) y se fija height explícito porque el SVG se sirve con width/height propios. */ .masthead .navbar .logo img, .masthead .logo img, .navbar-brand img { height: 44px; max-height: 44px; width: auto; } /* ---- Enlaces (CKAN base los fija en #206b82) ----------------------------- */ a { color: #003865; } a:hover, a:focus { color: #023052; } /* ---- Botón primario -> ámbar acento, texto azul (contraste ~6.4:1 AA) ---- */ .btn-primary, .btn-primary:focus { color: #003865; background-color: var(--upeu-amber); border-color: var(--upeu-amber); } .btn-primary:hover { color: #003865; background-color: var(--upeu-amber-600); border-color: var(--upeu-amber-600); } .btn-primary:active, .btn-primary.active, .btn-check:checked + .btn-primary, .show > .btn-primary.dropdown-toggle { color: #003865; background-color: var(--upeu-amber-700); border-color: var(--upeu-amber-700); } .btn-check:focus + .btn-primary, .btn-primary:focus { box-shadow: 0 0 0 .25rem rgba(248, 169, 0, .4); } /* ---- Acentos varios: badges, foco, secciones destacadas ------------------ */ .badge.bg-primary, .label-primary { background-color: var(--upeu-blue) !important; } .homepage .module-search .tags .tag, .tag { /* etiquetas -> azul UPeU */ background-color: var(--upeu-blue); border-color: var(--upeu-blue); } :focus-visible { outline: 2px solid var(--upeu-amber); outline-offset: 1px; } /* ---- Página "Acerca de / Política de Datos Abiertos" --------------------- */ .sgc-about h2 { color: var(--upeu-blue); margin-top: 1.6rem; font-size: 1.35rem; } .sgc-about .lead { color: #333; } .sgc-about .sgc-niveles th { background: var(--upeu-blue); color: #fff; } .sgc-badge { display: inline-block; padding: .18rem .55rem; border-radius: .35rem; font-size: .8rem; font-weight: 600; color: #fff; white-space: nowrap; } .sgc-badge.sgc-verde { background: #2e7d32; } .sgc-badge.sgc-ambar { background: var(--upeu-amber); color: var(--upeu-blue); } .sgc-badge.sgc-rojo { background: #b3261e; } /* ---- Iconos de categoría (grupos PNDA) — estilo PNDA/datosabiertos.gob.pe -- */ /* En el sidebar de facetas "Grupos" */ .nav-facet a[href*="groups="]::before { content: ""; display: inline-block; width: 17px; height: 17px; margin-right: .45rem; vertical-align: -3px; background-size: contain; background-repeat: no-repeat; background-position: center; } .nav-facet a[href*="groups=educacion"]::before { background-image: url(/sgc-theme/icons/educacion.svg); } .nav-facet a[href*="groups=ciencia-y-tecnologia"]::before{ background-image: url(/sgc-theme/icons/ciencia-y-tecnologia.svg); } .nav-facet a[href*="groups=desarrollo-social"]::before { background-image: url(/sgc-theme/icons/desarrollo-social.svg); } .nav-facet a[href*="groups=gobernabilidad"]::before { background-image: url(/sgc-theme/icons/gobernabilidad.svg); } .nav-facet a[href*="groups=economia-y-finanzas"]::before { background-image: url(/sgc-theme/icons/economia-y-finanzas.svg); } .nav-facet a[href*="groups=salud"]::before { background-image: url(/sgc-theme/icons/salud.svg); } .nav-facet a[href*="groups=cultura"]::before { background-image: url(/sgc-theme/icons/cultura.svg); } .nav-facet a[href*="groups=ambiente"]::before { background-image: url(/sgc-theme/icons/ambiente.svg); } /* Encabezados de faceta más ordenados (estilo PNDA) */ .filters .module-heading, .facet-heading, .nav-facet ~ .module-heading { color: var(--upeu-blue); font-weight: 600; } /* Página de Grupos: el icono centrado en la tarjeta, no estirado */ .media-image[src*="/sgc-theme/icons/"], .group-list .media-image, .media-grid .media-image { object-fit: contain; background: #f4f6f8; padding: 16px; } /* ============================================================================ HOME rediseñada (hero + grid de categorías + stats + CTA) — estilo PNDA/UPeU ============================================================================ */ :root { --sgc-ease-out: cubic-bezier(0.23, 1, 0.32, 1); } .sgc-home { } /* ---- Hero ---- */ .sgc-hero { background: linear-gradient(135deg, #023052 0%, #003865 55%, #00477e 100%); color: #fff; text-align: center; padding: 3.2rem 15px 2.8rem; border-bottom: 3px solid var(--upeu-amber); } .sgc-hero h1 { color:#fff; font-weight:700; margin:0 0 .55rem; font-size: clamp(1.9rem, 4vw, 2.7rem); letter-spacing:-.01em; } .sgc-hero-sub { color: rgba(255,255,255,.85); max-width: 700px; margin:0 auto 1.7rem; font-size: 1.06rem; line-height:1.55; } .sgc-hero-search { display:flex; max-width: 640px; margin:0 auto; background:#fff; border-radius:.65rem; overflow:hidden; box-shadow: 0 10px 34px rgba(0,0,0,.22); } .sgc-hero-search input { flex:1; border:0; padding:.95rem 1.15rem; font-size:1rem; color:#222; min-width:0; } .sgc-hero-search input:focus { outline:none; } .sgc-hero-search button { display:flex; align-items:center; gap:.45rem; border:0; cursor:pointer; background: var(--upeu-amber); color: var(--upeu-blue); padding:0 1.4rem; font-weight:600; transition: background 160ms ease; } .sgc-hero-search button:hover { background: var(--upeu-amber-600); } .sgc-hero-search button:active { background: var(--upeu-amber-700); } .sgc-hero-stats { display:flex; gap:2.6rem; justify-content:center; margin-top:1.9rem; flex-wrap:wrap; } .sgc-hero-stats div { display:flex; flex-direction:column; } .sgc-hero-stats strong { font-size:1.75rem; line-height:1; font-weight:700; } .sgc-hero-stats span { font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:rgba(255,255,255,.72); margin-top:.3rem; } /* ---- Categorías ---- */ .sgc-cats { padding: 2.8rem 15px 1rem; } .sgc-cats h2, .sgc-cta h2 { color: var(--upeu-blue); font-weight:700; } .sgc-cats h2 { text-align:center; margin-bottom:1.7rem; } .sgc-cat-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:1rem; } @media (max-width: 900px){ .sgc-cat-grid { grid-template-columns: repeat(2, 1fr); } } .sgc-cat { display:flex; flex-direction:column; align-items:center; gap:.7rem; text-align:center; padding:1.7rem 1rem; background:#fff; border:1px solid #e6e9ee; border-radius:.75rem; color: var(--upeu-blue); text-decoration:none; font-weight:600; transition: transform 220ms var(--sgc-ease-out), box-shadow 220ms ease, border-color 220ms ease; } .sgc-cat img { width:44px; height:44px; } @media (hover:hover) and (pointer:fine){ .sgc-cat:hover { transform: translateY(-3px); box-shadow:0 10px 26px rgba(0,56,101,.13); border-color: var(--upeu-amber); } } .sgc-cat:active { transform: translateY(-1px) scale(.99); } /* ---- CTA ---- */ .sgc-cta { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; margin: 1.4rem auto 3rem; padding:1.8rem 2rem; background:#f4f6f8; border-radius:.85rem; } .sgc-cta-text h2 { text-align:left; margin:0 0 .35rem; font-size:1.3rem; } .sgc-cta-text p { margin:0; color:#444; max-width:560px; } .sgc-cta-actions { display:flex; gap:.7rem; flex-wrap:wrap; } .btn-outline { border:1.5px solid var(--upeu-blue); color:var(--upeu-blue); background:transparent; padding:.5rem 1.05rem; border-radius:.45rem; font-weight:600; transition: background 160ms ease, color 160ms ease; } .btn-outline:hover { background:var(--upeu-blue); color:#fff; } @media (prefers-reduced-motion: reduce){ .sgc-cat, .sgc-cat:hover, .sgc-cat:active { transition:none; transform:none; } } /* ============================================================================ CATÁLOGO (/dataset) — tarjetas de resultado estilo PNDA, marca UPeU ============================================================================ */ .dataset-list { padding-left: 0; } .dataset-list .dataset-item { list-style: none; background: #fff; border: 1px solid #e6e9ee; border-radius: .7rem; padding: 1.05rem 1.3rem; margin-bottom: 1rem; transition: box-shadow 200ms ease, border-color 200ms ease, transform 200ms var(--sgc-ease-out); } @media (hover:hover) and (pointer:fine){ .dataset-list .dataset-item:hover { box-shadow: 0 8px 22px rgba(0,56,101,.10); border-color: #cfd6df; transform: translateY(-2px); } } .dataset-list .dataset-item .dataset-heading { margin: 0 0 .35rem; font-size: 1.12rem; line-height: 1.3; } .dataset-list .dataset-item .dataset-heading a { color: var(--upeu-blue); font-weight: 600; } .dataset-list .dataset-item .dataset-heading a:hover { color: var(--upeu-blue-deep); } /* icono de "conjunto de datos" antes del título (estilo tipo de contenido PNDA) */ .dataset-list .dataset-item .dataset-heading::before { content: ""; display: inline-block; width: 18px; height: 18px; margin-right: .5rem; vertical-align: -3px; background: no-repeat center/contain url("data:image/svg+xml;utf8,"); } .dataset-list .dataset-item .dataset-content > div, .dataset-list .dataset-item .dataset-content p { color: #556; font-size: .92rem; } /* Badges de formato con color por tipo (csv/xlsx/json/…) — estilo PNDA */ .dataset-resources .badge[data-format] { /* default primero (menor prioridad por orden) */ border-radius: .3rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: #fff !important; background: #5a6b7b; padding: .3em .55em; } .dataset-resources .badge[data-format="csv"] { background: #2e7d32; } .dataset-resources .badge[data-format="xlsx"], .dataset-resources .badge[data-format="xls"] { background: #1b7f4b; } .dataset-resources .badge[data-format="json"] { background: #e08600; } .dataset-resources .badge[data-format="geojson"] { background: #0a8f8f; } .dataset-resources .badge[data-format="xml"] { background: #7b4bad; } .dataset-resources .badge[data-format="rdf"] { background: #7b4bad; } .dataset-resources .badge[data-format="pdf"] { background: #b3261e; } .dataset-resources .badge[data-format="docx"], .dataset-resources .badge[data-format="doc"] { background: #1c5fb0; } /* Sidebar de facetas un poco más ordenado (estilo PNDA) */ .filters h2.module-heading, .filters .facet-title { color: var(--upeu-blue); font-weight: 700; font-size: 1rem; } .nav-facet .nav-item a { border-radius: .35rem; } .nav-facet .nav-item a:hover { background: rgba(0,56,101,.06); } /* ---- Footer: exactamente el mismo fondo que la barra superior (plano) ---- */ /* La barra superior es #023052 SIN textura; el footer base traía bg.png, que lo hacía verse distinto. Se iguala: fondo plano #023052, como el top bar. */ .site-footer { background: #023052 !important; } /* Bloques oscuros de CKAN (heading de búsqueda, secciones) al azul UPeU */ .module-heading, .hero .module-search .module-content { background: transparent; }