/* The two record pages — /river-water-levels-by-month and /how-far-ahead-river-levels-are-forecast. ============================================================================================ A SEPARATE FILE, for the reason routes.RECORD_STYLESHEET states and for the reason ports.css states before it: style.css is served at a URL built from its own bytes, so a rule added there changes the in the head of every page this site publishes, and seo.css would do the same to the four river pages and the FAQ. Two new pages must not move six old ones. Every selector is scoped under `.record-page`, a wrapper both templates put around their own content, so this file cannot reach a page that does not ask for it and no tag changed. NOTHING HERE INVENTS A LOOK. The colours and the rhythm are style.css's own tokens — navy, ink, ink-soft, warm, warm-line, quiet. The month table is the one component this file really adds, and it is built to do the one thing a table of twelve rows has to do on a phone: stay readable without becoming a horizontal scroll of numbers nobody can line up. Reading copy stays at or above 16px, as everywhere else on this site. */ /* ---- shell ------------------------------------------------------------------------------- */ .record-page { padding-bottom: 2.5rem; } .record-head { margin: 0 0 1.6rem; } .record-page h1 { margin: 0 0 .5rem; line-height: 1.18; } .record-page .lede { margin: 0 0 .6rem; max-width: 62ch; color: var(--ink-soft); font-size: 1.05rem; } .record-page h2 { margin: 2.2rem 0 .5rem; line-height: 1.25; } .record-page h3 { margin: 1.6rem 0 .4rem; line-height: 1.3; } .record-page p { max-width: 68ch; } /* ---- the claim limit, stated where it is read and not in a footer ------------------------- */ .record-limits { margin: 1.2rem 0 2rem; padding: .9rem 1rem; border-left: 3px solid var(--warm-line); background: var(--warm); color: var(--ink-soft); font-size: .96rem; max-width: 68ch; } /* ---- one gauge's twelve months ------------------------------------------------------------ */ .record-gauge { margin: 0 0 2.4rem; padding: 0 0 1.6rem; border-bottom: 1px solid var(--warm-line); } .record-gauge:last-of-type { border-bottom: 0; } .record-gauge-sub { margin: 0 0 .8rem; color: var(--ink-soft); font-size: .95rem; } .record-table-wrap { overflow-x: auto; } .record-table { border-collapse: collapse; width: 100%; min-width: 30rem; font-variant-numeric: tabular-nums; } .record-table caption { text-align: left; padding: 0 0 .5rem; color: var(--ink-soft); font-size: .93rem; } .record-table th, .record-table td { padding: .38rem .7rem .38rem 0; text-align: left; border-bottom: 1px solid var(--warm-line); font-size: .98rem; } .record-table thead th { border-bottom: 2px solid var(--warm-line); font-weight: 600; color: var(--ink-soft); font-size: .9rem; } .record-table td.num, .record-table th.num { text-align: right; padding-right: 1.1rem; } .record-table tr.is-lowest td { font-weight: 600; } .record-source { margin: .9rem 0 0; color: var(--quiet, var(--ink-soft)); font-size: .86rem; max-width: 76ch; } /* ---- the horizon groups -------------------------------------------------------------------- */ .record-group { margin: 0 0 2rem; } .record-group-lead { margin: 0 0 .9rem; color: var(--ink-soft); } .record-links { list-style: none; margin: 0; padding: 0; } .record-links li { margin: 0 0 1rem; padding: 0 0 .9rem; border-bottom: 1px solid var(--warm-line); } .record-links li:last-child { border-bottom: 0; } .record-link-what { margin: .3rem 0 0; color: var(--ink-soft); font-size: .95rem; } .record-link-meta { margin: .25rem 0 0; color: var(--quiet, var(--ink-soft)); font-size: .86rem; } /* ---- the way on ---------------------------------------------------------------------------- */ .record-next { margin: 2.2rem 0 0; } .record-next ul { margin: .5rem 0 0; padding-left: 1.2rem; } .record-next li { margin: 0 0 .35rem; } @media (max-width: 30rem) { .record-table th, .record-table td { padding-right: .55rem; font-size: .93rem; } }