/* 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. */ /* --------------------------------------------------------------------------- * /vouchers -- baseline:1492-1570 * * 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:1691-1727 * * 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