/* * FGPC Design System — primitivas base * * Reglas de convivencia con Elementor, aprendidas a los golpes con el CSS * del plugin anterior: * * 1. NUNCA declarar `background: transparent` sobre `.elementor-section`, * `.elementor-top-section` o `.e-con`. El plugin viejo lo hacía y por eso * ningún fondo definido en el Theme Builder llegaba a pintarse: había que * parchear cada sección con !important. * * 2. NUNCA imponer `display:flex; flex-wrap:nowrap` a `.elementor-nav-menu--main > ul` * de forma global. Eso rompía todo menú vertical — el del footer se montaba * encima de la columna de contacto. Si el menú del header necesita una sola * línea, se acota al contenedor del header. * * 3. Todo color sale de una custom property. Ningún hex suelto en este archivo * ni en los widgets. */ /* ---------------------------------------------------------------- base --- */ /* * Sin la clase `fgpc` en el . Antes la regla era `body.fgpc` y funcionaba * de casualidad: la tipografía real la ponía el tema base, que traía la de otro * diseño. Al dejar el tema neutro, el sitio entero cayó a Times. El design * system es el que manda la tipografía, así que la declara sobre `body` y no * depende de que alguien agregue una clase. */ body { background: var(--fgpc-ivory); color: var(--fgpc-ink); font-family: var(--fgpc-font-sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { font-family: var(--fgpc-font-sans); color: var(--fgpc-ink); letter-spacing: -0.01em; line-height: 1.15; text-wrap: balance; } /* El display se pide explícitamente; no se aplica a todos los títulos. */ .fgpc-display { font-family: var(--fgpc-font-display); font-weight: 700; letter-spacing: 0; } .fgpc-wrap { width: 100%; max-width: var(--fgpc-wrap); margin-inline: auto; padding-inline: var(--fgpc-gutter); } /* ------------------------------------------------------------ eyebrow --- */ /* .eyebrow del mockup: 12px / .22em — el letter-spacing mas abierto del sistema. El filete es un real de 30x1.5px, no un ::before, para que Elementor pueda estilarlo como elemento. */ .fgpc-eyebrow { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fgpc-gold); } .fgpc-eyebrow__rule { display: inline-block; width: 30px; height: 1.5px; background: currentColor; margin-right: 12px; } /* Sobre fondo oscuro el dorado normal no contrasta. */ .fgpc-on-dark .fgpc-eyebrow { color: var(--fgpc-gold-soft); } /* --------------------------------------------------------------- link --- */ /* .link: subrayado permanente en dorado. En hover NO cambia el color: se mueve la flecha. Es el unico componente cuya unica senal de hover es movimiento, asi que necesita alternativa con reduced-motion. */ .fgpc-link { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fgpc-ink); text-decoration: none; padding-bottom: 4px; border-bottom: 1.5px solid var(--fgpc-gold); cursor: pointer; } .fgpc-link__arrow { transition: transform 0.3s; } .fgpc-link:hover .fgpc-link__arrow { transform: translateX(5px); } @media (prefers-reduced-motion: reduce) { .fgpc-link:hover { color: var(--fgpc-gold); } } /* ------------------------------------------------------------- botones --- */ /* Base .hbtn: 13px 22px, radio 4px, 12.5px/600/.05em, icono 17px, gap 9px. */ .fgpc-btn { display: inline-flex; align-items: center; gap: 9px; font-family: var(--fgpc-font-sans); font-size: 12.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; padding: 13px 22px; border-radius: 4px; border: 0; text-decoration: none; cursor: pointer; transition: 0.2s; } .fgpc-btn i { font-size: 17px; } /* Solido: fondo dorado con texto PINE. El texto solo pasa a blanco en hover, cuando el fondo se oscurece. Ponerlo blanco de entrada baja el contraste. */ .fgpc-btn--solid { background: var(--fgpc-gold); color: var(--fgpc-pine); } .fgpc-btn--solid:hover { background: var(--fgpc-gold-h); color: #fff; } /* Contorno claro: solo sobre fondo oscuro. */ .fgpc-btn--ghost { border: 1.5px solid rgba(255,255,255,.55); color: #fff; background: transparent; } .fgpc-btn--ghost:hover { background: #fff; color: var(--fgpc-pine); border-color: #fff; } /* Contorno oscuro: sobre marfil. */ .fgpc-btn--ghost-dark { border: 1.5px solid var(--fgpc-pine); color: var(--fgpc-pine); background: transparent; } .fgpc-btn--ghost-dark:hover { background: var(--fgpc-pine); color: #fff; } /* Estados que el mockup no contempla por ser estatico. */ .fgpc-btn[disabled], .fgpc-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; } .fgpc-btn.is-loading { pointer-events: none; opacity: 0.7; } /* ------------------------------------------------- acciones de torneo --- */ /* Cinco variantes que conviven en la misma fila. No comparten color porque cada una comunica un estado distinto del torneo. */ .fgpc-act { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-family: var(--fgpc-font-sans); font-weight: 600; white-space: nowrap; text-decoration: none; border: 0; cursor: pointer; transition: 0.25s; } .fgpc-act--inscr { background: var(--fgpc-pine); color: #fff; border: 1px solid var(--fgpc-pine); padding: 9px 15px; border-radius: 6px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; gap: 4px; } .fgpc-act--inscr:hover { background: var(--fgpc-pine-h); } .fgpc-act--enroll { background: var(--fgpc-gold); color: var(--fgpc-pine); padding: 10px 18px; border-radius: 6px; font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; } .fgpc-act--enroll:hover { background: var(--fgpc-gold-h); color: #fff; } /* Dorado claro con texto PINE, no verde con texto blanco: el mockup declara .act.result dos veces y la segunda declaracion, que es la que gana, la cambia de verde a dorado. Verificado con getComputedStyle, no leyendo. */ .fgpc-act--result { background: var(--fgpc-result); color: var(--fgpc-pine); border: 1px solid var(--fgpc-result-bd); padding: 9px 15px; border-radius: 6px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; gap: 4px; } .fgpc-act--result:hover { background: var(--fgpc-result-bd); color: #fff; } /* Mismo caso: la segunda declaracion de .act.soon la vuelve neutra. En el mockup NO es ambar. --soon y --done son visualmente identicos y se distinguen solo por icono y texto (reloj/Proximamente vs check/Realizado). */ .fgpc-act--soon, .fgpc-act--done { background: var(--fgpc-paper); color: var(--fgpc-ink2); border: 1px solid var(--fgpc-line); padding: 9px 15px; border-radius: 6px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; gap: 4px; cursor: default; } /* Certificado: mismo aspecto neutro pero mas compacto y con menos tracking. Es un boton real, asi que tiene hover; soon y done no lo tienen. */ .fgpc-act--cert { background: var(--fgpc-paper); color: var(--fgpc-ink2); border: 1px solid var(--fgpc-line); padding: 8px 12px; border-radius: 6px; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; gap: 4px; cursor: pointer; } .fgpc-act--cert:hover { border-color: var(--fgpc-pine); color: var(--fgpc-pine); } .fgpc-act--icon { width: 40px; height: 40px; border: 1px solid var(--fgpc-line); border-radius: 50%; background: var(--fgpc-paper); color: var(--fgpc-pine); font-size: 18px; } .fgpc-act--icon:hover { background: var(--fgpc-pine); color: #fff; border-color: var(--fgpc-pine); transform: translateY(-2px); } /* ---------------------------------------------------------------- tags --- */ /* Dos tamanos segun contexto, y es una diferencia real del mockup: 10px/.12em dentro del titulo de un torneo, 10.5px/.14em en la tarjeta. */ .fgpc-cat { display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fgpc-gold); white-space: nowrap; } .fgpc-cat--card { font-size: 10.5px; letter-spacing: 0.14em; display: block; } /* --------------------------------------------------------------- chips --- */ /* .on marca el filtro de categoria y .on-gold el de puntos: son dos ejes de filtrado simultaneos y el color es lo que los distingue. */ .fgpc-chip { display: inline-flex; align-items: center; gap: 7px; font-family: var(--fgpc-font-sans); font-size: 12px; font-weight: 500; color: var(--fgpc-ink2); background: transparent; border: 1px solid var(--fgpc-line); border-radius: 20px; padding: 5px 13px; white-space: nowrap; cursor: pointer; transition: 0.15s; } .fgpc-chip:hover { border-color: var(--fgpc-pine); color: var(--fgpc-pine); } .fgpc-chip.is-on { background: var(--fgpc-pine); border-color: var(--fgpc-pine); color: #fff; } .fgpc-chip.is-on-gold { background: var(--fgpc-gold); border-color: var(--fgpc-gold); color: #fff; } /* --------------------------------------------------------------- stats --- */ .fgpc-stat { text-align: center; padding: 34px 16px; border-right: 1px solid var(--fgpc-line); } .fgpc-stat:last-child { border-right: 0; } .fgpc-stat__n { font-family: var(--fgpc-font-display); font-weight: 700; font-size: 42px; line-height: 1; color: var(--fgpc-pine); font-variant-numeric: tabular-nums; } .fgpc-stat__l { margin-top: 10px; font-size: 11.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fgpc-ink2); } a.fgpc-stat:hover .fgpc-stat__n { color: var(--fgpc-gold); } /* --------------------------------------------------- boton pildora --- */ /* El mockup tiene TRES familias de boton, no una con variantes: .hbtn 12.5px / radio 4 / pad 13-22 -- accion de portada .act 11px / radio 6 / pad 9-15 -- accion de fila .rbtn 13px / radio 30 / pad 9-18 / borde 2px -- descarga de documento Se ven distintas a proposito: la pildora aparece en listas de descargas donde conviven varias y la forma redondeada las separa del texto denso. Mezclarlas seria "simplificar" el sistema rompiendo el diseno. */ .fgpc-btn--pill { padding: 9px 18px; border-radius: 30px; border: 2px solid var(--fgpc-pine); background: var(--fgpc-pine); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; gap: 7px; } .fgpc-btn--pill:hover { background: var(--fgpc-pine-d); border-color: var(--fgpc-pine-d); } .fgpc-btn--pill-outline { background: transparent; color: var(--fgpc-pine); } .fgpc-btn--pill-outline:hover { background: var(--fgpc-pine); color: #fff; } /* ------------------------------------------------- encabezado de mes --- */ .fgpc-mes { font-family: var(--fgpc-font-display); font-size: 22px; font-weight: 500; line-height: 1.2; letter-spacing: 0; text-transform: none; color: var(--fgpc-pine); margin: 32px 0 6px; } /* --------------------------------------------------------------- reglas --- */ .fgpc-rule { border: none; border-top: 1px solid var(--fgpc-line); margin: 0; } /* --------------------------------------------------------- accesibilidad --- */ /* El mockup NO tiene estados de foco: su unica regla es un cambio de borde en los inputs del formulario de inscripcion. Quien navegue con teclado no ve donde esta parado, lo que incumple WCAG 2.1 AA (2.4.7). Esta es la unica desviacion deliberada respecto del mockup. */ .fgpc :focus-visible { outline: 2px solid var(--fgpc-gold); outline-offset: 2px; } .fgpc-on-dark :focus-visible { outline-color: var(--fgpc-gold-soft); } @media (prefers-reduced-motion: reduce) { .fgpc *, .fgpc *::before, .fgpc *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }