/* PPLI Workspace v4 — new components, plus a pass over the base sheet. The corrections in the second half are not decoration. Each one fixes something that read as an accident rather than a decision: a calculator whose title was sliced off at the left margin, text that did not wrap, a grid with an empty cell showing through as a grey block, numbers in a money column that did not line up. */ /* ------------------------------------------------------------ the pipeline */ /* Six stages is more than fits a laptop at a readable card width, so the board scrolls sideways inside its own container rather than squeezing the cards or pushing the page into a horizontal scroll of its own. */ .wsx .wsx4-board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(228px,1fr); gap:10px;overflow-x:auto;padding-bottom:10px;scrollbar-width:thin} .wsx .wsx4-board::-webkit-scrollbar{height:8px} .wsx .wsx4-board::-webkit-scrollbar-thumb{background:var(--ln)} .wsx .wsx4-col{background:var(--cr);border:1px solid var(--ln);border-top:2px solid var(--gd); padding:11px 10px 10px;min-width:0} .wsx .wsx4-col-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px} .wsx .wsx4-col-h span{font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--nv);line-height:1.5} .wsx .wsx4-col-h b{font-size:14px;color:var(--gd);font-variant-numeric:tabular-nums} .wsx .wsx4-col-p{font-size:10px;color:var(--mu);margin:3px 0 10px;letter-spacing:.03em;font-variant-numeric:tabular-nums} .wsx .wsx4-col-e{font-size:11px;color:var(--mu);padding:12px 0;text-align:center;border:1px dashed var(--ln);background:#fff} /* --------------------------------------------------------------- the cards */ .wsx .wsx4-card{background:#fff;border:1px solid var(--ln);border-left:2px solid var(--gd); padding:10px 11px 9px;margin-bottom:8px;cursor:pointer;transition:.18s} .wsx .wsx4-card:hover{border-color:var(--gd);box-shadow:0 2px 6px rgba(10,15,23,.07)} .wsx .wsx4-card-n{font-size:13px;line-height:1.35;color:var(--nv);font-weight:600;white-space:normal} .wsx .wsx4-card-r{font-size:10px;color:var(--mu);margin-top:2px;letter-spacing:.04em} .wsx .wsx4-card-m{display:flex;flex-wrap:wrap;gap:2px 9px;margin-top:6px} .wsx .wsx4-card-m span{font-size:10.5px;color:var(--mu);font-variant-numeric:tabular-nums} .wsx .wsx4-card-f{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px} .wsx .wsx4-card-f .wsx-tag{font-size:8px;padding:2px 6px} .wsx .wsx4-mv{width:100%;margin-top:8px;font-family:inherit;font-size:9.5px;letter-spacing:.08em; text-transform:uppercase;font-weight:700;color:var(--mu);background:var(--cr); border:1px solid var(--ln);padding:5px 6px;cursor:pointer} .wsx .wsx4-mv:hover{border-color:var(--gd);color:var(--nv)} /* ------------------------------------------------------- suggested actions */ .wsx .wsx4-task{display:flex;gap:12px;align-items:flex-start;padding:13px 0;border-top:1px solid var(--cr2);cursor:pointer} .wsx .wsx4-task:first-child{border-top:none} .wsx .wsx4-task input[type=checkbox]{margin-top:3px;width:15px;height:15px;accent-color:#B09548;flex:0 0 auto} .wsx .wsx4-task > div{min-width:0} .wsx .wsx4-task .t{font-size:13.5px;line-height:1.5;color:var(--nv);font-weight:600;white-space:normal} .wsx .wsx4-task .w{font-size:11.5px;line-height:1.7;color:var(--mu);margin-top:3px;max-width:640px;white-space:normal} /* ------------------------------------------- conversion, enquiry, profile */ .wsx .wsx4-conv{max-width:720px} .wsx .wsx4-conv .wsx-fset{margin-bottom:18px} .wsx .wsx4-hint{margin-top:4px} .wsx .wsx4-sp{margin-top:12px} .wsx .wsx4-act{margin-top:16px;padding-top:14px;border-top:1px solid var(--ln)} .wsx .wsx4-foot{margin-top:14px} .wsx .wsx4-gd{color:var(--gd)} .wsx .wsx4-rd{color:var(--rd)} .wsx .wsx4-check{display:flex;align-items:center;gap:9px;margin:4px 0 2px;cursor:pointer} .wsx .wsx4-check input{width:15px;height:15px;accent-color:#B09548;flex:0 0 auto} .wsx .wsx4-check span{font-size:13px;color:var(--tx);white-space:normal} .wsx .wsx4-carrier-card{max-width:820px} .wsx .wsx4-carrier-card .wsx-fr{margin-top:12px} /* The message is shown as it will be sent — monospaced and unwrapped — so an adviser reads the thing itself rather than a rendering of it. */ .wsx .wsx4-msg{background:var(--cr);border:1px solid var(--ln);border-left:2px solid var(--nv); padding:16px 18px;margin:12px 0 0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:11.5px;line-height:1.7;color:var(--tx);white-space:pre-wrap;word-break:break-word; max-height:460px;overflow-y:auto} .wsx .wsx4-prev{margin-top:18px;padding-top:16px;border-top:1px solid var(--ln)} .wsx .wsx4-prev .n{font-size:13.5px;color:var(--nv);line-height:1.5;white-space:normal} .wsx .wsx-tab.wsx4-extra{margin-left:6px} /* ------------------------------------------------ jurisdiction comparison */ .wsx .wsx4-jlist{display:grid;gap:2px} .wsx .wsx4-jcard{background:#fff;border:1px solid var(--ln);border-left:2px solid var(--gd); padding:15px 17px;margin-bottom:9px;max-width:900px} .wsx .wsx4-jcard-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px; font-size:14px;font-weight:600;color:var(--nv);margin-bottom:7px} .wsx .wsx4-jcard p{font-size:12.5px;line-height:1.75;color:var(--tx);margin:0 0 10px;max-width:780px} .wsx .wsx4-jcard .wsx-points li{font-size:12.5px;padding-bottom:8px} .wsx .wsx4-jcard .wsx-k{margin-bottom:7px} .wsx .wsx4-jt{margin-top:16px} /* ========================================================================== The base sheet, corrected and tightened. ========================================================================== */ /* 1340px spread seven-column tables and four-tile strips so thin that the page read as a wireframe. 1180 is the width at which a table of this density stops looking half empty. Both the margins and the padding are forced because a theme rule zeroes them on
, which is what left the whole column jammed against the rail on a wide screen. */ .wsx .wsx-main{max-width:1180px!important;margin-left:auto!important;margin-right:auto!important; padding-left:34px!important;padding-right:34px!important} @media(max-width:900px){.wsx .wsx-main{padding-left:18px!important;padding-right:18px!important}} /* THE CALCULATOR MASTHEAD. This is the bug that made every calculator look broken. The masthead was built to bleed past the content column: 36px of negative side margin cancelled by 36px of padding, so the dark panel ran wider than the page while its text stayed aligned with everything below it. When the column gained its own padding the two numbers stopped cancelling, the text moved outside the column, and `overflow-x:hidden` sliced the first characters off the breadcrumb, the title and the standfirst — on all twelve tools. The bleed is gone. The masthead is now an ordinary panel the same width as the content under it, with its own internal padding. There is no negative margin left anywhere in the workspace, so nothing can be clipped by a mismatch again. */ .wsx .wsx-toolhero{margin:0 0 26px;padding:30px 34px 32px;border-left:none;border-right:none} .wsx .wsx-toolhero h1{font-size:27px;line-height:1.15;margin-top:4px} .wsx .wsx-toolhero p{max-width:820px;font-size:13px;line-height:1.75} /* The page head is a flex row of [title + lede] and [buttons]. Neither side had a flex basis, so the buttons took their intrinsic width out of the middle and the lede was squeezed to 488px against a 660px measure — which is why every heading wrapped into three ragged lines with a one-word orphan. */ .wsx .wsx-head{align-items:flex-start;gap:30px;padding-bottom:15px;margin-bottom:20px} .wsx .wsx-head > div:first-child{flex:1 1 auto;min-width:0} .wsx .wsx-head-a{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;padding-top:5px} .wsx .wsx-head h1{font-size:29px;line-height:1.15} .wsx .wsx-head .sub{max-width:820px;margin-top:7px} .wsx .wsx-crumb{margin-bottom:9px} /* Vertical rhythm: 34px between every section and 26px under the head meant a screen with five sections spent most of a viewport on air. */ .wsx .wsx-sec{margin-bottom:26px} .wsx .wsx-sec-h{margin-bottom:11px;align-items:baseline} .wsx .wsx-sec-h h2{font-size:20px;line-height:1.2} .wsx .wsx-tiles{margin-bottom:20px} /* The tile strip was hard-coded to five columns, so a screen with four tiles showed an empty grey cell where the fifth would have been. */ .wsx .wsx-tiles{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))} .wsx .wsx-tile{padding:15px 16px 14px} .wsx .wsx-tile-v{font-size:26px;line-height:1.15;font-variant-numeric:tabular-nums} .wsx .wsx-tile-s{margin-top:3px} /* Tables. Tighter rows, lining figures, numeric columns to the right, and a hover state on the rows that actually open something — a column of money that does not line up is the clearest tell that a tool was assembled rather than designed. */ .wsx .wsx-tbl{font-variant-numeric:tabular-nums} .wsx .wsx-tbl th,.wsx .wsx-tbl td{padding:9px 12px} .wsx .wsx-tbl th.n,.wsx .wsx-tbl td.n{text-align:right} .wsx .wsx-tbl td.n .sub{text-align:right} .wsx .wsx-tbl td .sub{margin-top:2px} .wsx .wsx-tbl tbody tr[data-open]:hover td, .wsx .wsx-tbl tbody tr[data-client]:hover td, .wsx .wsx-tbl tbody tr[data-q]:hover td{background:rgba(176,149,72,.06)} /* The rail carries every calculator now, so it has to be compact and it has to stay put while a long table scrolls underneath it. */ .wsx .wsx-rail{position:sticky;top:0;align-self:start;max-height:100vh;overflow-y:auto; scrollbar-width:thin;padding-bottom:28px} .wsx .wsx-rail::-webkit-scrollbar{width:6px} .wsx .wsx-rail::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16)} .wsx .wsx-nav{padding:6px 22px;font-size:11.5px;line-height:1.5} .wsx .wsx-grp{padding:15px 22px 5px} /* The site design system sets white-space:nowrap on buttons. The tool cards are buttons, so every description on the calculator index rendered as one unwrapped line that ran out of its card and across the next one. */ .wsx .wsx-toolcard,.wsx .wsx-toolcard *{white-space:normal} .wsx .wsx-toolcard{overflow:hidden;padding:22px 22px 20px} .wsx .wsx-toolcard-d{font-size:12px;line-height:1.7} /* Inside a grouped index the hairline treatment on the grid — a line-coloured background showing through a 1px gap — turns every unfilled track into a grey rectangle, so the separators move onto the cards and empty tracks become plain whitespace. Three columns are kept even where a group holds fewer, so cards line up across sections. */ .wsx .wsx-sec .wsx-toolgrid{background:transparent;border:none;gap:10px} .wsx .wsx-sec .wsx-toolcard{border:1px solid var(--ln)} .wsx .wsx-sec .wsx-toolcard:hover{border-color:var(--gd)} /* Field rows. A grid track sized 1fr still gives an input its intrinsic width unless the item is allowed to shrink, so two- and three-up rows let their inputs overflow the panel. And in the calculator input column the rows had no row gap at all, which stacked bare inputs flush against each other. */ .wsx .wsx-fr > *,.wsx .wsx-fr3 > *{min-width:0} .wsx .wsx-fr input,.wsx .wsx-fr select,.wsx .wsx-fr3 input,.wsx .wsx-fr3 select{width:100%;max-width:100%} .wsx .wsx-tool-in .wsx-fr{gap:8px 10px;margin-bottom:8px} /* One focus treatment across every control. The browser default ring is the single loudest thing on the page in a navy and gold palette. */ .wsx input:focus,.wsx select:focus,.wsx textarea:focus{outline:none; border-color:var(--gd);box-shadow:0 0 0 3px rgba(176,149,72,.15)} .wsx .wsx-btn:focus-visible,.wsx .wsx-nav:focus-visible,.wsx .wsx-toolcard:focus-visible{ outline:2px solid var(--gd);outline-offset:2px} .wsx ::selection{background:rgba(176,149,72,.22)} /* Selects sat a pixel and a half shorter than the inputs beside them. */ .wsx select{height:42px;padding:9px 12px} .wsx .wsx4-mv{height:auto} /* The save bar was rendered inside the 340px calculator input column, where it overflowed by 25px on every tool that used it. It now sits below the tool at full width, where the picker and the label have room. */ .wsx .wsx-savebar{margin-top:18px;border-top:2px solid var(--gd)} /* A native date input stretched to a full-width column pushes its calendar icon and its value to opposite edges, which reads as two separate controls. */ .wsx input[type=date]{max-width:210px;font-family:inherit;font-size:12px; padding:7px 9px;border:1px solid var(--ln);background:#fff;color:var(--tx);text-align:left} .wsx .wsx4-task input[type=date]{margin-top:7px;max-width:180px} /* A disabled button still looked like an available one, which matters most on the enquiry, where Send is deliberately held back until the adviser has seen the exact text that will leave the building. */ .wsx .wsx-btn:disabled{opacity:.38;cursor:not-allowed} .wsx .wsx-btn:disabled:hover{background:var(--gd);color:var(--nv)} .wsx .wsx-tool-in .wsx-fset{margin-bottom:16px} .wsx .wsx-method{margin-top:22px} @media(max-width:760px){ .wsx .wsx4-board{grid-auto-columns:minmax(210px,1fr)} .wsx .wsx4-conv{max-width:none} .wsx .wsx-head{flex-direction:column;gap:14px} .wsx .wsx-head-a{justify-content:flex-start;padding-top:0} .wsx .wsx-rail{position:static;max-height:none} .wsx .wsx-toolhero{padding:22px 20px 24px} } /* ========================================================================== The opening frame. This is on screen for well under a second on a warm cache, and it is also the frame someone sees over an adviser's shoulder. It carries the mark rather than the word "Loading", and it is the only full-bleed navy surface in the product, which is what makes the workspace feel like it begins rather than simply appears. ========================================================================== */ .wsx .wsx-boot{padding:0;color:inherit;font-size:inherit;text-align:left} .wsx .wsx-splash{background:var(--nv);min-height:72vh;display:flex;align-items:center; justify-content:center;padding:64px 24px;position:relative;overflow:hidden} .wsx .wsx-splash:before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(ellipse at 50% 36%,rgba(176,149,72,.17),transparent 62%)} .wsx .wsx-splash-in{position:relative;text-align:center;animation:wsxRise .75s cubic-bezier(.2,.7,.3,1) both} .wsx .wsx-splash-mark{width:174px;height:auto;display:block;margin:0 auto 20px} .wsx .wsx-splash-sub{font-size:9.5px;letter-spacing:.36em;text-transform:uppercase; font-weight:700;color:var(--gd);margin-left:.36em} /* An indeterminate rule rather than a spinner: nothing here knows how long it will take, and a spinner promises a measurement it cannot make. */ .wsx .wsx-splash-rule{width:210px;height:1px;margin:28px auto 16px; background:rgba(255,255,255,.13);position:relative;overflow:hidden} .wsx .wsx-splash-rule i{position:absolute;top:0;left:-40%;height:1px;width:40%; background:linear-gradient(90deg,transparent,var(--gd),transparent); animation:wsxSweep 1.6s cubic-bezier(.55,.1,.35,.95) infinite} .wsx .wsx-splash-n{font-size:11.5px;letter-spacing:.05em;color:rgba(255,255,255,.48)} @keyframes wsxRise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}} @keyframes wsxSweep{from{left:-40%}to{left:100%}} @media(prefers-reduced-motion:reduce){ .wsx .wsx-splash-in{animation:none} .wsx .wsx-splash-rule i{animation:none;left:0;width:100%;opacity:.45} } /* Home sits above the first heading in the rail, in a group with no title. */ .wsx .wsx-grp:empty{display:none} .wsx .wsx-grp:empty + .wsx-nav{margin-top:16px} /* ------------------------------------------------------------- first run */ .wsx .wsx7-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} .wsx .wsx7-step{background:#fff;border:1px solid var(--ln);border-top:2px solid var(--gd); padding:22px 22px 20px;text-align:left;font-family:inherit;cursor:pointer; display:block;position:relative;transition:.2s;min-width:0} .wsx .wsx7-step,.wsx .wsx7-step *{white-space:normal} .wsx .wsx7-step:hover{box-shadow:0 3px 10px rgba(10,15,23,.07);transform:translateY(-1px)} .wsx .wsx7-step-n{font-family:"Cormorant Garamond",Georgia,serif;font-size:26px;color:var(--gd);line-height:1;margin-bottom:12px} .wsx .wsx7-step-t{font-size:16px;color:var(--nv);font-weight:600;line-height:1.3;margin-bottom:9px} .wsx .wsx7-step-d{font-size:12px;line-height:1.75;color:var(--mu)} .wsx .wsx7-step-go{display:inline-block;margin-top:14px;font-size:9px;letter-spacing:.14em; text-transform:uppercase;font-weight:700;color:var(--gd)} .wsx .wsx7-has{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px; background:var(--ln);border:1px solid var(--ln)} .wsx .wsx7-item{background:#fff;padding:20px 22px;min-width:0} .wsx .wsx7-item-t{font-size:9px;letter-spacing:.16em;text-transform:uppercase;font-weight:700; color:var(--gd);margin-bottom:8px} .wsx .wsx7-item p{font-size:12.5px;line-height:1.8;color:var(--tx);margin:0;max-width:520px} @media(max-width:1000px){ .wsx .wsx7-steps{grid-template-columns:minmax(0,1fr)} .wsx .wsx7-has{grid-template-columns:minmax(0,1fr)} } /* Cormorant sets old-style figures by default, so 1, 2 and 3 sat at three different heights and threw the whole row of cards out of alignment. */ .wsx .wsx7-step-n{font-variant-numeric:lining-nums;height:28px;line-height:28px} /* The caption under the mark was being upper-cased by the design system, which made a sentence addressed to a person read like a status code. */ .wsx .wsx-splash-n{text-transform:none;font-size:12px;letter-spacing:.02em} .wsx .wsx-splash{min-height:78vh} /* A