/* ========================================================= PATTERN: forms-warranty /service-request/ page-service-request.php 559:1481 1920x3345 /warranty-registration/ page-warranty-registration.php 559:1642 1920x3078 /warranty-terms/ page-warranty-terms.php 559:1812 1920x5148 Every number below is read off a layer with get_design_context / get_metadata, never rounded and never guessed. Each frame is 1920 wide and starts at 0,0, so a Figma y IS the page y. Sections are fixed-height canvases and their children are absolutely placed at their own Figma box, so the gate can measure each element on its own. Section flow on desktop: service-request warranty-registration warranty-terms hero 0 .. 567 hero 0 .. 567 hero 0 .. 567 intro 567 .. 1033 intro 567 .. 1029 quotebar 567 .. 687 form 1033 .. 1924 form 1029 .. 2280 intro 687 .. 1073 faq 1924 .. 2552 footer 2280 .. 3078 tables 1073 .. 3674 footer 2552 .. 3345 faq 3674 .. 4313 footer 4313 .. 5148 All three frames draw the PROJECTS CTA footer variant: the shared footer's "Get in Touch" headline + lead form (.ft-top) is not on any of these frames, and a projects CTA with two buttons sits in the footer band instead. footer.php is a shared component nobody in the fleet may edit, so the CTA ships as a .fw-projects section in each template, pinned over the band, and .ft-top is hidden for these three templates only. Written up in docs/fleet-issues/forms-warranty.md. Figma oddities reproduced deliberately, not bugs: - the required marker is #ee1a26 everywhere EXCEPT warranty registration's "Installed by *" (559:1685), which is #fc0d1c - the warranty tables draw the four figures of a row as ONE text node whose columns are runs of literal spaces (44 / 29 / 36 on the first three rows, 44 / 28 / 37 further down, 43 / 27 / 36 on Apex), so the columns do not line up with their own headings - the navy heading bar is 1518 wide inside a 1520 card: flush left, 2px short on the right, and square cornered over the card's 28px radius - several text boxes are drawn shorter than the text inside them (the FAQ answer boxes are 126 for five 26px lines, warranty terms' FAQ heading is 98 for two 55px lines), so those heights are explicit and the ink is allowed to sit outside its own box exactly as Figma draws it - the stepper's three labels start at three different x (282 / 267 / 267) - warranty registration's "Purchased through (business name)" field carries a leftover "dd/mm/yyyy" placeholder in the design; the build keeps its own real (empty) field, per the fleet recipe on placeholders OWNED BY THE forms-warranty PATTERN. Scoped to .evo-tpl-page-service-request, .evo-tpl-page-warranty-registration and .evo-tpl-page-warranty-terms (emitted by functions.php from the template basename) and to .sr-* / .wr-* / .wt-* / .fw-* classes that exist on no other page. ========================================================= */ /* --------------------------------------------------------- BASE: small screens first. There are no mobile frames in Figma, so below 1201px everything is plain flow and the fixed-pixel Figma layout is applied only at 1201px and up. --------------------------------------------------------- */ /* ---- hero, all three pages ---- */ .sr-hero,.wr-hero,.wt-hero{position:relative;overflow:hidden;color:#fff; padding:250px 24px 0;min-height:420px;} .sr-hero{background:#5d6e66;} .wr-hero{background:#4b5a5f;} .wt-hero{background:#6f7d78;} .sr-hero-bg,.wr-hero-bg,.wt-hero-bg{position:absolute;left:0;top:0;right:0;bottom:0; z-index:0;overflow:hidden;} .sr-hero-bg img,.wr-hero-bg img,.wt-hero-bg img{width:100%;height:100%; object-fit:cover;display:block;} .sr-hero-ov,.wr-hero-ov,.wt-hero-ov{position:absolute;left:0;top:0;right:0;bottom:0; z-index:1;background:rgba(0,0,0,0.15);} .sr-eyebrow,.wr-eyebrow,.wt-eyebrow{position:relative;z-index:2;margin:0; font-family:var(--font-display);font-weight:400;font-size:20px;line-height:25px; color:#fff;} .sr-h1,.wr-h1,.wt-h1{position:relative;z-index:2;margin:0; font-family:var(--font-display);font-weight:700;font-size:40px;line-height:1.12; letter-spacing:-1.5px;color:#fff;} .sr-lip,.wr-lip,.wt-lip{display:none;} /* ---- intro, all three pages ---- */ .sr-intro,.wr-intro,.wt-intro{position:relative;z-index:3;background:#fff; padding:48px 24px 0;text-align:center;} .sr-intro-h,.wr-intro-h,.wt-intro-h{margin:0 0 18px;font-family:var(--font-display); font-weight:700;font-size:30px;line-height:1.1;letter-spacing:-1.5px;color:#27272d;} .sr-intro-p,.wr-intro-p,.wt-intro-p{margin:0;font-family:var(--font-display); font-weight:300;font-size:17px;line-height:26px;color:#27272d;} .wr-intro-p a{color:#27272d;text-decoration:underline;} /* ---- stepper form card, service request + warranty registration ---- */ .sr-form,.wr-form{position:relative;background:#fff;padding:40px 24px 56px;} .sr-card,.wr-card{display:none;} .sr-fields,.wr-fields{position:relative;background:#fff;border:1px solid #d3d3d3; border-radius:28px;padding:28px 20px 36px;max-width:680px;margin:0 auto;} .sr-stepno,.wr-stepno{margin:0 0 6px;font-family:var(--font-display);font-weight:400; font-size:18px;line-height:26px;letter-spacing:-0.18px;color:#27272d;} .sr-formh,.wr-formh{margin:0 0 8px;font-family:var(--font-display);font-weight:700; font-size:26px;line-height:1.2;letter-spacing:-1.08px;color:#27272d;} .sr-formsub,.wr-formsub{margin:0 0 26px;font-family:var(--font-display);font-weight:300; font-size:17px;line-height:26px;color:#27272d;} .sr-stepline,.wr-stepline{display:none;} .sr-steplbl,.wr-steplbl{display:inline-block;margin:0 18px 14px 0; font-family:var(--font-display);font-weight:400;font-size:16px;line-height:23px; letter-spacing:-0.54px;color:#b7b7b7;} .sr-steplbl1,.wr-steplbl1{font-weight:700;color:#27272d;} .sr-stepdot,.wr-stepdot,.sr-steppip,.wr-steppip{display:none;} .sr-lb,.wr-lb{display:block;margin:0 0 8px;font-family:var(--font-display); font-weight:500;font-size:16px;line-height:23px;letter-spacing:-0.18px;color:#27272d;} .sr-lb i,.wr-lb i{font-style:normal;color:#ee1a26;} .wr-lb i.wr-req2{color:#fc0d1c;} .sr-fld,.wr-fld{display:block;width:100%;height:56px;margin:0 0 20px; background:#f9f9f9;border:0;border-radius:50px;padding:0 24px;outline:none; appearance:none;-webkit-appearance:none;font-family:var(--font-display); font-weight:300;font-size:17px;letter-spacing:-0.18px;color:#27272d;} .sr-ph,.wr-ph{display:none;} .sr-chev,.wr-chev{display:none;} .sr-next,.wr-next{display:block;width:193px;height:60px;margin:8px 0 0 auto;padding:0; border:0;cursor:pointer;background:#2ca9e3;border-radius:60px;} .sr-next span,.wr-next span{font-family:var(--font-display);font-weight:500; font-size:20px;line-height:25px;color:#fff;} /* ---- warranty registration only: checkbox + invoice upload ---- */ .wr-check{margin:0 0 26px;} .wr-cnote{margin:0 0 12px;font-family:var(--font-display);font-weight:300; font-size:17px;line-height:25px;letter-spacing:-0.18px;color:#27272d;} .wr-cbox{display:flex;align-items:center;gap:12px;font-family:var(--font-display); font-weight:500;font-size:17px;line-height:23px;letter-spacing:-0.18px;color:#27272d;} .wr-cbox input{width:20px;height:20px;margin:0;accent-color:#2ca9e3;} .wr-file{margin:0 0 20px;} .wr-file .filerow{display:flex;align-items:center;gap:14px;background:#f9f9f9; border-radius:50px;padding:8px 14px;} .wr-filebtn{display:inline-flex;align-items:center;justify-content:center; flex:0 0 auto;width:140px;height:45px;background:transparent;border:1px solid #d3d3d3; border-radius:30px;cursor:pointer;} .wr-filebtn span{font-family:var(--font-ui);font-weight:500;font-size:16px; line-height:26.4px;color:#27272d;} .wr-file .fname{font-family:var(--font-display);font-weight:300;font-size:17px; line-height:25px;letter-spacing:-0.18px;color:#27272d;} .wr-file input[type=file]{display:none;} .wr-ftypes{margin:14px 0 0;font-family:var(--font-display);font-weight:300; font-size:15px;line-height:23px;letter-spacing:-0.16px;color:#27272d;} /* ---- FAQ, service request + warranty terms ---- */ .sr-faq,.wt-faq{position:relative;background:#fff;padding:56px 24px 64px;} .sr-faq-h,.wt-faq-h{margin:0 0 16px;font-family:var(--font-display);font-weight:700; font-size:30px;line-height:1.1;letter-spacing:-1.5px;color:#27272d;} .sr-faq-lead,.wt-faq-lead{margin:0 0 22px;font-family:var(--font-display); font-weight:300;font-size:17px;line-height:26px;color:#27272d;} .sr-faq-btn{display:inline-flex;align-items:center;justify-content:center; width:140px;height:45px;margin:0 0 28px;background:#002b54;border-radius:9999px; text-decoration:none;} .sr-faq-btn span{font-family:var(--font-ui);font-weight:500;font-size:16px; line-height:26.4px;color:#fff;} .sr-faq-d,.wt-faq-d{position:relative;padding:0 0 18px;margin:0 0 18px; border-bottom:1px solid #d3d3d3;} .sr-faq-d:last-of-type,.wt-faq-d:last-of-type{border-bottom:0;} .sr-faq-d summary,.wt-faq-d summary{position:relative;list-style:none;cursor:pointer; padding:0 70px 0 0;margin:0;} .sr-faq-d summary::-webkit-details-marker, .wt-faq-d summary::-webkit-details-marker{display:none;} .sr-faq-q,.wt-faq-q{display:block;font-family:var(--font-display);font-weight:500; font-size:20px;line-height:28px;letter-spacing:-0.78px;color:#27272d;} .sr-faq-ic,.wt-faq-ic{position:absolute;right:0;top:0;width:44px;height:44px; display:block;} .sr-faq-d:not([open]) .sr-faq-ic-open, .wt-faq-d:not([open]) .wt-faq-ic-open{display:none;} .sr-faq-d[open] .sr-faq-ic-closed, .wt-faq-d[open] .wt-faq-ic-closed{display:none;} .sr-faq-dv,.wt-faq-dv{display:none;} .sr-faq-a,.wt-faq-a{margin:14px 0 0;font-family:var(--font-display);font-weight:300; font-size:17px;line-height:26px;color:#27272d;} .sr-faq-a a{color:#ee1a26;font-weight:500;text-decoration:underline;} .wt-faq-a a{color:#27272d;text-decoration:underline;} /* ---- warranty tables ---- */ .wt-tables{position:relative;background:#fff;padding:8px 16px 40px;} .wt-card{display:none;} .wt-card-h{margin:0 0 20px;text-align:center;font-family:var(--font-display); font-weight:700;font-size:26px;line-height:1.3;letter-spacing:-0.96px;color:#002b54;} .wt-bar,.wt-stripe{display:none;} .wt-cap{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%); white-space:nowrap;} .wt-tablewrap{overflow-x:auto;margin:0 0 36px;border:1px solid #d3d3d3; border-radius:16px;padding:16px 12px;} .wt-table{width:100%;min-width:640px;border-collapse:separate;border-spacing:0;} .wt-table .wt-h{background:#002b54;color:#fff;font-family:var(--font-display); font-weight:500;font-size:14px;line-height:26px;letter-spacing:-0.6px; text-align:center;padding:10px 8px;} .wt-table .wt-h1{border-radius:8px 0 0 8px;} .wt-table .wt-h5{border-radius:0 8px 8px 0;} .wt-table .wt-m{padding:14px 8px;text-align:center;font-family:var(--font-display); font-weight:700;font-size:16px;line-height:19px;letter-spacing:-0.22px;color:#27272d;} .wt-table .wt-ms{display:block;font-weight:400;font-size:13px;line-height:19px;} .wt-table .wt-v{padding:14px 8px;text-align:center;font-family:var(--font-display); font-weight:400;font-size:15px;line-height:26px;letter-spacing:-0.2px;color:#27272d; white-space:normal;} .wt-table .wt-vv{display:inline-block;width:25%;text-align:center;} .wt-table .wt-gp{display:none;} .wt-table tbody tr:nth-child(odd) .wt-m, .wt-table tbody tr:nth-child(odd) .wt-v{background:#f3fafe;} .wt-table tbody tr:nth-child(odd) .wt-m{border-radius:10px 0 0 10px;} .wt-table tbody tr:nth-child(odd) .wt-v{border-radius:0 10px 10px 0;} /* ---- projects CTA footer variant, all three pages ---- */ .fw-projects{position:relative;background:#002b54;color:#fff;text-align:center; padding:52px 24px 56px;} .fw-projects-h{margin:0 0 14px;font-family:var(--font-display);font-weight:500; font-size:30px;line-height:1.2;letter-spacing:-1.2px;color:#fff;} .fw-projects-sub{margin:0 0 24px;font-family:var(--font-display);font-weight:400; font-size:17px;line-height:26px;letter-spacing:-0.48px;color:#fff;} .fw-projects-btn{display:inline-flex;align-items:center;justify-content:center; width:234px;height:64px;margin:0 6px 12px;border-radius:50px;text-decoration:none;} .fw-projects-btn1{background:#fff;} .fw-projects-btn1 span{font-family:var(--font-display);font-weight:500;font-size:20px; line-height:25px;color:#27272d;} .fw-projects-btn2{background:transparent;border:1px solid #fff;} .fw-projects-btn2 span{font-family:var(--font-display);font-weight:500;font-size:20px; line-height:25px;color:#fff;} /* The frames do not draw the shared footer's "Get in Touch" headline + lead form block on any of these three pages, so it is hidden at EVERY width: the projects CTA above replaces it. Only the hide is unconditional; the exact vertical offsets it frees up are desktop-only, further down. */ .evo-tpl-page-service-request .footer .ft-top, .evo-tpl-page-warranty-registration .footer .ft-top, .evo-tpl-page-warranty-terms .footer .ft-top{display:none;} /* ========================================================= DESKTOP: the Figma frames, exactly. 1201px and up. ========================================================= */ @media(min-width:1201px){ /* --------------------------------------------------------- HERO, shared shape across the three frames 559:1482 / 559:1643 / 559:1813 are all 1920x962 Header-Banner frames with overflow clip. The photo node inside each (559:1483 / 559:1644 / 559:1814) is 1920x600 at y-2, so Figma clips it to 0..598: the export is already that 598-tall crop, with 559:1644's and 559:1814's own rgba(0,0,0,0.2) baked in. The Overlay node adds rgba(0,0,0,0.15) over 0..600, two pixels taller than the photo. The white Background rounded rectangle (559:1494 / 559:1655 / 559:1834) starts at y567 with a 28px radius and runs over the bottom of the photo, which is why the hero section is 567 tall while its photo is not. --------------------------------------------------------- */ .evo-tpl-page-service-request .sr-hero, .evo-tpl-page-warranty-registration .wr-hero, .evo-tpl-page-warranty-terms .wt-hero{height:567px;min-height:0;padding:0; overflow:visible;} .evo-tpl-page-service-request .sr-hero-bg, .evo-tpl-page-warranty-registration .wr-hero-bg, .evo-tpl-page-warranty-terms .wt-hero-bg{top:0;bottom:auto;left:0;right:auto; width:1920px;height:598px;} .evo-tpl-page-service-request .sr-hero-bg img, .evo-tpl-page-warranty-registration .wr-hero-bg img, .evo-tpl-page-warranty-terms .wt-hero-bg img{width:1920px;height:598px; object-fit:fill;} .evo-tpl-page-service-request .sr-hero-ov, .evo-tpl-page-warranty-registration .wr-hero-ov, .evo-tpl-page-warranty-terms .wt-hero-ov{top:0;bottom:auto;left:0;right:auto; width:1920px;height:600px;background:rgba(0,0,0,0.15);} /* 559:1487 / 559:1648 / 559:1818 - Circular Std Book 20, drawn box 25 tall */ .evo-tpl-page-service-request .sr-eyebrow, .evo-tpl-page-warranty-registration .wr-eyebrow, .evo-tpl-page-warranty-terms .wt-eyebrow{position:absolute;left:202px;top:300px; height:25px;font-size:20px;line-height:25px;letter-spacing:normal; white-space:nowrap;z-index:3;} .evo-tpl-page-service-request .sr-eyebrow{width:229px;} .evo-tpl-page-warranty-registration .wr-eyebrow{width:209px;} .evo-tpl-page-warranty-terms .wt-eyebrow{width:185px;} /* 559:1486 / 559:1647 / 559:1817 - Circular Std Bold 75/89, -1.5px */ .evo-tpl-page-service-request .sr-h1, .evo-tpl-page-warranty-registration .wr-h1, .evo-tpl-page-warranty-terms .wt-h1{position:absolute;left:202px;top:327px; height:89px;font-size:75px;line-height:89px;letter-spacing:-1.5px; white-space:nowrap;z-index:3;} .evo-tpl-page-service-request .sr-h1{width:540px;} .evo-tpl-page-warranty-registration .wr-h1{width:740px;} .evo-tpl-page-warranty-terms .wt-h1{width:540px;} /* 559:1494 / 559:1655 / 559:1834 - white, 28px radius on all four corners */ .evo-tpl-page-service-request .sr-lip, .evo-tpl-page-warranty-registration .wr-lip, .evo-tpl-page-warranty-terms .wt-lip{display:block;position:absolute;left:0;top:567px; width:1920px;background:#ffffff;border-radius:28px;z-index:2;} .evo-tpl-page-service-request .sr-lip, .evo-tpl-page-warranty-registration .wr-lip{height:444px;} .evo-tpl-page-warranty-terms .wt-lip{height:202px;} /* --------------------------------------------------------- INTRO --------------------------------------------------------- */ .evo-tpl-page-service-request .sr-intro, .evo-tpl-page-warranty-registration .wr-intro, .evo-tpl-page-warranty-terms .wt-intro{padding:0;z-index:3;text-align:center;} .evo-tpl-page-service-request .sr-intro{height:466px;} .evo-tpl-page-warranty-registration .wr-intro{height:462px;} .evo-tpl-page-warranty-terms .wt-intro{height:386px;} .evo-tpl-page-service-request .sr-intro-h, .evo-tpl-page-warranty-registration .wr-intro-h, .evo-tpl-page-warranty-terms .wt-intro-h, .evo-tpl-page-service-request .sr-intro-p, .evo-tpl-page-warranty-registration .wr-intro-p, .evo-tpl-page-warranty-terms .wt-intro-p{position:absolute;margin:0; letter-spacing:normal;} /* 559:1497 x405 y702 1110x113, Bold 50/55, -1.5px, #27272d */ .evo-tpl-page-service-request .sr-intro-h{left:405px;top:135px;width:1110px; height:113px;font-size:50px;line-height:55px;letter-spacing:-1.5px;color:#27272d;} /* 559:1496 x418 y834 1084x107, Light 20/26, #27272d */ .evo-tpl-page-service-request .sr-intro-p{left:418px;top:267px;width:1084px; height:107px;font-size:20px;line-height:26px;color:#27272d;} /* 559:1658 x405 y712 1110x113 */ .evo-tpl-page-warranty-registration .wr-intro-h{left:405px;top:145px;width:1110px; height:113px;font-size:50px;line-height:55px;letter-spacing:-1.5px;color:#27272d;} /* 559:1657 x431 y856 1058x106 */ .evo-tpl-page-warranty-registration .wr-intro-p{left:431px;top:289px;width:1058px; height:106px;font-size:20px;line-height:26px;color:#27272d;} /* 559:1906 x734 y840 453x55 */ .evo-tpl-page-warranty-terms .wt-intro-h{left:734px;top:153px;width:453px;height:55px; font-size:50px;line-height:55px;letter-spacing:-1.5px;color:#27272d; white-space:nowrap;} /* 559:1905 x582 y917 755x54 */ .evo-tpl-page-warranty-terms .wt-intro-p{left:582px;top:230px;width:755px;height:54px; font-size:20px;line-height:26px;color:#27272d;} /* --------------------------------------------------------- STEPPER FORM 559:1498 (service request) / 559:1659 (warranty registration) Both cards are 1520 wide on white with a 1px #d3d3d3 border and a 28px radius. The three stepper labels do NOT share a left edge (282 / 267 / 267) and the connector is a zero-width #EAEAEA stroke, reproduced as a 1px rule. --------------------------------------------------------- */ .evo-tpl-page-service-request .sr-form, .evo-tpl-page-warranty-registration .wr-form{padding:0;} .evo-tpl-page-service-request .sr-form{height:891px;} .evo-tpl-page-warranty-registration .wr-form{height:1251px;} /* The card is an element of its own and the
is display:contents, so every field resolves against its SECTION and carries its raw Figma x/y instead of a number offset by the card's own 1px border. */ .evo-tpl-page-service-request .sr-fields, .evo-tpl-page-warranty-registration .wr-fields{display:contents;} .evo-tpl-page-service-request .sr-card, .evo-tpl-page-warranty-registration .wr-card{display:block;position:absolute; left:200px;top:0;width:1520px;max-width:none;margin:0;padding:0; box-sizing:border-box;background:#ffffff;border:1px solid #d3d3d3; border-radius:28px;} .evo-tpl-page-service-request .sr-card{height:752px;} /* 559:1499 */ .evo-tpl-page-warranty-registration .wr-card{height:1028px;} /* 559:1660 */ .evo-tpl-page-service-request .sr-stepno, .evo-tpl-page-warranty-registration .wr-stepno, .evo-tpl-page-service-request .sr-formh, .evo-tpl-page-warranty-registration .wr-formh, .evo-tpl-page-service-request .sr-formsub, .evo-tpl-page-warranty-registration .wr-formsub, .evo-tpl-page-service-request .sr-steplbl, .evo-tpl-page-warranty-registration .wr-steplbl, .evo-tpl-page-service-request .sr-lb, .evo-tpl-page-warranty-registration .wr-lb, .evo-tpl-page-service-request .sr-fld, .evo-tpl-page-warranty-registration .wr-fld, .evo-tpl-page-service-request .sr-next, .evo-tpl-page-warranty-registration .wr-next{position:absolute;margin:0;} /* "1 of 3" 559:1503 / 559:1664 - Book 18/26, -0.18px */ .evo-tpl-page-service-request .sr-stepno, .evo-tpl-page-warranty-registration .wr-stepno{left:567px;top:91px;width:41px; height:26px;font-size:18px;line-height:26px;letter-spacing:-0.18px;color:#27272d; white-space:nowrap;} /* "Fill in Product info" 559:1502 / 559:1663 - Bold 36/55, -1.08px */ .evo-tpl-page-service-request .sr-formh, .evo-tpl-page-warranty-registration .wr-formh{left:567px;width:285px;height:55px; font-size:36px;line-height:55px;letter-spacing:-1.08px;color:#27272d; white-space:nowrap;} .evo-tpl-page-service-request .sr-formh{top:123px;} .evo-tpl-page-warranty-registration .wr-formh{top:123px;} /* sub 559:1501 (810 wide) / 559:1662 (602 wide) - Light 20/26 */ .evo-tpl-page-service-request .sr-formsub, .evo-tpl-page-warranty-registration .wr-formsub{left:567px;top:185px;height:26px; font-size:20px;line-height:26px;letter-spacing:normal;color:#27272d; white-space:nowrap;} .evo-tpl-page-service-request .sr-formsub{width:810px;} .evo-tpl-page-warranty-registration .wr-formsub{width:602px;} /* connector 559:1534 / 559:1699 - a zero width line with a 1px #EAEAEA stroke */ .evo-tpl-page-service-request .sr-stepline, .evo-tpl-page-warranty-registration .wr-stepline{display:block;position:absolute; left:434px;width:1px;height:388px;background:#eaeaea;} .evo-tpl-page-service-request .sr-stepline{top:138px;} .evo-tpl-page-warranty-registration .wr-stepline{top:138px;} /* labels 559:1536 / 1542 / 1548 - Bold then Book 18, drawn boxes 23 tall */ .evo-tpl-page-service-request .sr-steplbl, .evo-tpl-page-warranty-registration .wr-steplbl{height:23px;font-size:18px; line-height:23px;letter-spacing:-0.54px;white-space:nowrap;} .evo-tpl-page-service-request .sr-steplbl1, .evo-tpl-page-warranty-registration .wr-steplbl1{left:282px;width:98px; font-weight:700;color:#27272d;} .evo-tpl-page-service-request .sr-steplbl2, .evo-tpl-page-warranty-registration .wr-steplbl2{left:267px;width:110px; font-weight:400;color:#b7b7b7;} .evo-tpl-page-service-request .sr-steplbl3, .evo-tpl-page-warranty-registration .wr-steplbl3{left:267px;width:102px; font-weight:400;color:#b7b7b7;} .evo-tpl-page-service-request .sr-steplbl1{top:108px;} .evo-tpl-page-service-request .sr-steplbl2{top:314px;} .evo-tpl-page-service-request .sr-steplbl3{top:506px;} .evo-tpl-page-warranty-registration .wr-steplbl1{top:108px;} .evo-tpl-page-warranty-registration .wr-steplbl2{top:314px;} .evo-tpl-page-warranty-registration .wr-steplbl3{top:506px;} /* active dot 559:1537 / 559:1702 - #2ca9e3, 57.962x58, radius 29 */ .evo-tpl-page-service-request .sr-stepdot, .evo-tpl-page-warranty-registration .wr-stepdot{display:block;position:absolute; left:405px;top:91px;width:57.962px;height:58px;background:#2ca9e3; border-radius:29px;} .evo-tpl-page-service-request .sr-stepdot img{position:absolute;left:22.001px; top:23px;width:14px;height:12px;display:block;} .evo-tpl-page-warranty-registration .wr-stepdot img{position:absolute;left:21px; top:22px;width:14px;height:12px;display:block;} /* pending pips 559:1546 / 559:1552 - white disc, 1px #D3D3D3 stroke */ .evo-tpl-page-service-request .sr-steppip, .evo-tpl-page-warranty-registration .wr-steppip{display:block;position:absolute; left:430px;width:10px;height:10px;} .evo-tpl-page-service-request .sr-steppip2{top:322px;} .evo-tpl-page-service-request .sr-steppip3{top:514px;} .evo-tpl-page-warranty-registration .wr-steppip2{top:322px;} .evo-tpl-page-warranty-registration .wr-steppip3{top:514px;} /* field labels - Circular Std Medium 18, drawn boxes 23 tall, -0.18px */ .evo-tpl-page-service-request .sr-lb, .evo-tpl-page-warranty-registration .wr-lb{height:23px;font-size:18px;line-height:23px; letter-spacing:-0.18px;color:#27272d;white-space:nowrap;} /* pills - #f9f9f9, 62 tall, 50px radius */ .evo-tpl-page-service-request .sr-fld, .evo-tpl-page-warranty-registration .wr-fld{height:62px;background:#f9f9f9;border:0; border-radius:50px;font-size:18px;line-height:25px;letter-spacing:-0.18px; color:#27272d;} /* the in-pill text is an overlay so the label can colour its own marker */ .evo-tpl-page-service-request .sr-ph, .evo-tpl-page-warranty-registration .wr-ph{display:block;position:absolute;margin:0; pointer-events:none;height:25px;font-family:var(--font-display);font-weight:300; font-size:18px;line-height:25px;letter-spacing:-0.18px;color:#27272d; white-space:nowrap;} /* input only: a