/* Page-scoped rules migrated out of Setting[custom_css].
*
* This file is the Phase 3 half of a migration whose Phase 4 half is components.css:
* the rules here are the ones that are genuinely about a page rather than about a
* thing, and they are copied with their selectors and values intact rather than
* being renamed into components that would have one call site each.
*
* It loads AFTER components.css and BEFORE application.css, and the operator's row
* is still injected last, so while that row is live nothing here changes a pixel --
* the row wins every tie. Cutover is when this file starts mattering.
*
* Every block carries the baseline line range it came from, so the parity harness's
* findings can be traced back to a rule someone wrote rather than to a value someone
* chose. Do not "tidy" a value here: several declarations in the row have never
* painted, and the ones that have are load-bearing in ways the reconciliation
* document spells out.
*
* THOSE LINE NUMBERS MOVE. They are absolute offsets into
* design/custom-css-baseline.css, and nothing checks them. globals.css carries the
* same numbers as machine-readable markers, which globals_css_parity_spec.rb compares
* by position and which script/renumber_baseline_markers.rb exists to keep honest.
* A citation in prose, like the ones below, has neither guard. The #login block was
* cut out of the row on 2026-09-20, taking lines 646-790 with it, which puts every
* prose citation into one of three cases: below 646 it still addresses the same
* rule; above 790 it moved by -145; and one that pointed INTO 646-790 has no new
* location at all. Those last are left exactly as written -- renumbering them would
* invent a line -- and the prose around each is what says which rule it meant.
*
* DO NOT trust a sweep that matched `baseline:\d+`. This repo writes the same
* kind of citation both ways: `baseline:1096`, and a bare `:1096`, `#vouchers:1534`
* or `(:1628)` -- usually as the second and third halves of a sentence whose first
* number carries the prefix. A regex anchored on the prefix skips all of those
* silently, which is how the 2026-09-20 renumbering left stale pointers behind in
* this file, components.css, globals.css and a spec while reporting itself
* complete. Match the bare form too, and verify every number you write by reading
* that line of the snapshot and checking it is the selector the prose names.
* Cutting another block moves them again.
* Docs under docs/ deliberately were NOT renumbered: they describe the snapshot as it
* was when they were written, and rewriting them would falsify a record rather than
* fix a pointer.
*/
/* ---------------------------------------------------------------------------
* /vouchers -- baseline:1347-1425
*
* The button and the field are NOT here. They are .gp-btn and .gp-field__control
* in components.css, applied alongside Bootstrap's .btn/.btn-primary and
* .form-control in app/views/vouchers/index.html.erb.
*
* Two things in the original block are deliberately absent:
*
* - `.btn-primary::after`, the glass rim. All three call sites are
* , and a replaced element generates no pseudo-elements,
* so that rule has never painted. The parity harness reports its computed
* values as differences and flags them INERT for exactly this reason.
* - `#vouchers .form-control { color: var(--green) }`. text_field_tag emits
* id="code", so `#vouchers #code` outranks it and paints dk-green. The
* declaration is dead, like the non-breaking space in the .footer selector.
* Note that the `height` from that same block IS carried, at the bottom of this
* section -- one dead declaration in a rule does not make the rule dead.
* ------------------------------------------------------------------------ */
/* The !important is carried across rather than cleaned up, and that is a decision.
* Bootstrap's .mt-5 is `margin-top: 3rem !important`, so a normal declaration here
* loses to it whatever the source order -- importance beats specificity. It also
* has to stay a page-scoped selector rather than becoming a class on the markup:
* the layout's flash wrapper carries .mt-5 too (app/views/layouts/application.html.erb,
* the div wrapping `flash.each`), and that is shared by every page. */
#vouchers .d-flex.mt-5 {
margin-top: 1rem !important;
}
#vouchers h1 {
text-align: center;
}
/* The voucher artwork. Still the Squarespace CDN URL it has always been -- moving it
* to a local asset is a real improvement and a separate change, because it is one
* of four third-party requests the venue's wifi has to make during a show. The local
* file already exists (Voucher+Mockup5.webp) and is not yet committed.
*
* The parity harness blocks this host in every mode, so the box's geometry is
* compared and its paint is not. */
#vouchers h1::before {
content: "";
display: block;
width: 300px;
height: 200px;
background-image: url("https://images.squarespace-cdn.com/content/543df105e4b01ddd00dd714c/ccf9e88f-9b2b-4863-92cc-cecb3c1fcda2/Voucher+Mockup5.png");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
#vouchers .text-center.mb-4 {
padding-left: 30px;
padding-right: 30px;
}
/* The only thing stacking the form above the button. Migrating the button and the
* field without this renders an unstacked, uncentred page -- which is why the
* reconciliation document lists it first among the rules that are easy to miss. */
#vouchers .row {
flex-direction: column;
align-items: center;
}
/* /vouchers is the only one of the four form pages that sets a size on the control.
* #login, [id$="-edit"] and #referrals-new all set weight/colour/centring/radius and
* no font-size, so this stays a page rule rather than moving into .gp-field__control
* and silently shrinking the text on three pages that never asked for it. */
#vouchers #code {
font-size: var(--gp-font-size-body);
}
/* The 42px control. This is the other half of the note above: it came out of
* .gp-field__control because #vouchers is the only one of the four form pages that
* sets a height at all, so carrying it in the component would have resized the
* referral field to match a page it has nothing to do with. Written with the row's own
* selector rather than .gp-field__control so that the cutover arithmetic is the same
* one the row does today. */
#vouchers .form-control {
height: var(--gp-control-height);
}
/* ---------------------------------------------------------------------------
* /terms -- baseline:1546-1582
*
* Nothing is componentised here and no markup changes: this page has no button, no
* field and no card. It is a Phase 3 verbatim migration and nothing else, which is
* also what made it the page that forced the harness to be able to compare two
* documents that are byte-identical. See docs/plans/referrals-and-terms-parity.md.
*
* Measured on the rendered page at 390px, not read out of the CSS: /terms renders NO
* navbar. WelcomeController skips :check_if_logged_in for :terms, so @attendee is nil
* whether or not anyone is signed in, and the layout guards the whole