/* ========================================================================== CUSTOMIZE — the rail, the FAQ and the footer removed, the column centred ========================================================================== Scope: `.qc`, stamped on the root next to `.qr` by CustomisePackageStep. WHY THIS FILE EXISTS -------------------- The Customize screen was the results shell: a 460 rail on the left carrying the logo, a "Back to results" pill, the chosen package, Trustpilot and the help line, then the add-on rows in the 1340 column beside it, then the FAQ and the footer under both. It is now the add-on rows and nothing else (user: "remove the side box info, QA, FOOter all … just remove the side content, faqs and footer and keep it in center"). The rail, the FAQ block and the footer are gone from the markup — see CustomisePackageStep — and this sheet is what the LAYOUT then needs, because `.qr-shell` is a two-pane flex and `.qr-main` is `flex: 1 1 auto`: with the rail's 460 no longer taking its half, the rows would simply stretch to the shell's full 1840. Loaded after quote-customize.css. Every selector is `.qc`-scoped, so it beats the (0,1,0) rules it replaces on specificity and does not depend on where in the order it lands. ========================================================================== */ /* THE COLUMN KEEPS ITS OWN WIDTH AND CENTRES. 1340 is the width `.qr-main` already had — 1920 - 80 of gutter - 460 of rail - 40 of gap — and it is the width the rows are drawn for, so holding it is what makes this "the same rows, centred" rather than "the same rows, wider". `margin-inline: auto` then does the centring, and `flex: none` stops the flex line from growing the box past the cap it was just given. */ .qc .qr-main { flex: 0 1 83.75rem; /* 1340 */ max-width: 83.75rem; margin-inline: auto; } /* The stepper is NOT declared here any more. Four screens draw it and its shared behaviour — the 4-cell width, the visible check on a completed cell, the 1280 fallback and the 428 connectors — now lives once in quote-results-integration.css. This sheet duplicated it, which is how the four bars drifted apart. */ /* ========================================================================== THE 428 HEADER AND THE SECTION HEADING — both hidden on the desktop screen ========================================================================== `display: none` by default, turned on inside the 428 block below. The desktop screen is the one already signed off: no logo, no back control, and Continue where the heading would be. */ .qc .qc-mhead-t { display: none; } /* ========================================================================== NARROW — the 428 canvas ========================================================================== The rail was this page's HEADER here: quote-results.css's 428 block turns `.qr-side` into an in-flow 180 band with the package card under it, 572 of content, and positions `.qr-tabs` ABSOLUTELY at (20,132) inside `.qr-shell` — i.e. over that band. With the rail gone there is no band to sit on, so the bar would float at y132 while the rows started at the top of the shell and ran under it. It goes back into flow as the first child, at the frame's own 20 gutter, which is where the rows already are. ========================================================================== */ @media (max-width: 767.98px) { .qc .qr-tabs { position: static; margin: 0 1.25rem 1.25rem; /* the 20 gutter -> 388 wide */ } /* `.qr-main`'s 20 of top padding was clearance under the rail's band, which is gone — `.qj-mhead` brings its own 40. The desktop cap has to be undone too: (0,2,0) outranks the (0,1,0) it replaces regardless of the media query. */ .qc .qr-main { flex: 1 1 auto; max-width: none; margin-inline: 0; padding-top: 0; } /* The logo + back header is NOT declared here any more — it is `.qj-mhead` in quote-results-integration.css, shared with the Submit screen, which hides its own rail for the same reason. */ /* ---- "Add optional upgrades" ----------------------------------------- Centred between the stepper and the first row, in the journey's own heading face at the size the 428 canvas gives a section title. */ .qc .qc-mhead-t { display: block; /* FIGMA'S OWN BAND. The stepper cell is 28 tall at y132, so the bar ends at 160; the first add-on card is Frame 1707481586 at y244. That leaves 84 for this line: 28 above, its own 28, 28 below. */ margin: 1.75rem 1.25rem 1.75rem; text-align: center; font-family: var(--font-sans); font-weight: 500; /* InstrumentSans-Medium */ font-size: 1.125rem; /* 18 */ line-height: 1.75rem; /* 28 — the band's arithmetic */ letter-spacing: -0.01rem; color: var(--ink); } /* The bar's y132 is `.qj-mhead`'s own doing now — see the header note in quote-results-integration.css, which sets it for every phone screen. */ .qc .qr-tabs { margin-bottom: 0; } /* ====================================================================== THE ADD-ON CARD IS TWO COLUMNS, NOT A STACK ====================================================================== What was built is the 1920 row folded onto the phone: a 216-tall photo band across the top, then a grey inner panel holding the title, the blurb and the price. Figma's 428 card is a different composition entirely — `Frame 1707481586`, 388 x 272, with the photo at (32,24) 97 x 160 on the LEFT, the title and blurb in a 199 column at x169, and the price bar spanning 348 across the bottom at y192. No inner panel: the card is white and the price bar is the only filled box in it. `.qc-panel` becomes `display: contents` so its own box disappears and its four children join the card's grid directly — which is what lets the price bar span both columns while the title and blurb stay in the right one. Nothing in the markup moves. ====================================================================== */ .qc .qc-rows { gap: 0.75rem; } /* 284 pitch - 272 card */ .qc .qc-row { height: auto; /* 24 above the photo, the price bar's own 20 either side, 20 under it. */ padding: 1.5rem 1.25rem 1.25rem; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 2.5rem; /* 129 -> 169 */ align-content: start; border-radius: var(--radius); /* 12 */ box-shadow: 0 0.125rem 2.5rem rgba(0, 0, 0, 0.08), /* 0,2 r40 #000 @ 8% */ inset 0 0 0 0.125rem rgba(17, 17, 17, 0.16); /* 2px #111 @ 16%, inner */ } /* `image 152` @32,24 97x160 — the 12 margin is 32 against the card's own 20 of padding, and it widens the track so the right column starts at 169. */ .qc .qc-row .qc-photo { position: static; grid-column: 1; grid-row: 1 / span 3; width: 6.0625rem; /* 97 */ height: 10rem; /* 160 */ margin-left: 0.75rem; /* 12 -> x32 */ object-fit: contain; } /* the panel's box goes; its children become the grid's own */ .qc .qc-row .qc-panel { display: contents; } /* "Hypervolt Home 3 Pro" @169,48 199x24 — Host Grotesk Medium 18/24, -1.28, ink at 92%. The 24 of margin is 48 against the card's 24 of padding. */ .qc .qc-row .qc-h { grid-column: 2; grid-row: 1; width: auto; margin-top: 1.5rem; /* 24 -> y48 */ font-family: var(--font-display); /* Host Grotesk */ font-weight: 500; font-size: 1.125rem; /* 18 */ line-height: 1.5rem; /* 24 */ letter-spacing: -0.08rem; /* -1.28 */ color: rgba(17, 17, 17, 0.92); white-space: normal; } /* the blurb @169,80 199x80 — Instrument Sans Regular 16, ink at 70%. Four lines in an 80 box is a 20 line, which is what it is set to. */ .qc .qc-row .qc-blurb { grid-column: 2; grid-row: 2; margin-top: 0.5rem; /* 72 -> 80 */ font-family: var(--font-sans); font-weight: 400; font-size: 1rem; /* 16 */ line-height: 1.25rem; /* the node's own 20 */ letter-spacing: -0.01rem; color: var(--ink-70); white-space: normal; } /* Figma's card carries no bullet list. Ours does, and it states the finance terms, so it is kept rather than dropped — in the right column under the blurb, where it grows the card instead of colliding with the price bar. */ .qc .qc-row .qc-specs { grid-column: 2; grid-row: 3; margin-top: 0.75rem; } /* `Frame 1707481535` @20,192 348x60 r8, ink at 4% — spanning both columns. A flex row, because Figma sets "Price" and the figure on ONE line (`Frame 1707481614`, hug 103x32 at 16,14, gap 6) where this had them stacked, and because `margin-left: auto` is then all the Add button needs to sit at the far end. */ .qc .qc-row .qc-price { position: relative; left: auto; top: auto; grid-column: 1 / -1; grid-row: 4; display: flex; align-items: center; gap: 0.375rem; /* 6 */ width: auto; height: 3.75rem; /* 60 */ margin-top: 0.5rem; /* photo ends 184 -> 192 */ padding-left: 1rem; /* 16 */ padding-right: 0.75rem; border-radius: var(--radius-sm); /* 8 */ background: rgba(17, 17, 17, 0.04); /* #111111 @ 4% */ overflow: visible; } .qc .qc-row .qc-price > * { position: static; left: auto; top: auto; } .qc .qc-row .qc-add { margin-left: auto; } /* the Add pill's own `Arrow Icon Wrapper` is 32 square at r8 on this card, against the 40 the 1920 row gives it */ .qc .qc-row .qc-add-chip { width: 2rem; height: 2rem; /* 32 */ border-radius: var(--radius-sm); /* 8 */ } .qc .qc-row .qc-add-chip img { width: 1.5rem; height: 1.5rem; } } /* ========================================================================== THE WAY BACK, BESIDE CONTINUE ========================================================================== `.qc-topbar` is the design's own centred two-item row and `.qc-save` its left-hand label — authored for Figma's "Save for later", which has no destination and is not rendered. The slot is reused for the route back to Details, so the row keeps the design's gap, centring and lime halo and only the label's own affordances are added. A