/* Theme Name: Casei Dei Theme URI: https://caseidei.com Author: Casei Dei Author URI: https://caseidei.com Description: Block theme (FSE) para Casei Dei — el índice citable del queso premiado. Dirección "La Dehesa": editorial luminoso, serif Spectral, paleta pastel, datos al frente. Tokens en theme.json; lógica del índice y JSON-LD en el plugin casei-dei-core. Requires at least: 6.6 Tested up to: 7.0 Requires PHP: 8.1 Version: 0.10.1 License: GPL-2.0-or-later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: casei-dei Domain Path: /languages Tags: full-site-editing, block-patterns, custom-colors, custom-logo, editor-style, translation-ready */ /* ============================================================ Componentes propios. Los tokens viven en theme.json y se exponen como var(--wp--preset--…). Aquí solo lo que el editor de bloques no cubre con comodidad. ============================================================ */ :root { --cd-serif: var(--wp--preset--font-family--serif); --cd-sans: var(--wp--preset--font-family--sans); --cd-mono: var(--wp--preset--font-family--mono); --cd-ease: cubic-bezier(.2, .7, .2, 1); --cd-ease-out: cubic-bezier(.16, 1, .3, 1); } /* eyebrow / etiqueta mono */ .cd-eyebrow { font-family: var(--cd-mono); font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--wp--preset--color--ink-soft); display: inline-flex; align-items: center; gap: .65rem; } .cd-eyebrow::before { content: ""; width: 18px; height: 7px; border-radius: 2px; background: var(--wp--preset--color--sage-deep); opacity: .85; } .cd-mono { font-family: var(--cd-mono); font-size: .8rem; color: var(--wp--preset--color--ink-soft); } .cd-mono--caps { text-transform: uppercase; letter-spacing: .14em; font-size: .68rem; } /* el instrumento del Índice */ .cd-index { font-family: var(--cd-serif); font-weight: 700; line-height: .82; letter-spacing: -.02em; color: var(--wp--preset--color--ink); font-feature-settings: "tnum"; font-size: clamp(3.4rem, 9vw, 5.4rem); } .cd-index__max { font-family: var(--cd-mono); font-size: .95rem; color: var(--wp--preset--color--ink-soft); } .cd-gauge { height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--wp--preset--color--greige) 50%, var(--wp--preset--color--base)); overflow: hidden; } .cd-gauge__fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--wp--preset--color--sage-deep), var(--wp--preset--color--sage)); transform: scaleX(var(--cd-val, 0)); transform-origin: left; transition: transform 1.3s var(--cd-ease-out) .15s; } /* tarjeta */ .cd-card { background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line); border-radius: 20px; box-shadow: var(--wp--preset--shadow--soft-sm); } /* fila de desglose / ranking editorial (usadas por shortcodes del plugin) */ .cd-breakdown { width: 100%; border-collapse: collapse; } .cd-breakdown th { font-family: var(--cd-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--ink-soft); text-align: left; font-weight: 500; padding-bottom: .7rem; } .cd-breakdown td { font-family: var(--cd-mono); font-size: .82rem; padding: .55rem 0; border-top: 1px solid var(--wp--preset--color--line); color: var(--wp--preset--color--ink); } .cd-breakdown td:last-child { text-align: right; color: var(--wp--preset--color--sage-deep); } .cd-ranking { border-top: 1px solid var(--wp--preset--color--ink); margin: 0; padding: 0; list-style: none; } .cd-ranking__row { display: grid; grid-template-columns: 3.4rem 1fr auto; gap: 1.25rem; align-items: center; padding: 1.35rem .25rem; border-bottom: 1px solid var(--wp--preset--color--line); } .cd-ranking__rank { font-family: var(--cd-serif); font-size: 1.7rem; color: var(--wp--preset--color--ink-soft); } .cd-ranking__name { font-family: var(--cd-serif); font-weight: 600; font-size: clamp(1.2rem, 2.4vw, 1.5rem); line-height: 1.1; } .cd-ranking__name a { color: var(--wp--preset--color--ink); } .cd-ranking__meta { font-family: var(--cd-mono); font-size: .72rem; color: var(--wp--preset--color--ink-soft); margin-top: .2rem; } .cd-ranking__meta .medal { color: var(--wp--preset--color--sage-deep); } .cd-ranking__index { font-family: var(--cd-serif); font-weight: 700; font-size: clamp(1.6rem, 3vw, 2rem); color: var(--wp--preset--color--ink); font-feature-settings: "tnum"; } /* nav flotante (parte de cabecera) */ .cd-nav { position: sticky; top: 18px; z-index: 50; } .cd-nav__inner { background: rgba(250, 246, 236, .62); backdrop-filter: blur(16px) saturate(130%); -webkit-backdrop-filter: blur(16px) saturate(130%); border-radius: 999px; box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 10px 34px -16px rgba(52,49,45,.4); } /* reveal al hacer scroll (progressive enhancement; ver reveal.js) */ .has-reveal .cd-reveal { opacity: 0; transform: translateY(26px); filter: blur(5px); transition: opacity .9s var(--cd-ease-out), transform .9s var(--cd-ease-out), filter .9s var(--cd-ease-out); } .has-reveal .cd-reveal.is-in { opacity: 1; transform: none; filter: none; } @media (prefers-reduced-motion: reduce) { .cd-reveal { opacity: 1 !important; transform: none !important; filter: none !important; } .cd-gauge__fill { transition: none; } } /* ============================================================ Componentes de la librería de patrones (v0.2) ============================================================ */ /* bandas de sección tintadas (para grupos a ancho completo) */ .cd-band-sage { background: color-mix(in srgb, var(--wp--preset--color--sage) 46%, var(--wp--preset--color--base)); } .cd-band-blue { background: color-mix(in srgb, var(--wp--preset--color--blue) 42%, var(--wp--preset--color--base)); } .cd-band-cream { background: color-mix(in srgb, var(--wp--preset--color--cream) 60%, var(--wp--preset--color--base)); } /* estadística: figura + etiqueta */ .cd-stat__num { font-family: var(--cd-serif); font-weight: 700; font-size: clamp(2.6rem, 6vw, 4rem); line-height: 1; color: var(--wp--preset--color--ink); font-feature-settings: "tnum"; } .cd-stat__label { font-family: var(--cd-mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--wp--preset--color--ink-soft); margin-top: .5rem; } /* tarjeta de certamen */ .cd-comp { background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line); border-radius: 16px; padding: 1.4rem 1.5rem; height: 100%; } .cd-comp__name { font-family: var(--cd-serif); font-weight: 600; font-size: 1.2rem; line-height: 1.15; color: var(--wp--preset--color--ink); } .cd-comp__org { font-family: var(--cd-mono); font-size: .68rem; letter-spacing: .04em; color: var(--wp--preset--color--ink-soft); margin-top: .35rem; } .cd-comp__weight { display: inline-block; margin-top: 1rem; font-family: var(--cd-mono); font-size: .7rem; letter-spacing: .1em; color: var(--wp--preset--color--sage-deep); border: 1px solid color-mix(in srgb, var(--wp--preset--color--sage-deep) 40%, transparent); border-radius: 999px; padding: 3px 10px; } /* ticker / marquesina (CSS puro) */ .cd-ticker { overflow: hidden; border-block: 1px solid var(--wp--preset--color--line); padding: 1rem 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .cd-ticker__track { display: flex; gap: 2.5rem; width: max-content; animation: cd-marquee 40s linear infinite; } .cd-ticker__item { font-family: var(--cd-serif); font-style: italic; font-size: 1.15rem; color: var(--wp--preset--color--ink-soft); white-space: nowrap; display: inline-flex; align-items: center; gap: 2.5rem; } .cd-ticker__item::after { content: "·"; color: var(--wp--preset--color--sage-deep); font-style: normal; } @keyframes cd-marquee { to { transform: translateX(-50%); } } /* cuenta atrás */ .cd-countdown { display: flex; gap: clamp(1rem, 3vw, 2.4rem); align-items: flex-start; flex-wrap: wrap; } .cd-cd-unit { display: flex; flex-direction: column; align-items: center; min-width: 3.4rem; } .cd-cd-num { font-family: var(--cd-serif); font-weight: 700; font-size: clamp(2.4rem, 6vw, 3.6rem); line-height: 1; color: var(--wp--preset--color--ink); font-feature-settings: "tnum"; } .cd-cd-label { font-family: var(--cd-mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--wp--preset--color--ink-soft); margin-top: .5rem; } @media (prefers-reduced-motion: reduce) { .cd-ticker__track { animation: none; } } /* ===== barra de filtros facetados (/queso/) ===== */ .cd-filters { margin: 0 0 var(--wp--preset--spacing--40); padding: 1.4rem 1.5rem; background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line); border-radius: 18px; } .cd-filters__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1rem; } .cd-filters__count { font-family: var(--cd-mono); font-size: .8rem; color: var(--wp--preset--color--ink-soft); } .cd-filters__count strong { color: var(--wp--preset--color--ink); } .cd-filters__group { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .65rem 0; border-top: 1px solid var(--wp--preset--color--line); } .cd-filters__group:first-of-type { border-top: 0; } .cd-filters__label { font-family: var(--cd-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--ink-soft); min-width: 6.5rem; flex-shrink: 0; } .cd-filters__chips { display: flex; flex-wrap: wrap; gap: .45rem; } .cd-chip { position: relative; display: inline-flex; align-items: center; font-family: var(--cd-sans); font-size: .82rem; color: var(--wp--preset--color--ink); background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--line); border-radius: 999px; padding: .32rem .8rem; cursor: pointer; transition: background .2s, border-color .2s, color .2s; } .cd-chip:hover { border-color: color-mix(in srgb, var(--wp--preset--color--sage-deep) 50%, var(--wp--preset--color--line)); } .cd-chip input { position: absolute; opacity: 0; width: 0; height: 0; } .cd-chip:has(input:checked) { background: var(--wp--preset--color--sage-deep); color: var(--wp--preset--color--cream); border-color: transparent; } .cd-chip:focus-within { outline: 2px solid var(--wp--preset--color--sage-deep); outline-offset: 2px; } .cd-filters__actions { display: flex; gap: 1rem; align-items: center; margin-top: 1rem; } .cd-filters__apply { font-family: var(--cd-sans); font-weight: 600; font-size: .85rem; color: var(--wp--preset--color--cream); background: var(--wp--preset--color--ink); border: 0; border-radius: 999px; padding: .6rem 1.3rem; cursor: pointer; } .cd-filters__apply:hover { background: var(--wp--preset--color--sage-deep); } .cd-filters__clear { font-family: var(--cd-mono); font-size: .72rem; color: var(--wp--preset--color--ink-soft); text-decoration: underline; } .has-reveal .cd-filters.is-auto .cd-filters__apply { display: none; } @media (max-width: 600px) { .cd-filters__label { min-width: 100%; } } /* Vídeo dirigido por scroll (intro de la home) */ .cd-scrub{position:relative;height:280vh;background:var(--wp--preset--color--base)} .cd-scrub__sticky{position:sticky;top:0;height:100vh;display:grid;place-items:center;overflow:hidden;padding:92px 20px 64px} .cd-scrub__card{position:relative;width:min(74vw,calc(76vh*16/9),920px);aspect-ratio:16/9;overflow:hidden;background:var(--wp--preset--color--base);box-shadow:inset 0 0 56px 28px var(--wp--preset--color--base)} .cd-scrub__video{width:100%;height:100%;object-fit:cover;display:block} .cd-scrub__cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3} .cd-scrub__cue i{display:block;width:22px;height:35px;border:1.5px solid color-mix(in srgb,var(--wp--preset--color--ink-soft) 45%,transparent);border-radius:13px;position:relative} .cd-scrub__cue i::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:6px;border-radius:2px;background:var(--wp--preset--color--ink-soft);transform:translateX(-50%);animation:cdscrubdot 1.9s ease-in-out infinite} @keyframes cdscrubdot{0%{opacity:0;transform:translate(-50%,0)}25%{opacity:1}55%{opacity:1;transform:translate(-50%,12px)}100%{opacity:0;transform:translate(-50%,12px)}} @media(prefers-reduced-motion:reduce){.cd-scrub{height:auto}.cd-scrub__sticky{position:relative;height:auto;min-height:70vh}.cd-scrub__cue i::after{animation:none}} @media(max-width:781px){.cd-scrub{height:210vh}.cd-scrub__card{width:94vw}.cd-scrub__sticky{padding:84px 14px 50px}} /* Footer oscuro: los enlaces deben ser claros (los bloques de lista fijan el color en el