/* FitoNova site -- hand-written, no build step, no external requests. The numbered spec plate and the two-column pledge list. One of the ordered sheets in public/css/; the load order in every page's IS the cascade, so a rule moved between files is a rule moved in the cascade. Owner's ruling 2026-08-10: no source file over 500 lines. */ /* ------------------------------------------------------------ spec plate */ .plate { margin-top: 52px; position: relative; border: 1px solid var(--line2); background: var(--panel); } .plate .reg { font-size: 14px; } .plate-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 24px; border-bottom: 1px solid var(--line); font: 600 11px/1 "Barlow", sans-serif; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mut); } .plate-row { display: grid; grid-template-columns: 120px 1fr 1.1fr; gap: 32px; align-items: baseline; padding: 30px 24px; border-bottom: 1px solid var(--line); } .plate-num { font: 600 46px/1 "Barlow Condensed", sans-serif; color: var(--acc2); opacity: 0.55; } .plate-row h3 { color: var(--ink); } .plate-row p { font: 400 16px/1.6 "Barlow", sans-serif; color: var(--mut); } .plate-foot { padding: 22px 24px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font: 400 15px/1.5 "Barlow", sans-serif; color: var(--mut); } .plate-foot .btn-solid { margin-left: auto; padding: 12px 20px; } .pasi-h2 { margin-top: 14px; font-size: clamp(38px, 4.6vw, 62px); line-height: 1; max-width: 20em; } /* -------------------------------------------------------------- pledges */ /* A two-column hairline list, not a row of cards: the rules between rows are the only structure the section owns. */ /* The band's backdrop, straight off the pixel reference: contour rows running away to a low horizon, a combine standing on the skyline, and the sun drawn as two thin rings. tools/gen_scene.py prints it; the artwork is white and the reference paints it at .2, which is what it gets here -- --band is dark in all four themes, so a tint filter (the vines' --vinefx trick) would only mud it, exactly as with .vine-band. */ .scene-field { position: absolute; left: 50%; bottom: -20px; transform: translateX(-50%); width: 1180px; opacity: 0.2; pointer-events: none; } /* Both backdrops are positioned, so without this the copy would be painted under them rather than over. */ .pledge-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: start; } .pledge-intro h2 { margin-top: 14px; font-size: clamp(34px, 4vw, 52px); line-height: 1.02; } .pledge-intro p { margin-top: 18px; font: 400 17px/1.6 "Barlow", sans-serif; color: rgba(238, 246, 250, 0.85); max-width: 32em; } .pledge-mail { display: inline-flex; align-items: center; gap: 9px; margin-top: 26px; font: 600 15px/1 "Barlow", sans-serif; color: #fff; border-bottom: 1px solid rgba(238, 246, 250, 0.4); padding-bottom: 5px; } .pledge-mail:hover { color: #fff; border-color: #fff; } .pledge-mail svg { fill: none; stroke: currentColor; stroke-width: 1.5; } .pledge-row { display: grid; grid-template-columns: 52px 1fr; gap: 20px; padding: 24px 0; border-top: 1px solid rgba(238, 246, 250, 0.22); } .pledge-num { font: 600 13px/1 "Barlow", sans-serif; letter-spacing: 0.14em; color: rgba(238, 246, 250, 0.7); padding-top: 5px; } .pledge-title { display: block; font: 600 24px/1.1 "Barlow Condensed", sans-serif; color: #fff; } .pledge-body { display: block; margin-top: 8px; font: 400 15px/1.6 "Barlow", sans-serif; color: rgba(238, 246, 250, 0.85); } /* ------------------------------------------------------------ responsive */ @media (max-width: 1100px) { .plate-row { grid-template-columns: 90px 1fr; } .plate-row p { grid-column: 2; } } @media (max-width: 1020px) { .pledge-grid { grid-template-columns: 1fr; gap: 40px; } } @media (max-width: 768px) { .plate-row { grid-template-columns: 1fr; gap: 10px; } /* The 1100px rule parks the paragraph in column 2. A single-column track list has no column 2, so the grid grew an implicit one and the row went back to two -- a 25px gutter holding a 34px numeral. Both the span and the single column have to be undone together. */ .plate-row p { grid-column: auto; } .plate-num { font-size: 34px; } .plate-head, .plate-row, .plate-foot { padding-left: 20px; padding-right: 20px; } .plate-row { padding-top: 24px; padding-bottom: 24px; } /* The foot's button was pushed to the far edge by margin-left:auto; with the text above it wrapping to three lines that reads as a stray control. */ .plate-foot .btn-solid { margin-left: 0; padding: 15px 20px; } .pledge-row { grid-template-columns: 1fr; gap: 6px; } .pledge-num { padding-top: 0; } .pledge-mail { min-height: 44px; } /* 1180px of contour drawing behind a 375px band is one furrow, magnified. */ .scene-field { width: 760px; } }