*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Mentre el splash és visible, amaga la barra d'scroll del navegador perquè la pantalla d'entrada quedi neta (la classe la posem inline al i la treiem al disparar splash:dismiss des de SharedSplash). */ /* No bloquegem l'overflow durant l'splash: el splash ja cobreix el viewport (position: fixed, inset: 0) i bloquejar overflow trenca el `scrollbar-gutter: stable` definit a base.css, fent que en sortir l'splash el contingut salti per l'aparició de la barra d'scroll. */ /* Brand colors (CatalanTouch — grana + groc senyera) */ :root { --primary: #9D1F2A; --primary-dark: #6F1620; --primary-soft: rgba(157, 31, 42, 0.10); --accent-yellow: #FFD400; } /* LANG PICK (1a visita amb navegador en llengua no suportada) */ .lang-pick-head { text-align: center; margin-bottom: 1.1rem; } .lang-pick-head h2 { margin: 0 0 .4rem; font-size: 1.4rem; color: var(--ink); } .lang-pick-head .multi-script { font-size: .9rem; color: var(--ink); opacity: .65; line-height: 1.7; direction: ltr; } .lang-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin: 1rem 0; } .lang-pick-grid button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px; border: 1px solid rgba(127,127,127,.3); border-radius: 10px; background: rgba(127,127,127,.06); color: var(--ink); cursor: pointer; transition: border-color .15s ease, background .15s ease; min-height: 64px; } .lang-pick-grid button:hover { border-color: var(--primary); background: var(--primary-soft); } .lang-pick-grid .lpg-native { font-size: 1.05rem; font-weight: 600; } .lang-pick-grid .lpg-code { font-size: .7rem; opacity: .6; letter-spacing: .06em; text-transform: uppercase; } .lang-pick-skip { display: block; margin: .5rem auto 0; background: none; border: 0; color: var(--ink); opacity: .7; font: inherit; font-size: .9rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .lang-pick-skip:hover { opacity: 1; color: var(--primary); } html, body { height: 100%; background: var(--bg); color: var(--ink); font-family: 'Inter', 'Inter Fallback', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } /* iOS Safari fa zoom automàtic en focus si l'input té font-size < 16px. Forcem 16px a tots els inputs/textarea/select a mòbil amb !important perquè cap regla específica posterior (com `.llista-search input`) pugui forçar-ne baixar — això mai serà desitjable a mòbil. */ @media screen and (max-width: 768px) { input, textarea, select { font-size: 16px !important; } } /* ─── BRAND (a la nav) ─────────────────────────────── */ .brand { display: inline-flex; align-items: baseline; gap: 0; font-weight: 800; font-size: 1.35rem; letter-spacing: -0.025em; cursor: pointer; } .brand .brand-name .em { color: var(--primary); font-weight: 300; } .brand-name { color: var(--ink); } @media (max-width: 560px) { .brand { font-size: 1.15rem; } } /* ─── SPLASH ───────────────────────────────────────── */ /* Sistema: la senyera neta (PNG amb transparència) viu dins un canvas quadrat de 80vmin centrat. Les paraules "Catalan" i "Touch" es posicionen absolute sobre les lletres "c" i "t" de la senyera amb percentatges, de manera que escalen amb la imatge. Una màscara radial difumina les vores estripades de la senyera per fondre-les amb el fons grana. */ #splash { position: fixed; inset: 0; z-index: 10001; background: radial-gradient(ellipse at center, #9d1f2a 0%, #6f1620 70%, #4a0e16 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; color: #fff; transition: opacity 1.6s cubic-bezier(0.4,0,0.2,1), visibility 1.6s; overflow: hidden; } #splash.out { opacity: 0; visibility: hidden; pointer-events: none; } #splash-canvas { position: relative; width: min(80vmin, 760px); height: min(80vmin, 760px); } #splash-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; /* Fade radial perquè les vores estripades de la senyera es fonguin amb el fons grana sense marc visible. */ -webkit-mask-image: radial-gradient(ellipse 50% 50% at center, black 78%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at center, black 78%, transparent 100%); } #splash-titles { position: absolute; inset: 0; pointer-events: none; } .splash-word { position: absolute; top: 67%; transform: translateX(-50%); font-family: 'Fraunces', 'Fraunces Fallback', Georgia, serif; font-weight: 600; font-variation-settings: "opsz" 144, "SOFT" 100; font-size: clamp(1.4rem, 5.5vmin, 4.6rem); line-height: 1; letter-spacing: -0.02em; color: #f8f3e8; text-shadow: 0 4px 14px rgba(0,0,0,0.55), 0 0 24px rgba(0,0,0,0.35); white-space: nowrap; } .splash-catalan { left: 41%; transform: translateX(calc(-50% - 7px)); } .splash-touch { left: 69%; } #splash-sub { position: absolute; bottom: 6%; left: 0; right: 0; text-align: center; font-family: 'Montserrat', 'Montserrat Fallback', system-ui, sans-serif; font-weight: 500; font-size: clamp(0.62rem, 1.5vmin, 0.92rem); letter-spacing: 0.10em; text-transform: uppercase; color: rgba(248, 243, 232, 0.85); text-shadow: 0 1px 8px rgba(0,0,0,0.5); padding: 0 2%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #splash-hint { position: absolute; bottom: 2.5rem; color: rgba(248, 243, 232, 0.7); font-family: 'Montserrat', 'Montserrat Fallback', system-ui, sans-serif; font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; text-shadow: 0 1px 6px rgba(0,0,0,0.25); } #splash-star { position: absolute; bottom: 1.4rem; right: 1.4rem; width: 28px; height: 28px; color: #f8f3e8; opacity: 0.85; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.2)); } /* ─── LLISTA ───────────────────────────────────────── */ .llista-view { max-width: 1080px; margin: 0 auto; padding: 1.4rem 1.25rem 4rem; } .llista-intro { padding: 0.4rem 0.2rem 1.4rem; border-bottom: 1px solid var(--border); margin-bottom: 1rem; } html.dark .llista-intro { border-bottom-color: rgba(255,255,255,0.08); } .llista-intro h1 { font-size: clamp(1.6rem, 3.5vw, 2.3rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; margin-bottom: 0.5rem; } .llista-intro h1 .title-accent { color: var(--primary); } .llista-intro p { font-size: 0.95rem; color: var(--ink-2); line-height: 1.6; max-width: 68ch; } .llista-intro p + p { margin-top: 0.6rem; } .lead-link { display: inline; padding: 2px 9px; margin: 0 1px; background: var(--primary-soft); color: var(--primary); border: 1px solid transparent; border-radius: 100px; font-size: inherit; font-family: inherit; font-weight: 600; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; white-space: nowrap; } .lead-link:hover { background: var(--primary); color: #fff; border-color: var(--primary-dark); } html.dark .lead-link { background: rgba(157,31,42,0.22); color: #f5a3aa; } html.dark .lead-link:hover { background: var(--primary); color: #fff; } /* (.hint-ajudam i .llista-intro-hint eliminats: la pista "Ajuda'm a triar" de la intro s'ha substituït per la targeta CTA.) */ /* 2-col layout desktop */ @media (min-width: 960px) { #llista { max-width: 1320px; padding: 20px 32px 16px; display: grid; grid-template-columns: minmax(360px, 440px) 1fr; column-gap: 40px; align-items: start; } #llista .llista-intro { align-self: stretch; padding: 0; border-bottom: none; margin-bottom: 0; } #llista .llista-intro-inner { position: sticky; top: calc(var(--nav-h) + 4px); padding: 0.2rem 0 1rem; background: var(--bg); } #llista .llista-intro h1 { font-size: 2rem; } #llista .llista-rightcol { grid-column: 2; } #llista > .llista-footer { grid-column: 1 / -1; margin-top: 1.5rem; } } /* ── Targetes d'acció (Ajuda'm + Endevina) abans de la ràdio ────── Sempre visibles. Apilades a mòbil; a desktop poden anar en columna quan la columna dreta és prou ampla, però mantenim apilades per simplicitat de lectura. */ .cta-cards { display: grid; grid-template-columns: 1fr; gap: 0.7rem; margin: 1.4rem 0 0.6rem; } @media (min-width: 720px) { .cta-cards { grid-template-columns: 1fr 1fr; gap: 0.9rem; } } /* ≥960 la columna intro és estreta → apilem les targetes (com Transitem). */ @media (min-width: 960px) { .cta-cards { grid-template-columns: 1fr; gap: 0.7rem; } } /* Mòbil: quan placeCtaCards mou les targetes sota el catàleg (Fets/Figures), les separem amb un filet superior perquè es llegeixin com una secció. */ .cta-cards--below { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--border); } html.dark .cta-cards--below { border-top-color: rgba(255,255,255,0.08); } .cta-card { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; padding: 1rem 1.1rem 0.95rem; background: var(--bg-elev, var(--bg-soft, rgba(0,0,0,0.02))); border: 1px solid var(--border); border-radius: 14px; text-align: left; font: inherit; color: var(--ink); cursor: pointer; transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s; } .cta-card:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,0.06); } html.dark .cta-card { background: rgba(255,255,255,0.04); } html.dark .cta-card:hover { box-shadow: 0 10px 24px rgba(0,0,0,0.35); } .cta-card-head { display: inline-flex; align-items: center; gap: 0.55rem; } .cta-card-ico { display: inline-flex; align-items: center; justify-content: center; color: var(--primary); } html.dark .cta-card-ico { color: #f5a3aa; } .cta-card-title { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); } .cta-card-body { font-size: 0.86rem; line-height: 1.5; color: var(--ink-2); } .cta-card-btn { display: inline-flex; align-items: center; padding: 0.4rem 0.95rem; margin-top: 0.2rem; background: var(--primary); color: #fff; border-radius: 100px; font-size: 0.86rem; font-weight: 600; transition: background 0.15s; } .cta-card:hover .cta-card-btn { background: var(--primary-dark); } html.dark .cta-card-btn { background: #f5a3aa; color: #2a0a0e; } /* Footer */ .llista-footer { margin-top: 2rem; padding-top: 1rem; padding-bottom: 0.5rem; border-top: 1px solid var(--border); font-size: 0.85rem; color: var(--ink-3); line-height: 1.5; } .llista-footer strong { color: var(--ink-2); font-weight: 600; } .llista-footer a { color: var(--primary); border-bottom: 1px solid rgba(157,31,42,0.4); } .llista-footer a:hover { border-bottom-color: var(--primary); } html.dark .llista-footer { border-top-color: rgba(255,255,255,0.08); } html.dark .llista-footer a { color: #f5a3aa; border-bottom-color: rgba(245,163,170,0.4); } .llista-footer .legal-links { margin-top: 0.6rem; font-size: 0.8rem; color: var(--ink-3); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .llista-footer .legal-links a { color: inherit; border-bottom: 0; } .llista-footer .legal-links a:hover { color: var(--ink); } .llista-footer .legal-links button { background: none; border: 0; padding: 0; font: inherit; color: var(--ink-3); cursor: pointer; } .llista-footer .legal-links button:hover { color: var(--ink); text-decoration: underline; } /* Segell discret de procedència — comú a tots els projectes XKNO. */ .llista-footer .footer-credits { margin-top: 0.6rem; font-size: 0.7rem; color: var(--ink-3); letter-spacing: 0.01em; text-align: center; opacity: 0.7; } /* Wrapper unificat dels badges (XKNO + NDF). Apilats a mòbil, en paral·lel a desktop. Patró comú a tots els projectes de l'aparador. */ .footer-badges { display: flex; flex-direction: column; gap: 12px; margin: 1rem 0; padding-bottom: 1rem; border-bottom: 1px dashed rgba(0,0,0,0.08); } html.dark .footer-badges { border-bottom-color: rgba(255,255,255,0.08); } @media (min-width: 768px) { .footer-badges { flex-direction: row; align-items: stretch; } .footer-badges > * { flex: 1 1 0; } } /* NDF seal */ .ndf-seal-badge { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--primary-soft); border: 1px solid rgba(157,31,42,0.28); border-radius: 10px; font: inherit; font-size: 0.8rem; line-height: 1.3; color: var(--ink-2); cursor: pointer; text-decoration: none; transition: background 0.15s, border-color 0.15s, transform 0.1s, box-shadow 0.15s; } .ndf-seal-badge img { display: block; width: 56px; height: 56px; flex: 0 0 56px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.08)); transition: transform 0.15s; } .ndf-seal-badge > span { display: flex; flex-direction: column; gap: 2px; text-align: left; } .ndf-seal-badge .ndf-line { color: inherit; opacity: 0.78; } .ndf-seal-badge strong { color: var(--primary); font-weight: 700; } .ndf-seal-badge:hover { background: rgba(157,31,42,0.18); border-color: rgba(157,31,42,0.45); box-shadow: 0 2px 6px rgba(157,31,42,0.12); } .ndf-seal-badge:hover img { transform: scale(1.06); } .ndf-seal-badge:active { transform: scale(0.985); } html.dark .ndf-seal-badge { background: rgba(157,31,42,0.22); border-color: rgba(245,163,170,0.22); color: rgba(255,255,255,0.78); } html.dark .ndf-seal-badge strong { color: #f5a3aa; } #overlay-ndf-seal:not(.open) { display: none !important; } #overlay-ndf-seal .modal { text-align: center; max-width: 520px; padding-top: 2.4rem; overscroll-behavior: contain; } .ndf-seal-modal-image { display: flex; justify-content: center; margin-bottom: 0.7rem; } .ndf-seal-modal-image img { width: 180px; height: auto; max-width: 50vw; filter: drop-shadow(0 6px 12px rgba(0,0,0,0.12)); } .ndf-seal-modal-eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--primary); margin: 0 0 0.3rem; } .ndf-seal-modal-title { font-size: 1.2rem; font-weight: 800; line-height: 1.25; color: var(--ink); margin: 0 0 0.8rem; padding: 0 0.5rem; } .ndf-seal-modal-body { font-size: 0.9rem; color: var(--ink-2); line-height: 1.55; max-width: 420px; margin: 0 auto 0.8rem; } .ndf-seal-modal-body strong { color: var(--ink); white-space: nowrap; } .ndf-seal-modal-cta { font-size: 0.85rem; color: var(--ink-3); margin: 0; } .ndf-seal-modal-cta a { color: var(--primary); font-weight: 600; } html.dark .ndf-seal-modal-title { color: #f5f5f5; } html.dark .ndf-seal-modal-body { color: rgba(255,255,255,0.78); } /* Modal-back arrow */ .btn-modal-back { position: absolute; top: 1rem; left: 1rem; width: 34px; height: 34px; border-radius: 10px; background: rgba(0,0,0,0.04); display: none; align-items: center; justify-content: center; color: var(--ink-2); border: 0; cursor: pointer; } .btn-modal-back.visible { display: inline-flex; } .btn-modal-back:hover { background: rgba(0,0,0,0.08); color: var(--ink); } html.dark .btn-modal-back { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.65); } /* Legal modals */ #overlay-legal h3, #overlay-privacy h3, #overlay-cookies h3 { font-size: 0.9rem; font-weight: 700; margin: 1.1rem 0 0.4rem; color: var(--ink); } #overlay-legal p, #overlay-privacy p, #overlay-cookies p { font-size: 0.92rem; color: var(--ink-2); line-height: 1.55; margin-bottom: 0.5rem; } #overlay-legal ol, #overlay-privacy ol, #overlay-legal ul, #overlay-privacy ul, #overlay-cookies ul { font-size: 0.92rem; color: var(--ink-2); line-height: 1.55; padding-left: 1.4rem; margin-bottom: 0.6rem; } #overlay-legal li, #overlay-privacy li, #overlay-cookies li { margin-bottom: 0.3rem; } #overlay-legal a, #overlay-privacy a, #overlay-cookies a { color: var(--primary); border-bottom: 1px solid rgba(157,31,42,0.4); } #overlay-legal h2, #overlay-privacy h2, #overlay-cookies h2 { padding-left: 2.6rem; } #overlay-legal .modal-head, #overlay-privacy .modal-head, #overlay-cookies .modal-head { position: sticky; top: -1.6rem; margin: -1.6rem -1.8rem 1rem; padding: 1rem 1.8rem 0.8rem; background: var(--bg); z-index: 5; border-bottom: 1px solid var(--border); } #overlay-legal .modal-head h2, #overlay-privacy .modal-head h2, #overlay-cookies .modal-head h2 { margin: 0; } /* Modal Sobre — alineament tipogràfic amb la resta de la web (com a Transitem) i capçalera sticky igual que la resta de modals. */ #overlay-sobre .modal { padding: 0 !important; } #overlay-sobre .modal-head { position: sticky; top: 0; z-index: 5; background: var(--bg); margin: 0; /* anul·la el margin: -1.6rem -1.8rem heretat del shared (modal té padding: 0) */ padding: 1rem 1.5rem 0.8rem; border-bottom: 1px solid var(--border); } #overlay-sobre .modal-head h2 { font-size: 1.2rem; margin: 0; } #overlay-sobre .sobre-cos { padding: 0 1.5rem; } .sobre-updated { margin: 0.6rem 1.5rem 0.8rem; padding: 0.45rem 0.7rem; background: var(--primary-soft); border: 1px solid rgba(157, 31, 42, 0.22); border-radius: 8px; font-size: 0.78rem; color: var(--ink-2); text-align: center; } .sobre-updated strong { color: var(--primary); } html.dark .sobre-updated { background: rgba(245, 163, 170, 0.10); border-color: rgba(245, 163, 170, 0.22); } html.dark .sobre-updated strong { color: #f5a3aa; } .sobre-cos p { font-size: 0.88rem; line-height: 1.5; color: var(--ink-2); margin-bottom: 0.55rem; } .sobre-cos p:last-child { margin-bottom: 0; } /* Dedicatòria (patró compartit amb Transitem / Denunciem) */ .sobre-dedicatoria { margin: 1.3rem 1.5rem 0.5rem; padding-top: 1rem; border-top: 1px solid var(--border); font-size: 0.82rem; font-style: italic; color: var(--ink-3); text-align: center; } .sobre-dedicatoria strong { font-style: normal; color: var(--primary); font-weight: 600; } html.dark .sobre-dedicatoria { border-top-color: rgba(255,255,255,0.08); } html.dark .sobre-dedicatoria strong { color: #f5a3aa; } .sobre-cos .collapsible-body p { font-size: 0.88rem; line-height: 1.5; color: var(--ink-2); } #overlay-sobre .modal-footer { margin: 0.6rem 1.5rem 1rem; } /* Mode fosc — perímetre + ombra subtil als modals perquè destaquin sobre el fons fosc (mateixa solució que Kefem: la finestra es fonia amb la backdrop). Tint grana lleu + halo, sense ser intrusiu. */ html.dark .overlay .modal { border: 1px solid rgba(245, 163, 170, 0.28); box-shadow: 0 0 0 1px rgba(245, 163, 170, 0.08), 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 60px rgba(157, 31, 42, 0.10); } /* Modal Configuració — capçalera sticky + tipografia consistent + evitar la doble línia (border-bottom de l'última .config-seccio just sobre el border-top del .modal-footer). */ #overlay-config .modal { padding: 0 !important; } #overlay-config .modal-head { position: sticky; top: 0; z-index: 5; background: var(--bg); margin: 0; /* anul·la el margin: -1.6rem -1.8rem heretat del shared (modal té padding: 0) */ padding: 1rem 1.5rem 0.8rem; border-bottom: 1px solid var(--border); } #overlay-config .modal-head h2 { font-size: 1.2rem; margin: 0; } #overlay-config .config-seccio { margin-left: 1.5rem; margin-right: 1.5rem; } #overlay-config .config-seccio:has(+ .modal-footer) { border-bottom: 0; padding-bottom: 0; } #overlay-config .modal-footer { margin: 0.6rem 1.5rem 1rem; } .llista-sec-title { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 0.7rem; } /* Tabs principals del catàleg: Fets / Figures Disseny d'amunt-avall: dos pills grans en una "segmented control" a tota amplada, per donar més pes als Fets que ara són per defecte. */ .catleg-tabs { display: flex; gap: 6px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 14px; padding: 5px; margin: 0 0 0.85rem; } .catleg-tab { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; padding: 0.55rem 0.9rem; font-size: 0.98rem; font-weight: 700; font-family: inherit; color: var(--ink-2); background: transparent; border: 0; border-radius: 10px; cursor: pointer; transition: background 0.16s, color 0.16s; } .catleg-tab:hover { color: var(--ink); } .catleg-tab[aria-selected="true"] { background: var(--primary); color: #fff; } .catleg-tab[aria-selected="true"] .catleg-tab-star { color: var(--accent-yellow, #f1b500); } .catleg-tab-star { font-size: 1.05rem; line-height: 1; color: var(--primary); filter: drop-shadow(0 0 2px rgba(157,31,42,0.4)); } .catleg-tab-count { display: inline-flex; align-items: center; justify-content: center; /* min-width dimensionat per al recompte REAL (3 dígits) per evitar el layout shift quan app.js omple els comptadors (0.011 CLS mesurat 2026-06-11): el pill passava de "0" a "493" i desplaçava les etiquetes de les pestanyes. */ min-width: 2.75em; padding: 0.1rem 0.5rem; font-size: 0.78rem; font-weight: 700; color: var(--ink-3); background: var(--bg); border: 1px solid var(--border); border-radius: 100px; line-height: 1.2; } /* El pill de figures és més ample ple ("493" ≈ 3.4em amb padding): reservar-ho de bon principi evita el shift en omplir-se. */ #llista-count-pill { min-width: 3.4em; } .catleg-tab[aria-selected="true"] .catleg-tab-count { background: rgba(255,255,255,0.2); color: #fff; border-color: transparent; } html.dark .catleg-tab[aria-selected="true"] { background: #f5a3aa; color: #2a0a0e; } html.dark .catleg-tab[aria-selected="true"] .catleg-tab-count { background: rgba(0,0,0,0.18); color: #2a0a0e; } /* Visibilitat dels panells per tab */ .tab-pane[hidden] { display: none !important; } .tab-pane[data-tab="fets"] .fets-modal-lead { margin: 0 0 0.9rem; } /* Abast tabs (Internacional / Local) — patró Kefem */ .abast-tabs { display: inline-flex; border: 1px solid var(--border); border-radius: 100px; padding: 3px; gap: 3px; margin: 0 0 0.8rem; background: var(--bg-soft); } .abast-tab { padding: 5px 14px; border-radius: 100px; font-size: 0.82rem; font-weight: 600; color: var(--ink-2); background: transparent; cursor: pointer; transition: background 0.15s, color 0.15s; white-space: nowrap; } .abast-tab:hover { color: var(--ink); } .abast-tab.active { background: var(--primary); color: #fff; box-shadow: 0 1px 3px rgba(157,31,42,0.25); } html.dark .abast-tab.active { background: var(--primary); color: #fff; } /* Lead contextual sota els tabs Fets/Figures (text canviant via JS) */ .tab-lead { font-size: 0.92rem; line-height: 1.55; color: var(--ink-2); margin: 0 0 0.85rem; } .llista-search { position: relative; margin: 0 0 1rem; } .llista-search input { width: 100%; padding: 9px 38px 9px 40px; border: 1px solid var(--border); border-radius: 100px; font-size: 0.92rem; color: var(--ink); background: var(--bg); } .llista-search input:focus { outline: none; border-color: var(--primary); } .llista-search input:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* .llista-search-ico: aspecte definit a shared/css/search.css (norma Nexe). */ .llista-search-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--bg-soft); color: var(--ink-3); border: 0; cursor: pointer; transition: background 0.15s, color 0.15s; } .llista-search-clear:hover { background: var(--border); color: var(--ink); } html.dark .llista-search-clear { background: rgba(255,255,255,0.08); } html.dark .llista-search-clear:hover { background: rgba(255,255,255,0.16); color: #fff; } .llista-count-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 100px; background: var(--bg-soft); color: var(--ink-2); font-size: 0.78rem; font-weight: 700; transition: background 0.15s, color 0.15s, padding 0.15s; } .llista-count-pill.has-filters { background: var(--primary); color: #fff; padding: 3px 4px 3px 11px; } .llista-count-clear { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 2px; border-radius: 50%; background: rgba(255,255,255,0.22); color: #fff; border: 0; padding: 0; cursor: pointer; transition: background 0.15s, transform 0.1s; } .llista-count-clear:hover { background: rgba(255,255,255,0.42); } .llista-count-clear:active { transform: scale(0.92); } .llista-active-filters { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 1rem; } .filter-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 100px; font-size: 0.75rem; color: var(--ink-2); } .filter-chip button { color: var(--ink-3); font-size: 1rem; line-height: 1; padding: 0 0 0 4px; } .filter-chip button:hover { color: var(--ink); } /* Botó "Fets i rècords destacats" al títol Figures */ .fets-cta { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 6px 12px 6px 10px; border: 1px solid var(--primary); border-radius: 100px; background: linear-gradient(135deg, var(--primary-soft), rgba(255,212,0,0.18)); color: var(--primary); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; cursor: pointer; transition: transform 0.15s, box-shadow 0.2s, background 0.2s; animation: fetsPulse 3.2s ease-in-out infinite; white-space: nowrap; } .fets-cta:hover { background: var(--primary); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(157,31,42,0.35); animation: none; } .fets-cta:active { transform: scale(0.98); } .fets-cta-star { font-size: 0.95rem; line-height: 1; color: var(--accent-yellow); filter: drop-shadow(0 0 2px rgba(157,31,42,0.4)); } .fets-cta-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 100px; background: var(--primary); color: #fff; font-size: 0.72rem; font-weight: 800; margin-left: 4px; } .fets-cta:hover .fets-cta-count { background: var(--accent-yellow); color: var(--primary-dark); } html.dark .fets-cta { background: linear-gradient(135deg, rgba(157,31,42,0.28), rgba(255,212,0,0.12)); color: #f5a3aa; border-color: #f5a3aa; } @keyframes fetsPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(157,31,42,0.55); } 50% { box-shadow: 0 0 0 6px rgba(157,31,42,0); } } /* Versió curta de la label (mòbil) i estrella al nav-btn de la topbar */ .fets-cta-label-short { display: none; } @media (max-width: 560px) { .fets-cta-label-long { display: none; } .fets-cta-label-short { display: inline; } } /* Estrella del nav-btn Fets — mateix to que l'estrella inline del lead text */ .nav-icon-star { display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; line-height: 1; color: var(--primary); filter: drop-shadow(0 0 2px rgba(157,31,42,0.4)); } html.dark .nav-icon-star { color: #f5a3aa; } @media (prefers-reduced-motion: reduce) { .fets-cta { animation: none; } } /* Modal "Fets i rècords destacats" */ #fets-modal { width: min(680px, 94vw); max-height: 92vh; overflow-y: auto; } #fets-modal .modal-head h2 { display: inline-flex; align-items: center; gap: 8px; } .fets-modal-star { color: var(--accent-yellow); filter: drop-shadow(0 0 2px rgba(157,31,42,0.4)); } .fets-modal-lead { color: var(--ink-2); font-size: 0.92rem; line-height: 1.5; margin: 0.4rem 0 1.2rem; } .fets-list { display: flex; flex-direction: column; gap: 8px; } .fets-epoca { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--bg); } .fets-epoca > summary { list-style: none; cursor: pointer; padding: 11px 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: linear-gradient(135deg, var(--primary-soft), rgba(255,212,0,0.10)); transition: background 0.15s; } .fets-epoca > summary::-webkit-details-marker { display: none; } .fets-epoca > summary:hover { background: linear-gradient(135deg, rgba(157,31,42,0.18), rgba(255,212,0,0.18)); } .fets-epoca[open] > summary { border-bottom: 1px solid var(--border); } /* ─── Capçalera amb imatge ambient ───────────────────────── Quan una època té cover, el

es transforma en una hero amb la imatge ocupant tot l'espai i una franja inferior fosca que sustenta el títol + comptador (sempre visible amb la secció plegada o oberta). */ .fets-epoca.has-cover > summary { position: relative; padding: 0; height: auto; min-height: 0; background: transparent; border: 0; overflow: hidden; } .fets-epoca.has-cover[open] > summary { border-bottom: 1px solid var(--border); } .fets-epoca.has-cover > summary:hover { background: transparent; } .fets-epoca-cover { display: block; width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; object-position: center; background: var(--bg-elev); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .fets-epoca.has-cover > summary:hover .fets-epoca-cover { transform: scale(1.02); } .fets-epoca-overlay { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.9rem 1rem 0.85rem; background: linear-gradient( to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.55) 50%, rgba(0, 0, 0, 0) 100% ); color: #fff; pointer-events: none; } .fets-epoca.has-cover .fets-epoca-label { color: #fff; font-size: 1.05rem; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45); letter-spacing: -0.005em; } .fets-epoca.has-cover .fets-epoca-count { color: #fff; background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.22); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } html.dark .fets-epoca.has-cover .fets-epoca-label { color: #fff; } .fets-epoca-label { font-weight: 700; font-size: 0.95rem; color: var(--primary); } html.dark .fets-epoca-label { color: #f5a3aa; } .fets-epoca-count { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 22px; padding: 0 8px; border-radius: 100px; background: var(--primary); color: #fff; font-size: 0.78rem; font-weight: 700; } .fets-epoca .recurs-item { margin: 0; border: 0; border-radius: 0; border-bottom: 1px solid var(--border); } .fets-epoca .recurs-item:last-child { border-bottom: 0; } html.dark .fets-epoca { border-color: rgba(255,255,255,0.08); } html.dark .fets-epoca > summary { background: linear-gradient(135deg, rgba(157,31,42,0.22), rgba(255,212,0,0.08)); } /* Cards de figura */ .recurs-item { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; margin: 4px 0; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; transition: border-color 0.15s, background 0.15s; } .recurs-item:hover { border-color: var(--primary); background: var(--bg-soft); } .recurs-item-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .recurs-item-name { font-weight: 700; font-size: 0.96rem; color: var(--ink); } .recurs-item-prov { font-size: 0.78rem; color: var(--ink-3); } .recurs-item-desc { color: var(--ink-2); font-size: 0.86rem; line-height: 1.4; } .recurs-item-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 4px; } .recurs-item-tag { font-size: 0.7rem; padding: 2px 8px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 100px; color: var(--ink-3); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .recurs-item-tag.destacat { color: var(--primary); border-color: var(--primary); background: var(--primary-soft); } .overlay .modal h2 { padding-right: 2.2rem; } /* Wizard */ #overlay-ajudam .modal { max-height: 94vh; overflow-y: auto; } @media (min-width: 960px) { #ajudam-modal { width: min(1120px, 94vw) !important; } } #overlay-ajudam .modal h2 { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; } .ajudam-count { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 30px; padding: 0 12px; background: var(--ink); color: var(--bg); border-radius: 100px; font-size: 0.88rem; font-weight: 700; } html.dark .ajudam-count { background: #fff; color: #0a0a0a; } .ajudam-lead-wrap { margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); } .ajudam-lead { color: var(--ink-2); font-size: 0.95rem; line-height: 1.5; } .ajudam-zero-warn { display: none; color: var(--primary); font-size: 0.86rem; margin-top: 6px; } .ajudam-zero-warn.show { display: block; } .ajudam-grup { margin: 1.4rem 0; } .ajudam-q { font-size: 1.05rem; font-weight: 700; color: var(--primary); margin-bottom: 0.7rem; display: flex; align-items: center; gap: 8px; } html.dark .ajudam-q { color: #f5a3aa; } .ajudam-opts { display: flex; flex-wrap: wrap; gap: 8px; } .ajudam-opt { padding: 7px 16px; border: 1px solid var(--border); border-radius: 100px; background: var(--bg); font-size: 0.9rem; color: var(--ink-2); cursor: pointer; transition: all 0.15s; } .ajudam-opt:hover { border-color: var(--primary); color: var(--ink); } .ajudam-opt.active { background: var(--primary); color: #fff; border-color: var(--primary-dark); font-weight: 600; } /* Botons del wizard Ajuda'm: compactes i alineats a la dreta. Abans `space-between` els repartia per tota l'amplada del modal i quedaven gegants sense raó. Patró comparteix amb Understanding Catalan (commit 97348d4). */ .ajudam-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 1.2rem; } .ajudam-btn { padding: 6px 14px; border-radius: 100px; border: 1px solid var(--border); background: var(--bg); color: var(--ink-2); font-size: 0.82rem; font-weight: 600; } .ajudam-btn.primary { background: var(--primary); color: #fff; border-color: var(--primary-dark); } .ajudam-btn:hover { border-color: var(--primary); } /* Config modal */ .config-seccio { margin: 1rem 0; padding-bottom: 0.8rem; border-bottom: 1px solid var(--border); } .config-seccio:last-child { border-bottom: 0; } .config-titol { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.6rem; } .config-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .config-row + .config-row { margin-top: 0.7rem; } .config-row-label { flex: 1; font-size: 0.92rem; color: var(--ink); } .config-hint { display: block; color: var(--ink-3); font-size: 0.78rem; margin-top: 2px; } .config-btn { padding: 6px 14px; border: 1px solid var(--border); border-radius: 100px; font-size: 0.82rem; font-weight: 600; color: var(--ink-2); background: var(--bg); } .config-btn:hover { border-color: var(--primary); color: var(--ink); } .config-btn.primary { background: var(--primary); color: #fff; border-color: var(--primary-dark); } .toggle { width: 42px; height: 24px; border-radius: 100px; background: var(--border); position: relative; transition: background 0.2s; } .toggle::before { content: ''; position: absolute; left: 2px; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.2); transition: left 0.2s; } .toggle.on { background: var(--primary); } .toggle.on::before { left: 20px; } /* Dropdown del selector de llengua (Configuració) — mateix patró que Understanding Catalan: nom natiu + codi en majúscules */ .lang-list { width: 100%; } .lang-select { width: 100%; max-width: 360px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--ink); font: inherit; font-size: 0.95rem; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 32px; } .lang-select:focus { outline: 2px solid var(--primary); outline-offset: 1px; } .lang-select option { font-size: 0.95rem; } /* Tira "Disponible en…" al peu — mostra tots els noms natius */ .langs-strip { font-size: 0.85rem; line-height: 1.9; color: var(--ink-2); text-align: center; word-spacing: 0.05em; } .langs-strip .langs-strip-label { display: block; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); opacity: 0.7; margin-bottom: 0.25rem; } .langs-strip-item { background: none; border: 0; padding: 0 2px; font: inherit; color: var(--ink); cursor: pointer; border-radius: 3px; } .langs-strip-item:hover { color: var(--primary-dark); } .langs-strip-sep { opacity: 0.45; } .footer-langs { margin: 1rem 0 0.5rem; padding: 0.8rem 0.5rem; border-top: 1px dashed var(--border); border-bottom: 1px dashed var(--border); } /* Fitxa modal — capçalera sticky */ #fitxa-modal { width: min(640px, 94vw); max-height: 92vh; overflow-y: auto; padding: 0 !important; /* el padding va dins .fitxa-head i .fitxa-body */ } .fitxa-head { position: sticky; top: 0; z-index: 5; background: var(--bg); padding: 1.4rem 1.6rem 0.8rem; border-bottom: 1px solid var(--border); } .fitxa-head .modal-close { position: absolute; top: 0.9rem; right: 0.9rem; } .fitxa-head .btn-modal-back { position: absolute; top: 0.9rem; left: 0.9rem; } .fitxa-head .btn-fitxa-next { position: absolute; top: 0.9rem; right: 3rem; display: inline-flex; align-items: center; gap: 4px; padding: 5px 11px 5px 12px; background: var(--primary); color: #fff; border: 0; border-radius: 100px; font-size: 0.78rem; font-weight: 700; cursor: pointer; transition: background 0.15s, transform 0.1s; } .fitxa-head .btn-fitxa-next:hover { background: var(--primary-dark); } .fitxa-head .btn-fitxa-next:active { transform: scale(0.96); } .fitxa-head h2 { padding-right: 2.2rem; margin: 0; } .fitxa-head.has-back h2 { padding-left: 2.6rem; padding-right: 2.6rem; } .fitxa-head.has-next h2 { padding-right: 7rem; } .fitxa-head.has-back.has-next h2 { padding-left: 2.6rem; padding-right: 7rem; } .fitxa-body { padding: 0.5rem 1.6rem 1.6rem; } html.dark .fitxa-head { background: var(--bg); border-bottom-color: rgba(255,255,255,0.08); } .fitxa-tagline { font-style: italic; color: var(--primary); font-size: 1rem; margin: 0.4rem 0 0.7rem; font-weight: 500; } html.dark .fitxa-tagline { color: #f5a3aa; } .fitxa-meta { display: flex; flex-wrap: wrap; gap: 5px; margin: 0.4rem 0 0.8rem; } .fitxa-lloc { font-size: 0.85rem; color: var(--ink-2); margin-bottom: 0.6rem; } .fitxa-h3 { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary); margin: 1.2rem 0 0.4rem; } html.dark .fitxa-h3 { color: #f5a3aa; } .fitxa-p { color: var(--ink-2); line-height: 1.55; font-size: 0.94rem; margin: 0 0 0.6rem; } .fitxa-p:last-child { margin-bottom: 0; } .fitxa-list { color: var(--ink-2); line-height: 1.55; font-size: 0.94rem; margin: 0.4rem 0 0.8rem; padding-left: 1.3rem; } .fitxa-list li { margin-bottom: 0.4rem; } .fitxa-list li::marker { color: var(--primary); } .fitxa-list strong { color: var(--ink); font-weight: 700; } .fitxa-fonts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 0.5rem; } .fitxa-link { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid var(--primary-dark); border-radius: 100px; background: var(--primary); color: #fff; font-weight: 600; font-size: 0.85rem; } .fitxa-link:hover { background: var(--primary-dark); } .fitxa-link-secondary { background: transparent; color: var(--primary); border-color: var(--primary); } .fitxa-link-secondary:hover { background: var(--primary-soft); color: var(--primary-dark); } html.dark .fitxa-link-secondary { color: #f5a3aa; border-color: #f5a3aa; } /* Mapa dels Països Catalans (modal explicatiu, sense interaccions) */ #mapa-modal { width: min(1100px, 96vw); max-height: 94vh; overflow-y: auto; padding: 0 !important; } #mapa-modal .modal-head { padding: 1rem 1.4rem; margin: 0; position: sticky; top: 0; background: var(--bg); z-index: 5; border-bottom: 1px solid var(--border); } /* margin: 0 anul·la l'heretat del shared (modal padding: 0) */ .mapa-stage { position: relative; width: 100%; aspect-ratio: 16 / 10; background: linear-gradient(135deg, #d6e9f1 0%, #b8d4e3 60%, #94bfd4 100%); } html.dark .mapa-stage { background: linear-gradient(135deg, #1f2a35 0%, #16222e 60%, #0e1a26 100%); } .mapa-svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; } .mapa-overlay { position: absolute; inset: 0; pointer-events: none; } /* Escut del Comte de Barcelona a dalt-dreta */ .mapa-shield { position: absolute; top: 3%; right: 3%; display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; } .mapa-shield svg { width: clamp(48px, 6vw, 78px); height: auto; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25)); } .mapa-shield-label { font-family: 'Fraunces', 'Fraunces Fallback', Georgia, serif; font-weight: 600; font-size: clamp(0.62rem, 1vw, 0.82rem); color: var(--primary-dark); text-shadow: 0 1px 0 rgba(255,255,255,0.7); white-space: nowrap; } html.dark .mapa-shield-label { color: #f5a3aa; text-shadow: 0 1px 0 rgba(0,0,0,0.7); } /* Narració històrica al mar Mediterrani (sota L'Alguer/Sardenya, ampla) */ /* .mapa-body: ancoratge per al posicionament absolut de la narració en pantalles amples (vegeu mediaquery més avall). */ .mapa-body { position: relative; } /* Default — pantalla estreta (mòbil, sobretot vertical): la narració es mostra com a caixa pròpia sota el mapa. */ .mapa-narracio { margin: 0.9rem 1rem 1.2rem; padding: 0.85rem 1.05rem; background: rgba(248, 243, 232, 0.95); border: 1px solid rgba(157, 31, 42, 0.22); border-radius: 10px; font-size: 0.86rem; line-height: 1.5; color: #2a1410; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06); } /* Pantalla ampla (≥720px, normalment landscape o desktop): la narració torna a flotar sobre el mapa, sobre el mar. */ @media (min-width: 720px) { .mapa-narracio { position: absolute; bottom: 3%; right: 3%; max-width: 40%; max-height: 42%; overflow-y: auto; margin: 0; padding: 0.7rem 0.9rem; background: rgba(248, 243, 232, 0.90); backdrop-filter: blur(3px); font-size: 0.74rem; line-height: 1.45; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); } } .mapa-narracio p { margin: 0 0 0.6rem; } .mapa-narracio p:last-child { margin-bottom: 0; } .mapa-narracio strong { color: var(--primary); } .mapa-narracio em { font-style: italic; color: var(--primary-dark); } html.dark .mapa-narracio { background: rgba(20, 20, 24, 0.85); color: rgba(248,243,232,0.92); border-color: rgba(245,163,170,0.22); } html.dark .mapa-narracio strong { color: #f5a3aa; } html.dark .mapa-narracio em { color: #ffd84d; } /* Etiquetes geogràfiques sobre el territori */ .mapa-region { position: absolute; font-family: 'Fraunces', 'Fraunces Fallback', Georgia, serif; font-weight: 700; font-size: clamp(0.78rem, 1.4vw, 1.15rem); letter-spacing: 0.04em; color: var(--primary-dark); text-shadow: 0 0 4px #fff, 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff; pointer-events: none; transform: translate(-50%, -50%); } html.dark .mapa-region { color: #ffd84d; text-shadow: 0 0 4px #000, 0 1px 0 #000, 0 -1px 0 #000, 1px 0 0 #000, -1px 0 0 #000; } /* Posicions sobre cada territori (centrades dins el cos de la massa de terra, no al mar). El SVG és viewBox 1600x1000, object-fit:contain. */ .mapa-region-cat { top: 28%; left: 23%; } .mapa-region-val { top: 65%; left: 19%; } .mapa-region-bal { top: 53%; left: 36%; } /* L'Alguer (Sardenya, costa NW). L'etiqueta queda a l'oest del punt geogràfic — sobre el mar entre Balears i Sardenya — perquè no tapi la silueta de l'illa. */ .mapa-region-alg { top: 42%; left: 73%; } @media (max-width: 720px) { /* La narració ja no s'ha de superposar al mapa a estretes (la passem a caixa sota el mapa als estils per defecte). */ .mapa-shield-label { display: none; } .mapa-region { font-size: 0.7rem; } } /* Endevina (quiz) modal */ #endevina-modal { max-height: 92vh; overflow-y: auto; } .endevina-lang-notice { margin: 0 0 0.6rem; padding: 0.4rem 0.6rem; background: var(--primary-soft); border: 1px solid rgba(157, 31, 42, 0.22); border-radius: 6px; font-size: 0.78rem; color: var(--ink-2); text-align: center; } html.dark .endevina-lang-notice { background: rgba(245, 163, 170, 0.10); border-color: rgba(245, 163, 170, 0.22); } .endevina-body { padding: 0.4rem 0.2rem; } .endevina-eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--primary); margin: 0 0 0.4rem; } html.dark .endevina-eyebrow { color: #f5a3aa; } .endevina-q { font-family: 'Fraunces', 'Fraunces Fallback', Georgia, serif; font-weight: 500; font-size: clamp(1.1rem, 2.6vw, 1.45rem); line-height: 1.35; color: var(--ink); margin: 0 0 1.2rem; } .endevina-resposta { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--border); animation: endevinaIn 0.35s ease-out; } @keyframes endevinaIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .endevina-nom { font-size: 1.4rem; font-weight: 800; color: var(--primary); margin: 0 0 0.3rem; } html.dark .endevina-nom { color: #f5a3aa; } .endevina-tag { font-style: italic; color: var(--ink-2); font-size: 0.95rem; margin: 0 0 1rem; } .endevina-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 0.4rem; } #btn-endevina .nav-icon { color: var(--primary); } html.dark #btn-endevina .nav-icon { color: #f5a3aa; } @media (max-width: 560px) { #btn-ajudam .nav-label, #btn-endevina .nav-label, #btn-fets-top .nav-label { display: none; } } /* Mòbil: dins dels inline-buttons del lead, fer servir la versió curta del label i ensenyar la icona inline de l'Endevina perquè connecti amb el botó de la barra superior. */ .lead-link .label-short { display: none; } .lead-link-icon { width: 0.95em; height: 0.95em; vertical-align: -0.12em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } @media (max-width: 560px) { .lead-link .label-long { display: none; } .lead-link .label-short { display: inline; } } /* Enllaços inline a Wikipedia dins descripcions */ .fitxa-p .inline-wiki { color: var(--primary); border-bottom: 1px dotted var(--primary); transition: color 0.15s, border-color 0.15s; } .fitxa-p .inline-wiki:hover { color: var(--primary-dark); border-bottom-style: solid; } html.dark .fitxa-p .inline-wiki { color: #f5a3aa; border-bottom-color: #f5a3aa; } /* XKNO cross-link — Xara projects ecosystem badge */ .xkno-link { display: flex; align-items: center; gap: 14px; padding: 14px 16px 14px 26px; border: 1px solid rgba(0,0,0,0.08); border-radius: 10px; background: rgba(0,0,0,0.02); text-decoration: none; color: inherit; transition: border-color .15s, background .15s; } html.dark .xkno-link { border-color: rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); } .xkno-link:hover { border-color: rgba(157,31,42,0.4); background: rgba(157,31,42,0.06); } html.dark .xkno-link:hover { background: rgba(157,31,42,0.18); } .xkno-link picture { display: contents; } .xkno-link img { width: 56px; height: 56px; flex: 0 0 56px; border-radius: 12px; object-fit: contain; } .xkno-link > span { display: flex; flex-direction: column; gap: 2px; font-size: 0.8rem; line-height: 1.3; } .xkno-link strong { color: var(--primary, #9D1F2A); font-weight: 700; } @media (max-width: 600px) { .xkno-link img { width: 48px; height: 48px; flex: 0 0 48px; transform: translateX(-16px) scale(0.88); transform-origin: center; } } /* ─── Promoció creuada amb logos (portfolio XKNO català) ────────────── Patró portat de CatalanTime. Discreta, dalt del peu, llistant els altres dos projectes del trio Catalan Time / Understanding Catalan / CatalanTouch. Cards horitzontals amb icona + títol + descripció. */ .cross-promo { max-width: 720px; margin: 0 auto 22px; padding: 0 16px 20px; border-bottom: 1px solid var(--border, rgba(0,0,0,0.08)); } .cp-intro { text-align: center; font-size: 0.92rem; color: var(--ink-3, var(--ink-2, #555)); margin: 0 auto 14px; max-width: 58ch; } .cp-cards { display: flex; flex-direction: column; gap: 10px; } @media (min-width: 560px) { .cp-cards { flex-direction: row; } .cp-cards > * { flex: 1 1 0; } } .cp-card { display: flex; align-items: center; gap: 13px; padding: 12px 14px; text-decoration: none; border: 1px solid var(--border, rgba(0,0,0,0.08)); border-radius: 14px; background: var(--card, #fff); transition: border-color 0.15s, transform 0.08s, background 0.15s; } .cp-card:hover { border-color: var(--brand, #d4a017); transform: translateY(-1px); text-decoration: none; } .cp-card img { width: 46px; height: 46px; border-radius: 11px; flex: 0 0 46px; object-fit: cover; } .cp-card .cp-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .cp-card .cp-txt strong { color: var(--ink, #1a1a1a); font-size: 0.98rem; } .cp-card .cp-desc { color: var(--ink-3, var(--ink-2, #555)); font-size: 0.84rem; line-height: 1.35; } /* Dark mode — sense això el text clar queda invisible sobre el fons blanc * que cau del fallback de var(--card, #fff). Patró igual que .ndf-seal-badge. */ html.dark .cross-promo { border-bottom-color: rgba(255,255,255,0.08); } html.dark .cp-intro { color: rgba(255,255,255,0.65); } html.dark .cp-card { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.08); } html.dark .cp-card:hover { background: rgba(255,255,255,0.08); border-color: rgba(245,163,170,0.4); } html.dark .cp-card .cp-txt strong { color: #f5f5f5; } html.dark .cp-card .cp-desc { color: rgba(255,255,255,0.65); }