/* ==== surface.css · layer 1 of 3 ==== */ /* ========================================================================== 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 assets/shared/design/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); } } /* ==== surface.css · layer 2 of 3 ==== */ /* ========================================================================== S5 · SOLID SLAB — solidity from FLAT SOLID COLOUR Loads AFTER an earlier layer of this file. -------------------------------------------------------------------------- THE DECISION: no gradients, no blur, anywhere. Every other version — A included, and V07 before it — builds depth out of things that FADE: gradients down the rim and the blocks, blurred inner walls, blurred contact shadows. Fading is how a screen imitates soft light, and it is also why a surface can end up looking washed rather than made of something. S5 removes every one of them. Each part is ONE flat solid colour, and the depth is carried entirely by: a stepped tone ladder #FFFFFF paper · #F6F8FC rim · #E4EAF2 well · #FFFFFF block — four flat plates, each a definite step, nothing blending into anything. hard offset edges every shadow has 0 blur. A block sits on a 2px solid dark offset; the rim's cut is 2px of solid dark; the lit lips are solid #FFFFFF, not 96%. The result reads like screen-printed material or anodised plate rather than like a render — the most literally "solid" of the five, and the one that holds up best on a cheap or badly calibrated monitor, where soft gradients band and blurred shadows disappear. This is the version to pick if "more solid" meant SOLID COLOUR. ========================================================================== */ #w8-system.w8{ --t3-rim: #F6F8FC; /* flat, no gradient */ --t3-well: #E4EAF2; /* L* 92.5 */ --t3-cut: rgba(11,13,18,.22); } /* ---- the plate: a flat slab on a hard offset --------------------------- */ #w8-system .w8-area{ box-shadow: inset 0 0 0 1px rgba(11,13,18,.18), 0 2px 0 rgba(11,13,18,.10); } /* ---- the rim: one flat colour, cut with a solid 2px edge --------------- */ #w8-system .w8-dock{ background: var(--t3-rim); border-bottom-color: var(--t3-cut); box-shadow: inset 0 -2px 0 #FFFFFF; } #w8-system .w8-tab:hover:not([aria-selected="true"]){ background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(11,13,18,.12); } /* ---- the well: solid walls, no fade ------------------------------------ */ #w8-system .w8-canvas{ box-shadow: inset 0 2px 0 rgba(11,13,18,.22), inset 2px 0 0 rgba(11,13,18,.12), inset -2px 0 0 rgba(11,13,18,.12), inset 0 -2px 0 #FFFFFF; } #w8-system .w8-tab[aria-selected="true"]{ box-shadow: inset 0 2px 0 rgba(11,13,18,.22), inset 2px 0 0 rgba(11,13,18,.12), inset -2px 0 0 rgba(11,13,18,.12); } /* ---- a block: flat white on a hard 2px offset -------------------------- */ #w8-system .w8-step{ box-shadow: inset 0 0 0 1px rgba(11,13,18,.17), 0 2px 0 rgba(11,13,18,.13), 0 3px 0 rgba(11,13,18,.05); } /* ---- every small part, flat ------------------------------------------- */ #w8-system .w8-li{ border-top-color: rgba(11,13,18,.15); box-shadow: inset 0 1px 0 #FFFFFF; } #w8-system .w8-num s{ background-image: linear-gradient(180deg, rgba(11,13,18,.20) 0 1px, #FFFFFF 1px 2px); /* two solid bands, not a fade */ } #w8-system .w8-num b{ box-shadow: 0 1px 0 #FFFFFF; } #w8-system .w8-li li::before{ background: #E4E9F1; box-shadow: inset 0 2px 0 rgba(11,13,18,.20), inset 0 0 0 1px rgba(11,13,18,.13), 0 1px 0 #FFFFFF; } #w8-system .w8-dots i{ background: rgba(11,13,18,.20); box-shadow: inset 0 1px 0 rgba(11,13,18,.26), 0 1px 0 #FFFFFF; } #w8-system .w8-dots i.on{ background: var(--t3-sel); box-shadow: 0 1px 0 #FFFFFF; } /* the selected tab's inlay is a solid bar here, not a gradient */ #w8-system .w8-tab[aria-selected="true"]::before{ background: var(--t3-sel); box-shadow: 0 1px 0 rgba(11,13,18,.35); } /* ========================================================================== THE PHONE ========================================================================== */ @media (max-width: 860px){ #w8-system .w8-area{ box-shadow: none; } #w8-system .w8-canvas{ box-shadow: inset 0 2px 0 rgba(11,13,18,.22), inset 0 -2px 0 #FFFFFF; } } /* ==== surface.css · layer 3 of 3 ==== */ /* ========================================================================== D1 · DEEPER FLOOR — the hole gets deeper because the FLOOR DROPS Loads after an earlier layer of this file + an earlier layer of this file. -------------------------------------------------------------------------- THE DECISION: sink the floor. One flat plane, one step down. The plainest reading of "the hole goes deeper", and in S5's flat-colour idiom it is also the most honest one: there is no gradient to fake distance with, so the only thing that says "further away" is a darker flat plate. The floor goes #E4EAF2 -> #DCE3EE, L* 92.5 -> 90.0. That is one full step, and it lands the floor just under --line #E3E6EB (L* 91.2) — so the deepest thing in the section is still only as dark as the site's own hairline colour, and it is 7.2 L* ABOVE the treatment that was rejected (chroma 18 against that one's 39). Two things follow the floor down and nothing else does: · the drilled tick seats, which are cut into the block and must stay darker than the block but lighter than the floor · the block's own hard offset, which now has a darker plane to land on and can therefore be read at a lower opacity, not a higher one The rim, the walls, the cut and every edge thickness are S5's, untouched. This is the version to pick if you want the depth to be about DISTANCE. ========================================================================== */ #w8-system.w8{ --t3-well: #DCE3EE; /* L* 90.0 · chroma 18 */ } /* the block sits on a darker plane, so its offset reads at less opacity */ #w8-system .w8-step{ box-shadow: inset 0 0 0 1px rgba(11,13,18,.17), 0 2px 0 rgba(11,13,18,.11), 0 3px 0 rgba(11,13,18,.045); } /* the seat stays between the block and the floor */ #w8-system .w8-li li::before{ background: #DFE5EF; box-shadow: inset 0 2px 0 rgba(11,13,18,.20), inset 0 0 0 1px rgba(11,13,18,.13), 0 1px 0 #FFFFFF; }