/* ========================================================================== rate-band-v2.css - public review pages redesign (2026-09) Loaded ONLY by the three /rating pages, which all carry : htdocs/bands/ratings/rate_band.html - the review form (com=showRateBand) htdocs/bands/ratings/rated.html - thank you (com=showThanks) htdocs/bands/ratings/rated_low.html - approval needed (com=showConfirm) Design language follows the 2026 refresh (listing-v2.css / search-v2.css / favourites-v2.css): kickers, warm cards, hairlines, pill buttons, site fonts. Palette (matches listing-v2.css): accent #C06014 (brand tertiary orange) accent hover #9a4a0f accent tint #fff9f4 (selected card fill, from favourites-v2.css) ink #191919 secondary #4a443f muted #8a7f75 hairline #ececea card hairline #e3dfd8 (warm, cards sit on white) warm ground #faf5ed / soft #f7f5f1 error #a94442 ink / #fdf3f2 fill / #f0d4d0 edge (from favourites-v2.css) ========================================================================== */ /* -------------------------------------------------------------------------- 1. PAGE SECTION GROUNDS The old page was four full-width bands: a grey form band, then TWO bands whose only job was to hold one sentence and nothing at all - and .lmm-main-light / .lmm-secondary both carry min-height:200px in lmm.less, so the empty one rendered as a 200px slab of white above the footer. Here it is one white page: a warm hero that fades into the content, a white content band carrying the card, and the two spare bands taken out (their editable regions are left in the markup, emptied, so the pages still match the Dreamweaver template). -------------------------------------------------------------------------- */ body.rb-page .page-section.lmm-main-dark { background: linear-gradient(180deg, #fff 0%, #faf5ed 100%); } body.rb-page .page-section.lmm-main-light { background-color: #fff !important; min-height: 0; padding-bottom: 56px; } body.rb-page .page-section.lmm-secondary, body.rb-page .page-section.lmm-extra-content { display: none; } /* -------------------------------------------------------------------------- 2. HERO -------------------------------------------------------------------------- */ .rb-hero { padding: 40px 0 34px; } .rb-kicker { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: #C06014; margin: 0 0 10px; } /* h1.pageTitleLargeWhite in lmm.less is 48px !important, so the size has to be !important to be reduced - 48px is a landing-page size and this is a form */ body.rb-page h1.rb-title { font-size: 40px !important; font-weight: 700; color: #191919; letter-spacing: -0.02em; line-height: 1.05; margin: 0; } .rb-sub { font-size: 17px; line-height: 1.5; color: #4a443f; margin: 12px 0 0; max-width: 620px; } .rb-sub strong { color: #191919; } /* -------------------------------------------------------------------------- 3. LAYOUT The site container is very wide; a form stretched across it is unreadable, so the form + rail sit in their own centred measure. -------------------------------------------------------------------------- */ .rb-wrap { max-width: 1040px; margin: 0 auto; } .rb-grid { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; padding-top: 36px; } .rb-main { flex: 1 1 560px; min-width: 0; } .rb-rail { flex: 0 1 320px; min-width: 0; } /* -------------------------------------------------------------------------- 4. THE FORM CARD -------------------------------------------------------------------------- */ .rb-card { background: #fff; border: 1px solid #e3dfd8; border-radius: 20px; box-shadow: 0 1px 2px rgba(25, 25, 25, 0.04), 0 12px 28px rgba(25, 25, 25, 0.05); padding: 30px 32px 32px; } body.rb-page .rb-card form { margin-top: 0; } /* every field block gets the same rhythm; the last one closes on the divider */ body.rb-page .rb-card .form-group { margin: 0 0 24px; } body.rb-page .rb-card .form-group:last-of-type { margin-bottom: 0; } .rb-legend { display: block; font-size: 14px; font-weight: 700; color: #191919; margin: 0 0 10px; } body.rb-page .rb-card label { display: block; font-size: 14px; font-weight: 700; color: #191919; margin: 0 0 8px; } .rb-optional { font-weight: 400; color: #8a7f75; } .rb-hint { font-size: 13.5px; line-height: 1.5; color: #8a7f75; margin: 8px 0 0; } /* -------------------------------------------------------------------------- 5. FIELDS .input-sm is a 30px control - too small to be the main event on a page whose only job is this form. Sized by HEIGHT + padding rather than a padding split. -------------------------------------------------------------------------- */ body.rb-page .rb-card .form-control { height: 48px; padding: 0 14px; font-size: 15px; line-height: 46px; color: #191919; background: #fff; border: 1px solid #ded8cf; border-radius: 12px; box-shadow: none; transition: border-color 150ms, box-shadow 150ms; } body.rb-page .rb-card textarea.form-control { height: auto; min-height: 168px; padding: 12px 14px; line-height: 1.6; resize: vertical; } body.rb-page .rb-card .form-control::placeholder { color: #a89c90; } body.rb-page .rb-card .form-control:focus { border-color: #C06014; box-shadow: 0 0 0 3px rgba(192, 96, 20, 0.14); outline: none; } /* bootstrap-validator states: colour the field edge, not a glyph */ body.rb-page .rb-card .has-error .form-control { border-color: #d99e99; } body.rb-page .rb-card .has-error .form-control:focus { box-shadow: 0 0 0 3px rgba(169, 68, 66, 0.12); } body.rb-page .rb-card .help-block.with-errors { font-size: 13.5px; font-style: normal; color: #a94442; margin: 8px 0 0; } body.rb-page .rb-card .help-block.with-errors:empty { display: none; } /* the has-feedback tick/cross is a 30px glyph pinned to a 30px control; on a 48px field it lands off-centre, and the coloured edge above already says it */ body.rb-page .rb-card .form-control-feedback { display: none; } /* -------------------------------------------------------------------------- 6. STAR RATING PICKER A ten-option