/* ============================================================ NEWS TREND TODAY — Global Styles Migrated from dispatch.css — same design, CSS Modules ready ============================================================ */ /* Fonts are self-hosted via next/font (app/layout.js) — exposed as --font-grotesk / --font-space-mono on . */ :root { --paper: oklch(0.975 0.004 95); --paper-2: oklch(0.945 0.006 95); --ink: oklch(0.165 0.012 60); --ink-2: oklch(0.40 0.012 60); --ink-3: oklch(0.58 0.010 60); --line: oklch(0.165 0.012 60); --line-2: oklch(0.80 0.010 80); --acc: oklch(0.605 0.226 26); --acc-2: oklch(0.62 0.20 28); --on-acc: oklch(0.985 0.004 95); --maxw: 1440px; --pad: clamp(16px, 3.2vw, 40px); --f-disp: var(--font-grotesk), system-ui, sans-serif; --f-mono: var(--font-space-mono), ui-monospace, monospace; --f-body: var(--font-grotesk), system-ui, sans-serif; --up: oklch(0.72 0.16 150); color-scheme: light; } [data-theme='dark'] { --paper: oklch(0.155 0.012 65); --paper-2: oklch(0.205 0.012 65); --ink: oklch(0.955 0.006 90); --ink-2: oklch(0.72 0.010 85); --ink-3: oklch(0.55 0.010 80); --line: oklch(0.955 0.006 90); --line-2: oklch(0.32 0.012 70); --acc: oklch(0.68 0.21 30); --acc-2: oklch(0.70 0.20 32); --on-acc: oklch(0.14 0.012 65); color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--f-body); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-synthesis: none; overflow-x: hidden; /* FIX: prevents mobile horizontal scroll */ transition: background-color .35s ease, color .35s ease; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } ::selection { background: var(--acc); color: var(--on-acc); } /* ── type primitives ── */ .disp { font-family: var(--f-disp); font-weight: 700; letter-spacing: -0.03em; line-height: 0.92; } .mono { font-family: var(--f-mono); } .tag { font-family: var(--f-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .tagBlock { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: var(--ink); color: var(--paper); padding: 4px 9px; } .tagAcc { background: var(--acc) !important; color: var(--on-acc) !important; } /* text-color utilities (replace one-off inline colors) */ .tAcc { color: var(--acc); } .tMuted { color: var(--ink-3); } /* ── layout ── */ .wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); } .hr { height: 0; border: 0; border-top: 1.5px solid var(--line); margin: 0; } .hr2 { height: 0; border: 0; border-top: 1px solid var(--line-2); margin: 0; } /* ── buttons ── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--f-mono); font-weight: 700; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; padding: 13px 22px; border: 1.5px solid var(--ink); background: var(--ink); color: var(--paper); transition: all .15s ease; cursor: pointer; } .btn:hover { background: var(--acc); border-color: var(--acc); color: var(--on-acc); } .btnGhost { background: transparent !important; color: var(--ink) !important; } .btnGhost:hover { background: var(--ink) !important; color: var(--paper) !important; border-color: var(--ink) !important; } /* ── placeholder image ── */ .ph { position: relative; overflow: hidden; background: var(--paper-2); border: 1.5px solid var(--line); background-image: linear-gradient(135deg, transparent 48.5%, var(--line-2) 48.5%, var(--line-2) 51.5%, transparent 51.5%), linear-gradient(45deg, transparent 48.5%, var(--line-2) 48.5%, var(--line-2) 51.5%, transparent 51.5%); display: flex; align-items: center; justify-content: center; } .ph::after { content: attr(data-label); font-family: var(--f-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); background: var(--paper); padding: 4px 8px; border: 1.5px solid var(--line); } /* ── kinetic link ── */ .klink { position: relative; display: inline; background-image: linear-gradient(var(--acc), var(--acc)); background-size: 0% 2px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .3s ease; } .klink:hover { background-size: 100% 2px; } /* ── headline hover ── */ .headline { transition: color .2s ease; cursor: pointer; } .headline:hover { color: var(--acc); } /* ── marquee ── */ .marquee { overflow: hidden; white-space: nowrap; } .marquee > .mqTrack { display: inline-flex; animation: mq 38s linear infinite; } .marquee > .mqTrackSlow { display: inline-flex; animation: mq 80s linear infinite; } .marquee:hover > .mqTrack, .marquee:hover > .mqTrackSlow { animation-play-state: paused; } @keyframes mq { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .marquee > .mqTrack, .marquee > .mqTrackSlow { animation: none; } } /* ── index numeral ── */ .idx { font-family: var(--f-mono); font-weight: 700; line-height: 0.8; color: var(--ink-3); } /* ── bookmark button ── */ .bk { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1.5px solid var(--line); background: var(--paper); color: var(--ink); transition: all .15s ease; cursor: pointer; } .bk:hover { background: var(--ink); color: var(--paper); } .bkOn { background: var(--acc) !important; border-color: var(--acc) !important; color: var(--on-acc) !important; } /* ── ad ── */ .ad { position: relative; border: 1.5px dashed var(--line); display: flex; align-items: center; justify-content: center; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--ink-3); text-transform: uppercase; } /* ── skeleton shimmer ── */ .skel { background: var(--paper-2); border: 1.5px solid var(--line); position: relative; overflow: hidden; } .skel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.08) 50%, transparent 100%); animation: shimmer 1.4s infinite; } @keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } } /* ── line clamp ── */ .clamp1, .clamp2, .clamp3, .clamp4 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .clamp1 { -webkit-line-clamp: 1; } .clamp2 { -webkit-line-clamp: 2; } .clamp3 { -webkit-line-clamp: 3; } .clamp4 { -webkit-line-clamp: 4; } .disp.clamp1, .disp.clamp2, .disp.clamp3, .disp.clamp4 { line-height: 1.0 !important; } /* ── responsive ── */ .hideSm {} .showSm { display: none !important; } @media (max-width: 760px) { .hideSm { display: none !important; } .showSm { display: inline-flex !important; } } @media (max-width: 600px) { .wrap { padding-inline: 14px; } input, textarea, select { font-size: 16px !important; } } /* ── scrollbar ── */ * { scrollbar-width: thin; scrollbar-color: var(--ink) transparent; } ::-webkit-scrollbar { height: 8px; width: 8px; } ::-webkit-scrollbar-thumb { background: var(--ink); } /* ── blink animation ── */ @keyframes blink { 50% { opacity: 0; } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }