/* GAS publication prototype — ONE visual identity: the market newspaper (owner, 2026-08-01 — the two-temperatures experiment is retired; the paper has one image). Light/dark follows the READER'S SYSTEM via prefers-color-scheme — same warm newspaper, evening ink. Amendment 4 (a11y): contrast ≥ 7:1 body text both schemes; marks never color-only (labels adjacent); no animation (reduced-motion trivially satisfied); focus visible; layouts stack on narrow screens. GETA-101 (editorial weight): the reader sees a story, never a report — Type A hero price + one CTA, Type B market quotes with dotted leaders, Type C campaign lists inside the Coupons & Campaigns department, Type D watch boxes with no CTA. The offers grid and BEST PRICE tag are retired. */ :root { --paper: #faf6ef; --ink: #1c1917; --muted: #57534e; --accent: #92400e; /* patch-cable amber, AA on paper */ --rule: #d6cfc2; --wash: #f3ede1; --serif: "Iowan Old Style", "Palatino Linotype", Georgia, serif; --sans: "Avenir Next", "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, "SF Mono", Menlo, monospace; color-scheme: light dark; } /* theme: AUTO follows the system; the reader may pin light or dark via the nav button (data-theme on , localStorage) */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #191512; --ink: #ece4d8; --muted: #a89f93; --accent: #e08b2d; /* amber brightened for dark paper */ --rule: #3c352e; --wash: #221d18; } } :root[data-theme="dark"] { --paper: #191512; --ink: #ece4d8; --muted: #a89f93; --accent: #e08b2d; --rule: #3c352e; --wash: #221d18; color-scheme: dark; } :root[data-theme="light"] { color-scheme: light; } * { box-sizing: border-box; } body { margin: 0 auto; max-width: 64rem; padding: 0 1.25rem 4rem; background: var(--paper); color: var(--ink); font: 1.0625rem/1.55 var(--serif); } /* links belong to the paper's palette — VISITED included: the browser's default purple never appears (the archive-listing lesson). More specific rules (nav, quiet, hero CTA) override below. */ a, a:visited { color: var(--accent); } /* landmarks */ header { padding-top: 1rem; border-bottom: 3px double var(--ink); margin-bottom: 2rem; } footer { margin-top: 4rem; border-top: 1px solid var(--rule); padding-top: 1rem; color: var(--muted); font-size: .9rem; } .masthead { font-size: 4.5rem; font-weight: 800; letter-spacing: -.04em; margin: 0; line-height: 1; font-family: var(--serif); } .masthead a { color: inherit; text-decoration: none; } .masthead-sub { margin: .2rem 0 .9rem; color: var(--muted); font-style: italic; } nav { font-family: var(--sans); font-size: .9rem; padding-bottom: .8rem; } nav a, nav a:visited { color: var(--ink); } #theme { font: inherit; border: 1px solid var(--rule); background: var(--wash); color: var(--ink); padding: .1rem .5rem; cursor: pointer; } a:focus-visible, summary:focus-visible, #theme:focus-visible, .copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* headlines */ h1 { font-size: 2.3rem; line-height: 1.12; letter-spacing: -.015em; margin: 0 0 .4rem; font-weight: 700; } h2 { font-size: 1.35rem; line-height: 1.2; margin: 0 0 .3rem; } h3 { font-size: 1.12rem; line-height: 1.25; margin: 0 0 .3rem; } .standfirst { font-size: 1.15rem; color: var(--muted); margin: 0 0 .8rem; } /* sections */ .sec { border-top: 1px solid var(--rule); padding-top: 1.1rem; margin-top: 1.6rem; } .col-main > .sec:first-child { border-top: none; padding-top: 0; margin-top: 0; } .sec.internal { background: var(--wash); padding: 1.1rem; border: 1px dashed var(--muted); border-top: 1px dashed var(--muted); } .watermark { font: .72rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin: 0 0 .5rem; } .why { margin: .4rem 0 .9rem; padding-left: 1.1rem; } .why li { margin: .15rem 0; } /* Layer 2: the compact trust label — small caps, text only, no glyphs */ .trust { font-family: var(--sans); font-size: .78rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin: .5rem 0 .3rem; } .brief { margin: .25rem 0; } .disclosure { margin: .3rem 0 .2rem; padding-left: 1.1rem; } .disclosure li { margin: .12rem 0; font-variant-numeric: tabular-nums; } .ev-line { color: var(--muted); font-family: var(--sans); font-size: .88rem; font-variant-numeric: tabular-nums; } details { font-family: var(--sans); font-size: .88rem; color: var(--muted); margin: .3rem 0 .8rem; } summary { cursor: pointer; color: var(--ink); } /* quiet links — present, never shouting (footnotes, market quotes) */ a.quiet, a.quiet:visited { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--muted); } a.quiet:hover, a.quiet:focus-visible { color: var(--accent); border-bottom-style: solid; } /* ----- Type A: buy — the price dominates, one action --------------- */ .hero { margin: .7rem 0 .2rem; } .hero-price { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; margin: 0; font-variant-numeric: tabular-nums; } .hero-at { font-size: 1rem; font-weight: 400; letter-spacing: 0; color: var(--muted); } .hero-cta { margin: .6rem 0 0; } .hero-cta a { display: inline-block; font-family: var(--sans); font-weight: 600; font-size: 1rem; color: var(--accent); border: 1.5px solid var(--accent); padding: .45rem 1rem; text-decoration: none; } .hero-cta a:hover, .hero-cta a:focus-visible { background: var(--accent); color: var(--paper); } .also { font-family: var(--sans); font-size: .84rem; color: var(--muted); font-variant-numeric: tabular-nums; margin: .7rem 0 .2rem; } /* ----- opportunity: today's level vs the wider market, one action --- */ .quote-label { font-family: var(--sans); font-size: .74rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin: .7rem 0 .05rem; } .lay-opportunity .hero-cta { margin: .9rem 0 .2rem; } /* ----- Type B: observation — newspaper market quotes ---------------- */ .quotes { list-style: none; margin: .6rem 0 .9rem; padding: 0; max-width: 24rem; font-family: var(--sans); font-size: .95rem; } .quotes li { display: flex; align-items: baseline; gap: .45rem; padding: .16rem 0; } .quotes .dots { flex: 1; border-bottom: 1px dotted var(--muted); transform: translateY(-.3em); min-width: 1.5rem; } .quotes .num { font-variant-numeric: tabular-nums; } /* ----- Type D: watch — no CTA at all -------------------------------- */ .watch-note { font-family: var(--sans); font-size: .85rem; font-style: italic; color: var(--muted); margin: .4rem 0 0; } .lay-watch .quotes { max-width: none; } /* ----- the top grid: stories main, watch aside (owner mock) --------- */ .top-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(14rem, 19rem); gap: 2.4rem; align-items: start; } .col-main { max-width: 44rem; } .col-side .sec { margin-top: 0; } .col-side .sec + .sec { margin-top: 1.2rem; } .col-side h2 { font-size: 1.2rem; } .col-side .standfirst { font-size: .98rem; } @media (max-width: 54rem) { .top-grid { grid-template-columns: 1fr; } } /* ----- Type C: the Coupons & Campaigns department (owner mock) ------ */ .dept { border-top: 3px double var(--ink); margin-top: 2.4rem; padding-top: 1rem; } .dept-h { font-family: var(--sans); font-size: 1rem; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 .15rem; } .new-badge { font: .62rem/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; background: var(--accent); color: var(--paper); padding: .08rem .38rem; margin-left: .6rem; vertical-align: .18em; } .dept-sub { color: var(--muted); font-size: .95rem; margin: 0 0 1rem; } .dept-grid { display: grid; gap: 1.6rem; align-items: start; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); } /* a campaign is an ARTICLE: no box, whitespace does the work (GETA-104). A coupon is a UTILITY: one soft card, no border stack. */ .sec.camp-card { border-top: none; padding-top: 0; margin-top: 0; } .sec.card { border: none; background: var(--wash); padding: 1rem 1.1rem; margin-top: 0; } .camp-card { grid-row: span 2; } .kicker { font: .68rem/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin: 0 0 .45rem; } /* campaign witnesses — the CODE is the hero, the store its caption; whitespace separates blocks, never rules (GETA-104) */ .camp { list-style: none; margin: .7rem 0 .3rem; padding: 0; font-family: var(--sans); } .camp li { display: flex; flex-direction: column; gap: .05rem; padding: .45rem 0; } .camp .code { font: .95rem/1.45 var(--mono); user-select: all; overflow-wrap: anywhere; } .camp .c-store { color: var(--muted); font-size: .8rem; } /* the coupon utility card: code as headline, then the essentials */ .code-card h3 { font-family: var(--mono); font-size: 1rem; letter-spacing: .02em; overflow-wrap: anywhere; user-select: all; } .code-card .standfirst { font-size: 1rem; margin-bottom: .3rem; } .valid { color: var(--muted); font-family: var(--sans); font-size: .85rem; margin: .1rem 0 .3rem; } .copy-row { margin: .6rem 0 .1rem; } .copy { font-family: var(--sans); font-size: .85rem; font-weight: 600; color: var(--accent); background: none; border: 1.5px solid var(--accent); padding: .35rem .8rem; cursor: pointer; } .copy:hover, .copy:focus-visible { background: var(--accent); color: var(--paper); } /* the brief and other tail sections keep the reading measure */ .sec-market_state, .sec-quiet, .read-more { max-width: 44rem; } /* colophon */ .ed-line { font: .72rem/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 0 0 .6rem; } .ed-line span { text-transform: none; letter-spacing: 0; font-family: var(--serif); font-style: italic; } .archive li { margin: .5rem 0; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }