/* ============================================================================ Canariame · main.css Tabloid magazine theme for WordPress. Designed mobile-first, responsive via fluid type (clamp) + breakpoint at 768px. ============================================================================ */ /* -- Reset & base -------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--cn-bg); color: var(--cn-ink); font-family: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } ::selection { background: var(--cn-hot); color: var(--cn-bg); } .cn-skip { position: absolute; left: -9999px; } .cn-skip:focus { left: 12px; top: 12px; z-index: 1000; background: var(--cn-ink); color: var(--cn-bg); padding: 10px 14px; font-weight: 800; } /* -- Color tokens & density --------------------------------------------- */ :root { --cn-bg: #F8F1E4; --cn-ink: #0E0C09; --cn-card: #FFFFFF; --cn-sand: #E9DDC5; --cn-rule: rgba(14,12,9,0.16); --cn-mute: rgba(14,12,9,0.6); --cn-navy: #0A3D62; /* --cn-accent, --cn-hot, --cn-pop, --cn-density: injected inline in */ --cn-accent: #E58B3A; --cn-hot: #FF6A2C; --cn-pop: #FF3D6E; --cn-density: 1; --cn-pad-x: clamp(18px, 4vw, 40px); --cn-pad-y: clamp(28px, 5vw, 48px); } body.cn-mode-oscuro { --cn-bg: #0E0C09; --cn-ink: #F8F1E4; --cn-card: #1A1714; --cn-sand: #221E18; --cn-rule: rgba(248,241,228,0.16); --cn-mute: rgba(248,241,228,0.55); --cn-navy: #5AA0D6; } @media (prefers-color-scheme: dark) { body.cn-mode-auto { --cn-bg: #0E0C09; --cn-ink: #F8F1E4; --cn-card: #1A1714; --cn-sand: #221E18; --cn-rule: rgba(248,241,228,0.16); --cn-mute: rgba(248,241,228,0.55); --cn-navy: #5AA0D6; } } /* Density scales body font slightly (compounds with clamp on bigger text). */ body.cn-density-denso { font-size: 14px; } body.cn-density-aireado { font-size: 18px; } /* -- Typography utility classes ---------------------------------------- */ .cn-accent-text { color: var(--cn-accent); } .cn-accent-dot { color: var(--cn-accent); } .cn-mono-small { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cn-mute); } .cn-eyebrow { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cn-ink); opacity: 0.7; margin-bottom: 14px; } .cn-eyebrow-accent { color: var(--cn-accent); opacity: 1; } /* -- Buttons ----------------------------------------------------------- */ .cn-btn { display: inline-block; padding: 12px 18px; font-family: "Archivo", sans-serif; font-size: 13px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; border: 1.5px solid var(--cn-ink); background: transparent; color: var(--cn-ink); cursor: pointer; transition: transform 0.12s, box-shadow 0.12s; } .cn-btn:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--cn-ink); } .cn-btn-primary { background: var(--cn-accent); border-color: var(--cn-ink); box-shadow: 4px 4px 0 var(--cn-ink); } .cn-btn-primary:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--cn-ink); } .cn-btn-dark { background: var(--cn-ink); color: var(--cn-bg); border: none; } .cn-btn-ghost { background: transparent; } .cn-btn-naked { border: none; opacity: 0.65; } .cn-btn-large { padding: 14px 24px; font-size: 14px; } .cn-btn-xl { padding: 16px 28px; font-size: clamp(14px, 2vw, 16px); border-width: 2.5px; box-shadow: 6px 6px 0 var(--cn-ink); } .cn-btn-accent-pop { background: var(--cn-accent); border: 2px solid var(--cn-ink); box-shadow: 4px 4px 0 var(--cn-ink); } .cn-btn-block { display: block; width: 100%; text-align: center; } /* -- Top bar ----------------------------------------------------------- */ .cn-topbar { background: var(--cn-ink); color: var(--cn-bg); padding: 8px var(--cn-pad-x); display: flex; justify-content: space-between; align-items: center; gap: 12px; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; } .cn-topbar-sep { opacity: 0.4; } .cn-city-short { display: none; } @media (max-width: 768px) { .cn-city-full { display: none; } .cn-city-short { display: inline; } } /* -- Nav --------------------------------------------------------------- */ .cn-nav { position: sticky; top: 0; z-index: 50; background: var(--cn-bg); border-bottom: 2px solid var(--cn-ink); padding: 0 var(--cn-pad-x); } .cn-nav-inner { display: flex; justify-content: space-between; align-items: center; height: 58px; } .cn-logo { font-family: "Archivo Black", "Anton", sans-serif; font-size: clamp(32px, 7vw, 76px); line-height: 0.85; color: var(--cn-ink); letter-spacing: -0.04em; text-decoration: none; } .cn-logo-accent { color: var(--cn-accent); } .cn-nav-actions { display: flex; gap: 10px; align-items: center; } .cn-nav-search { display: none; } @media (min-width: 769px) { .cn-nav-search { display: inline-block; } } .cn-hamburger { width: 44px; height: 44px; background: var(--cn-accent); border: 2px solid var(--cn-ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0; } .cn-hamburger span { width: 20px; height: 2.5px; background: var(--cn-ink); } @media (min-width: 769px) { .cn-hamburger { display: none; } } .cn-nav-main { display: none; } @media (min-width: 769px) { .cn-nav-main { display: flex; align-items: center; margin-top: 0; } .cn-nav-list { list-style: none; padding: 0; margin: 0; display: flex; gap: 28px; flex-wrap: wrap; } .cn-nav-list a { font-family: "Archivo", sans-serif; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--cn-ink); position: relative; } .cn-nav-list .cn-active a { color: var(--cn-accent); } .cn-nav-list a:hover { color: var(--cn-accent); } } .cn-new { font-size: 9px; margin-left: 2px; color: var(--cn-hot); font-weight: 800; letter-spacing: 0.08em; } /* Mobile drawer */ .cn-drawer { position: fixed; inset: 0; background: var(--cn-bg); z-index: 100; display: flex; flex-direction: column; padding: 14px 18px 32px; overflow-y: auto; } .cn-drawer[hidden] { display: none; } .cn-drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; } .cn-drawer-head .cn-logo { font-size: 32px; } .cn-drawer-close { background: transparent; border: 2px solid var(--cn-ink); width: 44px; height: 44px; font-family: "Archivo Black", sans-serif; font-size: 20px; color: var(--cn-ink); padding: 0; } .cn-drawer-nav { display: flex; flex-direction: column; border-top: 1.5px solid var(--cn-ink); } .cn-drawer-nav a { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; border-bottom: 1.5px solid var(--cn-ink); font-family: "Archivo Black", sans-serif; font-size: 32px; color: var(--cn-ink); letter-spacing: -0.03em; text-transform: uppercase; } .cn-drawer-nav .cn-arrow { font-family: "JetBrains Mono", monospace; font-size: 14px; opacity: 0.5; } .cn-drawer-cta { margin-top: 28px; display: flex; flex-direction: column; gap: 10px; } /* -- Ticker ----------------------------------------------------------- */ .cn-ticker { background: var(--cn-ink); color: var(--cn-bg); padding: 12px var(--cn-pad-x); display: flex; gap: 18px; font-family: "Archivo", sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .cn-ticker::-webkit-scrollbar { display: none; } .cn-ticker a { white-space: nowrap; color: inherit; } .cn-ticker a:hover { color: var(--cn-accent); } .cn-ticker-label { color: var(--cn-accent); white-space: nowrap; position: sticky; left: 0; background: var(--cn-ink); padding-right: 4px; } @media (min-width: 769px) { .cn-ticker { gap: 32px; } } /* -- Stripe placeholder (for cards without featured images) ----------- */ .cn-stripe { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 12px; background: repeating-linear-gradient(45deg, var(--cn-accent) 0 14px, rgba(0,0,0,0.08) 14px 15px); } .cn-stripe-label { font-family: "JetBrains Mono", monospace; font-size: 10px; color: rgba(0,0,0,0.45); letter-spacing: 0.1em; text-transform: uppercase; } .cn-stripe-hot { background: repeating-linear-gradient(45deg, var(--cn-hot) 0 14px, rgba(0,0,0,0.08) 14px 15px); } .cn-stripe-navy { background: repeating-linear-gradient(45deg, var(--cn-navy) 0 14px, rgba(255,255,255,0.06) 14px 15px); } .cn-stripe-navy .cn-stripe-label { color: rgba(255,255,255,0.6); } .cn-stripe-sand { background: repeating-linear-gradient(45deg, var(--cn-sand) 0 14px, rgba(0,0,0,0.05) 14px 15px); } .cn-stripe-ink { background: repeating-linear-gradient(45deg, var(--cn-ink) 0 14px, rgba(255,255,255,0.06) 14px 15px); } .cn-stripe-ink .cn-stripe-label { color: rgba(255,255,255,0.6); } .cn-stripe-orange { background: repeating-linear-gradient(45deg, var(--cn-accent) 0 14px, rgba(0,0,0,0.08) 14px 15px); } .cn-stripe-pop { background: repeating-linear-gradient(45deg, var(--cn-pop) 0 14px, rgba(0,0,0,0.08) 14px 15px); } /* -- Hero (front page) ------------------------------------------------- */ .cn-hero { padding: var(--cn-pad-y) var(--cn-pad-x); display: grid; gap: 22px; } @media (min-width: 769px) { .cn-hero { grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: stretch; } } .cn-hero-text { order: 2; } .cn-hero-media { order: 1; position: relative; aspect-ratio: 4/3; border: 2px solid var(--cn-ink); display: block; } @media (min-width: 769px) { .cn-hero-text { order: 1; } .cn-hero-media { order: 2; aspect-ratio: auto; min-height: 460px; } } .cn-hero-media img, .cn-hero-media .cn-stripe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .cn-pill { display: inline-block; padding: 6px 12px; font-family: "Archivo", sans-serif; font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 18px; } .cn-pill-dark { background: var(--cn-ink); color: var(--cn-accent); } .cn-hero-title { font-family: "Archivo Black", "Anton", sans-serif; font-size: clamp(32px, 5vw, 72px); line-height: 0.9; color: var(--cn-ink); margin: 0; letter-spacing: -0.04em; text-transform: uppercase; text-wrap: balance; } .cn-hero-dek { font-family: "Newsreader", serif; font-size: clamp(16px, 1.9vw, 19px); line-height: 1.45; color: var(--cn-ink); margin: 18px 0 0; max-width: 600px; } .cn-hero-meta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 22px; font-family: "Archivo", sans-serif; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; } .cn-hero-meta span:nth-child(n+2) { opacity: 0.6; } .cn-hero-text .cn-btn { margin-top: 22px; } .cn-hero-badge { position: absolute; top: -12px; right: -10px; background: var(--cn-hot); color: var(--cn-bg); font-family: "Archivo Black", sans-serif; font-size: 11px; padding: 7px 11px; letter-spacing: 0.08em; text-transform: uppercase; transform: rotate(4deg); } /* -- Section heads ---------------------------------------------------- */ .cn-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; border-bottom: 2px solid var(--cn-ink); padding-bottom: 10px; } .cn-section-head h2 { font-family: "Archivo Black", sans-serif; font-size: clamp(32px, 7vw, 56px); color: var(--cn-ink); margin: 0; letter-spacing: -0.03em; text-transform: uppercase; line-height: 0.9; } /* -- Grid + cards ---------------------------------------------------- */ .cn-home-grid, .cn-cat-grid-wrap, .cn-related, .cn-archive { padding: var(--cn-pad-y) var(--cn-pad-x); } .cn-grid { display: grid; gap: clamp(20px, 3vw, 32px); } .cn-grid-3 { grid-template-columns: 1fr; } .cn-grid-home { grid-template-columns: 1fr; } @media (min-width: 769px) { .cn-grid-3 { grid-template-columns: repeat(3, 1fr); } .cn-grid-home { grid-template-columns: repeat(3, 1fr); } } .cn-card { display: block; } .cn-card-link { display: flex; flex-direction: column; gap: 12px; } .cn-card-big { grid-column: 1 / -1; } @media (min-width: 769px) { .cn-card-big { grid-column: span 2; } } .cn-card-media { position: relative; aspect-ratio: 4/3; border: 2px solid var(--cn-ink); overflow: hidden; } .cn-card-big .cn-card-media { aspect-ratio: 16/9; } .cn-card-media img { width: 100%; height: 100%; object-fit: cover; } .cn-card-num { position: absolute; top: 10px; left: 10px; font-family: "Archivo Black", sans-serif; font-size: 36px; color: var(--cn-bg); line-height: 1; text-shadow: 2px 2px 0 rgba(0,0,0,0.4); } .cn-card-big .cn-card-num { font-size: 56px; } .cn-cat-badge { display: inline-block; background: var(--cn-ink); color: var(--cn-bg); padding: 3px 8px; font-family: "Archivo", sans-serif; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 8px; } .cn-card-title { font-family: "Archivo Black", sans-serif; font-size: clamp(20px, 3.8vw, 26px); line-height: 1; color: var(--cn-ink); margin: 4px 0 8px; letter-spacing: -0.02em; text-transform: uppercase; } .cn-card-big .cn-card-title { font-size: clamp(28px, 5vw, 42px); } .cn-card-meta { display: flex; gap: 8px; flex-wrap: wrap; color: var(--cn-mute); font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; } /* -- Fisquito --------------------------------------------------------- */ .cn-fisquito { background: var(--cn-accent); padding: var(--cn-pad-y) var(--cn-pad-x); border-top: 2px solid var(--cn-ink); border-bottom: 2px solid var(--cn-ink); } .cn-fisquito-inner { display: grid; gap: 28px; grid-template-columns: 1fr; align-items: center; } @media (min-width: 769px) { .cn-fisquito-inner { grid-template-columns: 1fr 1.6fr; gap: 40px; } } .cn-fisquito-title .cn-eyebrow { color: var(--cn-ink); opacity: 1; } .cn-fisquito-title h2 { font-family: "Archivo Black", sans-serif; font-size: clamp(64px, 17vw, 124px); line-height: 0.82; color: var(--cn-ink); margin: 0; letter-spacing: -0.05em; text-transform: uppercase; } .cn-fisquito-title p { font-family: "Newsreader", serif; font-size: clamp(15px, 1.9vw, 18px); line-height: 1.45; color: var(--cn-ink); margin-top: 18px; max-width: 360px; } .cn-fisquito-card { background: var(--cn-bg); border: 2px solid var(--cn-ink); padding: clamp(22px, 4vw, 36px); box-shadow: clamp(6px, 1.5vw, 10px) clamp(6px, 1.5vw, 10px) 0 var(--cn-ink); } .cn-quotemark { font-family: "Archivo Black", sans-serif; font-size: clamp(60px, 12vw, 80px); color: var(--cn-accent); line-height: 0.8; margin-bottom: 8px; } .cn-fisquito-card blockquote { font-family: "Newsreader", serif; font-style: italic; font-size: clamp(20px, 3.5vw, 28px); line-height: 1.25; color: var(--cn-ink); margin: 0; text-wrap: balance; } .cn-fisquito-attrib { margin: 18px 0; font-family: "Archivo", sans-serif; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cn-ink); opacity: 0.7; } /* -- Home quiz teaser ------------------------------------------------- */ .cn-home-quiz { background: var(--cn-navy); color: var(--cn-bg); padding: var(--cn-pad-y) var(--cn-pad-x); display: grid; gap: 28px; grid-template-columns: 1fr; align-items: center; } @media (min-width: 769px) { .cn-home-quiz { grid-template-columns: 1.4fr 1fr; gap: 40px; } } .cn-home-quiz h2 { font-family: "Archivo Black", sans-serif; font-size: clamp(40px, 10vw, 88px); line-height: 0.88; color: var(--cn-bg); margin: 0; letter-spacing: -0.04em; text-transform: uppercase; } .cn-home-quiz p { font-family: "Newsreader", serif; font-size: clamp(15px, 1.9vw, 18px); line-height: 1.45; margin: 18px 0 0; max-width: 520px; opacity: 0.85; } .cn-home-quiz-cta { display: flex; gap: 14px; align-items: center; margin-top: 22px; flex-wrap: wrap; } .cn-home-quiz-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } @media (min-width: 769px) { .cn-home-quiz-options { gap: 12px; } } .cn-home-quiz-options > div { border: 1.5px solid rgba(248,241,228,0.3); padding: 14px; font-family: "Archivo", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } @media (min-width: 769px) { .cn-home-quiz-options > div { padding: 18px; font-size: 13px; } } .cn-home-quiz-options > div span { display: block; font-family: "JetBrains Mono", monospace; font-size: 10px; opacity: 0.6; margin-bottom: 6px; letter-spacing: 0.08em; } .cn-home-quiz-opt-on { background: rgba(229,139,58,0.18); } /* -- Newsletter ------------------------------------------------------- */ .cn-newsletter { padding: var(--cn-pad-y) var(--cn-pad-x); background: var(--cn-bg); border-top: 2px solid var(--cn-ink); border-bottom: 2px solid var(--cn-ink); } .cn-newsletter-inner { display: grid; gap: 22px; grid-template-columns: 1fr; align-items: center; } @media (min-width: 769px) { .cn-newsletter-inner { grid-template-columns: 1fr 1fr; gap: 40px; } } .cn-newsletter-title { font-family: "Archivo Black", sans-serif; font-size: clamp(36px, 8vw, 72px); line-height: 0.88; color: var(--cn-ink); margin: 0; letter-spacing: -0.04em; text-transform: uppercase; } .cn-newsletter-title .cn-accent-dot { color: var(--cn-hot); } .cn-newsletter-dek { font-family: "Newsreader", serif; font-size: clamp(15px, 1.7vw, 17px); line-height: 1.45; color: var(--cn-ink); margin: 0 0 16px; } .cn-newsletter-form { display: flex; flex-direction: column; border: 2px solid var(--cn-ink); } @media (min-width: 540px) { .cn-newsletter-form { flex-direction: row; } } .cn-newsletter-form input { flex: 1; padding: 14px 18px; border: none; background: transparent; color: var(--cn-ink); font-family: "Archivo", sans-serif; font-size: 14px; outline: none; min-width: 0; } .cn-newsletter-form button { background: var(--cn-ink); color: var(--cn-bg); border: none; padding: 14px 24px; font-family: "Archivo", sans-serif; font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; border-top: 2px solid var(--cn-ink); } @media (min-width: 540px) { .cn-newsletter-form button { border-top: none; } } .cn-newsletter-success { border: 2px solid var(--cn-ink); padding: 16px; font-family: "Archivo", sans-serif; font-size: 13px; font-weight: 700; color: var(--cn-ink); background: var(--cn-accent); } /* -- Footer ----------------------------------------------------------- */ .cn-footer { background: var(--cn-ink); color: var(--cn-bg); padding: 28px var(--cn-pad-x) 24px; } .cn-footer-row { display: flex; flex-direction: column; gap: 20px; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid rgba(248,241,228,0.16); } @media (min-width: 769px) { .cn-footer-row { flex-direction: row; } } .cn-footer-logo { font-family: "Archivo Black", sans-serif; font-size: clamp(28px, 4vw, 36px); letter-spacing: -0.04em; } .cn-footer-dot { color: var(--cn-accent); } .cn-footer-tagline { font-family: "Newsreader", serif; font-style: italic; font-size: 14px; margin-top: 6px; opacity: 0.7; } .cn-footer-nav { display: flex; gap: 16px; flex-wrap: wrap; font-family: "Archivo", sans-serif; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.85; } @media (min-width: 769px) { .cn-footer-nav { gap: 40px; } } .cn-footer-nav a, .cn-footer-nav li { list-style: none; opacity: 0.85; } .cn-footer-social { display: flex; gap: 12px; font-family: "JetBrains Mono", monospace; font-size: 11px; opacity: 0.7; } .cn-footer-legal { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; font-family: "Archivo", sans-serif; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.5; } @media (min-width: 769px) { .cn-footer-legal { flex-direction: row; } } /* -- Breadcrumb ------------------------------------------------------ */ .cn-breadcrumb { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cn-ink); opacity: 0.7; margin-bottom: 14px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .cn-breadcrumb a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .cn-breadcrumb-sep { opacity: 0.4; } /* -- Single article -------------------------------------------------- */ .cn-article-hero { background: var(--cn-bg); padding: var(--cn-pad-y) var(--cn-pad-x); border-bottom: 2px solid var(--cn-ink); } .cn-article-hero-inner { display: grid; gap: 24px; } @media (max-width: 768px) { .cn-byline-extras { width: 100%; margin-left: 58px; /* se alinea bajo el nombre (avatar 44px + gap 14px) */ justify-content: flex-start; } } @media (min-width: 769px) { .cn-article-hero-inner { grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: stretch; } .cn-article-media { order: 2; aspect-ratio: unset; min-height: 320px; box-shadow: 10px 10px 0 var(--cn-ink); } .cn-article-text { order: 1; } } .cn-article-media img { width: 100%; height: 100%; object-fit: cover; } .cn-article-title { font-family: "Archivo Black", sans-serif; font-size: clamp(28px, 4vw, 58px); line-height: 0.9; color: var(--cn-ink); margin: 14px 0 0; letter-spacing: -0.04em; text-transform: uppercase; text-wrap: balance; } .cn-article-dek { font-family: "Newsreader", serif; font-style: italic; font-size: clamp(17px, 2.2vw, 22px); line-height: 1.4; color: var(--cn-ink); margin-top: 20px; max-width: 600px; opacity: 0.85; } .cn-byline { display: flex; gap: 14px; align-items: center; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--cn-rule); flex-wrap: wrap; } .cn-byline-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--cn-accent); border: 2px solid var(--cn-ink); color: var(--cn-ink); display: flex; align-items: center; justify-content: center; font-family: "Archivo Black", sans-serif; font-size: 16px; } .cn-byline-name { font-family: "Archivo", sans-serif; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--cn-ink); } .cn-byline-role { font-size: 12px; opacity: 0.6; } .cn-byline-extras { margin-left: auto; display: flex; gap: 12px; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; flex-wrap: wrap; } /* Sticky share row (mobile) */ .cn-share { position: sticky; top: 84px; z-index: 10; background: var(--cn-bg); padding: 10px var(--cn-pad-x); border-bottom: 1.5px solid var(--cn-rule); display: flex; align-items: center; gap: 8px; overflow-x: auto; scrollbar-width: none; } .cn-share::-webkit-scrollbar { display: none; } @media (min-width: 769px) { .cn-share { display: none; } } .cn-share-label { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cn-ink); opacity: 0.6; white-space: nowrap; } .cn-share-btn { min-width: 38px; height: 38px; border: 1.5px solid var(--cn-ink); background: transparent; color: var(--cn-ink); font-family: "Archivo", sans-serif; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; padding: 0 8px; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; } .cn-share-fav { margin-left: auto; background: var(--cn-accent); border: 1.5px solid var(--cn-ink); font-size: 16px; } .cn-article-body { padding: var(--cn-pad-y) var(--cn-pad-x); background: var(--cn-bg); max-width: 1200px; margin: 0 auto; display: grid; gap: 24px; } @media (min-width: 769px) { .cn-article-body { grid-template-columns: 180px 1fr; gap: 48px; } } .cn-article-aside { display: none; } @media (min-width: 769px) { .cn-article-aside { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 24px; align-self: start; } .cn-aside-label { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cn-ink); opacity: 0.6; } .cn-aside-label-mt { margin-top: 14px; } .cn-aside-btn { width: 44px; height: 44px; border: 1.5px solid var(--cn-ink); background: transparent; color: var(--cn-ink); font-family: "Archivo", sans-serif; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; display: flex; align-items: center; justify-content: center; } .cn-aside-btn-fav { background: var(--cn-accent); font-size: 18px; } } .cn-article-content { font-family: "Newsreader", serif; font-size: clamp(17px, 1.9vw, 19px); line-height: 1.65; color: var(--cn-ink); max-width: 680px; } .cn-article-content > *:first-child { margin-top: 0; } .cn-article-content p { margin: 0 0 1.2em; } .cn-article-content h2 { font-family: "Archivo Black", sans-serif; font-size: clamp(26px, 5vw, 36px); line-height: 0.95; color: var(--cn-ink); margin: 2em 0 0.6em; letter-spacing: -0.02em; text-transform: uppercase; } .cn-article-content h3 { font-family: "Archivo Black", sans-serif; font-size: clamp(22px, 4vw, 28px); line-height: 1; margin: 1.6em 0 0.6em; letter-spacing: -0.02em; text-transform: uppercase; } .cn-article-content blockquote { margin: 1.6em 0; padding: 20px 24px; border-left: 6px solid var(--cn-accent); background: var(--cn-sand); font-style: italic; font-size: clamp(20px, 3vw, 26px); line-height: 1.3; text-wrap: balance; } .cn-article-content a { color: var(--cn-accent); text-decoration: underline; text-underline-offset: 3px; } .cn-article-content ul, .cn-article-content ol { padding-left: 1.4em; margin: 1em 0; } .cn-article-content li { margin-bottom: 0.4em; } .cn-article-content img { margin: 1.5em 0; border: 2px solid var(--cn-ink); } .cn-article-content code { font-family: "JetBrains Mono", monospace; background: var(--cn-sand); padding: 0 6px; } /* Drop cap on first paragraph */ .cn-article-content > p:first-of-type::first-letter { font-family: "Archivo Black", sans-serif; font-size: clamp(56px, 11vw, 76px); line-height: 0.8; float: left; margin: 6px 12px 0 0; color: var(--cn-accent); text-transform: uppercase; } .cn-article-footer { padding: 0 var(--cn-pad-x) var(--cn-pad-y); max-width: 1200px; margin: 0 auto; } .cn-article-tags { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-family: "Archivo", sans-serif; font-size: 12px; } .cn-article-tags a { padding: 6px 12px; border: 1.5px solid var(--cn-ink); background: transparent; color: var(--cn-ink); } .cn-article-tags a:hover { background: var(--cn-accent); } /* -- Category hero --------------------------------------------------- */ .cn-cat-hero { background: var(--cn-bg); padding: var(--cn-pad-y) var(--cn-pad-x); border-bottom: 2px solid var(--cn-ink); } .cn-cat-hero-inner { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 14px; } @media (min-width: 769px) { .cn-cat-hero-inner { flex-direction: row; align-items: flex-end; gap: 40px; } } .cn-cat-hero-text { width: 100%; } .cn-cat-title { font-family: "Archivo Black", sans-serif; font-size: clamp(64px, 18vw, 156px); line-height: 0.82; color: var(--cn-ink); margin: 0; letter-spacing: -0.05em; text-transform: uppercase; } .cn-cat-dek { font-family: "Newsreader", serif; font-style: italic; font-size: clamp(18px, 2.5vw, 24px); color: var(--cn-ink); margin-top: 12px; opacity: 0.85; } .cn-cat-hero-stats { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cn-ink); opacity: 0.7; display: flex; flex-direction: row; align-items: baseline; gap: 12px; white-space: nowrap; } @media (min-width: 769px) { .cn-cat-hero-stats { flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; } } .cn-cat-count { font-family: "Archivo Black", sans-serif; font-size: clamp(42px, 8vw, 64px); color: var(--cn-accent); line-height: 1; } .cn-cat-feature { display: grid; gap: 22px; padding: var(--cn-pad-y) var(--cn-pad-x); background: var(--cn-sand); border-bottom: 2px solid var(--cn-ink); align-items: center; } @media (min-width: 769px) { .cn-cat-feature { grid-template-columns: 1.2fr 1fr; gap: 32px; } } .cn-cat-feature-media { position: relative; aspect-ratio: 4/3; border: 2px solid var(--cn-ink); box-shadow: 6px 6px 0 var(--cn-ink); overflow: hidden; } @media (min-width: 769px) { .cn-cat-feature-media { box-shadow: 8px 8px 0 var(--cn-ink); } } .cn-cat-feature-media img { width: 100%; height: 100%; object-fit: cover; } .cn-cat-feature-tag { position: absolute; top: -12px; left: -10px; background: var(--cn-hot); color: var(--cn-bg); font-family: "Archivo Black", sans-serif; font-size: 11px; padding: 6px 10px; letter-spacing: 0.1em; text-transform: uppercase; } .cn-cat-feature-body h2 { font-family: "Archivo Black", sans-serif; font-size: clamp(30px, 6.5vw, 56px); line-height: 0.9; color: var(--cn-ink); margin: 12px 0 0; letter-spacing: -0.03em; text-transform: uppercase; text-wrap: balance; } .cn-cat-feature-body p { font-family: "Newsreader", serif; font-size: clamp(14px, 1.7vw, 16px); line-height: 1.5; color: var(--cn-ink); margin-top: 14px; opacity: 0.8; } .cn-cat-feature-meta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; color: var(--cn-mute); } /* -- Pagination ----------------------------------------------------- */ .cn-pagination { margin-top: 40px; display: flex; justify-content: center; } .cn-pagination .nav-links { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .cn-pagination a, .cn-pagination .current { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 12px; border: 1.5px solid var(--cn-ink); background: transparent; color: var(--cn-ink); font-family: "Archivo", sans-serif; font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .cn-pagination .current { background: var(--cn-ink); color: var(--cn-bg); } .cn-pagination .dots { border: none; } /* -- 404 / empty --------------------------------------------------- */ .cn-empty, .cn-404 { padding: var(--cn-pad-y) var(--cn-pad-x); text-align: center; } .cn-404 h1, .cn-empty h1 { font-family: "Archivo Black", sans-serif; font-size: clamp(40px, 8vw, 80px); line-height: 0.9; margin: 0 0 16px; letter-spacing: -0.04em; text-transform: uppercase; text-wrap: balance; } .cn-404 p, .cn-empty p { font-family: "Newsreader", serif; font-size: clamp(16px, 2vw, 19px); max-width: 540px; margin: 0 auto 24px; } .cn-404-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } /* -- Search form -------------------------------------------------- */ .cn-searchform { display: inline-flex; border: 2px solid var(--cn-ink); } .cn-searchform input { border: none; padding: 10px 14px; font-family: "Archivo", sans-serif; font-size: 14px; background: transparent; color: var(--cn-ink); outline: none; min-width: 200px; } .cn-searchform button { border: none; background: var(--cn-ink); color: var(--cn-bg); padding: 10px 18px; font-family: "Archivo", sans-serif; font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; } /* -- Page ----------------------------------------------------------- */ .cn-page { padding: var(--cn-pad-y) var(--cn-pad-x); max-width: 880px; margin: 0 auto; } .cn-page-title { font-family: "Archivo Black", sans-serif; font-size: clamp(40px, 9vw, 76px); line-height: 0.9; color: var(--cn-ink); margin: 14px 0; letter-spacing: -0.04em; text-transform: uppercase; } /* -- Quiz ----------------------------------------------------------- */ .cn-quiz { background: var(--cn-bg); } .cn-quiz-screen { padding: var(--cn-pad-y) var(--cn-pad-x); border-bottom: 2px solid var(--cn-ink); } .cn-quiz-intro { display: flex; align-items: center; min-height: clamp(420px, 60vh, 600px); } .cn-quiz-intro-inner { max-width: 880px; margin: 0 auto; text-align: center; width: 100%; } .cn-quiz-intro h1 { font-family: "Archivo Black", sans-serif; font-size: clamp(44px, 12vw, 128px); line-height: 0.85; color: var(--cn-ink); margin: 0; letter-spacing: -0.05em; text-transform: uppercase; text-wrap: balance; } .cn-quiz-intro p { font-family: "Newsreader", serif; font-size: clamp(17px, 2.4vw, 22px); line-height: 1.45; color: var(--cn-ink); margin: 24px auto; max-width: 640px; opacity: 0.85; } .cn-quiz-intro .cn-btn { margin-top: 8px; } .cn-quiz-stats { margin-top: 20px; } .cn-quiz-question-inner { max-width: 880px; margin: 0 auto; } .cn-quiz-progress-text { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; } .cn-quiz-back { background: transparent; border: none; color: var(--cn-ink); font-family: "Archivo", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; opacity: 1; } .cn-quiz-back[disabled] { opacity: 0.3; cursor: default; } .cn-quiz-progress-bar { height: 10px; background: var(--cn-sand); border: 1.5px solid var(--cn-ink); margin-bottom: 28px; overflow: hidden; } .cn-quiz-progress-fill { height: 100%; background: var(--cn-accent); transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1); width: 16.6%; } .cn-quiz-q-text { font-family: "Archivo Black", sans-serif; font-size: clamp(30px, 8vw, 72px); line-height: 0.92; color: var(--cn-ink); margin: 0 0 28px; letter-spacing: -0.04em; text-transform: uppercase; text-wrap: balance; } .cn-quiz-options { display: grid; gap: 12px; grid-template-columns: 1fr; } @media (min-width: 769px) { .cn-quiz-options { grid-template-columns: 1fr 1fr; gap: 16px; } } .cn-quiz-opt { text-align: left; padding: 18px; background: var(--cn-bg); border: 2px solid var(--cn-ink); font-family: "Newsreader", serif; font-size: clamp(16px, 2.2vw, 19px); line-height: 1.35; color: var(--cn-ink); display: flex; align-items: flex-start; gap: 14px; transition: transform 0.12s, box-shadow 0.12s; } @media (min-width: 769px) { .cn-quiz-opt { padding: 24px; } } .cn-quiz-opt:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--cn-ink); } .cn-quiz-opt[aria-pressed="true"] { background: var(--cn-accent); box-shadow: 5px 5px 0 var(--cn-ink); transform: translate(-2px, -2px); } .cn-quiz-opt-letter { font-family: "Archivo Black", sans-serif; font-size: 20px; color: var(--cn-accent); line-height: 1; flex-shrink: 0; } .cn-quiz-opt[aria-pressed="true"] .cn-quiz-opt-letter { color: var(--cn-ink); } @media (min-width: 769px) { .cn-quiz-opt-letter { font-size: 24px; } } .cn-quiz-result-inner { max-width: 1120px; margin: 0 auto; display: grid; gap: 28px; grid-template-columns: 1fr; align-items: center; } @media (min-width: 769px) { .cn-quiz-result-inner { grid-template-columns: 1fr 1.4fr; gap: 56px; } } .cn-quiz-result-media { position: relative; aspect-ratio: 1; border: 2.5px solid var(--cn-ink); box-shadow: 8px 8px 0 var(--cn-ink); max-width: 320px; justify-self: center; } @media (min-width: 769px) { .cn-quiz-result-media { aspect-ratio: 4/5; box-shadow: 12px 12px 0 var(--cn-ink); max-width: none; justify-self: stretch; } } .cn-quiz-result-emoji { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: clamp(140px, 32vw, 220px); } .cn-quiz-result-label { font-family: "Archivo Black", sans-serif; font-size: clamp(24px, 5vw, 36px); color: var(--cn-accent); letter-spacing: -0.02em; text-transform: uppercase; margin-bottom: 6px; } .cn-quiz-result h1 { font-family: "Archivo Black", sans-serif; font-size: clamp(34px, 8.5vw, 76px); line-height: 0.9; margin: 0; letter-spacing: -0.04em; text-transform: uppercase; text-wrap: balance; } .cn-quiz-result p { font-family: "Newsreader", serif; font-size: clamp(16px, 2.2vw, 20px); line-height: 1.5; margin-top: 20px; max-width: 560px; } .cn-quiz-result-traits { margin-top: 22px; display: flex; gap: 8px; flex-wrap: wrap; } .cn-quiz-result-traits span { background: var(--cn-ink); color: var(--cn-bg); padding: 8px 14px; font-family: "Archivo", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; } .cn-quiz-result-match { margin-top: 28px; padding: 14px 20px; background: var(--cn-sand); border: 2px solid var(--cn-ink); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .cn-quiz-result-match-value { font-family: "Archivo Black", sans-serif; font-size: clamp(18px, 3vw, 22px); letter-spacing: -0.02em; text-transform: uppercase; } .cn-quiz-result-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; } .cn-quiz-noscript { padding: 28px var(--cn-pad-x); text-align: center; background: var(--cn-sand); border: 2px solid var(--cn-ink); margin: var(--cn-pad-y) var(--cn-pad-x); } /* -- Comments ------------------------------------------------------- */ .cn-comments { padding: var(--cn-pad-y) var(--cn-pad-x); max-width: 880px; margin: 0 auto; } .cn-comments-title { font-family: "Archivo Black", sans-serif; font-size: clamp(28px, 5vw, 40px); letter-spacing: -0.03em; text-transform: uppercase; margin: 0 0 24px; } .cn-comments-list { list-style: none; padding: 0; margin: 0; } .cn-comments-list li { padding: 18px 0; border-bottom: 1px solid var(--cn-rule); } .cn-comments-list .comment-author { font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; font-size: 12px; } .cn-comments-list .comment-meta { font-family: "JetBrains Mono", monospace; font-size: 11px; opacity: 0.6; letter-spacing: 0.08em; text-transform: uppercase; } .cn-comments-list .comment-content { font-family: "Newsreader", serif; font-size: 17px; line-height: 1.5; margin-top: 8px; } .comment-form input, .comment-form textarea { width: 100%; padding: 10px 14px; border: 1.5px solid var(--cn-ink); background: transparent; font-family: "Archivo", sans-serif; font-size: 14px; margin-bottom: 12px; color: var(--cn-ink); } .comment-form-submit input[type="submit"], .comment-form .submit { background: var(--cn-accent); border: 2px solid var(--cn-ink); padding: 12px 22px; font-family: "Archivo", sans-serif; font-size: 13px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; box-shadow: 4px 4px 0 var(--cn-ink); cursor: pointer; } /* -- Misc ----------------------------------------------------------- */ .screen-reader-text { position: absolute !important; clip: rect(1px,1px,1px,1px); width: 1px; height: 1px; overflow: hidden; } .alignwide { max-width: 1200px; margin-left: auto; margin-right: auto; } .alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ── Badge de isla ───────────────────────────────── */ .cn-article-islas { margin-bottom: 14px; } .cn-isla-badge { display: inline-block; background-color: #C45141; color: #FFFFFF; font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 11px; border-radius: 2px; text-decoration: none; transition: background-color 0.2s ease; } .cn-isla-badge:hover { background-color: #a83d30; color: #FFFFFF; text-decoration: none; } /* Tarjetas y destacado de categoría — 16:9 */ .cn-card-media, .cn-cat-feature-media { aspect-ratio: 16 / 9; } /* Hero portada — 16:9 en todos los tamaños */ .cn-hero-media { aspect-ratio: 16 / 9; } /* Desktop: desactivar stretch para que la imagen respete su ratio */ @media (min-width: 769px) { .cn-hero { align-items: center; } } .cn-hero-title { font-size: clamp(28px, 3.5vw, 52px); } /* Hero imagen artículo individual — forzar 16:9 */ .cn-article-media { aspect-ratio: 16 / 9; overflow: hidden; width: 100%; min-width: 0; align-self: center; } .cn-article-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } /* ============================================= BOTÓN APP — añadir al final de assets/css/main.css ============================================= */ /* Desktop */ .cn-btn-app { display: inline-flex; align-items: center; background-color: #C45141; color: #FAF7F2 !important; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.03em; text-transform: uppercase; padding: 7px 16px; border-radius: 5px; text-decoration: none !important; transition: background-color 0.2s ease; white-space: nowrap; margin-left: 12px; } .cn-btn-app:hover { background-color: #a8392b; color: #FAF7F2 !important; } /* Ocultar en móvil (el drawer ya tiene su propio enlace) */ @media (max-width: 767px) { .cn-btn-app { display: none; } } /* Móvil — drawer */ .cn-drawer-btn-app { display: flex !important; justify-content: center !important; align-items: center !important; gap: 10px !important; background-color: #C45141; color: #FAF7F2 !important; font-family: 'Archivo', sans-serif; font-weight: 700; padding: 14px 28px !important; border-radius: 6px; text-decoration: none !important; margin-top: 12px; transition: background-color 0.2s ease; } .cn-drawer-btn-app:hover { background-color: #a8392b; } .cn-drawer-btn-app span:first-child { color: #FAF7F2; } .cn-drawer-btn-app .cn-arrow { color: #FAF7F2; opacity: 0.8; } .cn-logo-img { height: 40px; width: auto; display: block; } /* Nav — fondo oscuro */ .cn-nav { background-color: #1E1F1E; } /* Enlaces del menú en blanco */ .cn-nav-main .cn-nav-list a, .cn-nav-main a { color: #FAF7F2; } .cn-nav-main .cn-nav-list a:hover, .cn-nav-main a:hover { color: #C45141; } /* Hamburguesa en blanco para móvil */ .cn-hamburger span { background-color: #FAF7F2; }