/* ========================================================================== OPTION A · QUARRIED STONE #w8-system only. COLOUR AND SHADOW ONLY — no geometry is touched. -------------------------------------------------------------------------- THE MINDSET: a systems designer's answer. DEPTH IS A VALUE LADDER; COLOUR IS RESERVED FOR MEANING. The section did not feel foreign because it was blue. It felt foreign because of two measurements: the well #C1CFE8 L* 82.8 chroma 39 the site's darkest legal ground #EDF2F9 L* 95.3 chroma 12 A surface 12.5 L* below anything else on the site, carrying the chroma of a HAIRLINE colour (--ds-edge is chroma 46) across ~1100 x 480px, cannot read as the same material as the page around it. So this option takes the chroma out and keeps the cut. The well moves to L* 93.6 / chroma 10 — a near-neutral stone, one notch under --line #E3E6EB in tone and at its exact chroma. Every step card goes back to pure #FFFFFF, which is what every other card on this page already is (the six service cards, the four plan cards, the eighteen client cards). The section's only colour is now the navy selected state and the accent full stop — exactly the ladder site/hier.css set today. THE DEPTH IS NOT REDUCED, IT IS RE-BASED. Every emboss in V07 is kept move for move — the lit top lip, the hard machined cut under the rim, the inner top wall of the well, the bright lower lip, the tight contact shadow under each block, the drilled tick seat, the 2px groove. What changes is that they are now drawn in NEUTRAL ink (rgba(11,13,18,·)) instead of blue ink (rgba(15,28,56,·)), and the card is white so its 1px white top edge and dark bottom edge read against a 6.4 L* drop instead of a 4.3 one. ========================================================================== */ #w8-system.w8{ --t3-rim-hi: #FFFFFF; --t3-rim-md: #FAFBFD; --t3-rim-lo: #F1F3F8; --t3-well: #E9EDF3; /* L* 93.6 · chroma 10 — the milled face */ --t3-card: #FFFFFF; /* the site's one card colour */ --t3-cut: rgba(11,13,18,.19); /* a hard machined edge */ --t3-wall: rgba(11,13,18,.17); /* the well's inner top wall */ --t3-ring: rgba(11,13,18,.12); /* a block's own rim line */ --t3-lip: rgba(255,255,255,.97); --t3-sel: #0F1B3D; /* --hr-sel, the selected state */ /* V07's own tokens, re-pointed at the neutral ladder, so any rule in that file this one does not restate still lands on this palette. */ --z7-ground: #FFFFFF; --z7-well: var(--t3-well); --z7-wall: var(--t3-wall); --z7-cut: var(--t3-cut); --z7-lip: var(--t3-lip); --z7-blue: var(--t3-sel); --z7-blue-d: var(--t3-sel); --w8-sheet: var(--t3-well); --w8-edge: #E3E6EB; --w8-edge2: rgba(11,13,18,.10); } /* ---- 1 · the stock — the section keeps shelf.css's editorial floor ------ */ #w8-system.w8{ background: #FFFFFF; border-top-color: var(--sh-edge, #E3E6EB); border-bottom-color: var(--sh-edge, #E3E6EB); } /* ---- 2 · the plate ------------------------------------------------------ */ #w8-system .w8-area{ background: var(--t3-well); box-shadow: inset 0 1px 0 var(--t3-lip), inset 0 0 0 1px rgba(11,13,18,.14), 0 1px 0 rgba(255,255,255,.9), 0 2px 4px rgba(11,13,18,.09); } /* ---- 3 · the rim the tabs are cut into ---------------------------------- */ #w8-system .w8-dock{ background: linear-gradient(180deg, var(--t3-rim-hi) 0%, var(--t3-rim-md) 48%, var(--t3-rim-lo) 100%); border-bottom-color: var(--t3-cut); box-shadow: inset 0 1px 0 #FFFFFF, inset 0 -2px 0 rgba(255,255,255,.94); } #w8-system .w8-tab:hover:not([aria-selected="true"]){ background: linear-gradient(180deg, #FFFFFF 0%, #F5F7FA 100%); box-shadow: inset 0 1px 0 #FFFFFF, inset 0 0 0 1px rgba(11,13,18,.08); } #w8-system .w8-tab:focus-visible{ outline-color: var(--t3-sel); } /* ---- 4 · the opening ---------------------------------------------------- */ #w8-system .w8-tab[aria-selected="true"]{ background: var(--t3-well); box-shadow: inset 0 12px 9px -5px var(--t3-wall), inset 1px 0 0 rgba(11,13,18,.15), inset -1px 0 0 rgba(11,13,18,.15); } #w8-system .w8-tab[aria-selected="true"]::before{ background: linear-gradient(180deg, #2C3A63 0%, var(--t3-sel) 100%); box-shadow: 0 1px 0 rgba(11,13,18,.45); } #w8-system .w8-tab[aria-selected="true"]::after{ background: var(--t3-well); } #w8-system .w8-tab[aria-selected="true"] .w8-tab-n{ color: var(--ink); } #w8-system .w8-tab[aria-selected="true"] .w8-tab-w{ color: var(--t3-sel); } /* ---- 5 · the well ------------------------------------------------------- */ #w8-system .w8-canvas{ background: var(--t3-well); box-shadow: inset 0 1px 0 rgba(11,13,18,.26), inset 0 14px 11px -7px var(--t3-wall), inset 2px 0 4px -3px rgba(11,13,18,.15), inset -2px 0 4px -3px rgba(11,13,18,.15), inset 0 -1px 0 rgba(255,255,255,.95), inset 0 -7px 6px -6px rgba(255,255,255,.6); } /* ---- 6 · a step is a raised block, and it is WHITE ---------------------- */ #w8-system .w8-step{ background: var(--t3-card); box-shadow: inset 0 1px 0 #FFFFFF, inset 0 -1px 0 rgba(11,13,18,.16), inset 0 0 0 1px var(--t3-ring), 0 1px 0 rgba(11,13,18,.05), 0 3px 5px -1px rgba(11,13,18,.16), 0 10px 20px -14px rgba(11,13,18,.34); } #w8-system .w8-num s{ background-image: linear-gradient(180deg, rgba(11,13,18,.16) 0 1px, rgba(255,255,255,.95) 1px 2px); } #w8-system .w8-num b{ background: var(--t3-sel); box-shadow: 0 1px 0 rgba(255,255,255,.7); } #w8-system .w8-li{ border-top-color: rgba(11,13,18,.11); box-shadow: inset 0 1px 0 rgba(255,255,255,1); } /* ---- 7 · the tick, milled ----------------------------------------------- */ #w8-system .w8-li li::before{ background: #EBEEF3; box-shadow: inset 0 1.5px 2px rgba(11,13,18,.20), inset 0 0 0 1px rgba(11,13,18,.10), 0 1px 0 rgba(255,255,255,1); } #w8-system .w8-li li::after{ border-color: var(--t3-sel); filter: drop-shadow(0 1px 0 rgba(255,255,255,.9)); } /* ---- 8 · the counter ---------------------------------------------------- */ #w8-system .w8-dots i{ background: rgba(11,13,18,.16); box-shadow: inset 0 1px 1px rgba(11,13,18,.22), 0 1px 0 rgba(255,255,255,.8); } #w8-system .w8-dots i.on{ background: var(--t3-sel); box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 1px 0 rgba(255,255,255,.6); } /* ---- 9 · the close ------------------------------------------------------ */ #w8-system .w8-close{ border-top-color: rgba(11,13,18,.11); box-shadow: inset 0 1px 0 rgba(255,255,255,.95); } /* ========================================================================== THE PHONE — every rule the 860px block in V07 also touches, re-declared. ========================================================================== */ @media (max-width: 860px){ #w8-system .w8-area{ box-shadow: none; border-top-color: rgba(11,13,18,.15); border-bottom-color: rgba(11,13,18,.15); } #w8-system .w8-canvas{ box-shadow: inset 0 1px 0 rgba(11,13,18,.26), inset 0 13px 10px -7px var(--t3-wall), inset 0 -1px 0 rgba(255,255,255,.92); } #w8-system .w8-dots i{ box-shadow: inset 0 1px 1px rgba(11,13,18,.20), 0 1px 0 rgba(255,255,255,.75); } }