/* Uutisapuri — implementation of the Claude Design doc, palette 5b ("Uutisvahti Final 5b.dc.html" in design/, kept under its original name). Design rules being honoured here, do not "clean these up": - Antiikva (Source Serif 4) = our words. Groteski (Source Sans 3) = quotes and machinery. - Everything below the header sizes in em off --base, so the density toggle is one variable. - One 620px measure, on desktop too. Extra width goes to margin, never to line length. - Colour lives in STRUCTURE, not text: navy day-divider bars, vermilion outbound links, an amber paywall band. The accent appears ONLY on outbound links and honesty markers. Never colour body copy. */ :root { --base: 16.5px; /* Väljä. Tiivis = 15px, set by app.js on */ --measure: 620px; /* Palette 5b. The design's own statement of intent: "Lähes musta muste puhtaan valkoisella kortilla (19:1). Väri on rakenteessa, ei tekstissä: päiväerottimet ovat täysleveitä laivastonsinisiä palkkeja. Uloslinkki vermilion, maksumuurimerkintä lämmin keltainen nauha." Near-black on pure white, and COLOUR LIVES IN STRUCTURE, NOT TEXT — navy day-divider bars, vermilion outbound links, an amber paywall band. Do not start colouring body copy; that is the rule this palette is built on. */ --paper: #F4F5F8; /* page + masthead */ --card: #FFFFFF; /* pure white, 19:1 against --ink */ --cluster: #ECEEF3; --canvas: #E8EAF0; /* share-card surround only */ --ink: #0C1017; --body: #262C33; --muted: #3E454D; /* the quoted original headline */ --muted-2: #4E545C; /* meta, machinery */ --navy: #16305C; /* structural bars only — never text */ --accent: #C0341B; /* vermilion: outbound links + honesty markers */ --accent-h: #9A2915; --hair: #E3E5EB; --rule: #C8CBD4; --edge: #D6D9E1; --edge-2: #D8DBE3; --chip-off: #BFC3CD; --btn-edge: #B9BDC7; --flag-bg: #FFF3D6; /* warm amber band — the paywall marker */ --flag-fg: #3E2F00; --on-navy: #FFFFFF; --on-ink: #F4F5F8; --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif; --sans: 'Source Sans 3', system-ui, -apple-system, sans-serif; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #0D1017; --card: #151A22; --cluster: #1A2029; --canvas: #0C1017; --ink: #E9EBEF; --body: #C6CBD3; --muted: #A5ACB6; --muted-2: #8C939C; --navy: #2A4B85; --accent: #F2734F; --accent-h: #F79878; --hair: #252C36; --rule: #252C36; --edge: #252C36; --edge-2: #303844; --chip-off: #3A4049; --btn-edge: #3A4049; --flag-bg: #2A2312; --flag-fg: #E8DDC4; --on-navy: #FFFFFF; --on-ink: #0C1017; } } :root[data-theme="dark"] { --paper: #0D1017; --card: #151A22; --cluster: #1A2029; --canvas: #0C1017; --ink: #E9EBEF; --body: #C6CBD3; --muted: #A5ACB6; --muted-2: #8C939C; --navy: #2A4B85; --accent: #F2734F; --accent-h: #F79878; --hair: #252C36; --rule: #252C36; --edge: #252C36; --edge-2: #303844; --chip-off: #3A4049; --btn-edge: #3A4049; --flag-bg: #2A2312; --flag-fg: #E8DDC4; --on-navy: #FFFFFF; --on-ink: #0C1017; } * { box-sizing: border-box; } body { margin: 0; background: var(--paper); color: var(--body); font-family: var(--sans); -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-h); text-decoration: underline; text-underline-offset: 2px; } /* ---------------------------------------------------------------- header */ .masthead { position: sticky; top: 0; z-index: 5; background: var(--paper); border-bottom: 1px solid var(--rule); } .masthead__inner { max-width: 960px; margin: 0 auto; padding: 14px 16px 0; } .brand { display: flex; align-items: baseline; gap: 5px; } .brand__name { font: 700 21px/1 var(--serif); letter-spacing: -.015em; color: var(--ink); } .brand__dot { width: 5px; height: 5px; background: var(--accent); border-radius: 50%; margin-bottom: 2px; flex: none; } .brand__line { margin: 4px 0 0; font: 400 12.5px/1.35 var(--serif); color: var(--muted); } .masthead__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .density { display: flex; border: 1px solid var(--chip-off); border-radius: 2px; overflow: hidden; flex: none; } .density button { min-height: 34px; padding: 0 9px; border: 0; cursor: pointer; font: 600 11px/1 var(--sans); background: transparent; color: var(--muted-2); } .density button + button { border-left: 1px solid var(--chip-off); } .density button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); } .filter-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 40px; margin-top: 8px; padding: 0; border: 0; background: transparent; cursor: pointer; font: 400 12px/1 var(--sans); color: var(--muted-2); } .filter-toggle__caret { font-size: 10px; } .chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 12px; } .chips[hidden] { display: none; } .chip { min-height: 36px; padding: 0 10px; border-radius: 2px; cursor: pointer; font: 600 11.5px/1 var(--sans); border: 1px solid var(--chip-off); background: transparent; color: var(--muted-2); } .chip[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); } .countline { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 0 9px; font: 400 11px/1.4 var(--sans); color: var(--muted-2); } /* ------------------------------------------------------------------ feed */ .wrap { max-width: 960px; margin: 0 auto; padding: 0 16px; } .feed { max-width: var(--measure); font-size: var(--base); padding-bottom: 18px; } .legend { padding: 2px 0 8px; font: 400 11.5px/1.45 var(--sans); color: var(--muted-2); border-bottom: 1px solid var(--hair); } .daydivider { background: var(--navy); padding: .5em .75em; margin: 1.5em 0 .85em; } .daydivider span { font: 600 .72em/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--on-navy); } /* ------------------------------------------------------------ card: pair */ .card { background: var(--card); border: 1px solid var(--edge); border-radius: 2px; padding: 1em 1.05em .75em; margin-bottom: .85em; } /* The quoted original. Groteski, muted — it is evidence, not our voice. */ .card__orig { margin: 0; font: 400 .95em/1.38 var(--sans); color: var(--muted); text-wrap: pretty; overflow-wrap: break-word; } /* The hinge. "Eli" only on the first pair-card of each day group; the rest get a plain rule. */ .hinge { display: flex; align-items: center; gap: .55em; margin: .68em 0 .58em; } .hinge span:first-child, .hinge span:last-child { flex: 1; height: 1px; background: var(--hair); } .hinge__word { flex: none !important; height: auto !important; background: none !important; font: 600 .66em/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); } .hinge--plain { height: 1px; background: var(--hair); margin: .68em 0 .58em; } /* The honest headline. Antiikva — our words, the answer to the quote above. */ .card__honest { margin: 0; font: 600 1.3em/1.22 var(--serif); letter-spacing: -.006em; color: var(--ink); text-wrap: pretty; overflow-wrap: break-word; } .card__sum { margin: .7em 0 0; font: 400 .96em/1.55 var(--serif); color: var(--body); text-wrap: pretty; } /* Honesty marker, not an error state. */ .flag { margin-top: .75em; padding: .6em .7em; background: var(--flag-bg); border-left: 2px solid var(--accent); } .flag__label { font: 600 .68em/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: .35em; } .flag p { margin: 0; font: 400 .87em/1.45 var(--sans); color: var(--flag-fg); text-wrap: pretty; } .card__foot { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin-top: .8em; padding-top: .5em; border-top: 1px solid var(--hair); } .card__meta { font: 400 .78em/1.3 var(--sans); color: var(--muted-2); } .card__out { display: inline-flex; align-items: center; gap: .28em; min-height: 44px; font: 600 .82em/1 var(--sans); color: var(--accent); white-space: nowrap; } .card__out .arrow { font-size: 1.05em; } /* --------------------------------------------------------- card: cluster */ /* The one place the order inverts: one answer, many quotes. */ .cluster { background: var(--cluster); border-color: var(--edge-2); } .cluster__label { display: flex; align-items: center; gap: .45em; margin-bottom: .55em; } .cluster__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: none; } .cluster__label span:last-child { font: 600 .68em/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); } .cluster__sources { margin-top: .8em; } .cluster__source { display: block; padding: .6em 0; border-top: 1px solid var(--edge-2); min-height: 44px; } .cluster__source-name { display: block; font: 600 .7em/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); margin-bottom: .3em; } .cluster__source-title { display: block; font: 400 .9em/1.38 var(--sans); color: var(--muted); text-wrap: pretty; overflow-wrap: break-word; } .cluster__time { margin-top: .65em; font: 400 .78em/1.3 var(--sans); color: var(--muted-2); } /* --------------------------------------------------------- card: listing */ /* No card surface and no antiikva — we have no words of our own for these. */ .listing { border: 1px solid var(--rule); border-radius: 2px; padding: .85em 1em .9em; margin-bottom: .85em; } .listing__head { display: flex; align-items: baseline; justify-content: space-between; gap: .8em; margin-bottom: .15em; } .listing__head span:first-child { font: 600 .68em/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); } .listing__head span:last-child { font: 400 .74em/1.3 var(--sans); color: var(--muted-2); } .listing__item { padding: .6em 0 .5em; border-top: 1px solid var(--hair); margin-top: .5em; } .listing__meta { display: flex; align-items: baseline; gap: .5em; margin-bottom: .25em; } .listing__section { font: 600 .68em/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); } .listing__src { font: 400 .72em/1 var(--sans); color: var(--muted-2); } .listing__title { display: block; font: 400 .93em/1.4 var(--sans); color: var(--body); min-height: 44px; text-wrap: pretty; overflow-wrap: break-word; } /* ------------------------------------------------------------------ tail */ .more { display: block; width: 100%; min-height: 48px; margin: 1.2em 0 .4em; border: 1px solid var(--btn-edge); background: transparent; border-radius: 2px; cursor: pointer; font: 600 .85em/1 var(--sans); color: var(--body); } .colophon { margin: .8em 0 0; font: 400 .78em/1.5 var(--sans); color: var(--muted-2); text-align: center; } .empty { padding: 2.5em 0; text-align: center; font: 400 .95em/1.5 var(--serif); color: var(--muted); } /* --------------------------------------------------------------- desktop */ @media (min-width: 760px) { .masthead__inner { padding: 18px 24px 0; } .wrap { padding: 0 24px; } .brand__name { font-size: 25px; } .brand__dot { width: 6px; height: 6px; margin-bottom: 3px; } /* Brand and tagline sit on one line; controls move up beside them. */ .masthead__top { align-items: flex-end; gap: 24px; } .masthead__id { display: flex; align-items: baseline; gap: 14px; } .brand__line { margin: 0; font-size: 14px; } .masthead__controls { display: flex; align-items: center; gap: 14px; } .masthead__count { font: 400 12px/1 var(--sans); color: var(--muted-2); } .density button { min-height: 32px; padding: 0 11px; font-size: 11.5px; } .filter-toggle { display: none; } .chips { padding: 12px 0 13px; align-items: center; gap: 7px; } .chips[hidden] { display: flex; } /* always open on desktop */ .chips__label { font: 400 11.5px/1 var(--sans); color: var(--muted-2); margin-right: 3px; } .chip { min-height: 30px; } .countline { display: none; } /* moved into the masthead */ .legend { padding: 14px 0 10px; font-size: 12px; } .card { padding: 1.05em 1.2em .8em; margin-bottom: .9em; } .card__honest { font-size: 1.42em; letter-spacing: -.008em; line-height: 1.2; } .card__sum { margin-top: .72em; } .daydivider { margin: 1.6em 0 .9em; } /* padding stays .5em .75em */ /* Source name gets its own column once there is room for one. */ .cluster__source, .listing__item { display: grid; grid-template-columns: 130px 1fr; gap: 1em; align-items: baseline; } .cluster__source-name, .listing__section { line-height: 1.4; } .listing__meta { display: block; } .listing__src { display: block; line-height: 1.4; } .listing { padding: .9em 1.2em 1em; margin-bottom: .9em; } .colophon { text-align: left; margin: .9em 0 2em; } } @media (max-width: 759px) { .chips__label { display: none; } .masthead__count { display: none; } } /* ---------------------------------------------- free-to-read guarantee */ /* The promise sits under the legend, where every reader sees it. It is only true because detect_access() demands positive evidence before calling an article free — "unknown" is never shown in the default view. */ .promise { margin: .55em 0 0; font: 400 .8em/1.45 var(--sans); color: var(--muted-2); padding-left: .75em; border-left: 2px solid var(--accent); } /* A paywall marker is an honesty marker, so it earns the accent — same justification as the "Osittain selvitetty" flag. Only gated items are labelled; marking every free card would shout the quiet part. */ .gated { background: var(--flag-bg); color: var(--flag-fg); padding: .1em .4em; border-radius: 2px; white-space: nowrap; } .access-toggle { display: flex; border: 1px solid var(--chip-off); border-radius: 2px; overflow: hidden; flex: none; } .access-toggle button { min-height: 36px; padding: 0 10px; border: 0; cursor: pointer; font: 600 11.5px/1 var(--sans); background: transparent; color: var(--muted-2); } .access-toggle button + button { border-left: 1px solid var(--chip-off); } .access-toggle button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); } @media (min-width: 760px) { .promise { font-size: 12px; } .access-toggle button { min-height: 30px; } /* Push the source chips onto their own line so the guarantee reads as a mode, not as one more filter among seven. */ .access-toggle { margin-right: .75em; } }