/* ============================================================================
The three price pages — /prices/weekly, /prices/monthly, /prices/futures.
Loaded beside editorial.css, which already carries .ed-wrap and the hero.
========================================================================= */
/* The table's three navy stops. Named here rather than inlined, because the
head, the band and the selected column have to stay the same navy as each
other and as the site's blue -- three hexes in three rules is how they come
to disagree. */
.pr-wrap{--pr-head:#2A4D8B;--pr-head-on:#1E3A6E;--pr-col:#E3F2FD;
padding-bottom:48px}
/* ---------- The three siblings ----------
Always on screen, because people compare the three and the old site made
that a hunt through a menu. Links, not a tab widget: three URLs that have
to be shareable. */
.pr-kinds{display:flex;gap:4px;flex-wrap:wrap;margin:0 0 18px;
border-bottom:1px solid var(--line);padding-bottom:0}
.pr-kind{display:inline-block;padding:10px 16px;font-size:14px;font-weight:700;
color:var(--mute);text-decoration:none;border-bottom:3px solid transparent;
margin-bottom:-1px;white-space:nowrap}
.pr-kind:hover{color:var(--ink)}
.pr-kind.on{color:var(--blue);border-bottom-color:var(--blue)}
.pr-kind:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:6px}
/* ---------- Heading, and the link to the other view ----------
The newsroom put a 280px PNG of a bar chart up here linking to a separate
"- Graph" page. Same place, same job, as a link to ?view=chart. */
.pr-head{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;
flex-wrap:wrap;margin:0 0 14px}
.pr-head h2{margin:0;font-size:clamp(20px,2.4vw,27px);line-height:1.2;
font-weight:800;color:var(--blue)}
.pr-graph{display:inline-flex;align-items:center;gap:8px;font-size:14px;
font-weight:700;color:var(--blue);text-decoration:underline;
text-underline-offset:3px;white-space:nowrap}
.pr-graph:hover{color:var(--ink)}
.pr-graph:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}
.pr-gic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;
stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* ---------- Prev | date | Next ----------
Wraps rather than scrolls: at 360px the two steps and the select are wider
than the column, and a horizontal scrollbar on a control row is how the
directory's view toggle ended up off the right edge. */
.pr-nav{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 14px}
.pr-step{display:inline-flex;align-items:center;padding:8px 14px;font-size:13.5px;
font-weight:700;color:var(--ink);text-decoration:none;background:#fff;
border:1px solid var(--line);border-radius:10px;white-space:nowrap}
.pr-step:hover{border-color:var(--blue);color:var(--blue)}
.pr-step:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
/* At either end of the archive. Dimmed AND not a link, so it cannot be
tabbed to or clicked — a disabled-looking that still navigates is
worse than no affordance at all. */
.pr-step.off{color:var(--mute);background:var(--bg);cursor:default;opacity:.55}
.pr-when{display:flex;gap:8px;align-items:center;margin:0}
.pr-when select{font:inherit;font-size:13.5px;font-weight:600;padding:8px 10px;
border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);
max-width:190px}
.pr-when select:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
/* ---------- The table ----------
The newsroom's own: a solid navy head, centred figures, the product and
origin left and ruled off from the numbers. Rebuilt rather than redesigned
-- readers have used this layout for years. */
/* `min-width:0` is not decoration. .ed-wrap is a flex column, and a flex
item's default min-width is `auto` — it refuses to shrink below its
content. Without this the box grows to the table's full width and
overflow-x never fires: the PAGE scrolls sideways instead of the table,
which is the one thing a wide table on a phone must not do. */
.pr-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;min-width:0;max-width:100%;
border:1px solid var(--line);border-radius:14px;background:#fff}
.pr-tbl{width:100%;border-collapse:collapse;font-size:14px}
.pr-tbl th,.pr-tbl td{padding:11px 14px;text-align:center;white-space:nowrap}
.pr-tbl thead th{background:var(--pr-head);color:#fff;font-weight:700;
font-size:13.5px;letter-spacing:.01em;
/* The futures headings are whole sentences and the weekly ones are dates;
only the long ones need two lines, so wrapping is allowed in the head
and nowhere else. */
white-space:normal;line-height:1.3}
.pr-tbl tbody tr:nth-child(even){background:#F8FAFC}
.pr-tbl tbody tr:hover{background:var(--blue-10)}
.pr-tbl td.num{font-variant-numeric:tabular-nums}
/* Product and origin: left, and the pair ruled off as one block. */
.pr-tbl .pr-prod,.pr-tbl .pr-orig{text-align:left}
.pr-tbl td.pr-prod{font-weight:600}
.pr-tbl .pr-orig{border-right:1px solid var(--line)}
.pr-tbl thead .pr-orig{border-right-color:rgba(255,255,255,.35)}
/* The selected column. Tinted and bold, so four weeks of figures still read
as "this is the one you asked for". */
.pr-tbl th.pr-on{background:var(--pr-head-on)}
.pr-tbl td.pr-on{background:var(--pr-col);font-weight:700}
.pr-tbl tbody tr:nth-child(even) td.pr-on{background:var(--pr-col)}
.pr-tbl tbody tr:hover td.pr-on{background:#CFE4F7}
/* The band across the table -- "Benchmark Prices". A | , not
a styled | : it heads the rows under it and a screen reader should say
so. */
.pr-tbl tr.pr-band th{background:var(--pr-head);color:#fff;text-align:left;
font-weight:700;font-size:13.5px}
/* Up and down on a percentage. The -ink tokens, not the solid colours:
6.38:1 and 7.00:1 on white against 5.18 and 5.02 (CLAUDE.md). The glyph
beside them is what carries the direction where colour cannot. */
.pr-tbl td.up{color:var(--sell-ink)}
.pr-tbl td.dn{color:var(--buy-ink)}
/* A price a reader may not see. Three dots and not a blurred number: there is
no number here to blur, and inventing one to smudge would be a lie about
what the page is withholding. */
.pr-hid{display:inline-block;color:var(--mute);letter-spacing:3px;
font-weight:700;cursor:help}
.pr-foot{margin-top:12px}
/* ---------- The chart ----------
Google Charts draws the plot itself — title, axes, legend and all — so
nothing here styles a line or a tick. What is here is the control panel
above it, which is ours, and the box the chart sits in.
The hand-rolled SVG rules this replaces (.pc-svg, .pc-grid, .pc-line and
the toggle legend) are gone with the code that emitted them; see the note
at the top of public/js/prices.js for why that trade reversed. */
.pr-chart{background:#fff;border:1px solid var(--line);border-radius:16px;
padding:16px;min-width:0}
/* The panel: checkboxes, then the range buttons under them, as the
newsroom's own graph pages had it. */
.pc-controls{border-bottom:1px solid var(--line);padding-bottom:12px;margin:0 0 14px}
/* A wrapping row, not the newsroom's three-rows-filling-by-column grid.
That grid is `grid-auto-flow:column` over three fixed rows, and a CSS grid
flowing by column CANNOT wrap — it just keeps adding columns. On monthly
that is sixteen boxes whose widest is "Hot Dip Galv. Coils, HR base, 2mm,
275g/m2": the strip ran past the panel and clipped "Stainless HR Coils
316L base" to "Stainl", which is the one control a reader has to find to
put stainless on the chart.
Wrapping keeps every name whole at every width and keeps sort order. The
only thing lost is the fill direction — the newsroom's read down then
across, this reads across then down, which is the direction everything
else on this page already reads in. */
.pc-items{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 12px;min-width:0}
/* The pills are `.pill-opt` from mesteel.css — this page only SIZES them.
`.sm` is a dense panel of up to fifteen, not the handful of large touch
targets the register wizard shows, so the pill comes down from 40px to 32
and the label from 13.5 to 12.5. No colour is declared here: the tint, the
tick and the partial dash are the component's, and a second definition of
them is how two pills on one site come to look different. */
.pc-items .pill-opt.sm{min-height:32px;padding:0 11px;font-size:12.5px;gap:5px}
.pc-items .pill-opt.sm .tick{width:14px;height:14px;font-size:9px;margin-left:-3px}
/* The range buttons are `.seg2`, the site's one-of-N segmented toggle. The
legacy page's own #007bff pill was the same idea in somebody else's blue.
Nothing here restyles it; `.pc-ranges` only lets the group wrap, because
five options at 360px are wider than the column and a segmented control
that scrolls has its last option permanently off screen. */
.pc-ranges{flex-wrap:wrap}
/* The plot. A min-height so the box does not collapse to nothing between the
loader arriving and the first draw, which otherwise jumps the whole page. */
.pc-plot{width:100%;min-width:0;min-height:380px;overflow:hidden}
/* A locked viewer's frame: the shape of the chart, with nothing in it. Faint
ruling rather than a blur — there is no chart here to blur, and a smudged
picture of lines that are not the real lines would be a lie about what is
behind the subscription. */
.pc-plot.locked{background:
repeating-linear-gradient(to bottom,transparent 0,transparent 63px,
var(--line) 63px,var(--line) 64px);
border-radius:10px}
/* Locked: the panel describes what is on offer; it is not a control panel.
Dimmed as a whole rather than leaning on each control's own disabled
styling, which differs enough between platforms to look like a rendering
fault on one of them. The hover states are cancelled too — a pill that
lights up under the cursor and then does nothing is the worst of both. */
.pc-controls.off{opacity:.62}
.pc-controls.off .pill-opt,.pc-controls.off .seg2 button{cursor:default}
.pc-controls.off .pill-opt:hover{border-color:#DDE4F0}
.pc-controls.off .pill-opt[data-on="true"]:hover{border-color:var(--accent-10)}
.pc-controls.off .seg2 button:hover{background:none}
.pc-controls.off .seg2 button[aria-pressed="true"]:hover{background:var(--accent-10)}
.pc-none{margin:0;padding:48px 16px;text-align:center;color:var(--mute);
font-weight:600}
.pc-none a{color:var(--blue);font-weight:700}
/* ---------- Locked ----------
The prompt, under the table. The shop window is now the table itself --
real products, real origins, real columns, dots where the prices are --
so the separate list of product names this used to carry is gone, and its
.pr-list / .pr-teaser / .pr-pname rules with it. Showing somebody the table
they would get is a better argument than describing it to them. */
.pr-locked{margin-top:16px}
.pr-empty{background:#fff;border:1px solid var(--line);border-radius:16px;
padding:28px;text-align:center;color:var(--mute);font-weight:600}
@media (max-width:640px){
/* The table scrolls inside its own box; the PAGE must not. That is what
.pr-scroll's overflow-x is for, and why the cells stay nowrap -- a table
that wraps to fit is a table nobody can read a row of. Checked at 360. */
.pr-when select{max-width:150px}
.pr-nav{gap:6px}
.pr-step{padding:8px 11px}
.pr-tbl{font-size:13px}
.pr-tbl th,.pr-tbl td{padding:9px 10px}
.pr-chart{padding:12px 8px}
.pr-head h2{font-size:19px}
.pc-items{gap:6px}
.pc-items .pill-opt.sm{min-height:30px;padding:0 9px;font-size:12px}
.pc-plot{min-height:300px}
}
/* Where colour cannot be relied on.
The lines themselves are Google's SVG with inline strokes and nothing here
can restyle them usefully — but identity on this chart is never colour
alone: every legend entry carries its product name beside its swatch, and
the same numbers are a sortable table one link away, which is the real
answer for anybody the chart does not serve. What IS ours is the control
panel, and a checkbox whose only "on" signal is a blue fill needs an
outline when the fill is taken away. */
@media (forced-colors:active){
.seg2 button[aria-pressed="true"]{border:2px solid CanvasText;text-decoration:underline}
.pc-plot.locked{border:1px solid CanvasText}
}
/* ---------- The price hub, at the top of /prices ----------
Three cards for the three assessment tables. /prices had no link to any of
them: it was 986 price-news headlines and the tables were reachable only
from each other.
`.card` is the site's own card — white, 1px border, 16px radius, the shared
shadow — and this adds only the grid and the inside of one. A second
definition of a card is how two on one site come to differ. */
.pr-hub{margin:0 0 26px}
.pr-hub-grid{display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr))}
/* `minmax(0,1fr)` and not `1fr`: a grid track's default minimum is its
content, so a long product name would push the column past its share and
the row past the page. */
.pr-hub-card{position:relative;overflow:hidden;padding:20px 22px;
background:linear-gradient(160deg,#fff 42%,#F6F8FD 100%);
transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
/* The site's own hover, minus the `scale(1.02)` that `a.card` uses. This
card is an with its own buttons, not a link: growing it on
hover would promise a click the card itself does not answer. A lift and
the same shadow and border colour say "interactive" without that. */
/* `.lift` carries the hover AND the reduced-motion answer, both from
mesteel.css — this card had its own copy of each, and its own
`transition:none`, which is a third behaviour for one gesture. */
/* ---------- The decorative chart ----------
Lower right, behind everything, clipped by the card. It is INVENTED
geometry and never `price_data`: a signed-out reader may not see a
price, and a background drawn from the real series would hand them the
shape of it. A trend is a price.
8% of navy. The band the brief allows is 6-10%, and the figure matters:
over the gradient AND the graphic together the surface bottoms out at
#DEE1E8, where `--mute` measures 3.64:1 and FAILS AA. That is why the
blurb below is darkened rather than the artwork being faded further —
the artwork was asked for, the text colour was not. */
.pr-hub-art{position:absolute;right:-6px;bottom:-6px;width:132px;height:88px;
color:#0F1F4A;opacity:.08;pointer-events:none;z-index:0}
.pr-hub-art rect,.pr-hub-art .pr-art-fill{fill:currentColor}
.pr-hub-art .pr-art-line{fill:none;stroke:currentColor;stroke-width:3;
stroke-linecap:round;stroke-linejoin:round}
.pr-hub-art .pr-art-fill{opacity:.55}
/* Everything the reader actually reads sits above it. */
.pr-hub-body{position:relative;z-index:var(--z-content);display:flex;flex-direction:column;
gap:12px;height:100%}
.pr-hub-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.pr-hub-top h3{margin:0;font-size:17px;letter-spacing:-.01em}
/* The badge is the amber the site already uses for "held, not refused" —
`.ed-note` is the same pair. Red would read as an error, and a price behind
a subscription is not one. */
.pr-hub-lock{display:inline-flex;align-items:center;gap:5px;flex:none;
background:#FFFBEB;border:1px solid #FDE68A;color:#92400E;
border-radius:999px;padding:3px 9px;font-size:11px;font-weight:800;
letter-spacing:.04em;text-transform:uppercase}
.pr-hub-lock svg{width:12px;height:12px;fill:none;stroke:currentColor;
stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* #475569 and not `--mute`: measured 5.79:1 against the worst surface this
card can present (its own gradient plus the artwork), where `--mute`
gives 3.64:1. The card gained a background, so its text had to answer
for it. */
.pr-hub-blurb{margin:0;font-size:14px;line-height:1.6;color:#475569;flex:1}
/* A description list, because that is what these are — a label and its value.
`dl` wrapped in `div` per pair so the grid can lay the pairs out rather
than the dt/dd run. */
.pr-hub-facts{display:flex;gap:22px;margin:0;padding:12px 0 0;
border-top:1px solid var(--line)}
.pr-hub-facts div{min-width:0}
/* #475569, not --mute: these two are the only light-grey text on the card
and they sit exactly where the artwork is — the lower half. Measured
against the surface the artwork makes (#E4E7EF), --mute gives 3.83:1
and FAILS AA where this gives 6.10. The card gained a background, so
its text had to answer for it. */
.pr-hub-facts dt{margin:0;font-size:10.5px;font-weight:800;letter-spacing:.08em;
text-transform:uppercase;color:#475569}
.pr-hub-facts dd{margin:2px 0 0;font-size:15px;font-weight:700;color:var(--ink)}
.pr-hub-cur{font-size:11px;font-weight:800;color:#475569;letter-spacing:.04em}
/* `flex-wrap` and left-aligned: three buttons do not fit one line on a
phone and the third drops under the first rather than centring. */
.pr-hub-act{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch;
justify-content:flex-start}
/* The outline twin of `.btn-blue`: `.btn-line`'s shape, in navy. Scoped to
the hub rather than added as a site-wide `.btn-outline`, because the
site already has ONE outline button and a second general one is how a
stylesheet grows two answers to the same question. Promote it if a
second page wants it. */
.pr-hub-graph{border-color:var(--blue);color:var(--blue);font-weight:700;
display:inline-flex;align-items:center;gap:7px}
.pr-hub-graph:hover{background:var(--blue-10);color:var(--navy);
border-color:var(--blue)}
.pr-hub-gic{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;
stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
/* The section heading over each block. /prices now carries two lists that are
different things — the tables and the reporting about them — and without a
heading apiece the cards run straight into a column of headlines. */
.ed-sec-h{margin:0 0 14px;font-size:20px;letter-spacing:-.02em}
@media (max-width:900px){
/* Two across before one: at tablet width three cards put the blurb on five
lines and the facts row on two. */
.pr-hub-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
.pr-hub-grid{grid-template-columns:minmax(0,1fr)}
.pr-hub-card{padding:18px}
}
|