/* ========================================================================== V07 · MACHINED WELL — a skin for #w8-system only. -------------------------------------------------------------------------- THESIS Solid material. The section is not a card floating over a page; it is one piece of stock. A polished rim is the top surface; the panel is MILLED INTO it — a real emboss (dark inner top wall, bright lower lip), never a drop shadow. Each step is a raised block sitting in that well: a bright top edge, a dark bottom edge, a tight contact shadow held right against the box. Nothing soft, nothing blurred, nothing floating. Cut, not printed. THE STATE ANSWER — deliberately the INVERSE of the base. The base makes the open tab the LIGHTEST thing on the rail. Here the open tab is the DARKEST: it is the OPENING into the well. It carries the well's exact tone, and the rim's machined edge — white lip over a hard dark cut — is BROKEN for exactly its width by an absolutely-positioned filler that carries the material past the seam. Tab and panel are one uninterrupted face. Four signals, one idea: the cut-out tone, the accent inlay across the broken edge, the raised accent numeral insert, the ink-black name. DECISIONS, AND WHY 1 · Three planes, and they are far apart on purpose. Ground #DFE6F2, rim #FFF→#EDF3FB, well #C1CFE8. An earlier pass put the well only ten levels under the ground and the recess read as a tint, not as a cut; it now sits ~35 levels under, so the panel is unmistakably a different plane from the material it is cut into. 2 · The rim's lower edge is a real machined edge: a 2px white lip inset above a hard dark border line. That edge is what the open tab breaks. 3 · A step block is no longer flat white — it is top-lit stock (#F8FBFE → #E9F0FA) so a white 1px top edge and a dark 1px bottom edge both have something to read against. On flat white both were invisible, which is why the blocks used to read as baseline cards. 4 · Every soft ambient blur is gone. The plate and the blocks each keep one tight contact shadow (2-3px) and nothing else. Radii tightened again (plate 22→8, tab 14→6, step 16→7, badge 11→5): a tight radius is what makes a surface read as cut rather than drawn. 5 · Every edge is drawn with box-shadow or background-image. No border-width, padding, margin, font-size, font-weight or font-family is touched anywhere — those reflow, and the wireframe is locked. 6 · Closed badges are ENGRAVED (inset shadow + a white kick below); the open badge is a raised accent insert. Same part, two states. 7 · The tick is a drilled seat with a stamped accent notch. Round, not square: a square seat around a check reads as a form checkbox, i.e. as a control the reader could toggle. 8 · The rule beside the numeral is a real 2px groove — dark cut over a white lit line — which only became possible once the block stopped being pure white. 9 · One accent, on the open thread and the numerals. No second hue. 10 · NOTHING is added inside .w8-step — it is a subgrid with exactly four children and a fifth would break it. The one pseudo this file adds is on the selected TAB: position:absolute, left:0/right:0 so it can never widen anything, and it is the only one that leaves its own box (12px downward, into .w8-area, which is overflow:hidden). ========================================================================== */ #w8-system.w8{ --z7-ground: #DFE6F2; /* matte stock the rim is the top surface of */ --z7-edge: #CBD6E8; /* the band's own 1px edges */ --z7-rim-hi: #FFFFFF; /* polished rim, lit from above */ --z7-rim-md: #F6F9FE; --z7-rim-lo: #EDF3FB; --z7-well: #C1CFE8; /* the milled face — panel AND open tab */ --z7-wall: rgba(15,28,56,.34); /* the well's inner top wall */ --z7-cut: rgba(15,28,56,.30); /* a hard machined edge */ --z7-lip: rgba(255,255,255,.96);/* the lit lip */ --z7-blue: #1A73E8; --z7-blue-d: #0E4FB4; /* the base's own surface tokens, re-pointed at the machined ladder */ --w8-sheet: var(--z7-well); --w8-rail: var(--z7-rim-lo); --w8-edge: #C6D2E6; --w8-edge2: rgba(15,28,56,.13); --w8-r: 8px; } /* ---- 1 · the stock ------------------------------------------------------ */ #w8-system.w8{ background: var(--z7-ground); border-top-color: var(--z7-edge); border-bottom-color: var(--z7-edge); } /* ---- 2 · the plate: material with a hole milled in it ------------------- */ #w8-system .w8-area{ background: var(--z7-well); box-shadow: inset 0 1px 0 var(--z7-lip), /* the lit top lip */ inset 0 0 0 1px rgba(15,28,56,.20), /* the machined rim line */ 0 1px 0 rgba(255,255,255,.85), /* light kicked off below */ 0 2px 3px rgba(15,28,56,.16); /* one tight contact edge */ } /* ---- 3 · the rim the tabs are cut into ---------------------------------- Polished stock, lit from above, finished at the bottom with a real machined edge: a 2px white lip sitting directly on a hard dark cut. A brushed hairline texture was tried here and cut — at 1px it striped the badges and read as noise, not as material. */ #w8-system .w8-dock{ background: linear-gradient(180deg, var(--z7-rim-hi) 0%, var(--z7-rim-md) 48%, var(--z7-rim-lo) 100%); border-bottom-color: var(--z7-cut); box-shadow: inset 0 1px 0 #FFFFFF, inset 0 -2px 0 rgba(255,255,255,.92); /* the lip on the cut */ } /* a closed tab is flush with the rim: no fill, quiet ink, an engraved badge */ #w8-system .w8-tab{ border-radius: 6px 6px 0 0; transition: background .16s var(--ease), color .16s var(--ease), box-shadow .16s var(--ease); } /* pressing on a closed key polishes it — it never lifts, never moves */ #w8-system .w8-tab:hover:not([aria-selected="true"]){ background: linear-gradient(180deg, #FFFFFF 0%, #F1F6FD 100%); box-shadow: inset 0 1px 0 #FFFFFF, inset 0 0 0 1px rgba(15,28,56,.09); } #w8-system .w8-tab:focus-visible{ outline: 2px solid var(--z7-blue); outline-offset: -3px; border-radius: 6px 6px 0 0; } /* ---- 4 · THE OPENING ---------------------------------------------------- The selected tab is the hole through the rim: the well's exact tone, the well's own inner top wall, and a filler that carries the material down past the seam so tab and panel are one uninterrupted face. z-index keeps that filler above the canvas's top wall; both are only paint, never layout. */ #w8-system .w8-tab[aria-selected="true"]{ z-index: 1; background: var(--z7-well); box-shadow: inset 0 12px 9px -5px var(--z7-wall), /* the cut's top wall */ inset 1px 0 0 rgba(15,28,56,.26), /* its two side walls */ inset -1px 0 0 rgba(15,28,56,.26); } #w8-system .w8-tab[aria-selected="true"]::before{ border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #3C8BF0 0%, var(--z7-blue) 100%); box-shadow: 0 1px 0 rgba(10,60,140,.55); /* the inlay's own seam */ } /* the material continuing past the seam, exactly this tab's width */ #w8-system .w8-tab[aria-selected="true"]::after{ content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 20px; background: var(--z7-well); pointer-events: none; } #w8-system .w8-tab[aria-selected="true"] .w8-tab-w{ color: var(--z7-blue-d); } /* ---- 5 · the well ------------------------------------------------------- */ #w8-system .w8-canvas{ background: var(--z7-well); box-shadow: inset 0 1px 0 rgba(15,28,56,.40), /* the hard cut at the top */ inset 0 14px 11px -7px var(--z7-wall), /* the inner top wall */ inset 2px 0 4px -3px rgba(15,28,56,.26), /* the two side walls */ inset -2px 0 4px -3px rgba(15,28,56,.26), inset 0 -1px 0 rgba(255,255,255,.90), /* the bright lower lip */ inset 0 -7px 6px -6px rgba(255,255,255,.55); /* the light it catches */ } /* ---- 6 · a step is a raised block --------------------------------------- Top-lit stock, not flat white: that is the only way a 1px white top edge and a 1px dark bottom edge can both be seen. One tight contact shadow, no ambient blur — these blocks sit on the floor of the well, they do not hover above it. */ #w8-system .w8-step{ border-radius: 7px; background: linear-gradient(180deg, #F6FAFE 0%, #F2F7FD 45%, #E6EEF9 100%); box-shadow: inset 0 1px 0 #FFFFFF, /* bright top edge */ inset 0 -1px 0 rgba(15,28,56,.32), /* darker bottom edge */ inset 0 0 0 1px rgba(15,28,56,.17), /* the block's rim line */ 0 1px 0 rgba(15,28,56,.10), 0 3px 4px -1px rgba(15,28,56,.38); /* tight contact shadow */ } /* the card's lead mark, milled: an accent inlay running out of a groove */ #w8-system .w8-num s{ border-radius: 0; background-color: transparent; background-image: linear-gradient(180deg, rgba(15,28,56,.26) 0 1px, rgba(255,255,255,.95) 1px 2px); } #w8-system .w8-num b{ background: linear-gradient(180deg, #4C95F2 0%, var(--z7-blue) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 1px 0 rgba(255,255,255,.6); } /* the divider inside a block: cut line above, lit line below */ #w8-system .w8-li{ border-top-color: rgba(15,28,56,.15); box-shadow: inset 0 1px 0 rgba(255,255,255,.98); } /* ---- 7 · the tick, milled ---------------------------------------------- A drilled seat with a stamped accent notch — the same language as the engraved badges, at list scale. */ #w8-system .w8-li li::before{ border-radius: 50%; background: #DBE5F4; box-shadow: inset 0 1.5px 2px rgba(15,28,56,.30), inset 0 0 0 1px rgba(15,28,56,.12), 0 1px 0 rgba(255,255,255,1); } #w8-system .w8-li li::after{ border-color: var(--z7-blue-d); filter: drop-shadow(0 1px 0 rgba(255,255,255,.9)); } /* ---- 8 · the counter: slots cut in the floor of the well ---------------- */ #w8-system .w8-dots i{ border-radius: 1px; background: rgba(15,28,56,.24); box-shadow: inset 0 1px 1px rgba(15,28,56,.34), 0 1px 0 rgba(255,255,255,.75); transition: width .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease); } #w8-system .w8-dots i.on{ background: linear-gradient(180deg, #4C95F2 0%, var(--z7-blue) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 1px 0 rgba(255,255,255,.55); } /* ---- 9 · the close ------------------------------------------------------ */ #w8-system .w8-close{ border-top-color: rgba(15,28,56,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.92); } #w8-system .w8-go{ color: var(--z7-blue-d); } #w8-system .w8-go:hover{ color: var(--z7-blue); } /* ========================================================================== THE PHONE — every rule above that the 860px block also touches, re-declared. The plate goes edge to edge there: no outer rim, no radius, no lift — the well is milled straight into the page and the two hairlines are its cut edges. The rim strip and the opening in it work exactly as they do wide. ========================================================================== */ @media (max-width: 860px){ #w8-system .w8-area{ box-shadow: none; border-top-color: rgba(15,28,56,.20); border-bottom-color: rgba(15,28,56,.20); } #w8-system .w8-tab{ border-radius: 6px 6px 0 0; } #w8-system .w8-tab:focus-visible{ border-radius: 6px 6px 0 0; } #w8-system .w8-tab[aria-selected="true"]::before{ border-radius: 4px 4px 0 0; } #w8-system .w8-tab[aria-selected="true"] .w8-tab-s{ color: var(--ink); } #w8-system .w8-canvas{ box-shadow: inset 0 1px 0 rgba(15,28,56,.40), inset 0 13px 10px -7px var(--z7-wall), inset 0 -1px 0 rgba(255,255,255,.85); } #w8-system .w8-pname{ color: var(--ink); } #w8-system .w8-dots i{ box-shadow: inset 0 1px 1px rgba(15,28,56,.30), 0 1px 0 rgba(255,255,255,.7); } } /* ========================================================================== REDUCED MOTION — every transition this file introduced, off. ========================================================================== */ @media (prefers-reduced-motion: reduce){ #w8-system .w8-tab, #w8-system .w8-dots i{ transition: none; } }