/* ========================================================================= Noticias24Colombia — hoja de estilos principal ========================================================================= */ /* ------------------------------------------------------------------------- Temas El tema oscuro es el de partida. El claro se aplica de dos maneras: · -> eleccion explicita del lector · sin eleccion + el sistema operativo en modo claro Solo cambian los colores: la tipografia y las medidas son las mismas. ------------------------------------------------------------------------- */ :root { /* Colores base — tema oscuro */ --bg: #0b0d12; --bg-soft: #12151d; --bg-card: #171b24; --line: #262b37; --line-soft: #1e222c; --text: #f2f4f8; --text-soft: #aeb6c6; --text-dim: #7c8497; /* Acentos (bandera de Colombia, en tono sobrio) */ --amarillo: #ffcf33; --azul: #1f4fd8; --rojo: #e0243a; --accent: var(--amarillo); --accent-ink: #1a1400; --radius: 14px; --radius-lg: 24px; --header-h: 64px; --shadow: 0 12px 32px rgba(0, 0, 0, .45); --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-title: "Georgia", "Times New Roman", serif; /* Colores de apoyo que cambian con el tema */ --scrim-top: rgba(8, 10, 14, .9); --scrim-mid: rgba(8, 10, 14, .55); --header-bg: rgba(11, 13, 18, .92); --glass: rgba(255, 255, 255, .07); --glass-strong: rgba(255, 255, 255, .13); --glass-line: rgba(255, 255, 255, .16); --chip-ink: #1a1400; --link: var(--amarillo); } /* ------------------------------ Tema claro ------------------------------ */ :root[data-theme="light"] { --bg: #f6f7fa; --bg-soft: #ffffff; --bg-card: #eef1f6; --line: #d9dee8; --line-soft: #e6eaf1; --text: #14181f; --text-soft: #4a5262; --text-dim: #6b7488; /* El azul y el rojo se oscurecen un poco para que contrasten sobre blanco */ --amarillo: #ffcf33; --azul: #1a41b0; --rojo: #c31229; --accent-ink: #1a1400; --link: #9a6b00; --shadow: 0 10px 28px rgba(20, 24, 31, .12); --header-bg: rgba(255, 255, 255, .94); --glass: rgba(20, 24, 31, .05); --glass-strong: rgba(20, 24, 31, .1); --glass-line: rgba(20, 24, 31, .14); } /* Sin eleccion guardada, se sigue la preferencia del sistema. */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg: #f6f7fa; --bg-soft: #ffffff; --bg-card: #eef1f6; --line: #d9dee8; --line-soft: #e6eaf1; --text: #14181f; --text-soft: #4a5262; --text-dim: #6b7488; --azul: #1a41b0; --rojo: #c31229; --link: #9a6b00; --shadow: 0 10px 28px rgba(20, 24, 31, .12); --header-bg: rgba(255, 255, 255, .94); --glass: rgba(20, 24, 31, .05); --glass-strong: rgba(20, 24, 31, .1); --glass-line: rgba(20, 24, 31, .14); } } /* La barra del navegador acompana al tema. */ :root[data-theme="light"] .card__scrim, :root:not([data-theme="dark"]) .card__scrim { /* el velo de las fotos no cambia */ } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.6; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } a:hover { text-decoration: underline; } svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } :focus-visible { outline: 3px solid var(--amarillo); outline-offset: 2px; border-radius: 4px; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: fixed; top: -60px; left: 12px; z-index: 200; background: var(--amarillo); color: #000; padding: 10px 16px; border-radius: 0 0 10px 10px; font-weight: 600; transition: top .2s; } .skip-link:focus { top: 0; } /* ------------------------------ Botones ---------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border: 1px solid transparent; border-radius: 999px; font: inherit; font-weight: 600; font-size: .93rem; cursor: pointer; text-decoration: none; transition: transform .12s ease, background .15s ease, border-color .15s ease; } .btn:hover { text-decoration: none; transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn--primary { background: var(--amarillo); color: var(--accent-ink); } .btn--primary:hover { background: #ffd94f; } .btn--ghost { background: var(--glass); border-color: var(--glass-line); color: var(--text); backdrop-filter: blur(6px); } .btn--ghost:hover { background: var(--glass-strong); } .btn--save { background: var(--azul); color: #fff; } .linklike { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .chip { display: inline-block; padding: 4px 11px; border-radius: 999px; background: var(--amarillo); color: #1a1400; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .chip:hover { text-decoration: none; filter: brightness(1.08); } .chip--sm { font-size: .65rem; padding: 3px 9px; } /* ------------------------------ Cabecera --------------------------------- */ .site-header { position: sticky; top: 0; z-index: 60; background: var(--header-bg); border-bottom: 1px solid var(--line-soft); backdrop-filter: blur(14px); } .site-header--overlay { position: fixed; left: 0; right: 0; background: linear-gradient(180deg, rgba(8, 10, 14, .9) 0%, rgba(8, 10, 14, .55) 60%, transparent 100%); border-bottom: 0; } .site-header__inner { height: var(--header-h); max-width: 1240px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; gap: 20px; } .brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; } .brand:hover { text-decoration: none; } .brand__mark { width: 30px; height: 30px; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 0 0 1px rgba(255,255,255,.12); } .brand__stripe { display: block; } .brand__stripe--y { flex: 2; background: var(--amarillo); } .brand__stripe--b { flex: 1; background: var(--azul); } .brand__stripe--r { flex: 1; background: var(--rojo); } .brand__text { display: flex; flex-direction: column; line-height: 1.1; } .brand__name { font-weight: 700; font-size: 1.02rem; letter-spacing: -.01em; } .brand__name strong { color: var(--amarillo); } .brand__tag { font-size: .66rem; color: var(--text-dim); letter-spacing: .1em; text-transform: uppercase; } .site-nav { display: flex; gap: 4px; flex: 1 1 auto; overflow: hidden; } .site-nav__link { padding: 7px 12px; border-radius: 999px; font-size: .88rem; color: var(--text-soft); white-space: nowrap; } .site-nav__link:hover { background: var(--glass); color: var(--text); text-decoration: none; } .site-nav__link.is-active { background: var(--glass-strong); color: var(--text); } .site-header__actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } .search { display: flex; align-items: center; } .search input { width: 160px; padding: 8px 12px; background: var(--glass); border: 1px solid var(--line); border-right: 0; border-radius: 999px 0 0 999px; color: var(--text); font: inherit; font-size: .86rem; } .search input::placeholder { color: var(--text-dim); } .search button { padding: 8px 13px; background: var(--glass); border: 1px solid var(--line); border-left: 0; border-radius: 0 999px 999px 0; color: var(--text-soft); cursor: pointer; } .search button:hover { color: var(--amarillo); } .search svg { width: 17px; height: 17px; } .rss-link { padding: 8px; color: var(--text-soft); border-radius: 50%; } .rss-link:hover { color: var(--amarillo); background: var(--glass); } .menu-toggle { display: none; flex-direction: column; gap: 4px; justify-content: center; width: 40px; height: 40px; padding: 0 9px; background: none; border: 0; cursor: pointer; } .menu-toggle span { display: block; height: 2px; background: var(--text); border-radius: 2px; } .mobile-menu { display: none; flex-direction: column; padding: 8px 16px 18px; background: var(--header-bg); border-bottom: 1px solid var(--line); } .mobile-menu a { padding: 11px 4px; border-bottom: 1px solid var(--line-soft); color: var(--text-soft); } .mobile-menu a:hover { color: var(--text); } .mobile-menu[hidden] { display: none; } @media (max-width: 900px) { .site-nav { display: none; } .menu-toggle { display: flex; } .search input { width: 108px; } .mobile-menu:not([hidden]) { display: flex; } } @media (max-width: 520px) { .brand__tag { display: none; } .search { display: none; } } /* ====================== FLUJO PRINCIPAL (tipo TikTok) ==================== */ body.page-feed { height: 100dvh; overflow-y: scroll; scroll-snap-type: y mandatory; overscroll-behavior-y: contain; scrollbar-width: none; } body.page-feed::-webkit-scrollbar { width: 0; } .feed { display: block; } .feed__filter { position: fixed; top: calc(var(--header-h) + 8px); left: 50%; transform: translateX(-50%); z-index: 55; display: flex; align-items: center; gap: 12px; padding: 7px 16px; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--line); font-size: .82rem; backdrop-filter: blur(8px); } .feed__filter a { color: var(--amarillo); } /* ------------------------------- Tarjeta --------------------------------- */ .card { position: relative; height: 100dvh; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; background: #05070b; } .card__media { position: absolute; inset: 0; z-index: 1; } .card__media img { width: 100%; height: 100%; object-fit: cover; } .card__media-placeholder { width: 100%; height: 100%; display: grid; place-items: center; background: linear-gradient(140deg, #101725 0%, #1c2740 55%, #241a12 100%); } .card__media-placeholder span { font-family: var(--font-title); font-size: clamp(3rem, 12vw, 6rem); font-weight: 700; letter-spacing: .04em; color: rgba(255, 207, 51, .17); } .card__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,7,11,.75) 0%, rgba(5,7,11,.15) 26%, rgba(5,7,11,.15) 42%, rgba(5,7,11,.72) 74%, rgba(5,7,11,.96) 100%); } .card__content { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 0 82px 34px 20px; padding-bottom: max(34px, env(safe-area-inset-bottom, 0px)); } .card__top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .card__time { font-size: .78rem; color: rgba(255,255,255,.72); } .card__title { margin: 0 0 10px; font-family: var(--font-title); font-size: clamp(1.45rem, 5.4vw, 2.1rem); line-height: 1.16; font-weight: 700; letter-spacing: -.015em; text-shadow: 0 2px 18px rgba(0,0,0,.6); } .card__title a:hover { text-decoration: none; color: var(--amarillo); } .card__summary { margin: 0 0 12px; font-size: .96rem; line-height: 1.5; color: rgba(238, 242, 250, .9); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 10px rgba(0,0,0,.5); } .card__meta { display: flex; flex-wrap: wrap; gap: 7px; font-size: .78rem; color: rgba(255,255,255,.66); margin-bottom: 16px; } .card__cta { display: flex; gap: 10px; flex-wrap: wrap; } /* ------------------------ Barra lateral de acciones ---------------------- */ .rail { position: absolute; z-index: 4; right: 12px; bottom: 118px; display: flex; flex-direction: column; gap: 16px; align-items: center; } .rail__btn { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 52px; padding: 9px 0; background: rgba(15, 18, 26, .55); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; color: #fff; cursor: pointer; backdrop-filter: blur(8px); transition: transform .14s ease, background .15s ease; } .rail__btn:hover { background: rgba(30, 36, 50, .8); transform: scale(1.05); text-decoration: none; } .rail__btn[aria-pressed="true"] { color: var(--rojo); border-color: rgba(224,36,58,.6); } .rail__btn[aria-pressed="true"] svg { fill: var(--rojo); stroke: var(--rojo); } .rail__count { font-size: .68rem; font-weight: 600; letter-spacing: .02em; } .rail__btn--xml .rail__count { color: var(--amarillo); } .rail__btn.is-bumped { animation: bump .35s ease; } @keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.22); } 100% { transform: scale(1); } } /* --------------------------- Estado del flujo ---------------------------- */ .feed__status { min-height: 90px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 28px 16px; background: var(--bg); scroll-snap-align: start; } .feed__end { color: var(--text-soft); text-align: center; font-size: .92rem; } .feed__end a { color: var(--amarillo); } .feed__noscript { color: var(--text-soft); text-align: center; } .spinner { display: flex; gap: 6px; } .spinner span { width: 9px; height: 9px; border-radius: 50%; background: var(--amarillo); opacity: .35; animation: pulse 1.1s infinite ease-in-out; } .spinner span:nth-child(2) { animation-delay: .15s; } .spinner span:nth-child(3) { animation-delay: .3s; } @keyframes pulse { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } } .feed__progress { position: fixed; top: var(--header-h); left: 0; right: 0; z-index: 58; height: 3px; background: var(--glass); } .feed__progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--amarillo), var(--rojo)); transition: width .18s ease; } .feed__hint { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 50; display: flex; align-items: center; gap: 8px; padding: 7px 15px; border-radius: 999px; background: rgba(15, 18, 26, .72); border: 1px solid rgba(255,255,255,.13); font-size: .78rem; color: rgba(255,255,255,.85); backdrop-filter: blur(8px); animation: floaty 2.4s ease-in-out infinite; transition: opacity .4s ease; } .feed__hint svg { width: 16px; height: 16px; } .feed__hint.is-hidden { opacity: 0; pointer-events: none; } @keyframes floaty { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 5px); } } .empty-state { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 40px 20px; text-align: center; } .empty-state a { color: var(--amarillo); } /* Vista de escritorio: columna central tipo movil */ @media (min-width: 900px) { .card { display: block; padding: calc(var(--header-h) + 14px) 0 26px; } .card__media { top: calc(var(--header-h) + 14px); bottom: 26px; left: 50%; right: auto; transform: translateX(-50%); width: min(94vw, 540px); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); } .card__scrim { border-radius: var(--radius-lg); } .card__content { left: 50%; right: auto; transform: translateX(-50%); width: min(94vw, 540px); bottom: 26px; padding: 0 26px 30px; } .rail { right: auto; left: calc(50% + min(47vw, 270px) + 14px); bottom: 60px; } } @media (min-width: 900px) and (max-width: 1140px) { .rail { left: auto; right: 18px; } } /* ============================ PAGINA ARTICULO ============================= */ .article-page { max-width: 780px; margin: 0 auto; padding: 28px 18px 60px; } .breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .8rem; color: var(--text-dim); margin-bottom: 20px; } .breadcrumb a { color: var(--text-soft); } .breadcrumb a:hover { color: var(--amarillo); } .breadcrumb__current { color: var(--text-dim); } .article__header { margin-bottom: 22px; } .article__title { font-family: var(--font-title); font-size: clamp(1.8rem, 5vw, 2.6rem); line-height: 1.15; letter-spacing: -.02em; margin: 14px 0 12px; } .article__lead { font-size: 1.12rem; line-height: 1.55; color: var(--text-soft); margin: 0 0 14px; } .article__meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .85rem; color: var(--text-dim); padding-bottom: 16px; border-bottom: 1px solid var(--line); } .article__figure { margin: 0 0 26px; } .article__figure img { width: 100%; border-radius: var(--radius); } .article__figure figcaption { margin-top: 8px; font-size: .78rem; color: var(--text-dim); font-style: italic; } .article__body { font-size: 1.06rem; line-height: 1.75; color: var(--text); } .article__body p { margin: 0 0 1.15em; } .article__body h2 { font-family: var(--font-title); font-size: 1.5rem; margin: 1.8em 0 .6em; line-height: 1.25; } .article__body h3 { font-size: 1.2rem; margin: 1.5em 0 .5em; } .article__body h4 { font-size: 1.06rem; margin: 1.4em 0 .45em; color: var(--text); } /* Hueco para Taboola / Outbrain al final de la noticia */ .article-endslot { max-width: 900px; margin: 8px auto 40px; padding: 0 18px; } .article-endslot:empty { display: none; } .article__body figure { margin: 1.4em 0; } .article__body figcaption { font-size: .85rem; color: var(--text-soft); margin-top: .5em; } .article__body a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; } .article__body ul, .article__body ol { padding-left: 1.3em; margin: 0 0 1.15em; } .article__body li { margin-bottom: .45em; } .article__body blockquote { margin: 1.5em 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--amarillo); color: var(--text-soft); font-style: italic; } .article__body img { border-radius: var(--radius); margin: 1.2em 0; } .article__body hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; } .article__source { margin: 22px 0 0; padding: 12px 16px; background: var(--bg-soft); border-radius: var(--radius); font-size: .88rem; color: var(--text-soft); } .article__source a { color: var(--amarillo); } .article__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .action { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--line); color: var(--text-soft); font-size: .87rem; font-weight: 500; cursor: pointer; font-family: inherit; } .action:hover { background: var(--bg-card); color: var(--text); text-decoration: none; } .action svg { width: 18px; height: 18px; } .action[aria-pressed="true"] { color: var(--rojo); border-color: rgba(224,36,58,.45); } .action[aria-pressed="true"] svg { fill: var(--rojo); stroke: var(--rojo); } .action__count { color: var(--text-dim); font-variant-numeric: tabular-nums; } .share-sheet { margin-top: 16px; padding: 18px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); } .share-sheet > p { margin: 0 0 12px; font-weight: 600; } .share-sheet__links { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 14px; } .share-sheet__links a, .share-sheet__links button { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 999px; background: var(--bg-card); border: 1px solid var(--line); color: var(--text); font: inherit; font-size: .86rem; cursor: pointer; } .share-sheet__links a:hover, .share-sheet__links button:hover { border-color: var(--amarillo); text-decoration: none; } .article-nav { display: grid; gap: 12px; margin: 30px 0; grid-template-columns: 1fr; } @media (min-width: 640px) { .article-nav { grid-template-columns: 1fr 1fr; } } .article-nav__item { padding: 14px 18px; border-radius: var(--radius); background: var(--bg-soft); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 5px; } .article-nav__item:hover { border-color: var(--amarillo); text-decoration: none; } .article-nav__item span { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); } .article-nav__item strong { font-size: .95rem; line-height: 1.35; font-weight: 600; } .article-nav__item--next { text-align: right; } /* ----------------------------- Comentarios -------------------------------- */ .comments { margin-top: 42px; } .comments h2 { font-family: var(--font-title); font-size: 1.5rem; margin: 0 0 18px; } .comments__count { color: var(--text-dim); font-weight: 400; } .comments__empty { color: var(--text-dim); font-style: italic; } .notice { padding: 13px 16px; border-radius: var(--radius); background: var(--bg-soft); border: 1px solid var(--line); font-size: .9rem; margin: 0 0 18px; } .notice--ok { border-color: rgba(46, 160, 90, .5); background: rgba(46, 160, 90, .1); } .notice--error { border-color: rgba(224, 36, 58, .5); background: rgba(224, 36, 58, .1); } .notice--info { border-color: rgba(31, 79, 216, .5); background: rgba(31, 79, 216, .12); } .comment-form { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-bottom: 26px; } .comment-form__row { margin-bottom: 14px; position: relative; } .comment-form__row label { display: block; margin-bottom: 6px; font-size: .82rem; font-weight: 600; color: var(--text-soft); } .comment-form input[type="text"], .comment-form textarea { width: 100%; padding: 11px 13px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; color: var(--text); font: inherit; font-size: .95rem; resize: vertical; } .comment-form input:focus, .comment-form textarea:focus { border-color: var(--amarillo); outline: none; } .comment-form__counter { position: absolute; right: 4px; bottom: -16px; font-size: .72rem; color: var(--text-dim); } .comment-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .comment-form__foot { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin-top: 18px; } .comment-form__note { margin: 0; font-size: .78rem; color: var(--text-dim); max-width: 380px; } .comment-form__note a { color: var(--amarillo); } .comment-form__feedback { margin: 14px 0 0; padding: 11px 14px; border-radius: 10px; font-size: .88rem; } .comment-form__feedback.is-ok { background: rgba(46,160,90,.12); border: 1px solid rgba(46,160,90,.4); } .comment-form__feedback.is-error { background: rgba(224,36,58,.12); border: 1px solid rgba(224,36,58,.4); } .comment-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; } .comment { display: flex; gap: 13px; } .comment__avatar { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--azul), var(--rojo)); font-weight: 700; font-size: 1rem; color: #fff; } .comment__body { flex: 1; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 4px 14px 14px 14px; padding: 12px 15px; } .comment__head { margin: 0 0 5px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; } .comment__head time { font-size: .76rem; color: var(--text-dim); } .comment__text { margin: 0; color: var(--text-soft); line-height: 1.55; white-space: pre-wrap; word-break: break-word; } .comment:target .comment__body { border-color: var(--amarillo); } /* ---------------------------- Relacionadas -------------------------------- */ .related { margin-top: 44px; } .related h2 { font-family: var(--font-title); font-size: 1.4rem; margin: 0 0 16px; } .related__grid { display: grid; gap: 10px; grid-template-columns: 1fr; } @media (min-width: 640px) { .related__grid { grid-template-columns: 1fr 1fr; } } .related__item { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: var(--radius); background: var(--bg-soft); border: 1px solid var(--line); } .related__item:hover { border-color: var(--amarillo); text-decoration: none; } .related__thumb { flex: 0 0 74px; width: 74px; height: 58px; border-radius: 9px; overflow: hidden; background: var(--bg-card); } .related__thumb img { width: 100%; height: 100%; object-fit: cover; } .related__text { display: flex; flex-direction: column; gap: 4px; } .related__title { font-size: .92rem; line-height: 1.35; font-weight: 600; } .related__time { font-size: .74rem; color: var(--text-dim); } /* ============================ PAGINAS DE TEXTO ============================ */ .prose { max-width: 760px; margin: 0 auto; padding: 30px 18px 64px; } .prose--wide { max-width: 980px; } .prose--center { text-align: center; padding-top: 70px; } .prose h1 { font-family: var(--font-title); font-size: clamp(1.8rem, 5vw, 2.4rem); margin: 0 0 18px; line-height: 1.18; } .prose h2 { font-size: 1.3rem; margin: 2em 0 .6em; color: var(--text); } .prose h3 { font-size: 1.05rem; margin: 1.6em 0 .5em; color: var(--text-soft); } .prose p, .prose li { color: var(--text-soft); line-height: 1.7; } .prose a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; } .prose ul, .prose ol { padding-left: 1.25em; } .prose li { margin-bottom: .45em; } .prose__lead { font-size: 1.08rem; color: var(--text) !important; } .prose__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 24px; } .prose code { background: var(--bg-card); padding: 2px 6px; border-radius: 5px; font-size: .86em; color: var(--amarillo); } .big-code { font-family: var(--font-title); font-size: 5rem; line-height: 1; color: var(--amarillo); margin: 0 0 4px; font-weight: 700; } .table-wrap { overflow-x: auto; margin: 1em 0 1.6em; } table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 460px; } th, td { padding: 10px 13px; text-align: left; border-bottom: 1px solid var(--line); } th { color: var(--text); font-weight: 600; background: var(--bg-soft); } td { color: var(--text-soft); } .contact-grid { display: grid; gap: 14px; grid-template-columns: 1fr; margin: 24px 0; } @media (min-width: 640px) { .contact-grid { grid-template-columns: 1fr 1fr; } } .contact-card { padding: 18px; border-radius: var(--radius); background: var(--bg-soft); border: 1px solid var(--line); } .contact-card h2 { margin: 0 0 8px; font-size: 1.05rem; } .contact-card p { margin: 0 0 6px; font-size: .9rem; } .search--big { display: flex; gap: 10px; margin: 20px 0 26px; } .search--big input { flex: 1; width: auto; padding: 13px 18px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-soft); color: var(--text); font: inherit; } .search__count { color: var(--text-soft); margin-bottom: 18px; } .result-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .result__link { display: flex; gap: 14px; padding: 12px; border-radius: var(--radius); background: var(--bg-soft); border: 1px solid var(--line); } .result__link:hover { border-color: var(--amarillo); text-decoration: none; } .result__thumb { flex: 0 0 110px; width: 110px; height: 82px; border-radius: 10px; overflow: hidden; background: var(--bg-card); } .result__thumb img { width: 100%; height: 100%; object-fit: cover; } .result__text { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .result__text strong { font-size: 1rem; line-height: 1.35; } .result__summary { font-size: .86rem; color: var(--text-soft); } .result__meta { font-size: .75rem; color: var(--text-dim); } .cat-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); margin-top: 22px; } .cat-card { display: flex; align-items: stretch; border-radius: var(--radius); overflow: hidden; background: var(--bg-soft); border: 1px solid var(--line); } .cat-card:hover { border-color: var(--amarillo); } .cat-card__main { flex: 1; padding: 16px; display: flex; flex-direction: column; gap: 4px; } .cat-card__main:hover { text-decoration: none; } .cat-card__main strong { font-size: 1.02rem; } .cat-card__main span { font-size: .8rem; color: var(--text-dim); } .cat-card__rss { display: grid; place-items: center; padding: 0 14px; background: rgba(255,255,255,.04); border-left: 1px solid var(--line); font-size: .72rem; font-weight: 700; color: var(--amarillo); letter-spacing: .06em; } .cat-card__rss:hover { background: var(--amarillo); color: #1a1400; text-decoration: none; } /* ================================ PIE ==================================== */ .site-footer { background: var(--bg-soft); border-top: 1px solid var(--line); padding: 44px 18px 0; } body.page-feed .site-footer { scroll-snap-align: start; } .site-footer__inner { max-width: 1120px; margin: 0 auto; display: grid; gap: 30px; grid-template-columns: 1fr; } @media (min-width: 720px) { .site-footer__inner { grid-template-columns: 1.6fr 1fr 1fr 1fr; } } .site-footer__brand .brand__name { font-size: 1.1rem; } .site-footer__brand p { color: var(--text-dim); font-size: .89rem; margin: 10px 0 14px; max-width: 320px; } .footer-rss { display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; border-radius: 999px; border: 1px solid var(--line); color: var(--text-soft); font-size: .84rem; } .footer-rss:hover { border-color: var(--amarillo); color: var(--amarillo); text-decoration: none; } .footer-rss svg { width: 16px; height: 16px; } .site-footer__col h2 { font-size: .76rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-dim); margin: 0 0 12px; } .site-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .site-footer__col a, .site-footer__col button { color: var(--text-soft); font-size: .89rem; } .site-footer__col a:hover, .site-footer__col button:hover { color: var(--amarillo); } .site-footer__legal { max-width: 1120px; margin: 34px auto 0; padding: 18px 0 26px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; font-size: .82rem; color: var(--text-dim); } .site-footer__legal p { margin: 0; } /* ========================= BANDEJA DE COOKIES ============================ */ .cookie-banner { position: fixed; z-index: 120; left: 12px; right: 12px; bottom: 12px; background: rgba(18, 21, 29, .985); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 20px 60px rgba(0,0,0,.6); animation: slideUp .35s ease; } .cookie-banner[hidden] { display: none; } @keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } } .cookie-banner__inner { max-width: 1040px; margin: 0 auto; padding: 20px 22px; } .cookie-banner__text h2 { margin: 0 0 7px; font-size: 1.02rem; } .cookie-banner__text p { margin: 0; font-size: .85rem; color: var(--text-soft); line-height: 1.55; } .cookie-banner__text a { color: var(--amarillo); text-decoration: underline; } .cookie-banner__options { display: flex; flex-direction: column; gap: 10px; margin: 16px 0 4px; padding: 14px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); } .cookie-banner__options[hidden] { display: none; } .cookie-option { display: flex; gap: 10px; align-items: flex-start; font-size: .84rem; color: var(--text-soft); cursor: pointer; } .cookie-option input { margin-top: 3px; accent-color: var(--amarillo); width: 16px; height: 16px; } .cookie-banner__actions { display: flex; flex-wrap: wrap; gap: 9px; justify-content: flex-end; margin-top: 16px; } .cookie-banner__actions .btn { font-size: .85rem; padding: 9px 16px; } .cookie-banner__actions .btn[hidden] { display: none; } @media (max-width: 620px) { .cookie-banner__actions { justify-content: stretch; } .cookie-banner__actions .btn { flex: 1 1 auto; } } /* Mientras el aviso de cookies este visible, ocultamos la pista del flujo */ body.has-cookie-banner .feed__hint { opacity: 0; visibility: hidden; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } html { scroll-behavior: auto; } body.page-feed { scroll-snap-type: none; } } /* ====================== ESPACIOS PUBLICITARIOS ========================== */ .card--ad { display: grid; place-items: center; background: linear-gradient(160deg, #0f1420 0%, #161d2c 100%); } .card__ad-inner { width: min(94vw, 540px); padding: 22px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; } .card__ad-label, .article-ad__label { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim); } .card__ad-slot { width: 100%; min-height: 250px; display: grid; place-items: center; } .card__ad-slot ins { display: block; width: 100%; } /* Si la red no rellena el bloque, la tarjeta no deja un hueco vacio. */ .card--ad:has(.card__ad-slot:empty) { display: none; } .article-ad { display: block; margin: 2em 0; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-soft); text-align: center; } .article-ad__label { display: block; margin-bottom: 8px; } .article-ad__slot { min-height: 90px; display: grid; place-items: center; } .article-ad__slot ins { display: block; width: 100%; } .article-ad:has(.article-ad__slot:empty) { display: none; } /* ------------------------- Pie de foto ---------------------------------- */ .article__figure figcaption { display: flex; flex-direction: column; gap: 3px; margin-top: 9px; } .article__figcaption { font-size: .9rem; line-height: 1.45; color: var(--text-soft); font-style: normal; } .article__figcredit { font-size: .76rem; color: var(--text-dim); font-style: italic; } /* ======================== BOTON DE TEMA CLARO/OSCURO ==================== */ .theme-toggle { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; background: none; border: 0; border-radius: 50%; color: var(--text-soft); cursor: pointer; } .theme-toggle:hover { color: var(--amarillo); background: var(--glass); } .theme-toggle svg { width: 19px; height: 19px; grid-area: 1 / 1; } /* Se ve la luna en el tema oscuro y el sol en el claro. */ .theme-toggle__sun { display: none; } .theme-toggle__moon { display: block; } :root[data-theme="light"] .theme-toggle__sun { display: block; } :root[data-theme="light"] .theme-toggle__moon { display: none; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .theme-toggle__sun { display: block; } :root:not([data-theme="dark"]) .theme-toggle__moon { display: none; } } /* En el flujo, la cabecera va sobre la foto: el boton necesita contraste. */ .site-header--overlay .theme-toggle, .site-header--overlay .rss-link { color: rgba(255, 255, 255, .8); } .site-header--overlay .theme-toggle:hover, .site-header--overlay .rss-link:hover { color: var(--amarillo); } /* --------- Ajustes propios del tema claro que no salen de los tokens ---- */ :root[data-theme="light"] .site-header--overlay, :root:not([data-theme="dark"]) .site-header--overlay { /* Sobre la foto siempre hace falta un velo oscuro para leer el logotipo. */ background: linear-gradient(180deg, rgba(8, 10, 14, .82) 0%, rgba(8, 10, 14, .45) 60%, transparent 100%); } :root[data-theme="light"] .site-header--overlay .brand__name, :root[data-theme="light"] .site-header--overlay .site-nav__link, :root[data-theme="light"] .site-header--overlay .search input, :root[data-theme="light"] .site-header--overlay .brand__tag { color: #f2f4f8; } :root[data-theme="light"] .site-header--overlay .search input { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.2); } :root[data-theme="light"] .site-header--overlay .search button { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.2); color: #f2f4f8; } :root[data-theme="light"] .site-header--overlay .menu-toggle span { background: #f2f4f8; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .site-header--overlay .brand__name, :root:not([data-theme="dark"]) .site-header--overlay .site-nav__link, :root:not([data-theme="dark"]) .site-header--overlay .search input, :root:not([data-theme="dark"]) .site-header--overlay .brand__tag { color: #f2f4f8; } :root:not([data-theme="dark"]) .site-header--overlay .search input { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.2); } :root:not([data-theme="dark"]) .site-header--overlay .search button { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.2); color: #f2f4f8; } :root:not([data-theme="dark"]) .site-header--overlay .menu-toggle span { background: #f2f4f8; } } /* El fondo de las tarjetas del flujo se queda oscuro en los dos temas: el texto va sobre la fotografia y debe seguir siendo blanco. */ :root[data-theme="light"] .card, :root:not([data-theme="dark"]) .card { color: #f2f4f8; } :root[data-theme="light"] .card__title a:hover { color: var(--amarillo); } /* El aviso de cookies y las pistas flotantes mantienen su fondo propio. */ :root[data-theme="light"] .cookie-banner { background: rgba(255, 255, 255, .99); } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .cookie-banner { background: rgba(255, 255, 255, .99); } } /* La pista "Desliza para ver más" no debe taparle los botones a la tarjeta. */ @media (max-width: 899px) { .card__content { padding-bottom: max(74px, calc(env(safe-area-inset-bottom, 0px) + 74px)); } .feed__hint { bottom: 16px; font-size: .74rem; padding: 6px 13px; } }