/*
Theme Name: FC United Child Theme
Theme URI: https://fc-united.axiomthemes.com
Description: FC United is a Premium WordPress theme that has built-in support for popular Page Builders, slider with swipe gestures, and is SEO- and Retina-ready. The unique system of inheritance and override options allows setting up individual parameters for different sections of your site and supported plugins.
Author: AxiomThemes
Author URI: https://axiomthemes.com
Version: 2.5.0
Tested up to: 6.9
Requires at least: 5.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, e-commerce, portfolio, grid-layout, one-column, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, custom-background, custom-colors, custom-header, custom-logo, custom-menu, editor-style, featured-image-header, featured-images, flexible-header, footer-widgets, full-width-template, microformats, post-formats, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks
Text Domain: fc-united
Template: fc-united
*/
/* =Child-Theme customization starts here
------------------------------------------------------------ */
/* =========================================================
Variables
========================================================= */
:root {
--sj-blue: #003b82;
--sj-yellow: #ffc400;
}
/* =========================================================
Ajustes globales
========================================================= */
.trx_addons_scroll_to_top {
background-color: #ffca05 !important;
}
:where(.home-hero) {
}
/* =========================================================
Tarjetas promocionales y estadísticas
========================================================= */
:where(.promo-grid) {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
align-items: stretch !important;
gap: 14px !important;
}
:where(.promo-card) {
min-width: 0 !important;
max-height: 150px!important;
min-height: 150px !important;
padding: 22px 18px 18px 92px !important;
overflow: hidden !important;
border: 4px solid #eef1f5 !important;
border-radius: 24px !important;
background-position: left center !important;
background-size: cover !important;
background-repeat: no-repeat !important;
justify-content: center !important;
}
:where(.promo-card) > .e-con-inner {
align-items: stretch !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
}
:where(.promo-card) > .e-con-inner > * {
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
margin-right: 0 !important;
margin-left: 0 !important;
}
:where(.promo-card) > .e-con-inner > .elementor-widget-heading {
margin-top: 0 !important;
}
:where(.club-stats) {
max-height: 150px!important;
min-height: 150px !important;
}
@media (max-width: 1024px) {
:where(.promo-grid) {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 767px) {
:where(.promo-grid) {
grid-template-columns: 1fr !important;
gap: 8px !important;
}
:where(.promo-card) {
min-height: clamp(112px, 31vw, 132px) !important;
padding: 13px 14px 11px clamp(88px, 25vw, 105px) !important;
border-width: 3px !important;
border-radius: 16px !important;
}
:where(.promo-card) .elementor-heading-title {
margin: 0 !important;
font-size: clamp(17px, 5vw, 21px) !important;
line-height: 1.02 !important;
}
:where(.promo-card) p {
margin: 2px 0 !important;
font-size: clamp(12px, 3.5vw, 14px) !important;
line-height: 1.1 !important;
}
:where(.promo-card) .elementor-button {
padding: 4px 0 !important;
font-size: 13px !important;
}
:where(.club-stats) {
min-height: auto !important;
}
}
/* ==========================================================
CF SANT JUST
FOOTER COMPLETO
DESKTOP + TABLET + MOBILE 2 COLUMNAS
========================================================== */
/* ==========================================================
VARIABLES GENERALES
========================================================== */
.sj-footer {
--sj-blue: #003f8c;
--sj-blue-dark: #002f6d;
--sj-blue-deep: #002459;
--sj-yellow: #ffc400;
--sj-yellow-hover: #ffd43b;
--sj-white: #ffffff;
--sj-white-soft: rgba(255, 255, 255, 0.82);
--sj-line: rgba(255, 255, 255, 0.20);
--sj-line-soft: rgba(255, 255, 255, 0.10);
width: 100%;
position: relative;
overflow: hidden;
color: var(--sj-white);
background:
radial-gradient(
circle at 45% -20%,
rgba(30, 110, 205, 0.24) 0%,
transparent 48%
),
linear-gradient(
135deg,
#064891 0%,
#003b82 48%,
#002e6c 100%
);
font-family:
"Montserrat",
Arial,
sans-serif;
}
/* ==========================================================
RESET INTERNO
========================================================== */
.sj-footer *,
.sj-footer *::before,
.sj-footer *::after {
box-sizing: border-box;
}
.sj-footer a,
.sj-footer a:visited,
.sj-footer a:focus,
.sj-footer a:active {
text-decoration: none;
}
.sj-footer ul,
.sj-footer ol {
margin-left: 0;
padding-left: 0;
}
/* ==========================================================
CONTENEDOR PRINCIPAL
========================================================== */
.sj-footer__inner {
width: min(100% - 60px, 1420px);
margin: 0 auto;
padding-top: 22px;
}
/* ==========================================================
PATROCINADORES
========================================================== */
.sj-footer-sponsors {
min-height: 86px;
display: grid;
grid-template-columns: 205px minmax(0, 1fr);
align-items: stretch;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 13px;
background: rgba(0, 42, 100, 0.26);
}
/* TÍTULO */
.sj-footer-sponsors__title {
display: flex;
align-items: center;
padding: 0 34px;
color: var(--sj-yellow);
font-size: 15px;
font-weight: 750;
line-height: 1;
letter-spacing: 0.45px;
border-right: 1px solid var(--sj-line);
}
/* CONTENEDOR DE LOGOS */
.sj-footer-sponsors__items {
min-width: 0;
display: grid;
grid-template-columns: repeat(6, 1fr);
}
/* PATROCINADOR */
.sj-sponsor {
min-width: 0;
min-height: 84px;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
padding: 10px 30px;
color: var(--sj-white) !important;
transition:
background-color 0.2s ease,
opacity 0.2s ease;
}
.sj-sponsor:hover {
background: rgba(255, 255, 255, 0.035);
}
/* SEPARADOR PATROCINADORES */
.sj-sponsor:not(:last-child)::after {
content: "";
position: absolute;
top: 25%;
right: 0;
width: 1px;
height: 50%;
background: rgba(255, 255, 255, 0.17);
}
/* NOMBRE */
.sj-sponsor__name {
color: rgba(255, 255, 255, 0.80);
font-size: 11px;
font-weight: 550;
line-height: 1;
letter-spacing: 0.25px;
text-align: center;
white-space: nowrap;
}
/* LOGO DE EJEMPLO */
.sj-sponsor__logo {
display: flex;
align-items: center;
justify-content: center;
color: var(--sj-white);
}
.sj-sponsor__logo--box {
min-width: 82px;
height: 32px;
padding: 0 12px;
border: 1px solid rgba(255, 255, 255, 0.78);
border-radius: 2px;
font-size: 18px;
font-weight: 500;
opacity: 0.82;
}
/* SVG DE EJEMPLO */
.sj-sponsor__symbol {
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.82;
}
.sj-sponsor__symbol svg {
width: 100%;
height: 100%;
display: block;
fill: currentColor;
}
/* LOGOS REALES */
.sj-sponsor__image {
width: auto;
max-width: 92px;
height: 34px;
display: block;
object-fit: contain;
opacity: 0.82;
transition:
opacity 0.2s ease,
transform 0.2s ease;
}
.sj-sponsor:hover .sj-sponsor__image {
opacity: 1;
transform: translateY(-1px);
}
/* ==========================================================
CONTENIDO PRINCIPAL
========================================================== */
.sj-footer-main {
min-height: 235px;
display: grid;
grid-template-columns:
1.16fr
0.92fr
1.08fr
1.30fr
0.92fr;
align-items: stretch;
margin-top: 30px;
margin-bottom: 24px;
}
/* ==========================================================
BLOQUE IDENTIDAD
========================================================== */
.sj-footer-brand {
min-width: 0;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding:
0
31px
0
10px;
text-align: center;
}
/* SEPARADOR */
.sj-footer-brand::after {
content: "";
position: absolute;
top: 14px;
right: 0;
width: 1px;
height: calc(100% - 28px);
background: var(--sj-line);
}
/* ESCUDO */
.sj-footer-brand__logo {
width: 112px;
max-width: 75%;
display: block;
margin: 0 auto 9px;
text-decoration: none !important;
}
.sj-footer-brand__logo img {
width: 100%;
height: auto;
display: block;
object-fit: contain;
}
/* NOMBRE */
.sj-footer-brand__name {
margin: 0;
color: var(--sj-white);
font-size: 18px;
font-weight: 750;
line-height: 1.15;
letter-spacing: 0.25px;
}
/* SOM I SEREM */
.sj-footer-brand__slogan {
margin-top: 5px;
position: relative;
color: rgba(255, 255, 255, 0.92);
font-size: 14px;
font-weight: 400;
line-height: 1.2;
}
/* LÍNEA AMARILLA */
.sj-footer-brand__slogan::after {
content: "";
width: 52px;
height: 2px;
display: block;
margin: 13px auto 0;
border-radius: 999px;
background: var(--sj-yellow);
}
/* ==========================================================
COLUMNAS
========================================================== */
.sj-footer-column {
min-width: 0;
position: relative;
padding:
11px
28px;
}
/* SEPARADOR */
.sj-footer-column::after {
content: "";
position: absolute;
top: 14px;
right: 0;
width: 1px;
height: calc(100% - 28px);
background: var(--sj-line);
}
.sj-footer-column:last-child::after {
display: none;
}
/* TÍTULOS */
.sj-footer-column__title {
margin: 0 0 21px !important;
padding: 0 !important;
color: var(--sj-yellow) !important;
font-size: 16px !important;
font-weight: 750 !important;
line-height: 1.15 !important;
letter-spacing: 0.45px;
text-transform: uppercase;
}
/* ==========================================================
LINKS CLUB / INSCRIPCIONS
========================================================== */
.sj-footer-links {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
.sj-footer-links li {
list-style: none !important;
margin: 0 0 16px !important;
padding: 0 !important;
}
.sj-footer-links li:last-child {
margin-bottom: 0 !important;
}
/* LINK */
.sj-footer-links a {
width: fit-content;
display: flex;
align-items: center;
gap: 12px;
color: rgba(255, 255, 255, 0.95) !important;
font-size: 14.5px;
font-weight: 400;
line-height: 1.25;
transition:
color 0.18s ease,
transform 0.18s ease;
}
.sj-footer-links a:hover {
color: var(--sj-yellow-hover) !important;
transform: translateX(2px);
}
/* FLECHA */
.sj-footer-chevron {
width: 7px;
height: 7px;
flex: 0 0 7px;
display: block;
border-top: 2px solid var(--sj-yellow);
border-right: 2px solid var(--sj-yellow);
transform: rotate(45deg);
transition: transform 0.18s ease;
}
.sj-footer-links a:hover .sj-footer-chevron {
transform:
translateX(2px)
rotate(45deg);
}
/* ==========================================================
CONTACTO
========================================================== */
.sj-footer-contact {
padding-left: 31px;
padding-right: 31px;
}
.sj-footer-contact__items {
display: flex;
flex-direction: column;
gap: 18px;
}
/* ITEM */
.sj-contact-item {
display: flex;
align-items: center;
gap: 13px;
color: rgba(255, 255, 255, 0.95) !important;
transition:
color 0.18s ease,
transform 0.18s ease;
}
.sj-contact-item:hover {
color: var(--sj-yellow-hover) !important;
transform: translateX(2px);
}
/* ICONO */
.sj-contact-item__icon {
width: 23px;
height: 23px;
flex: 0 0 23px;
display: flex;
align-items: center;
justify-content: center;
color: var(--sj-yellow);
}
.sj-contact-item__icon svg {
width: 100%;
height: 100%;
display: block;
fill: currentColor;
}
/* TEXTO */
.sj-contact-item__text {
min-width: 0;
color: inherit;
font-size: 14px;
font-weight: 400;
line-height: 1.35;
overflow-wrap: anywhere;
}
/* ==========================================================
REDES SOCIALES
========================================================== */
.sj-footer-social {
padding-left: 32px;
padding-right: 10px;
}
.sj-footer-social__items {
display: flex;
flex-direction: column;
gap: 17px;
}
/* LINK */
.sj-social-item {
width: fit-content;
display: flex;
align-items: center;
gap: 12px;
color: rgba(255, 255, 255, 0.95) !important;
font-size: 14.5px;
font-weight: 400;
line-height: 1;
transition:
color 0.18s ease,
transform 0.18s ease;
}
.sj-social-item:hover {
color: var(--sj-yellow-hover) !important;
transform: translateX(2px);
}
/* ICONO */
.sj-social-item__icon {
width: 31px;
height: 31px;
flex: 0 0 31px;
display: flex;
align-items: center;
justify-content: center;
color: var(--sj-yellow);
border: 1.5px solid var(--sj-yellow);
border-radius: 50%;
transition:
background-color 0.18s ease,
color 0.18s ease;
}
.sj-social-item__icon svg {
width: 17px;
height: 17px;
display: block;
fill: currentColor;
}
.sj-social-item:hover .sj-social-item__icon {
color: var(--sj-blue-dark);
background: var(--sj-yellow);
}
/* ==========================================================
PIE LEGAL
========================================================== */
.sj-footer-bottom {
min-height: 63px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
padding: 0 19px;
border-top: 1px solid rgba(255, 255, 255, 0.17);
}
/* COPYRIGHT */
.sj-footer-copyright {
display: flex;
align-items: center;
gap: 14px;
color: rgba(255, 255, 255, 0.72);
font-size: 12px;
font-weight: 400;
line-height: 1.25;
white-space: nowrap;
}
/* SEPARADOR */
.sj-footer-bottom__divider {
width: 1px;
height: 15px;
background: rgba(255, 255, 255, 0.48);
}
/* LINKS LEGALES */
.sj-footer-legal {
display: flex;
align-items: center;
gap: 14px;
}
.sj-footer-legal a {
color: rgba(255, 255, 255, 0.72) !important;
font-size: 12px;
font-weight: 400;
line-height: 1;
white-space: nowrap;
transition: color 0.18s ease;
}
.sj-footer-legal a:hover {
color: var(--sj-yellow) !important;
}
/* SEPARADORES */
.sj-footer-legal > span {
width: 1px;
height: 15px;
display: block;
background: var(--sj-yellow);
}
/* ==========================================================
DESKTOP MEDIO
========================================================== */
@media (max-width: 1250px) {
.sj-footer__inner {
width: min(100% - 40px, 1180px);
}
.sj-footer-sponsors {
grid-template-columns: 180px minmax(0, 1fr);
}
.sj-footer-sponsors__title {
padding: 0 25px;
font-size: 14px;
}
.sj-footer-main {
grid-template-columns:
1.08fr
0.90fr
1fr
1.25fr
0.88fr;
}
.sj-footer-brand {
padding-right: 24px;
}
.sj-footer-brand__logo {
width: 100px;
}
.sj-footer-brand__name {
font-size: 17px;
}
.sj-footer-column {
padding-left: 21px;
padding-right: 21px;
}
.sj-footer-contact {
padding-left: 24px;
padding-right: 24px;
}
.sj-footer-social {
padding-left: 24px;
}
.sj-footer-column__title {
font-size: 15px !important;
}
.sj-footer-links a,
.sj-social-item {
font-size: 13.5px;
}
.sj-contact-item__text {
font-size: 13px;
}
}
/* ==========================================================
TABLET
========================================================== */
@media (max-width: 1024px) {
.sj-footer__inner {
width: min(100% - 32px, 900px);
padding-top: 18px;
}
/* PATROCINADORES */
.sj-footer-sponsors {
display: block;
min-height: 0;
}
.sj-footer-sponsors__title {
min-height: 52px;
justify-content: center;
padding: 0 20px;
border-right: 0;
border-bottom: 1px solid var(--sj-line);
font-size: 14px;
}
.sj-footer-sponsors__items {
grid-template-columns: repeat(3, 1fr);
}
.sj-sponsor {
min-height: 76px;
}
.sj-sponsor:nth-child(3)::after {
display: none;
}
.sj-sponsor:nth-child(-n + 3) {
border-bottom: 1px solid var(--sj-line-soft);
}
/* PRINCIPAL */
.sj-footer-main {
grid-template-columns: repeat(2, 1fr);
min-height: 0;
margin-top: 25px;
margin-bottom: 18px;
}
/* MARCA */
.sj-footer-brand {
grid-column: 1 / -1;
padding:
7px
20px
28px;
border-bottom: 1px solid var(--sj-line-soft);
}
.sj-footer-brand::after {
display: none;
}
.sj-footer-brand__logo {
width: 105px;
}
/* COLUMNAS */
.sj-footer-column {
min-height: 235px;
padding:
28px
31px;
}
.sj-footer-column:nth-child(3)::after,
.sj-footer-column:nth-child(5)::after {
display: none;
}
.sj-footer-column:nth-child(4),
.sj-footer-column:nth-child(5) {
border-top: 1px solid var(--sj-line-soft);
}
/* LEGAL */
.sj-footer-bottom {
min-height: 0;
padding:
20px
5px;
flex-direction: column;
justify-content: center;
text-align: center;
}
}
/* ==========================================================
MÓVIL
DOS COLUMNAS
========================================================== */
@media (max-width: 767px) {
.sj-footer__inner {
width: calc(100% - 22px);
padding-top: 11px;
}
/* ======================================================
PATROCINADORES
====================================================== */
.sj-footer-sponsors {
border-radius: 10px;
}
.sj-footer-sponsors__title {
min-height: 47px;
font-size: 13px;
}
.sj-footer-sponsors__items {
grid-template-columns: repeat(2, 1fr);
}
.sj-sponsor {
min-height: 71px;
}
.sj-sponsor:nth-child(3)::after {
display: block;
}
.sj-sponsor:nth-child(2n)::after {
display: none;
}
.sj-sponsor:nth-child(-n + 4) {
border-bottom: 1px solid var(--sj-line-soft);
}
.sj-sponsor__symbol {
width: 29px;
height: 29px;
}
.sj-sponsor__image {
max-width: 76px;
height: 29px;
}
.sj-sponsor__logo--box {
min-width: 70px;
height: 29px;
padding: 0 9px;
font-size: 15px;
}
.sj-sponsor__name {
font-size: 10px;
}
/* ======================================================
CUERPO PRINCIPAL 2 COLUMNAS
====================================================== */
.sj-footer-main {
display: grid;
grid-template-columns:
minmax(0, 1fr)
minmax(0, 1fr);
align-items: stretch;
margin-top: 18px;
margin-bottom: 8px;
}
/* ======================================================
ESCUDO
====================================================== */
.sj-footer-brand {
grid-column: 1 / -1;
padding:
16px
15px
24px;
border-bottom: 1px solid var(--sj-line-soft);
}
.sj-footer-brand::after {
display: none;
}
.sj-footer-brand__logo {
width: 92px;
margin-bottom: 7px;
}
.sj-footer-brand__name {
font-size: 17px;
}
.sj-footer-brand__slogan {
margin-top: 4px;
font-size: 13px;
}
.sj-footer-brand__slogan::after {
width: 45px;
margin-top: 11px;
}
/* ======================================================
COLUMNAS 2x2
====================================================== */
.sj-footer-column {
min-width: 0;
min-height: auto;
padding:
23px
17px
25px;
border-top: 0;
border-bottom: 1px solid var(--sj-line-soft);
}
.sj-footer-column::after {
display: none;
}
/* CLUB */
.sj-footer-main > .sj-footer-column:nth-child(2) {
border-right: 1px solid var(--sj-line-soft);
}
/* INSCRIPCIONS */
.sj-footer-main > .sj-footer-column:nth-child(3) {
border-right: 0;
}
/* CONTACTE */
.sj-footer-main > .sj-footer-column:nth-child(4) {
border-right: 1px solid var(--sj-line-soft);
}
/* XARXES */
.sj-footer-main > .sj-footer-column:nth-child(5) {
border-right: 0;
}
/* ======================================================
TÍTULOS
====================================================== */
.sj-footer-column__title {
margin-bottom: 17px !important;
font-size: 14px !important;
line-height: 1.15 !important;
}
/* ======================================================
CLUB / INSCRIPCIONS
====================================================== */
.sj-footer-links li {
margin-bottom: 13px !important;
}
.sj-footer-links li:last-child {
margin-bottom: 0 !important;
}
.sj-footer-links a {
gap: 9px;
font-size: 13px;
line-height: 1.3;
}
.sj-footer-chevron {
width: 6px;
height: 6px;
flex-basis: 6px;
border-width: 2px;
}
/* ======================================================
CONTACTE
====================================================== */
.sj-footer-contact {
padding:
23px
17px
25px;
}
.sj-footer-contact__items {
gap: 14px;
}
.sj-contact-item {
align-items: flex-start;
gap: 9px;
}
.sj-contact-item__icon {
width: 19px;
height: 19px;
flex: 0 0 19px;
margin-top: 1px;
}
.sj-contact-item__text {
font-size: 12px;
line-height: 1.35;
word-break: break-word;
}
/* ======================================================
REDES SOCIALES
====================================================== */
.sj-footer-social {
padding:
23px
17px
25px;
}
.sj-footer-social__items {
gap: 13px;
}
.sj-social-item {
gap: 9px;
font-size: 13px;
}
.sj-social-item__icon {
width: 28px;
height: 28px;
flex: 0 0 28px;
}
.sj-social-item__icon svg {
width: 15px;
height: 15px;
}
/* ======================================================
PIE LEGAL
====================================================== */
.sj-footer-bottom {
min-height: 0;
gap: 17px;
padding:
19px
6px
22px;
flex-direction: column;
text-align: center;
}
.sj-footer-copyright {
flex-direction: column;
gap: 4px;
font-size: 10.5px;
white-space: normal;
}
.sj-footer-bottom__divider {
display: none;
}
.sj-footer-legal {
width: 100%;
justify-content: center;
gap: 9px;
}
.sj-footer-legal a {
font-size: 10.5px;
}
.sj-footer-legal > span {
height: 13px;
}
}
/* ==========================================================
MÓVILES MUY PEQUEÑOS
========================================================== */
@media (max-width: 380px) {
.sj-footer__inner {
width: calc(100% - 16px);
}
.sj-footer-column {
padding-left: 13px;
padding-right: 13px;
}
.sj-footer-column__title {
font-size: 13px !important;
}
.sj-footer-links a {
font-size: 12px;
}
.sj-contact-item__text {
font-size: 11px;
}
.sj-social-item {
font-size: 12px;
}
.sj-footer-legal {
gap: 7px;
}
.sj-footer-legal a {
font-size: 10px;
}
}
/* =========================================================
Header y escudo sobresaliente
========================================================= */
:where(header.top_panel),
:where(header.top_panel)
:where(
.elementor,
.e-con,
.e-con-inner,
.elementor-widget,
.elementor-widget-container,
.sc_layouts_logo
) {
overflow: visible !important;
}
:where(.menu-sec) {
background: linear-gradient(90deg,#FFD200 50%,#003A8C 0)!important;
}
:where(.header-principal) {
align-items: flex-start !important;
height: 78px !important;
min-height: 78px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
:where(.header-principal) :where(.logo-saliente) {
align-items: flex-start !important;
height: 78px !important;
min-height: 78px !important;
z-index: 100003 !important;
}
:where(.header-principal)
:where(.logo-saliente)
:where(.elementor-widget-trx_sc_layouts_logo, .elementor-widget-container) {
height: 112px !important;
min-height: 112px !important;
}
:where(.header-principal) :where(.logo-saliente) img.logo_image {
display: block !important;
width: auto !important;
height: 112px !important;
max-height: none !important;
}
@media (max-width: 1024px) {
:where(header.top_panel) :where(.elementor-hidden-desktop),
:where(header.top_panel)
:where(.elementor-hidden-desktop)
:where(.elementor-widget-trx_sc_layouts_logo, .elementor-widget-container) {
overflow: visible !important;
}
:where(header.top_panel) :where(.elementor-hidden-desktop) > .e-con-inner {
height: 78px !important;
min-height: 78px !important;
overflow: visible !important;
}
:where(header.top_panel)
:where(.elementor-hidden-desktop)
.elementor-widget-trx_sc_layouts_logo {
position: relative !important;
top: 15px !important;
align-self: flex-start !important;
}
:where(header.top_panel) :where(.elementor-hidden-desktop) img.logo_image {
display: block !important;
width: auto !important;
height: 110px !important;
max-height: none !important;
}
}
@media (max-width: 767px) {
:where(header.top_panel) :where(.elementor-hidden-desktop) > .e-con-inner {
height: 72px !important;
min-height: 72px !important;
}
:where(header.top_panel) :where(.elementor-hidden-desktop) img.logo_image {
height: 94px !important;
}
}
/* =========================================================
CF SANT JUST · PRESIDENTS
VERSIÓ DEFINITIVA
========================================================= */
#cfsj-presidents-final {
--cfsj-blue: #063f8c;
--cfsj-blue-dark: #052f68;
--cfsj-yellow: #f5c400;
--cfsj-gold: #c8a23a;
--cfsj-text: #103765;
--cfsj-muted: #718094;
--cfsj-border: #e4e8ed;
--cfsj-white: #ffffff;
width: 100%;
max-width: 1380px;
box-sizing: border-box;
margin: 0 auto;
padding:
35px
25px
80px;
}
/* =========================================================
TÍTULO
========================================================= */
#cfsj-presidents-final .cfsj-presidents-heading {
position: relative;
text-align: left;
margin:
0
auto
65px;
padding: 0 20px;
}
#cfsj-presidents-final .cfsj-presidents-kicker {
display: block;
margin-bottom: 10px;
color: var(--cfsj-yellow);
font-size: 12px;
line-height: 1;
font-weight: 800;
letter-spacing: .16em;
text-transform: uppercase;
}
#cfsj-presidents-final .cfsj-presidents-heading h2 {
margin: 0 !important;
padding: 0 !important;
color: var(--cfsj-blue);
font-family: inherit;
font-size: clamp(28px, 3vw, 42px);
line-height: 1.12;
font-weight: 700;
letter-spacing: -.025em;
}
#cfsj-presidents-final .cfsj-presidents-heading-line {
display: block;
width: 42px;
height: 3px;
margin:
20px
auto
0;
background: var(--cfsj-yellow);
border-radius: 20px;
}
/* =========================================================
FILAS
4 PRESIDENTES SIEMPRE DE IZQUIERDA A DERECHA
========================================================= */
#cfsj-presidents-final .cfsj-pres-row {
position: relative;
width: 100%;
display: grid !important;
grid-template-columns:
repeat(4, minmax(0, 1fr)) !important;
gap: 32px !important;
box-sizing: border-box;
margin:
0
0
80px
0 !important;
padding: 0 !important;
}
/* Línea cronológica */
#cfsj-presidents-final .cfsj-pres-row::after {
content: "";
position: absolute;
z-index: 0;
left: 12.5%;
right: 12.5%;
bottom: -35px;
height: 2px;
background:
linear-gradient(
90deg,
rgba(6, 63, 140, .25) 0%,
var(--cfsj-blue) 7%,
var(--cfsj-blue) 93%,
rgba(6, 63, 140, .25) 100%
);
}
/* =========================================================
TARJETA
========================================================= */
#cfsj-presidents-final .cfsj-pres-card {
position: relative;
z-index: 2;
width: auto !important;
min-width: 0 !important;
min-height: 205px;
box-sizing: border-box;
display: flex !important;
flex-direction: column;
align-items: center;
justify-content: flex-start;
text-align: center;
padding:
27px
20px
26px;
background:
linear-gradient(
180deg,
rgba(255,255,255,1),
rgba(255,255,255,.97)
);
border:
1px
solid
transparent;
border-radius: 14px;
transition:
transform .28s ease,
border-color .28s ease,
box-shadow .28s ease;
}
/* Detalle superior amarillo */
#cfsj-presidents-final .cfsj-pres-card::before {
content: "";
display: block;
width: 34px;
height: 2px;
flex: 0 0 2px;
margin:
0
auto
17px;
background: var(--cfsj-yellow);
border-radius: 50px;
transition:
width .28s ease;
}
/* Hover */
#cfsj-presidents-final .cfsj-pres-card:hover {
transform: translateY(-5px);
border-color: var(--cfsj-border);
box-shadow:
0
15px
38px
rgba(5, 47, 104, .09);
}
#cfsj-presidents-final .cfsj-pres-card:hover::before {
width: 68px;
}
/* =========================================================
AÑOS
========================================================= */
#cfsj-presidents-final .cfsj-pres-years {
margin:
0
0
18px;
color: var(--cfsj-blue);
font-size: 17px;
line-height: 1.15;
font-weight: 750;
letter-spacing: .015em;
}
/* =========================================================
MONOGRAMA / SELLO
========================================================= */
#cfsj-presidents-final .cfsj-pres-monogram {
width: 68px;
height: 68px;
flex: 0 0 68px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
margin:
0
auto
18px;
border:
2px
solid
var(--cfsj-gold);
border-radius: 50%;
background:
radial-gradient(
circle at 35% 30%,
#ffffff 0%,
#faf8ef 60%,
#f1ead4 100%
);
box-shadow:
inset 0 0 0 4px #ffffff,
inset 0 0 0 5px rgba(200,162,58,.22);
color: #8a6b17;
font-family:
Georgia,
"Times New Roman",
serif;
font-size: 18px;
line-height: 1;
font-weight: 700;
letter-spacing: .04em;
transition:
transform .28s ease,
background .28s ease,
color .28s ease,
border-color .28s ease;
}
#cfsj-presidents-final
.cfsj-pres-card:hover
.cfsj-pres-monogram {
transform: scale(1.07);
background: var(--cfsj-yellow);
border-color: var(--cfsj-yellow);
color: var(--cfsj-blue-dark);
}
/* =========================================================
NOMBRE
========================================================= */
#cfsj-presidents-final .cfsj-pres-card h3 {
width: 100%;
max-width: 255px;
margin:
0
auto !important;
padding: 0 !important;
color: var(--cfsj-text);
font-family: inherit;
font-size: 17px;
line-height: 1.35;
font-weight: 650;
text-transform: none !important;
}
/* Secundario */
#cfsj-presidents-final .cfsj-pres-card p {
margin:
6px
0
0 !important;
padding: 0 !important;
color: var(--cfsj-muted);
font-size: 13px;
line-height: 1.35;
}
/* =========================================================
PUNTO DE LA LÍNEA TEMPORAL
========================================================= */
#cfsj-presidents-final .cfsj-pres-node {
position: absolute;
z-index: 5;
left: 50%;
bottom: -42px;
width: 14px;
height: 14px;
box-sizing: border-box;
transform: translateX(-50%);
border:
2px
solid
var(--cfsj-blue);
border-radius: 50%;
background: var(--cfsj-yellow);
box-shadow:
0
0
0
5px
var(--cfsj-white);
}
/* =========================================================
JUNTA GESTORA
========================================================= */
#cfsj-presidents-final .cfsj-pres-manager {
background:
linear-gradient(
180deg,
rgba(245,196,0,.075),
rgba(255,255,255,1) 75%
);
}
#cfsj-presidents-final
.cfsj-pres-manager
.cfsj-pres-monogram {
border-style: dashed;
}
#cfsj-presidents-final
.cfsj-pres-manager h3 {
color: var(--cfsj-blue);
}
/* =========================================================
PRESIDENTE ACTUAL
========================================================= */
#cfsj-presidents-final .cfsj-pres-current {
overflow: hidden;
background:
radial-gradient(
circle at 100% 0%,
rgba(245,196,0,.20),
transparent 40%
),
linear-gradient(
145deg,
var(--cfsj-blue),
var(--cfsj-blue-dark)
);
border:
2px
solid
var(--cfsj-yellow);
box-shadow:
0
16px
42px
rgba(5,47,104,.20);
}
/* Barra superior */
#cfsj-presidents-final
.cfsj-pres-current::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
margin: 0;
background: var(--cfsj-yellow);
}
#cfsj-presidents-final
.cfsj-pres-current:hover::before {
width: 100%;
}
/* Año actual */
#cfsj-presidents-final
.cfsj-pres-current
.cfsj-pres-years {
margin-top: 12px;
color: var(--cfsj-yellow);
}
/* Nombre actual */
#cfsj-presidents-final
.cfsj-pres-current h3 {
color: #ffffff;
}
/* Monograma actual */
#cfsj-presidents-final
.cfsj-pres-current
.cfsj-pres-monogram {
color: var(--cfsj-yellow);
border-color: var(--cfsj-yellow);
background:
rgba(255,255,255,.055);
box-shadow:
inset 0 0 0 4px rgba(255,255,255,.025),
inset 0 0 0 5px rgba(245,196,0,.18);
}
#cfsj-presidents-final
.cfsj-pres-current:hover
.cfsj-pres-monogram {
background: var(--cfsj-yellow);
color: var(--cfsj-blue-dark);
}
/* Etiqueta */
#cfsj-presidents-final
.cfsj-pres-current-label {
position: absolute;
z-index: 4;
top: 13px;
right: 13px;
padding:
5px
10px;
border-radius: 30px;
background: var(--cfsj-yellow);
color: var(--cfsj-blue-dark);
font-size: 9px;
line-height: 1;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
}
/* =========================================================
ÚLTIMA FILA
========================================================= */
#cfsj-presidents-final
.cfsj-pres-row-last {
margin-bottom: 25px !important;
}
/* =========================================================
TABLET
2 COLUMNAS
========================================================= */
@media (max-width: 1024px) {
#cfsj-presidents-final {
max-width: 850px;
padding:
35px
20px
65px;
}
#cfsj-presidents-final .cfsj-pres-row {
grid-template-columns:
repeat(2, minmax(0, 1fr)) !important;
gap:
30px
28px !important;
margin-bottom:
45px !important;
}
/*
En tablet eliminamos la línea horizontal,
porque con dos filas dentro de cada bloque
ya no tendría una lectura limpia.
*/
#cfsj-presidents-final
.cfsj-pres-row::after {
display: none;
}
#cfsj-presidents-final
.cfsj-pres-card {
border-color: var(--cfsj-border);
box-shadow:
0
7px
22px
rgba(5,47,104,.055);
}
#cfsj-presidents-final
.cfsj-pres-node {
display: none;
}
}
/* =========================================================
MÓVIL
TIMELINE VERTICAL
========================================================= */
@media (max-width: 600px) {
#cfsj-presidents-final {
position: relative;
padding:
25px
13px
55px
50px;
}
#cfsj-presidents-final
.cfsj-presidents-heading {
margin-bottom: 40px;
padding-left: 0;
text-align: left;
}
#cfsj-presidents-final
.cfsj-presidents-kicker {
font-size: 10px;
}
#cfsj-presidents-final
.cfsj-presidents-heading h2 {
font-size: 27px;
}
#cfsj-presidents-final
.cfsj-presidents-heading-line {
margin-left: 0;
}
/*
Una única línea vertical
*/
#cfsj-presidents-final::before {
content: "";
position: absolute;
left: 24px;
top: 160px;
bottom: 65px;
width: 3px;
border-radius: 5px;
background:
linear-gradient(
to bottom,
var(--cfsj-yellow),
var(--cfsj-blue) 5%,
var(--cfsj-blue) 95%,
var(--cfsj-yellow)
);
}
/*
Hacemos desaparecer los contenedores
de fila para formar una cronología única.
*/
#cfsj-presidents-final
.cfsj-pres-row {
display: contents !important;
}
#cfsj-presidents-final
.cfsj-pres-card {
width: 100% !important;
min-height: 124px;
box-sizing: border-box;
margin:
0
0
18px !important;
padding:
20px
18px
20px
82px;
align-items: flex-start;
justify-content: center;
text-align: left;
border:
1px
solid
var(--cfsj-border);
border-radius: 12px;
box-shadow:
0
6px
18px
rgba(5,47,104,.055);
}
/* Línea decorativa lateral */
#cfsj-presidents-final
.cfsj-pres-card::before {
position: absolute;
left: 0;
top: 27px;
width: 3px;
height: 45px;
margin: 0;
border-radius:
0
4px
4px
0;
}
#cfsj-presidents-final
.cfsj-pres-card:hover::before {
width: 3px;
}
/*
Monograma a la izquierda
*/
#cfsj-presidents-final
.cfsj-pres-monogram {
position: absolute;
left: 16px;
top: 37px;
width: 50px;
height: 50px;
flex: none;
margin: 0;
font-size: 13px;
}
#cfsj-presidents-final
.cfsj-pres-years {
margin-bottom: 8px;
font-size: 14px;
}
#cfsj-presidents-final
.cfsj-pres-card h3 {
max-width: none;
margin: 0 !important;
font-size: 16px;
}
#cfsj-presidents-final
.cfsj-pres-card p {
font-size: 12px;
}
/*
Punto de la línea vertical
*/
#cfsj-presidents-final
.cfsj-pres-node {
display: block;
left: -34px;
top: 28px;
bottom: auto;
width: 14px;
height: 14px;
transform: none;
}
/*
Actual
*/
#cfsj-presidents-final
.cfsj-pres-current::before {
top: 0;
left: 0;
width: 4px;
height: 100%;
}
#cfsj-presidents-final
.cfsj-pres-current:hover::before {
width: 4px;
}
#cfsj-presidents-final
.cfsj-pres-current
.cfsj-pres-years {
margin-top: 0;
}
#cfsj-presidents-final
.cfsj-pres-current-label {
position: static;
display: inline-block;
margin-bottom: 9px;
}
}
/* =========================================================
CF SANT JUST · MOMENTS CLAU DE LA HISTÒRIA
========================================================= */
#cfsj-moments-final {
--cfsj-blue: #063f8c;
--cfsj-blue-dark: #052f68;
--cfsj-yellow: #f5c400;
--cfsj-gold: #c9a43b;
--cfsj-text: #15375f;
--cfsj-body: #3d4c60;
--cfsj-muted: #738196;
--cfsj-border: #e5e9ef;
--cfsj-paper: #faf8f2;
--cfsj-white: #ffffff;
width: 100%;
max-width: 1440px;
margin: 0 auto;
padding: 44px 26px 90px;
box-sizing: border-box;
}
#cfsj-moments-final *,
#cfsj-moments-final *::before,
#cfsj-moments-final *::after {
box-sizing: border-box;
}
#cfsj-moments-final .cfsj-moments-svg-defs {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
}
/* =========================================================
CABECERA
========================================================= */
#cfsj-moments-final .cfsj-moments-heading {
max-width: 920px;
margin: 0 0 64px;
padding: 0;
text-align: left;
}
#cfsj-moments-final .cfsj-moments-kicker {
display: block;
margin-bottom: 10px;
color: var(--cfsj-yellow);
font-size: 12px;
line-height: 1;
font-weight: 800;
letter-spacing: .16em;
text-transform: uppercase;
}
#cfsj-moments-final .cfsj-moments-heading h2 {
margin: 0 !important;
padding: 0 !important;
color: var(--cfsj-blue);
font-family: inherit;
font-size: clamp(30px, 3vw, 44px);
line-height: 1.12;
font-weight: 600;
letter-spacing: -.025em;
text-transform: uppercase;
}
#cfsj-moments-final .cfsj-moments-heading p {
max-width: 620px;
margin: 14px 0 0 !important;
padding: 0 !important;
color: var(--cfsj-muted);
font-size: 16px;
line-height: 1.55;
}
#cfsj-moments-final .cfsj-moments-heading-line {
display: block;
width: 44px;
height: 3px;
margin: 20px 0 0;
border-radius: 99px;
background: var(--cfsj-yellow);
}
/* =========================================================
CRONOLOGÍA
========================================================= */
#cfsj-moments-final .cfsj-moments-timeline {
width: 100%;
position: relative;
}
#cfsj-moments-final .cfsj-moments-row {
position: relative;
display: grid !important;
grid-template-columns:
repeat(4, minmax(0, 1fr)) !important;
align-items: stretch;
gap: 30px !important;
width: 100%;
margin: 0 0 84px !important;
padding: 0 !important;
}
/* Línea de cada fila */
#cfsj-moments-final .cfsj-moments-row::after {
content: "";
position: absolute;
z-index: 0;
left: 12.5%;
right: 12.5%;
bottom: -36px;
height: 2px;
border-radius: 99px;
background:
linear-gradient(
90deg,
rgba(6, 63, 140, .22) 0%,
var(--cfsj-blue) 7%,
var(--cfsj-blue) 93%,
rgba(6, 63, 140, .22) 100%
);
}
#cfsj-moments-final .cfsj-moments-row:last-child {
margin-bottom: 26px !important;
}
/* =========================================================
TARJETA
========================================================= */
#cfsj-moments-final .cfsj-moment-card {
position: relative;
z-index: 2;
display: flex !important;
flex-direction: column;
align-items: center;
width: auto !important;
min-width: 0 !important;
height: 100%;
min-height: 405px;
margin: 0 !important;
padding:
28px
24px
30px;
text-align: center;
background:
linear-gradient(
180deg,
rgba(255,255,255,1),
rgba(255,255,255,.985)
);
border:
1px
solid
var(--cfsj-border);
border-radius: 18px;
box-shadow:
0
8px
24px
rgba(5, 47, 104, .055);
transition:
transform .28s ease,
border-color .28s ease,
box-shadow .28s ease;
}
#cfsj-moments-final .cfsj-moment-card:hover {
transform: translateY(-5px);
border-color:
rgba(6, 63, 140, .22);
box-shadow:
0
17px
42px
rgba(5, 47, 104, .11);
}
/* =========================================================
FOTO / PLACEHOLDER
========================================================= */
#cfsj-moments-final .cfsj-moment-media {
position: relative;
/*
* La misma etiqueta funciona como contenedor de foto
* y como enlace al lightbox.
*
* Se fijan las dos dimensiones para impedir que Elementor
* o el tema la estiren horizontalmente.
*/
flex: 0 0 116px !important;
width: 116px !important;
height: 116px !important;
min-width: 116px !important;
min-height: 116px !important;
max-width: 116px !important;
max-height: 116px !important;
aspect-ratio: 1 / 1 !important;
align-self: center;
margin: 0 auto 16px !important;
padding: 0 !important;
overflow: hidden;
border:
3px
solid
var(--cfsj-yellow);
border-radius: 50% !important;
background:
var(--cfsj-paper);
box-shadow:
0 0 0 5px var(--cfsj-white),
0 7px 18px rgba(5,47,104,.09);
transition:
transform .28s ease;
}
#cfsj-moments-final
.cfsj-moment-card:hover
.cfsj-moment-media {
transform: scale(1.035);
}
/* ENLACE DE FOTO */
/*
* IMPORTANTE:
*
* .cfsj-moment-media-link y .cfsj-moment-media
* están aplicados a la MISMA etiqueta .
*
* Por eso aquí NO debe existir:
*
* width: 100%;
* height: 100%;
*
* Eso era exactamente lo que provocaba el óvalo.
*/
#cfsj-moments-final .cfsj-moment-media-link {
display: block !important;
position: relative;
color: inherit;
text-decoration: none !important;
cursor: zoom-in;
outline: none;
line-height: 0;
}
#cfsj-moments-final
.cfsj-moment-media-link:focus-visible {
outline:
3px
solid
rgba(6, 63, 140, .32);
outline-offset: 5px;
}
/* IMAGEN */
#cfsj-moments-final .cfsj-moment-media img {
position: absolute !important;
inset: 0 !important;
display: block !important;
width: 100% !important;
height: 100% !important;
min-width: 100% !important;
min-height: 100% !important;
max-width: none !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
object-fit: cover !important;
object-position:
center
center !important;
border: 0 !important;
border-radius: 50% !important;
filter:
grayscale(100%)
contrast(1.04);
}
/* La imagen con error debe desaparecer */
#cfsj-moments-final
.cfsj-moment-media img[hidden] {
display: none !important;
}
/* FOTO NO DISPONIBLE */
#cfsj-moments-final
.cfsj-moment-media.is-missing {
cursor: default;
background:
radial-gradient(
circle at 36% 30%,
#ffffff 0%,
#faf7ed 58%,
#f0e8d2 100%
);
border-color:
var(--cfsj-gold);
}
/* FALLBACK */
#cfsj-moments-final .cfsj-moment-fallback {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
}
#cfsj-moments-final
.cfsj-moment-fallback[hidden] {
display: none !important;
}
/* CAMPANA */
#cfsj-moments-final .cfsj-moment-bell {
width: 50px;
height: 50px;
fill: none;
stroke:
var(--cfsj-blue);
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
opacity: .82;
}
/* =========================================================
AÑO
========================================================= */
#cfsj-moments-final .cfsj-moment-year {
margin:
0
0
9px;
color:
var(--cfsj-blue);
font-size: 27px;
line-height: 1;
font-weight: 800;
letter-spacing: -.025em;
}
/* =========================================================
TÍTULO
========================================================= */
#cfsj-moments-final .cfsj-moment-card h3 {
width: 100%;
min-height: 48px;
margin: 0 !important;
padding: 0 !important;
color:
var(--cfsj-text);
font-family: inherit;
font-size: 17px;
line-height: 1.35;
font-weight: 650;
text-transform: none !important;
}
/* =========================================================
LÍNEA AMARILLA
========================================================= */
#cfsj-moments-final .cfsj-moment-accent {
display: block;
flex: 0 0 2px;
width: 28px;
height: 2px;
margin:
15px
auto
13px;
border-radius: 99px;
background:
var(--cfsj-yellow);
transition:
width .28s ease;
}
#cfsj-moments-final
.cfsj-moment-card:hover
.cfsj-moment-accent {
width: 54px;
}
/* =========================================================
TEXTO
========================================================= */
#cfsj-moments-final .cfsj-moment-card p {
width: 100%;
margin: 0 !important;
padding: 0 !important;
color:
var(--cfsj-body);
font-size: 14px;
line-height: 1.55;
font-weight: 400;
}
/* =========================================================
NODO TIMELINE
========================================================= */
#cfsj-moments-final .cfsj-moment-node {
position: absolute;
z-index: 5;
left: 50%;
bottom: -43px;
width: 15px;
height: 15px;
transform:
translateX(-50%);
border:
2px
solid
var(--cfsj-blue);
border-radius: 50%;
background:
var(--cfsj-yellow);
box-shadow:
0
0
0
5px
var(--cfsj-white);
}
/* =========================================================
BADGES
========================================================= */
#cfsj-moments-final .cfsj-moment-badge {
position: absolute;
z-index: 4;
top: 14px;
right: 14px;
padding:
6px
10px;
border-radius: 99px;
background:
var(--cfsj-yellow);
color:
var(--cfsj-blue-dark);
font-size: 9px;
line-height: 1;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
}
#cfsj-moments-final
.cfsj-moment-badge--gold {
background: #f6e7ae;
color: #806513;
}
/* =========================================================
CENTENARIO
========================================================= */
#cfsj-moments-final
.cfsj-moment-card.is-centenary {
border-color:
rgba(201, 164, 59, .48);
background:
radial-gradient(
circle at 100% 0%,
rgba(245,196,0,.09),
transparent 38%
),
#fff;
}
/* =========================================================
MOMENTO MÁS RECIENTE
========================================================= */
#cfsj-moments-final
.cfsj-moment-card.is-latest {
overflow: hidden;
border:
2px
solid
var(--cfsj-yellow);
background:
radial-gradient(
circle at 100% 0%,
rgba(245,196,0,.20),
transparent 40%
),
linear-gradient(
145deg,
var(--cfsj-blue),
var(--cfsj-blue-dark)
);
box-shadow:
0
16px
42px
rgba(5,47,104,.19);
}
#cfsj-moments-final
.cfsj-moment-card.is-latest
.cfsj-moment-year,
#cfsj-moments-final
.cfsj-moment-card.is-latest h3 {
color: #fff;
}
#cfsj-moments-final
.cfsj-moment-card.is-latest p {
color:
rgba(255,255,255,.86);
}
#cfsj-moments-final
.cfsj-moment-card.is-latest
.cfsj-moment-accent {
background:
var(--cfsj-yellow);
}
#cfsj-moments-final
.cfsj-moment-card.is-latest
.cfsj-moment-media.is-missing {
border-color:
var(--cfsj-yellow);
background:
rgba(255,255,255,.07);
box-shadow:
0 0 0 5px rgba(255,255,255,.05),
0 7px 18px rgba(0,0,0,.10);
}
#cfsj-moments-final
.cfsj-moment-card.is-latest
.cfsj-moment-bell {
stroke:
var(--cfsj-yellow);
}
/* =========================================================
TABLET · 2 COLUMNAS
========================================================= */
@media (max-width: 1024px) {
#cfsj-moments-final {
max-width: 900px;
padding:
38px
20px
70px;
}
#cfsj-moments-final
.cfsj-moments-heading {
margin-bottom: 48px;
}
#cfsj-moments-final
.cfsj-moments-row {
grid-template-columns:
repeat(2, minmax(0, 1fr)) !important;
gap: 26px !important;
margin-bottom:
38px !important;
}
#cfsj-moments-final
.cfsj-moments-row::after,
#cfsj-moments-final
.cfsj-moment-node {
display: none;
}
#cfsj-moments-final
.cfsj-moment-card {
min-height: 390px;
}
}
/* =========================================================
MÓVIL · TIMELINE VERTICAL
========================================================= */
@media (max-width: 650px) {
#cfsj-moments-final {
padding:
28px
13px
55px
49px;
}
/* CABECERA */
#cfsj-moments-final
.cfsj-moments-heading {
margin-bottom: 38px;
padding: 0;
text-align: left;
}
#cfsj-moments-final
.cfsj-moments-kicker {
font-size: 10px;
}
#cfsj-moments-final
.cfsj-moments-heading h2 {
font-size:
clamp(27px, 8vw, 34px);
text-transform: none;
}
#cfsj-moments-final
.cfsj-moments-heading p {
margin-left:
0 !important;
font-size: 14px;
}
#cfsj-moments-final
.cfsj-moments-heading-line {
margin-left: 0;
}
/* TIMELINE */
#cfsj-moments-final
.cfsj-moments-timeline {
position: relative;
}
#cfsj-moments-final
.cfsj-moments-timeline::before {
content: "";
position: absolute;
z-index: 0;
left: -25px;
top: 34px;
bottom: 26px;
width: 3px;
border-radius: 99px;
background:
linear-gradient(
to bottom,
var(--cfsj-yellow),
var(--cfsj-blue) 5%,
var(--cfsj-blue) 95%,
var(--cfsj-yellow)
);
}
/* ELIMINAMOS FILAS */
#cfsj-moments-final
.cfsj-moments-row {
display: contents !important;
}
/* TARJETA */
#cfsj-moments-final
.cfsj-moment-card {
min-height: 0;
margin:
0
0
18px !important;
padding:
20px
18px
20px
106px;
align-items:
flex-start;
text-align: left;
border-radius: 14px;
}
/* FOTO */
#cfsj-moments-final
.cfsj-moment-media {
position: absolute;
left: 16px;
top: 22px;
flex: 0 0 72px !important;
width: 72px !important;
height: 72px !important;
min-width: 72px !important;
min-height: 72px !important;
max-width: 72px !important;
max-height: 72px !important;
aspect-ratio: 1 / 1 !important;
margin: 0 !important;
border-width: 2px;
border-radius: 50% !important;
box-shadow:
0 0 0 4px var(--cfsj-white),
0 5px 14px rgba(5,47,104,.08);
}
#cfsj-moments-final
.cfsj-moment-bell {
width: 32px;
height: 32px;
}
/* AÑO */
#cfsj-moments-final
.cfsj-moment-year {
margin-bottom: 6px;
font-size: 22px;
}
/* TÍTULO */
#cfsj-moments-final
.cfsj-moment-card h3 {
min-height: 0;
font-size: 16px;
}
/* ACENTO */
#cfsj-moments-final
.cfsj-moment-accent {
width: 26px;
margin:
11px
0
10px;
}
#cfsj-moments-final
.cfsj-moment-card:hover
.cfsj-moment-accent {
width: 44px;
}
/* TEXTO */
#cfsj-moments-final
.cfsj-moment-card p {
font-size: 13px;
line-height: 1.5;
}
/* NODO */
#cfsj-moments-final
.cfsj-moment-node {
display: block;
left: -32px;
top: 27px;
bottom: auto;
width: 14px;
height: 14px;
transform: none;
box-shadow:
0
0
0
5px
var(--cfsj-white);
}
/* BADGE */
#cfsj-moments-final
.cfsj-moment-badge {
position: static;
display: inline-block;
margin:
0
0
9px;
}
#cfsj-moments-final
.cfsj-moment-card.is-latest
.cfsj-moment-media.is-missing {
box-shadow:
0 0 0 4px rgba(255,255,255,.07),
0 5px 14px rgba(0,0,0,.10);
}
}
/* =========================================================
REDUCCIÓN DE MOVIMIENTO
========================================================= */
@media (prefers-reduced-motion: reduce) {
#cfsj-moments-final
.cfsj-moment-card,
#cfsj-moments-final
.cfsj-moment-media,
#cfsj-moments-final
.cfsj-moment-accent {
transition:
none !important;
}
#cfsj-moments-final
.cfsj-moment-card:hover {
transform: none;
}
}
/* =========================================================
LIGHTBOX
========================================================= */
#cfsj-moments-final .cfsj-moments-lightbox {
width:
min(94vw, 1280px);
max-width: 1280px;
max-height: 92vh;
margin: auto;
padding: 0;
overflow: visible;
border: 0;
border-radius: 12px;
background: transparent;
box-shadow:
0
28px
90px
rgba(0, 24, 60, .35);
}
/* FONDO LIGHTBOX */
#cfsj-moments-final
.cfsj-moments-lightbox::backdrop {
background:
rgba(3, 22, 50, .86);
backdrop-filter:
blur(3px);
}
/* FOTO GRANDE */
#cfsj-moments-final
.cfsj-moments-lightbox-image {
display: block;
width: auto;
max-width:
94vw !important;
height: auto;
max-height:
88vh;
margin:
0
auto;
object-fit:
contain;
border-radius: 10px;
background: #fff;
}
/* BOTÓN CERRAR */
#cfsj-moments-final
.cfsj-moments-lightbox-close {
position: absolute;
z-index: 2;
top: -18px;
right: -18px;
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
padding: 0;
border:
2px
solid
rgba(255,255,255,.72);
border-radius: 50%;
background:
var(--cfsj-blue-dark);
color: #fff;
font:
300
30px/1
Arial,
sans-serif;
cursor: pointer;
box-shadow:
0
8px
24px
rgba(0,0,0,.24);
}
#cfsj-moments-final
.cfsj-moments-lightbox-close:hover,
#cfsj-moments-final
.cfsj-moments-lightbox-close:focus-visible {
background:
var(--cfsj-blue);
outline:
2px
solid
var(--cfsj-yellow);
outline-offset: 2px;
}
/* =========================================================
LIGHTBOX MÓVIL
========================================================= */
@media (max-width: 600px) {
#cfsj-moments-final
.cfsj-moments-lightbox {
width: 94vw;
}
#cfsj-moments-final
.cfsj-moments-lightbox-close {
top: 8px;
right: 8px;
width: 38px;
height: 38px;
border-color:
rgba(255,255,255,.55);
}
}
/* =========================================================
CF SANT JUST · HORARIS
========================================================= */
#cfsj-horaris {
--cfsj-blue: #063f8c;
--cfsj-blue-dark: #042f69;
--cfsj-yellow: #f5c400;
--cfsj-text: #123766;
--cfsj-body: #36475d;
--cfsj-muted: #718095;
--cfsj-border: #e2e7ed;
--cfsj-row: #f7f9fb;
width: 100%;
max-width: 1400px;
margin: 0 auto;
padding:
55px
25px
75px;
box-sizing: border-box;
}
#cfsj-horaris *,
#cfsj-horaris *::before,
#cfsj-horaris *::after {
box-sizing: border-box;
}
/* =========================================================
INTRODUCCIÓN
========================================================= */
#cfsj-horaris .cfsj-horaris-intro {
margin-bottom: 15px;
text-align: left;
}
#cfsj-horaris .cfsj-horaris-kicker {
display: block;
margin-bottom: 10px;
color:
var(--cfsj-yellow);
font-size: 12px;
line-height: 1;
font-weight: 800;
letter-spacing: .13em;
text-transform: uppercase;
}
#cfsj-horaris .cfsj-horaris-intro h2 {
margin:
0
0
30px !important;
padding: 0 !important;
color:
var(--cfsj-blue);
font-family: inherit;
font-size:
clamp(29px, 3vw, 42px);
line-height: 1.12;
font-weight: 700;
letter-spacing: -.025em;
}
#cfsj-horaris .cfsj-horaris-intro > p {
margin:
0
0
22px !important;
padding: 0 !important;
color:
var(--cfsj-muted);
font-size: 16px;
line-height: 1.5;
}
/* =========================================================
NOTAS
========================================================= */
#cfsj-horaris .cfsj-horaris-notes {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
#cfsj-horaris .cfsj-horaris-note {
display: inline-flex;
align-items: center;
gap: 9px;
min-height: 40px;
padding:
8px
15px;
border:
1px
solid
rgba(245, 196, 0, .32);
border-radius: 11px;
background:
rgba(245, 196, 0, .09);
color:
var(--cfsj-blue-dark);
font-size: 13px;
line-height: 1.2;
}
#cfsj-horaris
.cfsj-horaris-note-info {
border-color:
rgba(6,63,140,.12);
background:
rgba(6,63,140,.045);
}
#cfsj-horaris .cfsj-note-icon {
display: flex;
width: 19px;
height: 19px;
flex:
0
0
19px;
}
#cfsj-horaris .cfsj-note-icon svg {
width: 100%;
height: 100%;
fill: none;
stroke:
var(--cfsj-blue);
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
/* =========================================================
GRID PRINCIPAL
========================================================= */
#cfsj-horaris .cfsj-horaris-grid {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
align-items: start;
gap: 28px;
}
/* =========================================================
TARJETA
========================================================= */
#cfsj-horaris .cfsj-schedule-card {
width: 100%;
overflow: hidden;
border:
1px
solid
var(--cfsj-border);
border-radius: 15px;
background: #fff;
box-shadow:
0
8px
26px
rgba(5, 47, 104, .065);
}
/* =========================================================
CABECERA TARJETA
========================================================= */
#cfsj-horaris .cfsj-schedule-header {
display: flex;
align-items: center;
gap: 13px;
min-height: 58px;
padding:
12px
20px;
background:
linear-gradient(
105deg,
var(--cfsj-blue-dark),
var(--cfsj-blue)
);
color: #fff;
}
#cfsj-horaris
.cfsj-schedule-header-icon {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
flex:
0
0
32px;
border-radius: 50%;
background:
var(--cfsj-yellow);
}
#cfsj-horaris
.cfsj-schedule-header-icon svg {
width: 19px;
height: 19px;
fill: none;
stroke:
var(--cfsj-blue-dark);
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
#cfsj-horaris
.cfsj-schedule-header h3 {
margin: 0 !important;
padding: 0 !important;
color: #fff;
font-family: inherit;
font-size: 19px;
line-height: 1.1;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .015em;
}
/* =========================================================
TABLA
========================================================= */
#cfsj-horaris .cfsj-schedule-table {
width: 100%;
padding:
7px
17px
15px;
}
/* =========================================================
FILA
========================================================= */
#cfsj-horaris .cfsj-schedule-row {
display: grid;
grid-template-columns:
minmax(110px, .9fr)
minmax(150px, 1.15fr)
minmax(185px, 1.35fr);
align-items: center;
min-height: 43px;
padding:
0
7px;
border-bottom:
1px
solid
var(--cfsj-border);
color:
var(--cfsj-body);
font-size: 14px;
line-height: 1.3;
}
#cfsj-horaris
.cfsj-schedule-row:nth-child(odd):not(.cfsj-schedule-labels) {
background:
var(--cfsj-row);
border-radius: 7px;
}
#cfsj-horaris
.cfsj-schedule-row:last-child {
border-bottom: 0;
}
/* =========================================================
CABECERA DE COLUMNAS
========================================================= */
#cfsj-horaris
.cfsj-schedule-labels {
min-height: 43px;
background: transparent !important;
color:
var(--cfsj-blue);
font-size: 11px;
line-height: 1.2;
font-weight: 800;
letter-spacing: .035em;
text-transform: uppercase;
}
#cfsj-horaris .cfsj-column-title {
display: flex;
align-items: center;
gap: 7px;
}
#cfsj-horaris .cfsj-table-icon {
display: flex;
width: 17px;
height: 17px;
flex:
0
0
17px;
}
#cfsj-horaris
.cfsj-table-icon svg {
width: 100%;
height: 100%;
fill: none;
stroke:
var(--cfsj-blue);
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
/* =========================================================
NOMBRE EQUIPO
========================================================= */
#cfsj-horaris .cfsj-team-name {
color:
var(--cfsj-blue-dark);
font-weight: 700;
}
/* =========================================================
PORTERS
========================================================= */
#cfsj-horaris .cfsj-goalkeepers {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 22px;
width:
min(760px, 100%);
min-height: 90px;
margin:
28px
auto
0;
padding:
15px
28px;
overflow: hidden;
border:
2px
solid
var(--cfsj-yellow);
border-radius: 14px;
background:
radial-gradient(
circle at 100% 0%,
rgba(245,196,0,.15),
transparent 40%
),
linear-gradient(
115deg,
var(--cfsj-blue-dark),
var(--cfsj-blue)
);
color: #fff;
box-shadow:
0
9px
26px
rgba(5,47,104,.14);
}
#cfsj-horaris
.cfsj-goalkeepers-icon {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
flex:
0
0
56px;
border-radius: 50%;
background:
var(--cfsj-yellow);
}
#cfsj-horaris
.cfsj-goalkeepers-icon svg {
width: 31px;
height: 31px;
fill: none;
stroke:
var(--cfsj-blue-dark);
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
#cfsj-horaris
.cfsj-goalkeepers-title {
color:
var(--cfsj-yellow);
font-size: 23px;
line-height: 1;
font-weight: 750;
}
#cfsj-horaris
.cfsj-goalkeepers-divider {
width: 1px;
height: 42px;
background:
rgba(255,255,255,.38);
}
#cfsj-horaris
.cfsj-goalkeepers-slot {
display: flex;
flex-direction: column;
gap: 3px;
}
#cfsj-horaris
.cfsj-goalkeepers-slot span {
color:
rgba(255,255,255,.72);
font-size: 11px;
text-transform: uppercase;
letter-spacing: .05em;
}
#cfsj-horaris
.cfsj-goalkeepers-slot strong {
color: #fff;
font-size: 15px;
font-weight: 650;
}
#cfsj-horaris
.cfsj-goalkeepers-dot {
width: 5px;
height: 5px;
flex:
0
0
5px;
border-radius: 50%;
background:
var(--cfsj-yellow);
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1100px) {
#cfsj-horaris {
max-width: 820px;
}
#cfsj-horaris
.cfsj-horaris-grid {
grid-template-columns: 1fr;
gap: 25px;
}
#cfsj-horaris
.cfsj-schedule-row {
grid-template-columns:
minmax(120px, .8fr)
minmax(160px, 1fr)
minmax(200px, 1.15fr);
}
}
/* =========================================================
MÓVIL
========================================================= */
@media (max-width: 650px) {
#cfsj-horaris {
padding:
35px
12px
55px;
}
#cfsj-horaris
.cfsj-horaris-intro {
margin-bottom: 28px;
}
#cfsj-horaris
.cfsj-horaris-intro h2 {
font-size:
28px;
}
#cfsj-horaris
.cfsj-horaris-intro > p {
font-size:
14px;
}
#cfsj-horaris
.cfsj-horaris-notes {
display: grid;
grid-template-columns: 1fr;
}
#cfsj-horaris
.cfsj-horaris-note {
width: 100%;
}
#cfsj-horaris
.cfsj-schedule-header {
min-height: 54px;
padding:
11px
15px;
}
#cfsj-horaris
.cfsj-schedule-header h3 {
font-size:
17px;
}
#cfsj-horaris
.cfsj-schedule-table {
padding:
8px
12px
13px;
}
/*
* En móvil ya no usamos una tabla de 3 columnas.
* Cada equipo se convierte en una ficha horizontal.
*/
#cfsj-horaris
.cfsj-schedule-labels {
display: none;
}
#cfsj-horaris
.cfsj-schedule-row {
display: grid;
grid-template-columns: 1fr;
gap: 7px;
min-height: 0;
margin-bottom: 8px;
padding:
14px
14px;
border:
1px
solid
var(--cfsj-border);
border-radius:
10px;
background:
#fff !important;
}
#cfsj-horaris
.cfsj-schedule-row:last-child {
margin-bottom: 0;
}
#cfsj-horaris
.cfsj-team-name {
margin-bottom: 2px;
font-size: 17px;
}
/*
* Mostramos el nombre de la columna en móvil.
*/
#cfsj-horaris
.cfsj-schedule-row
div[data-label] {
display: grid;
grid-template-columns:
106px
1fr;
gap: 7px;
font-size: 13px;
}
#cfsj-horaris
.cfsj-schedule-row
div[data-label]::before {
content:
attr(data-label);
color:
var(--cfsj-muted);
font-size: 10px;
font-weight: 750;
letter-spacing: .03em;
text-transform: uppercase;
}
/* PORTERS */
#cfsj-horaris
.cfsj-goalkeepers {
display: grid;
grid-template-columns:
50px
1fr;
justify-content: start;
gap:
13px
14px;
width: 100%;
padding:
17px;
margin-top:
22px;
}
#cfsj-horaris
.cfsj-goalkeepers-icon {
grid-row:
1 / span 3;
width: 50px;
height: 50px;
flex-basis: 50px;
}
#cfsj-horaris
.cfsj-goalkeepers-icon svg {
width: 27px;
height: 27px;
}
#cfsj-horaris
.cfsj-goalkeepers-title {
font-size: 21px;
}
#cfsj-horaris
.cfsj-goalkeepers-divider,
#cfsj-horaris
.cfsj-goalkeepers-dot {
display: none;
}
#cfsj-horaris
.cfsj-goalkeepers-slot {
grid-column: 2;
}
}
/* ==========================================================
CF SANT JUST
PÀGINA D'EQUIP
========================================================== */
.cfsj-team {
--cfsj-blue: #073d83;
--cfsj-blue-dark: #052f68;
--cfsj-yellow: #ffd100;
--cfsj-text: #172033;
--cfsj-muted: #6d7787;
--cfsj-border: #e4e8ed;
--cfsj-soft: #f5f7fa;
width: 100%;
max-width: 1480px;
margin: 0 auto;
padding:
0 20px 20px;
color: var(--cfsj-text);
font-family: inherit;
}
/* ==========================================================
SECCIONS
========================================================== */
.cfsj-team-section {
margin-top: 48px;
}
.cfsj-team-section:first-child {
margin-top: 30px;
}
.cfsj-team-title {
margin:
0 0 23px;
color:
var(--cfsj-blue);
font-size:
clamp(27px, 2.3vw, 38px);
font-weight: 300;
line-height: 1.08;
letter-spacing:
-0.025em;
}
/* ==========================================================
RESUM
========================================================== */
.cfsj-summary-grid {
display: grid;
grid-template-columns:
repeat(
3,
minmax(0, 1fr)
);
gap: 16px;
}
.cfsj-summary-card {
min-height: 86px;
display: flex;
align-items: center;
gap: 17px;
padding:
15px 20px;
background: #fff;
border:
1px solid
var(--cfsj-border);
border-radius: 8px;
box-shadow:
0 3px 10px
rgba(0, 30, 80, .045);
transition:
transform .2s ease,
box-shadow .2s ease,
border-color .2s ease;
}
.cfsj-summary-card:hover {
transform:
translateY(-2px);
border-color:
#d7dde5;
box-shadow:
0 6px 17px
rgba(0, 30, 80, .075);
}
/* Icona */
.cfsj-summary-icon {
width: 48px;
height: 48px;
flex:
0 0 48px;
display: flex;
align-items: center;
justify-content: center;
color:
var(--cfsj-blue);
}
.cfsj-summary-icon svg {
width: 35px;
height: 35px;
fill: none;
stroke:
currentColor;
stroke-width: 1.65;
stroke-linecap:
round;
stroke-linejoin:
round;
}
/* Text */
.cfsj-summary-content {
min-width: 0;
display: flex;
flex-direction: column;
}
.cfsj-summary-label {
margin-bottom: 4px;
color:
var(--cfsj-blue);
font-size: 14px;
font-weight: 700;
line-height: 1.2;
}
.cfsj-summary-value {
color:
var(--cfsj-text);
font-size: 14px;
font-weight: 400;
line-height: 1.35;
}
/* ==========================================================
COS TÈCNIC
========================================================== */
.cfsj-staff-grid {
display: grid;
grid-template-columns:
repeat(
3,
minmax(0, 1fr)
);
gap: 18px;
}
.cfsj-person-card {
min-height: 96px;
display: flex;
align-items: center;
padding:
11px 17px;
background: #fff;
border:
1px solid
var(--cfsj-border);
border-radius: 8px;
box-shadow:
0 3px 10px
rgba(0, 30, 80, .045);
transition:
transform .2s ease,
box-shadow .2s ease,
border-color .2s ease;
}
.cfsj-person-card:hover {
transform:
translateY(-2px);
border-color:
#d7dde5;
box-shadow:
0 6px 17px
rgba(0, 30, 80, .075);
}
.cfsj-person-photo {
width: 70px;
height: 70px;
flex:
0 0 70px;
margin-right: 16px;
overflow: hidden;
border-radius: 50%;
background:
var(--cfsj-soft);
}
.cfsj-person-photo img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position:
center top;
}
.cfsj-photo-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #adb7c4;
background:
linear-gradient(
145deg,
#f7f9fb,
#e9edf2
);
}
.cfsj-photo-placeholder svg {
width: 42%;
height: 42%;
fill: none;
stroke:
currentColor;
stroke-width: 1.45;
stroke-linecap:
round;
stroke-linejoin:
round;
}
.cfsj-person-content {
min-width: 0;
}
.cfsj-person-name {
margin:
0 0 4px;
color:
var(--cfsj-blue);
font-size: 15px;
font-weight: 700;
line-height: 1.2;
}
.cfsj-person-role {
margin: 0;
color:
var(--cfsj-muted);
font-size: 12px;
font-weight: 400;
line-height: 1.3;
}
/* ==========================================================
PLANTILLA
CAPÇALERA
========================================================== */
.cfsj-squad-section {
overflow: hidden;
}
.cfsj-squad-heading {
display: flex;
align-items: flex-end;
justify-content:
space-between;
gap: 20px;
margin-bottom: 22px;
}
.cfsj-squad-heading
.cfsj-team-title {
margin-bottom: 0;
}
.cfsj-squad-navigation {
display: flex;
align-items: center;
gap: 16px;
}
/* Comptador */
.cfsj-squad-counter {
min-width: 54px;
color: #8c96a5;
font-size: 11px;
font-weight: 500;
letter-spacing: .04em;
white-space: nowrap;
}
.cfsj-current-page {
color:
var(--cfsj-blue);
font-size: 14px;
font-weight: 700;
}
.cfsj-counter-divider {
padding:
0 3px;
color: #c3c9d1;
}
/* ==========================================================
FLETXES
========================================================== */
.cfsj-squad-arrows {
display: flex;
gap: 6px;
}
.cfsj-squad-arrow {
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
color:
var(--cfsj-blue);
background: #fff;
border:
1px solid #dde2e8;
border-radius: 50%;
cursor: pointer;
transition:
color .2s ease,
background .2s ease,
border-color .2s ease,
transform .2s ease;
}
.cfsj-squad-arrow svg {
width: 17px;
height: 17px;
fill: none;
stroke:
currentColor;
stroke-width: 1.8;
stroke-linecap:
round;
stroke-linejoin:
round;
}
.cfsj-squad-arrow:hover:not(:disabled) {
color: #fff;
background:
var(--cfsj-blue);
border-color:
var(--cfsj-blue);
transform:
translateY(-1px);
}
.cfsj-squad-arrow:disabled {
opacity: .27;
cursor: default;
}
/* ==========================================================
SLIDER
========================================================== */
.cfsj-squad-slider {
width: 100%;
}
.cfsj-squad-viewport {
width: 100%;
overflow: hidden;
touch-action: pan-y;
outline: none;
}
.cfsj-squad-track {
display: flex;
width: 100%;
transform:
translate3d(0, 0, 0);
transition:
transform
.42s
cubic-bezier(
.22,
.61,
.36,
1
);
will-change:
transform;
}
.cfsj-squad-page {
width: 100%;
flex:
0 0 100%;
display: grid;
grid-template-columns:
repeat(
var(--cfsj-squad-columns),
minmax(0, 1fr)
);
gap:
13px 14px;
}
/* ==========================================================
JUGADOR
========================================================== */
.cfsj-player-card {
position: relative;
min-width: 0;
height: 96px;
display: grid;
grid-template-columns:
31px
68px
minmax(0, 1fr);
align-items: center;
overflow: hidden;
padding:
0 11px 0 9px;
background: #fff;
border:
1px solid
var(--cfsj-border);
border-radius: 8px;
box-shadow:
0 2px 8px
rgba(0, 32, 80, .04);
transition:
transform .2s ease,
border-color .2s ease,
box-shadow .2s ease;
}
.cfsj-player-card:hover {
transform:
translateY(-2px);
border-color:
#d7dde5;
box-shadow:
0 5px 15px
rgba(0, 32, 80, .07);
}
/* Dorsal */
.cfsj-player-number {
align-self:
start;
margin-top: 14px;
color:
var(--cfsj-blue);
font-size: 18px;
font-weight: 700;
line-height: 1;
}
/* Foto */
.cfsj-player-photo {
width: 68px;
height: 100%;
display: flex;
align-items: flex-end;
justify-content: center;
overflow: hidden;
}
.cfsj-player-photo img {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
object-position:
center bottom;
}
.cfsj-player-photo
.cfsj-photo-placeholder {
width: 53px;
height: 53px;
align-self: center;
border-radius: 50%;
}
.cfsj-player-photo
.cfsj-photo-placeholder svg {
width: 27px;
height: 27px;
}
/* Text */
.cfsj-player-content {
min-width: 0;
padding-left: 8px;
}
.cfsj-player-name {
margin:
0 0 4px;
color:
var(--cfsj-blue);
font-size: 14px;
font-weight: 700;
line-height: 1.15;
}
.cfsj-player-position {
margin: 0;
color:
var(--cfsj-muted);
font-size: 11px;
font-weight: 400;
line-height: 1.25;
}
/* ==========================================================
PRÒXIM PARTIT
========================================================== */
.cfsj-next-match-section {
margin-top: 48px;
}
/* ==========================================================
ESCRIPTORI GRAN
5 x 2
========================================================== */
@media (min-width: 1280px) {
.cfsj-squad-page {
--cfsj-squad-columns: 5;
}
}
/* ==========================================================
PORTÀTIL
4 x 2
========================================================== */
@media
(min-width: 900px)
and
(max-width: 1279px) {
.cfsj-squad-page {
--cfsj-squad-columns: 4;
}
}
/* ==========================================================
TABLET
========================================================== */
@media
(min-width: 768px)
and
(max-width: 1024px) {
.cfsj-team {
padding-left: 18px;
padding-right: 18px;
}
.cfsj-team-section {
margin-top: 42px;
}
/* Resum */
.cfsj-summary-grid {
gap: 11px;
}
.cfsj-summary-card {
min-height: 80px;
padding:
13px 13px;
gap: 10px;
}
.cfsj-summary-icon {
width: 40px;
height: 40px;
flex-basis: 40px;
}
.cfsj-summary-icon svg {
width: 29px;
height: 29px;
}
.cfsj-summary-label {
font-size: 12px;
}
.cfsj-summary-value {
font-size: 12px;
}
/* Tècnics */
.cfsj-staff-grid {
grid-template-columns:
repeat(
2,
minmax(0, 1fr)
);
}
}
/* Tablet slider 3 x 2 */
@media
(min-width: 768px)
and
(max-width: 899px) {
.cfsj-squad-page {
--cfsj-squad-columns: 3;
}
.cfsj-player-card {
height: 92px;
grid-template-columns:
29px
60px
minmax(0, 1fr);
}
.cfsj-player-photo {
width: 60px;
}
}
/* ==========================================================
MÒBIL
========================================================== */
@media (max-width: 767px) {
.cfsj-team {
padding:
0 14px 10px;
}
.cfsj-team-section {
margin-top: 37px;
}
.cfsj-team-section:first-child {
margin-top: 24px;
}
.cfsj-team-title {
margin-bottom: 17px;
font-size: 26px;
}
/* ======================================================
RESUM
====================================================== */
.cfsj-summary-grid {
grid-template-columns:
1fr;
gap: 8px;
}
.cfsj-summary-card {
min-height: 68px;
padding:
10px 14px;
gap: 12px;
border-radius: 7px;
}
.cfsj-summary-icon {
width: 40px;
height: 40px;
flex-basis: 40px;
}
.cfsj-summary-icon svg {
width: 28px;
height: 28px;
}
.cfsj-summary-label {
margin-bottom: 3px;
font-size: 12px;
}
.cfsj-summary-value {
font-size: 12px;
}
/* ======================================================
COS TÈCNIC
====================================================== */
.cfsj-staff-grid {
grid-template-columns:
1fr;
gap: 8px;
}
.cfsj-person-card {
min-height: 82px;
padding:
8px 12px;
}
.cfsj-person-photo {
width: 60px;
height: 60px;
flex-basis: 60px;
margin-right: 13px;
}
.cfsj-person-name {
font-size: 14px;
}
.cfsj-person-role {
font-size: 11px;
}
/* ======================================================
PLANTILLA
====================================================== */
.cfsj-squad-heading {
align-items: center;
margin-bottom: 16px;
}
.cfsj-squad-page {
--cfsj-squad-columns: 2;
gap: 8px;
}
.cfsj-squad-navigation {
gap: 9px;
}
.cfsj-squad-counter {
min-width: 45px;
font-size: 9px;
}
.cfsj-current-page {
font-size: 12px;
}
.cfsj-squad-arrow {
width: 31px;
height: 31px;
}
.cfsj-squad-arrow svg {
width: 15px;
height: 15px;
}
/* Jugador */
.cfsj-player-card {
height: 87px;
grid-template-columns:
23px
47px
minmax(0, 1fr);
padding:
0 6px 0 6px;
border-radius: 7px;
}
.cfsj-player-number {
margin-top: 12px;
font-size: 15px;
}
.cfsj-player-photo {
width: 47px;
}
.cfsj-player-photo
.cfsj-photo-placeholder {
width: 40px;
height: 40px;
}
.cfsj-player-photo
.cfsj-photo-placeholder svg {
width: 21px;
height: 21px;
}
.cfsj-player-content {
padding-left: 5px;
}
.cfsj-player-name {
margin-bottom: 3px;
font-size: 11.5px;
}
.cfsj-player-position {
font-size: 9.5px;
}
}
/* ==========================================================
MÒBIL ESTRET
========================================================== */
@media (max-width: 390px) {
.cfsj-team {
padding-left: 10px;
padding-right: 10px;
}
.cfsj-squad-page {
gap: 6px;
}
.cfsj-player-card {
height: 83px;
grid-template-columns:
20px
40px
minmax(0, 1fr);
padding-right: 5px;
}
.cfsj-player-number {
font-size: 13px;
}
.cfsj-player-photo {
width: 40px;
}
.cfsj-player-photo
.cfsj-photo-placeholder {
width: 35px;
height: 35px;
}
.cfsj-player-name {
font-size: 10.5px;
}
.cfsj-player-position {
font-size: 9px;
}
}
/* ==========================================================
ACCESSIBILITAT
========================================================== */
@media
(prefers-reduced-motion: reduce) {
.cfsj-squad-track,
.cfsj-player-card,
.cfsj-person-card,
.cfsj-summary-card,
.cfsj-squad-arrow {
transition: none;
}
}
/* =========================================================
CF SANT JUST
SECCIÓ INSCRIPCIONS
========================================================= */
.csj-insc {
--csj-blue: #073d87;
--csj-blue-dark: #052e68;
--csj-blue-light: #0c56a8;
--csj-yellow: #ffc400;
--csj-yellow-light: #ffd33d;
--csj-text: #13345f;
--csj-grey: #68758a;
--csj-border: #dfe5ee;
--csj-bg: #ffffff;
--csj-soft: #f6f8fb;
width: 100%;
background: #ffffff;
font-family: inherit;
color: var(--csj-text);
box-sizing: border-box;
}
.csj-insc *,
.csj-insc *::before,
.csj-insc *::after {
box-sizing: border-box;
}
.csj-insc-container {
width: calc(100% - 40px);
max-width: 1450px;
margin: 0 auto;
padding: 22px 0 34px;
}
/* =========================================================
AVISO SUPERIOR
========================================================= */
.csj-insc-help {
width: 50%;
min-height: 44px;
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 18px;
padding: 10px 18px;
border: 1px solid #d9e1ec;
border-radius: 11px;
background: #fafbfd;
color: #505c70;
font-size: 14px;
line-height: 1.35;
}
.csj-insc-help p {
margin: 0;
}
.csj-insc-help a {
color: var(--csj-blue);
font-weight: 600;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}
.csj-insc-help a:hover {
color: var(--csj-blue-light);
}
.csj-insc-help-icon {
width: 21px;
height: 21px;
flex: 0 0 21px;
color: var(--csj-blue);
}
.csj-insc-help-icon svg {
width: 100%;
height: 100%;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
/* =========================================================
TARJETAS PRINCIPALES
========================================================= */
.csj-insc-featured-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 26px;
margin-bottom: 20px;
}
.csj-insc-featured {
position: relative;
min-height: 172px;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
padding: 26px 27px 18px;
border-radius: 17px;
box-shadow:
0 8px 20px rgba(22, 46, 80, 0.08),
0 2px 4px rgba(22, 46, 80, 0.04);
}
/* Textura de pincel */
.csj-insc-featured::after {
content: "";
position: absolute;
top: -20%;
right: -3%;
width: 47%;
height: 145%;
opacity: 0.15;
transform: rotate(-3deg);
pointer-events: none;
background:
repeating-linear-gradient(
166deg,
transparent 0 8px,
currentColor 9px 10px,
transparent 11px 17px
);
mask-image:
linear-gradient(
90deg,
transparent 0%,
rgba(0,0,0,.7) 30%,
#000 100%
);
}
/* AZUL */
.csj-insc-featured--blue {
color: #ffffff;
background:
linear-gradient(
110deg,
#073f8f 0%,
#084a9e 57%,
#073c83 100%
);
}
.csj-insc-featured--blue::after {
color: #ffffff;
}
/* AMARILLO */
.csj-insc-featured--yellow {
color: var(--csj-blue);
background:
linear-gradient(
110deg,
#ffbd00 0%,
#ffc800 52%,
#f5ad00 100%
);
}
.csj-insc-featured--yellow::after {
color: var(--csj-blue);
}
/* CONTENIDO SUPERIOR */
.csj-insc-featured-top {
position: relative;
z-index: 2;
display: flex;
align-items: flex-start;
gap: 22px;
}
.csj-insc-featured-icon {
width: 66px;
height: 66px;
flex: 0 0 66px;
display: flex;
align-items: center;
justify-content: center;
border: 1.5px solid var(--csj-yellow);
border-radius: 50%;
color: var(--csj-yellow);
}
.csj-insc-featured-icon--white {
border-color: #ffffff;
color: #ffffff;
}
.csj-insc-featured-icon svg {
width: 34px;
height: 34px;
fill: none;
stroke: currentColor;
stroke-width: 1.45;
stroke-linecap: round;
stroke-linejoin: round;
}
.csj-insc-featured-copy {
padding-top: 5px;
}
.csj-insc-featured-copy h2 {
margin: 0 0 5px;
color: inherit;
font-size: 23px;
font-weight: 800;
line-height: 1.05;
letter-spacing: -0.4px;
}
.csj-insc-featured-copy p {
max-width: 390px;
margin: 0;
color: inherit;
font-size: 14px;
font-weight: 400;
line-height: 1.4;
}
/* PARTE INFERIOR */
.csj-insc-featured-bottom {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
gap: 25px;
margin-top: 18px;
padding-top: 14px;
border-top: 1px solid rgba(7, 61, 135, 0.28);
}
.csj-insc-featured--blue .csj-insc-featured-bottom {
border-color: rgba(255, 196, 0, 0.45);
}
/* =========================================================
TEMPORADA
========================================================= */
.csj-insc-season {
display: flex;
align-items: center;
gap: 10px;
color: var(--csj-blue);
font-size: 14px;
font-weight: 600;
white-space: nowrap;
}
.csj-insc-season--light {
color: #ffffff;
}
.csj-insc-calendar {
width: 20px;
height: 20px;
flex: 0 0 20px;
color: var(--csj-blue);
}
.csj-insc-season--light .csj-insc-calendar {
color: var(--csj-yellow);
}
.csj-insc-calendar svg {
width: 100%;
height: 100%;
fill: none;
stroke: currentColor;
stroke-width: 1.75;
stroke-linecap: round;
stroke-linejoin: round;
}
/* =========================================================
BOTONES
========================================================= */
.csj-insc-btn {
min-height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 13px;
padding: 9px 22px;
border-radius: 9px;
font-size: 12px;
font-weight: 800;
line-height: 1;
text-decoration: none !important;
white-space: nowrap;
transition:
transform .2s ease,
background-color .2s ease,
border-color .2s ease,
box-shadow .2s ease;
}
.csj-insc-btn svg {
width: 15px;
height: 15px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
transition: transform .2s ease;
}
.csj-insc-btn:hover svg {
transform: translateX(3px);
}
.csj-insc-btn:hover {
transform: translateY(-1px);
}
/* Amarillo */
.csj-insc-btn--yellow,
.csj-insc-btn--yellow:visited {
color: var(--csj-blue) !important;
background: var(--csj-yellow);
border: 1px solid var(--csj-yellow);
}
.csj-insc-btn--yellow:hover {
color: var(--csj-blue) !important;
background: var(--csj-yellow-light);
}
/* Azul */
.csj-insc-btn--blue,
.csj-insc-btn--blue:visited {
color: #ffffff !important;
background: var(--csj-blue);
border: 1px solid var(--csj-blue);
}
.csj-insc-btn--blue:hover {
color: #ffffff !important;
background: var(--csj-blue-dark);
}
/* Outline */
.csj-insc-btn--outline,
.csj-insc-btn--outline:visited {
width: 100%;
color: var(--csj-blue) !important;
background: #ffffff;
border: 1px solid var(--csj-yellow);
}
.csj-insc-btn--outline:hover {
color: var(--csj-blue) !important;
background: #fffaf0;
border-color: #f3b800;
}
/* =========================================================
TARJETAS SECUNDARIAS
========================================================= */
.csj-insc-categories {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px;
margin-bottom: 20px;
}
.csj-insc-card {
min-width: 0;
display: flex;
flex-direction: column;
padding: 19px 17px 16px;
background: #ffffff;
border: 1px solid var(--csj-border);
border-radius: 15px;
box-shadow:
0 7px 19px rgba(20, 44, 73, 0.055),
0 2px 5px rgba(20, 44, 73, 0.025);
transition:
transform .22s ease,
box-shadow .22s ease,
border-color .22s ease;
}
.csj-insc-card:hover {
transform: translateY(-3px);
border-color: #ccd6e5;
box-shadow:
0 13px 28px rgba(20, 44, 73, 0.09),
0 4px 8px rgba(20, 44, 73, 0.035);
}
/* PARTE SUPERIOR */
.csj-insc-card-main {
min-height: 82px;
display: flex;
align-items: flex-start;
gap: 17px;
}
.csj-insc-card-icon {
width: 58px;
height: 58px;
flex: 0 0 58px;
display: flex;
align-items: center;
justify-content: center;
color: var(--csj-blue);
background: #ffffff;
border: 1px solid #d3dae5;
border-radius: 50%;
}
.csj-insc-card-icon svg {
width: 37px;
height: 37px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
/* CAMISETA CLUB */
.csj-insc-shirt-icon {
border-color: var(--csj-yellow);
}
.csj-insc-shirt-icon svg {
width: 45px;
height: 45px;
}
.csj-insc-shirt-icon .shirt-body {
fill: #ffd21c;
stroke: var(--csj-blue);
stroke-width: 1.5;
}
.csj-insc-shirt-icon .shirt-stripe {
fill: var(--csj-blue);
stroke: none;
}
.csj-insc-shirt-icon .shirt-neck {
fill: none;
stroke: var(--csj-blue);
stroke-width: 2.2;
}
/* TEXTO */
.csj-insc-card-copy {
min-width: 0;
padding-top: 4px;
}
.csj-insc-card-copy h3 {
margin: 0 0 6px;
color: var(--csj-blue);
font-size: 19px;
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.25px;
}
.csj-insc-card-copy p {
margin: 0;
color: #454f5e;
font-size: 13.5px;
font-weight: 400;
line-height: 1.35;
}
/* SEPARADOR */
.csj-insc-card-separator {
width: 100%;
height: 1px;
margin: 10px 0 13px;
background: #dce2ea;
}
.csj-insc-card > .csj-insc-season {
margin-bottom: 15px;
font-size: 13px;
}
/* =========================================================
NOTA INFERIOR
========================================================= */
.csj-insc-footer-note {
position: relative;
min-height: 64px;
display: flex;
align-items: center;
gap: 17px;
overflow: hidden;
padding: 12px 110px 12px 22px;
color: #315b97;
background:
linear-gradient(
90deg,
#f5f8fc 0%,
#f8faff 55%,
#f2f6fc 100%
);
border: 1px solid #d7e0ed;
border-radius: 11px;
}
.csj-insc-footer-icon {
width: 32px;
height: 32px;
flex: 0 0 32px;
color: var(--csj-blue);
}
.csj-insc-footer-icon svg {
width: 100%;
height: 100%;
fill: none;
stroke: currentColor;
stroke-width: 1.55;
stroke-linecap: round;
stroke-linejoin: round;
}
.csj-insc-footer-copy {
position: relative;
z-index: 2;
}
.csj-insc-footer-copy p {
margin: 0;
font-size: 12.5px;
line-height: 1.4;
}
.csj-insc-footer-decoration {
position: absolute;
right: 23px;
bottom: -18px;
width: 82px;
height: 82px;
color: #aac4e9;
opacity: .42;
transform: rotate(7deg);
}
.csj-insc-footer-decoration svg {
width: 100%;
height: 100%;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1100px) {
.csj-insc-container {
width: calc(100% - 32px);
}
.csj-insc-help {
width: 65%;
}
.csj-insc-categories {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.csj-insc-featured-bottom {
align-items: flex-start;
flex-direction: column;
gap: 13px;
}
.csj-insc-featured-bottom .csj-insc-btn {
width: 100%;
}
}
/* =========================================================
TABLET PEQUEÑA
========================================================= */
@media (max-width: 800px) {
.csj-insc-container {
padding-top: 18px;
}
.csj-insc-help {
width: 100%;
}
.csj-insc-featured-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.csj-insc-featured {
min-height: auto;
}
}
/* =========================================================
MÓVIL
========================================================= */
@media (max-width: 600px) {
.csj-insc-container {
width: calc(100% - 28px);
padding: 15px 0 26px;
}
/* Aviso */
.csj-insc-help {
align-items: flex-start;
margin-bottom: 14px;
padding: 11px 13px;
border-radius: 9px;
font-size: 12px;
}
/* Destacadas */
.csj-insc-featured-grid {
margin-bottom: 16px;
}
.csj-insc-featured {
padding: 20px 18px 17px;
border-radius: 14px;
}
.csj-insc-featured-top {
gap: 15px;
}
.csj-insc-featured-icon {
width: 52px;
height: 52px;
flex-basis: 52px;
}
.csj-insc-featured-icon svg {
width: 28px;
height: 28px;
}
.csj-insc-featured-copy {
padding-top: 2px;
}
.csj-insc-featured-copy h2 {
font-size: 19px;
}
.csj-insc-featured-copy p {
font-size: 12.5px;
}
.csj-insc-featured-bottom {
margin-top: 15px;
padding-top: 13px;
}
/* Categorías */
.csj-insc-categories {
grid-template-columns: 1fr;
gap: 13px;
}
.csj-insc-card {
padding: 17px 16px 15px;
border-radius: 13px;
}
.csj-insc-card-main {
min-height: auto;
}
.csj-insc-card-icon {
width: 52px;
height: 52px;
flex-basis: 52px;
}
.csj-insc-card-copy h3 {
font-size: 17px;
}
.csj-insc-card-copy p {
font-size: 12.5px;
}
/* Temporada */
.csj-insc-season {
font-size: 12px;
}
/* Botones */
.csj-insc-btn {
min-height: 40px;
padding: 9px 18px;
font-size: 11px;
}
/* Nota final */
.csj-insc-footer-note {
align-items: flex-start;
padding:
14px
55px
14px
15px;
gap: 12px;
}
.csj-insc-footer-icon {
width: 27px;
height: 27px;
flex-basis: 27px;
}
.csj-insc-footer-copy p {
font-size: 11px;
}
.csj-insc-footer-decoration {
right: 5px;
bottom: -7px;
width: 55px;
height: 55px;
}
}