/* Compact two-light process dial, adapted from the supplied reference. */ #process-radial.process-radial { --pr-signal:#2f66c9; --pr-panel-edge:rgb(255 255 255 / .88); --pr-panel-shadow:rgb(64 54 42 / .24); background:transparent!important; overflow:visible; } #process-radial .pr-shell { position:relative; padding:clamp(28px,3.4vw,46px) clamp(24px,4vw,56px) clamp(20px,2.2vw,30px); border:1px solid rgb(31 36 48 / .10); border-radius:26px; background: linear-gradient(112deg,rgb(255 244 230 / .94) 0%,rgb(250 246 238 / .92) 27%,rgb(241 239 233 / .90) 54%,rgb(232 235 242 / .91) 82%,rgb(226 231 242 / .94) 100%); box-shadow: inset 0 2px 0 var(--pr-panel-edge), inset 0 -2px 0 rgb(31 36 48 / .08), 0 3px 3px rgb(60 50 40 / .09), 0 30px 50px -24px var(--pr-panel-shadow), 0 70px 100px -62px rgb(40 50 80 / .28); } #process-radial .pr-shell::before {display:none!important;} /* Light skin only: the panel keeps its gradient but stops being a solid lid, so the rain falling behind it stays visible through the glass. No backdrop blur — it would smear the drops into nothing, which is the point of this. */ html:not([data-skin="nocturne"]) #process-radial .pr-shell { background: linear-gradient(112deg,rgb(255 244 230 / .64) 0%,rgb(250 246 238 / .60) 27%,rgb(241 239 233 / .58) 54%,rgb(232 235 242 / .60) 82%,rgb(226 231 242 / .64) 100%); } #process-radial .pr-heading { display:grid!important; grid-template-columns:minmax(0,1fr) minmax(280px,400px)!important; column-gap:clamp(48px,7vw,100px)!important; align-items:start!important; max-width:none!important; margin:0!important; } #process-radial .pr-heading .eyebrow {grid-column:1/-1;margin:0 0 16px!important;font-size:var(--type-micro);} #process-radial .pr-heading h2 { grid-column:1; max-width:15ch!important; font-size:var(--section-display-size)!important; line-height:.98!important; letter-spacing:-.04em!important; text-shadow:0 1px 0 rgb(255 255 255 / .82); } #process-radial .pr-lede { grid-column:2; align-self:start!important; max-width:40ch!important; margin:8px 0 0!important; font-size:var(--type-body)!important; line-height:1.85!important; } #process-radial .pr-board { width:100%; max-width:none!important; min-height:0!important; max-height:400px; height:clamp(350px,33vw,400px); margin:clamp(-8px,-.5vw,0px) 0 0!important; perspective:none!important; } #process-radial .pr-desk { width:100%; height:100%; min-height:0!important; aspect-ratio:auto!important; transform:none!important; transform-style:flat!important; } #process-radial .pr-svg-desk {display:block;width:100%;height:100%;overflow:visible;} #process-radial .pr-svg-mobile {display:none;} /* The former oversized gauge layers are intentionally retired. */ #process-radial :is(.pr-gauge-lift,.pr-dial-face,.pr-rail-cast,.pr-rail-face,.pr-rail-key,.pr-plinth-cast,.pr-plinth,.pr-guides,.pr-ticks,.pr-anchor,.pr-well-layer) {display:none!important;} #process-radial :is(.pr-dial-fill,.pr-dial-warm,.pr-dial-cool,.pr-track-shadow,.pr-track-bed,.pr-track-color) {pointer-events:none;} #process-radial .pr-dial-fill {fill:rgb(255 253 248 / .72);} #process-radial .pr-dial-warm {fill:url(#prDialWarm);} #process-radial .pr-dial-cool {fill:url(#prDialCool);} #process-radial .pr-track-shadow { fill:none;stroke:rgb(52 42 34 / .28);stroke-width:25;stroke-linecap:round; transform:translateY(8px);filter:url(#prTrackSoft);opacity:.46; } #process-radial .pr-track-bed {fill:none;stroke:rgb(255 255 255 / .9);stroke-width:25;stroke-linecap:round;} #process-radial .pr-track-color {fill:none;stroke:url(#prArcGradient);stroke-width:16;stroke-linecap:round;} #process-radial .pr-base {display:block!important;fill:none;stroke:rgb(255 255 255 / .74)!important;stroke-width:2!important;opacity:.92;filter:none!important;} /* The progress stroke is off everywhere, not just on mobile. It and the needle are on one ray by construction, but the stroke is a length along an ellipse while the needle is a radius to it, so near the top they read as travelling at different speeds. The needle and the lit puck already carry the position; the extra line only invites that comparison. */ #process-radial .pr-active {display:none!important;fill:none;stroke:#2f66c9;stroke-width:4;opacity:.34!important;filter:drop-shadow(0 1px 2px rgb(28 74 156 / .28));} #process-radial .pr-hover-seg {display:block!important;stroke-width:6;opacity:0;} #process-radial .pr-head {display:none!important;} #process-radial .pr-needle {display:block!important;filter:drop-shadow(2px 5px 5px rgb(37 44 62 / .28));} #process-radial .pr-needle .pr-needle-aura {stroke:#183b82;stroke-width:7;opacity:.24;filter:blur(3px);} #process-radial .pr-needle .pr-needle-core {stroke:#2c65ca;stroke-width:4;opacity:1;filter:none;} #process-radial .pr-needle-hub {fill:url(#prHubDome);stroke:rgb(47 102 201 / .28);stroke-width:1;} #process-radial .pr-needle-pin {fill:#3474df;} #process-radial .pr-well-copy { display:block!important;left:50%!important;top:80%!important;bottom:auto!important; transform:translateX(-50%)!important;width:220px;text-align:center; } #process-radial .pr-well-copy strong {font-size:.58rem;letter-spacing:.22em;color:color-mix(in srgb,var(--ink) 54%,var(--pr-signal));} #process-radial .pr-steps {position:absolute!important;inset:0!important;display:block!important;padding:0!important;} #process-radial .pr-step {position:absolute!important;left:var(--x)!important;top:var(--y)!important;width:0!important;height:0!important;min-height:0!important;display:block!important;} #process-radial.process-radial {--pr-node:56px;} #process-radial .pr-step[data-pr-step="3"] {--pr-node:60px;} #process-radial .pr-hit { position:absolute!important;left:0!important;top:0!important;width:var(--pr-node)!important;height:var(--pr-node)!important; transform:translate(-50%,-50%)!important; } #process-radial .pr-node { border:1px solid rgb(99 107 124 / .16)!important; background: radial-gradient(58% 52% at 28% 17%,#fff 0%,rgb(255 255 255 / .82) 39%,transparent 74%), linear-gradient(132deg,#fff7ee 0%,#faf7f1 43%,#e8eaf0 100%)!important; box-shadow: inset 1.5px 1.5px 0 rgb(255 244 231 / .96), inset -1.5px -2px 2px rgb(60 72 100 / .18), 0 5px 0 #bdb6ad, 0 7px 3px rgb(52 42 34 / .16), 0 15px 22px rgb(52 42 34 / .16)!important; color:#3d4656!important; } #process-radial .pr-icon {width:52%!important;height:52%!important;} #process-radial .pr-step:is(.is-active,.is-focus) .pr-node { border-color:rgb(110 151 229 / .76)!important; background: radial-gradient(62% 54% at 27% 16%,rgb(220 237 255 / .9) 0%,transparent 72%), linear-gradient(132deg,#8fbaf6 0%,#3f79df 46%,#1f4a9b 100%)!important; color:#fff!important; transform:translateY(-4px) scale(1.08)!important; box-shadow: inset 1.5px 1.5px 0 rgb(255 245 232 / .52), inset -1.5px -2px 3px rgb(8 25 58 / .5), 0 7px 0 #173a78, 0 10px 6px rgb(19 47 100 / .30), 0 22px 34px rgb(47 102 201 / .34)!important; } #process-radial .pr-node::before {content:none!important;} #process-radial .pr-copy {position:absolute!important;width:150px!important;min-width:150px!important;max-width:none!important;transform:none!important;pointer-events:none;} #process-radial .pr-num {font-size:var(--type-meta)!important;letter-spacing:.14em!important;color:color-mix(in srgb,var(--ink) 38%,transparent)!important;} #process-radial .pr-title {margin-top:3px!important;font-size:.86rem!important;font-weight:520!important;opacity:.84!important;transform:none!important;} #process-radial .pr-copy p {margin-top:4px!important;font-size:.73rem!important;line-height:1.35!important;opacity:0!important;transform:translateY(5px)!important;} #process-radial .pr-step:is(.is-active,.is-focus) .pr-title {color:#2255ab!important;font-weight:650!important;opacity:1!important;transform:none!important;} #process-radial .pr-step:is(.is-active,.is-focus) .pr-copy p {opacity:1!important;transform:none!important;} #process-radial .pr-approve {display:none!important;} /* Top labels rest near their pucks; only the current description needs space. */ @media(min-width:761px) { #process-radial .pr-step:is([data-place="tl"],[data-place="t"],[data-place="tr"]) .pr-copy p { max-height:0;margin-top:0!important;overflow:hidden; transition:max-height 320ms ease,margin-top 320ms ease,opacity 220ms ease,transform 320ms ease; } #process-radial .pr-step:is([data-place="tl"],[data-place="t"],[data-place="tr"]):is(.is-active,.is-focus) .pr-copy p { max-height:5em;margin-top:4px!important; } } #process-radial .pr-step[data-place="bl"] .pr-copy {left:-75px!important;right:auto!important;top:38px!important;bottom:auto!important;text-align:center!important;} #process-radial .pr-step[data-place="l"] .pr-copy {right:43px!important;left:auto!important;top:-19px!important;bottom:auto!important;text-align:right!important;} #process-radial .pr-step[data-place="tl"] .pr-copy {right:-34px!important;left:auto!important;top:auto!important;bottom:40px!important;text-align:center!important;} #process-radial .pr-step[data-place="t"] .pr-copy {left:-75px!important;right:auto!important;top:auto!important;bottom:42px!important;text-align:center!important;transform:none!important;} #process-radial .pr-step[data-place="tr"] .pr-copy {left:-34px!important;right:auto!important;top:auto!important;bottom:40px!important;text-align:center!important;} #process-radial .pr-step[data-place="r"] .pr-copy {left:43px!important;right:auto!important;top:-19px!important;bottom:auto!important;text-align:left!important;} #process-radial .pr-step[data-place="br"] .pr-copy {right:-75px!important;left:auto!important;top:38px!important;bottom:auto!important;text-align:center!important;} #process-radial .pr-mobile-readout {display:none;} html[data-skin="nocturne"] #process-radial { --pr-panel-edge:rgb(176 207 242 / .16);--pr-panel-shadow:rgb(0 3 11 / .72); } /* Clear night surface: only the perimeter emits light; rain stays crisp. */ html[data-skin="nocturne"] #process-radial .pr-shell { background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; border-color:rgb(160 205 255 / .48); box-shadow: 0 0 3px rgb(160 205 255 / .36), 0 0 16px rgb(76 153 244 / .19), 0 0 38px rgb(53 119 218 / .10); } html[data-skin="nocturne"] #process-radial .pr-board, html[data-skin="nocturne"] #process-radial .pr-desk { background:transparent; } html[data-skin="nocturne"] #process-radial .pr-dial-fill, html[data-skin="nocturne"] #process-radial .pr-dial-warm, html[data-skin="nocturne"] #process-radial .pr-dial-cool { fill:transparent; } html[data-skin="nocturne"] #process-radial .pr-dial-fill {fill:rgb(13 20 34 / .74);} html[data-skin="nocturne"] #process-radial .pr-dial-warm {opacity:.3;} html[data-skin="nocturne"] #process-radial .pr-dial-cool {opacity:.44;} html[data-skin="nocturne"] #process-radial .pr-track-bed {stroke:rgb(189 211 238 / .22);} html[data-skin="nocturne"] #process-radial .pr-track-shadow {stroke:#000;opacity:.7;} html[data-skin="nocturne"] #process-radial .pr-node { border-color:rgb(143 176 214 / .22)!important; background:radial-gradient(58% 52% at 28% 17%,rgb(139 171 207 / .55),transparent 70%),linear-gradient(132deg,#3b4d68,#253650 48%,#111d32)!important; color:#dce8f7!important; box-shadow:inset 1px 1px 0 rgb(218 236 255 / .22),inset -2px -2px 2px rgb(0 4 13 / .52),0 5px 0 #081223,0 8px 5px rgb(0 0 0 / .46),0 18px 28px rgb(0 0 0 / .48)!important; } @media(max-width:760px) { #process-radial .pr-shell {padding:24px 16px 22px;border-radius:22px;} #process-radial .pr-heading {display:block!important;} #process-radial .pr-heading .eyebrow {margin-bottom:10px!important;} #process-radial .pr-heading h2 {width:100%;max-width:none!important;font-size:40px!important;line-height:1.08!important;} #process-radial .pr-lede {margin:16px 0 0!important;max-width:38ch!important;font-size:var(--type-body)!important;line-height:1.85!important;} #process-radial .pr-board {height:430px;margin-top:4px!important;overflow:visible!important;} #process-radial .pr-svg-desk,#process-radial .pr-well-copy {display:none!important;} #process-radial .pr-svg-mobile {display:block!important;position:absolute;inset:0 0 auto;width:100%;height:330px;overflow:visible;} #process-radial .pr-dial-warm {fill:url(#prDialWarmMobile);} #process-radial .pr-dial-cool {fill:url(#prDialCoolMobile);} #process-radial .pr-track-color {stroke:url(#prArcGradientMobile);stroke-width:12;} #process-radial .pr-track-bed {stroke-width:20;} #process-radial .pr-track-shadow {stroke-width:20;filter:url(#prTrackSoftMobile);transform:translateY(6px);} #process-radial .pr-active {stroke-width:3;} #process-radial .pr-steps {height:100%!important;} #process-radial.process-radial {--pr-node:42px;} #process-radial .pr-step[data-pr-step="3"] {--pr-node:46px;} #process-radial .pr-copy {width:84px!important;min-width:84px!important;max-width:none!important;} #process-radial .pr-num {font-size:var(--type-meta)!important;} #process-radial .pr-title {font-size:.66rem!important;line-height:1.1!important;} #process-radial .pr-copy p {display:none!important;} #process-radial .pr-step[data-place="bl"] .pr-copy {left:-42px!important;top:28px!important;} #process-radial .pr-step[data-place="l"] .pr-copy {right:auto!important;left:-42px!important;top:auto!important;bottom:30px!important;text-align:center!important;} #process-radial .pr-step[data-place="tl"] .pr-copy {right:-22px!important;bottom:30px!important;} #process-radial .pr-step[data-place="t"] .pr-copy {left:-42px!important;bottom:33px!important;} #process-radial .pr-step[data-place="tr"] .pr-copy {left:-22px!important;bottom:30px!important;} #process-radial .pr-step[data-place="r"] .pr-copy {left:-42px!important;right:auto!important;top:auto!important;bottom:30px!important;text-align:center!important;} #process-radial .pr-step[data-place="br"] .pr-copy {right:-42px!important;top:28px!important;} #process-radial .pr-mobile-readout { position:absolute;left:50%;top:326px;display:flex;flex-direction:column;align-items:center;justify-content:center; box-sizing:border-box;width:min(310px,92%);height:92px;min-height:92px;max-height:92px; /* More room under the copy than over it — the description was sitting on the card's bottom edge. The block is centred, so the extra bottom padding lifts the text off it. */ padding:10px 16px 18px;border:1px solid rgb(255 255 255 / .62);border-radius:14px;background:rgb(255 255 255 / .28); box-shadow:inset 0 1px rgb(255 255 255 / .72),0 10px 24px rgb(47 45 40 / .09);transform:translateX(-50%);backdrop-filter:blur(8px); text-align:center; } #process-radial .pr-mobile-readout span {display:block;font:500 .55rem var(--mono);letter-spacing:.14em;color:color-mix(in srgb,var(--ink) 42%,transparent);} #process-radial .pr-mobile-readout strong {display:block;margin-top:2px;font:650 .9rem/1.15 var(--body);color:var(--pr-signal);min-height:1.15em;} #process-radial .pr-mobile-readout p { margin:6px 0 0;width:100%;min-height:calc(.82rem * 1.42 * 2);max-height:calc(.82rem * 1.42 * 2); font:.82rem/1.42 var(--body);color:var(--muted);text-align:center;overflow:hidden; } html[data-skin="nocturne"] #process-radial .pr-mobile-readout {background:rgb(19 29 47 / .46);border-color:rgb(176 207 242 / .14);box-shadow:inset 0 1px rgb(213 231 255 / .1),0 12px 26px rgb(0 0 0 / .28);} } @media(max-width:430px) { /* Was 10px, which put the Process card 8px outside the line the nav and every other section card sit on. The gutter is the page's one edge. */ #process-radial.process-radial {padding-inline:var(--gutter)!important;} #process-radial .pr-shell {padding-inline:12px;} #process-radial .pr-board {height:420px;} #process-radial .pr-svg-mobile {height:318px!important;} #process-radial .pr-mobile-readout {top:314px;} } @media(prefers-reduced-motion:reduce) { #process-radial .pr-node,#process-radial .pr-icon {animation:none!important;transition:none!important;} #process-radial .pr-copy p {transition:none!important;} } /* ============================================================ THE READOUT ------------------------------------------------------------ The step description used to sit beside its own node, in a 150px column at .73rem — about 11.7px, wrapping to three lines, over the dial's own gradients, and in the active skin coloured #2255ab, which on the nocturne paper is roughly 2:1. It was unreadable in the literal sense. So the description leaves the dial. The nodes keep what they need to be identified in place — number and name — and the explanation moves to one fixed position in the top-right, opposite the heading, where it has a column of its own and can be set at body size. Why there: it is the one large empty area in the section, it reads second in both Latin scan order and the DOM, and a single fixed position means the eye stops relearning where the text will appear. Bounded by a hairline and a lit top edge rather than a fill, matching the section shell. ============================================================ */ #process-radial .pr-readout { display: none; grid-column: 2; grid-row: 1; align-self: start; padding: 18px 22px 20px; border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); border-radius: 18px; background: linear-gradient(150deg, color-mix(in srgb, var(--ink) 3%, transparent), transparent 60%); box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 70%, transparent); } #process-radial .pr-readout-num { display: block; color: var(--pr-signal); font-family: var(--mono); font-size: var(--type-meta); font-weight: 500; letter-spacing: 0.16em; line-height: 1; } #process-radial .pr-readout-title { display: block; margin-top: 8px; color: var(--ink); font-family: var(--display); font-size: 1.42rem; font-weight: var(--heading-weight, 400); letter-spacing: -0.02em; line-height: 1.05; } #process-radial .pr-readout-copy { /* 46ch would be wider than the column; this wraps to two or three lines at every desktop width, which is what keeps the block from resizing as the dial steps through descriptions of different lengths. */ max-width: 30ch; /* Three lines held open. The descriptions run to two or three lines at every desktop width (the column caps at 21rem and the text at 30ch), so without this the panel grew and shrank by 23px as the dial stepped — movement in the corner of the eye that reads as the layout being unsure of itself. */ min-height: 4.5em; margin: 10px 0 0; color: color-mix(in srgb, var(--ink) 74%, transparent); font-family: var(--body); font-size: 0.95rem; line-height: 1.5; } /* The turn: the new step rises into place. Short enough not to lag the dial, and only ever triggered by an actual change of step. */ @keyframes pr-readout-turn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } #process-radial .pr-readout.is-turning .pr-readout-num, #process-radial .pr-readout.is-turning .pr-readout-title, #process-radial .pr-readout.is-turning .pr-readout-copy { animation: pr-readout-turn 320ms cubic-bezier(0.22, 1, 0.36, 1) both; } #process-radial .pr-readout.is-turning .pr-readout-title { animation-delay: 40ms; } #process-radial .pr-readout.is-turning .pr-readout-copy { animation-delay: 80ms; } html[data-skin="nocturne"] #process-radial .pr-readout { /* The section shell's own edge (site/section-depth.css). */ border-color: #b4d2ff40; background: linear-gradient(150deg, #809cc014, transparent 58%); box-shadow: inset 0 1px 1px #b4d2ff40, 0 22px 50px -30px #00030b99; } html[data-skin="nocturne"] #process-radial .pr-readout-copy { color: color-mix(in srgb, var(--ink) 78%, transparent); } html[data-skin="nocturne"] #process-radial .pr-readout-num { /* --pr-signal resolves to #2f66c9, which is 3.71:1 on the nocturne paper — under AA for 13px text, and the same too-dark blue the step labels were using. Lifted to 9.6:1; still the accent, now legible. */ color: #7fb0ff; } @media (min-width: 981px) { /* Heading left, readout right, dial across both. The container's section number is absolutely positioned, so it stays out of the grid. */ #process-radial .pr-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 21rem); column-gap: clamp(28px, 4vw, 72px); align-items: start; } #process-radial .pr-heading { grid-column: 1; grid-row: 1; } #process-radial .pr-board { grid-column: 1 / -1; grid-row: 2; } #process-radial .pr-readout { display: block; } /* With the readout carrying the description, the nodes are labels again. */ #process-radial .pr-copy p { display: none !important; } #process-radial .pr-step:is(.is-active, .is-focus) .pr-title { /* Was #2255ab — a mid navy, which reads on the light paper and disappears on the dark one. The node itself is lit blue and the readout names the step, so the label does not need colour to carry state; it needs contrast. */ color: var(--ink) !important; opacity: 1 !important; } } /* Between the mobile readout's breakpoint and the two-column grid, the dial is wide but the section is not: the description stays on the nodes there. */ @media (min-width: 761px) and (max-width: 980px) { #process-radial .pr-readout { display: none; } } @media (prefers-reduced-motion: reduce) { #process-radial .pr-readout.is-turning .pr-readout-num, #process-radial .pr-readout.is-turning .pr-readout-title, #process-radial .pr-readout.is-turning .pr-readout-copy { animation: none; } } /* ------------------------------------------------------------------------- Process sits on the page's edge like every other card. .pr-shell is both the container and the painted surface, and its padding shorthand replaces the .container gutter with its own 24-56px. That left the shell's box full-bleed: at 900px wide it ran 0 to 900 while the nav, the work grid, the pack rail and the testimonial frame all sat at 32.4. It was the one card wider than the rest, which is exactly how it read. Insetting the section gives the shell the gutter back without touching its internal padding, so the dial keeps the room it needs inside a box that now lines up with everything else. ------------------------------------------------------------------------- */ #process-radial.process-radial { padding-inline: var(--gutter); }