/* ============================================================ muds-apple27.css v1.1.0 (2026 09 13) THE APPLE 27 LAYER 1.1.0 same night: an installed tablet in portrait floats the tab bar at the top like iPadOS 27 (step 3B); phones keep it at the bottom. 1.0.1 same evening: the name's inline type label holds the 22px line (layout sweep, Clients at 1280 and 1440). Served under the 1.0.0 query: the edge cache holds ten minutes and the workers refresh behind, so no app cut was spent on two pixels; the next cut of either app moves the query to 1.0.1. Muds, Sep 13 2026: make PropOS and Nurture look like the perfect iOS, iPadOS and macOS web app. Every number comes from Apple's iOS and iPadOS 27 and macOS 27 Figma kits, traced to node ids in PKA/design-system/APPLE_27_SPEC.md, rebuilt inside the brand law: gold #f2b705 is the action color only, the ground is #161b1d, text is cream, no new hues, DM Sans with Bebas for the large title. Loaded AFTER muds-ui.css by PropOS and Nurture only, so hellomuds.com is not reskinned; it folds into muds-ui.css 3.0 when Muds rules on the public site. Eight steps, each measured at 390, 820 and 1280. Assumptions the Figma rate limit left open, to be trued when the iOS Sheets, Toolbars and Buttons pages are readable: CSS blur is half the Figma radius; phone sheet radius 38 (the iPad value); grabber 36 by 5; the segmented track uses the macOS toolbar XL size. ============================================================ */ /* ---------- STEP 0. TOKENS ---------- */ :root{ --font-text:'DM Sans',system-ui,sans-serif; --font-display:'Bebas Neue','DM Sans',sans-serif; --t-large-title:400 2.125rem/2.5625rem var(--font-display); --t-title1:700 1.75rem/2.125rem var(--font-text); --t-title2:700 1.375rem/1.75rem var(--font-text); --t-title3:600 1.25rem/1.5625rem var(--font-text); --t-headline:600 1.0625rem/1.375rem var(--font-text); --t-body:400 1rem/1.375rem var(--font-text); --t-body-em:600 1rem/1.375rem var(--font-text); --t-callout:400 1rem/1.3125rem var(--font-text); --t-subhead:400 .9375rem/1.25rem var(--font-text); --t-footnote:400 .8125rem/1.125rem var(--font-text); --t-caption:600 .75rem/1rem var(--font-text); --mat-ultrathin:rgba(22,27,29,.32); --mat-thin:rgba(22,27,29,.51); --mat-regular:rgba(22,27,29,.63); --mat-thick:rgba(22,27,29,.78); --mat-chrome:rgba(33,39,41,.90); /* the tab bar: thick measured 3.76 to 1 for the gold label on its pill over a cream backdrop; .86 clears 4.8 over cream and 5.3 over a gold button */ --mat-bar:rgba(22,27,29,.86); --blur-ios:saturate(1.6) blur(50px); --blur-mac:saturate(1.6) blur(30px); --blur-edge:blur(3px); --rim:0 0 0 .5px rgba(247,242,230,.14); --hair:rgba(247,242,230,.10); --stroke-float:rgba(247,242,230,.20); --lg-shadow:0 8px 48px rgba(0,0,0,.45); --sheet-shadow:0 18px 54px rgba(0,0,0,.57),0 0 1px rgba(0,0,0,.8); --fill-control:rgba(247,242,230,.08); --fill-control-on:rgba(247,242,230,.12); --fill-select:rgba(247,242,230,.10); --r-capsule:999px; --r-glass:34px; --r-menu:12px; --r-float:16px; --r-sheet-touch:38px; --r-btn:var(--r-capsule); --tab-h:62px; --tab-gap:max(16px,min(25px,env(safe-area-inset-bottom,0px))); --bar-h:52px; } /* ---------- STEP 1. CAPSULE BUTTONS AND GLASS SECONDARIES ---------- The iOS 27 and macOS toolbar shape is the capsule [4363:11823]. The secondary is Liquid Glass small in the ground's own tint: cream 8% with a cream hairline rim (cream text 12.63 to 1 on the composite). A secondary never turns gold, a gold secondary reads as a second primary. Apple does not lift controls, so the primary loses its lift and glow and keeps the .97 press. Heights do not move. */ .btn-yellow,.btn-dark,.btn-ghost,.btn-red{border-radius:var(--r-btn)!important} .btn-dark{background:var(--fill-control);border:0;box-shadow:var(--rim);color:var(--ink)} .btn-dark:hover{background:var(--fill-control-on);border:0;color:var(--ink);box-shadow:var(--rim)} .btn-ghost{border:0;background:transparent;color:var(--grey)} .btn-ghost:hover{border:0;background:rgba(247,242,230,.06);color:var(--ink)} .btn-red{border:0;background:rgba(255,49,49,.14);color:var(--red-t)} .btn-red:hover{border:0;background:rgba(255,49,49,.22);color:var(--red-t)} @media(hover:hover) and (pointer:fine){.btn-yellow:hover{transform:none;box-shadow:none}} .btn-yellow:active{box-shadow:none} .fsum-btn{border-radius:var(--r-capsule)} .choices:not(.list) span{border-radius:var(--r-capsule)} .topbar .acct,.rail-foot .acct{border:0;border-radius:var(--r-capsule);background:var(--fill-control);box-shadow:var(--rim)} input[type=search]{border-radius:var(--r-capsule)!important} /* ---------- STEP 2. THE ROSTER LIST, APPLE'S MEASUREMENTS ---------- The anatomy stays by Muds's ruling (tile, name, facts, one gold action, More). A one line row is Apple's Tall row, 12 + 44 + 12 = 68 [550:50515], 16 on the sides; the separator starts where the text starts and stops 16 short [5534:22992]; the group loses its border (elevation is the card on the ground, borders last). */ .rr-group{border:0} .rr-row{position:relative;padding:12px 16px;gap:12px;border-top:0} .rr-row+.rr-row::before{content:"";position:absolute;top:0;left:72px;right:16px;height:1px;background:var(--hair);pointer-events:none} .rr-row+.rr-row:has(>.rr-dotcol)::before{left:92px} .rr-row+.rr-row:has(>.rr-pick)::before{left:98px} .rr-name{font:var(--t-headline);color:var(--ink)} /* 1.0.1: a smaller inline label inside the name (SELLER, BUYER) sat on its own baseline and stretched the 22px line to 24, which put four Clients rows at 261px in the layout sweep; at line height 1 the name holds 22 */ .rr-name .dc-type{line-height:1} .rr-fact{font:var(--t-subhead);color:var(--grey)} .rr-fact.rr-next{color:var(--ink)} .rr-fact.rr-warn{color:var(--red-t)} .rr-fact.rr-why{color:var(--yellow)} .rr-fact::before{background:var(--ink-dim);top:.55em} .rr-fact.rr-why::before{background:var(--yellow)} .rr-right{font:var(--t-subhead)} .rr-right.rr-money{font:500 .9375rem/1.25rem 'DM Mono',monospace} .rr-chev{color:var(--ink-dim)} .rr-dotcol{padding-top:18px} .rr-sec-lbl{font:var(--t-headline);letter-spacing:0;text-transform:none;color:var(--grey)} /* the kind header (Residential, Commercial) carries an inline size and tracking from its page; tracked mixed case at 16 read smaller than its own groups, so it takes Title 3 in cream and the groups under it stay Headline in grey */ .rr-sec-lbl[style*="letter-spacing"]{font:var(--t-title3)!important;letter-spacing:0!important;color:var(--ink)} .rr-seemore{border-top:0;box-shadow:inset 0 1px 0 var(--hair)} @media(max-width:480px){.rr-row{padding:12px 16px;gap:12px}} @media(hover:none){.rr-row:hover{background:transparent}} .rr-row:active{background:var(--fill-control)} .rr-more{border:0;box-shadow:var(--rim);border-radius:var(--r-menu)} .rr-more a,.rr-more button{border-top:0;box-shadow:inset 0 1px 0 var(--hair)} .rr-more a:first-child,.rr-more button:first-child{box-shadow:none} @media(min-width:1000px){ .rr-group.rr-table .rr-row,.rr-group.rr-table .rr-row.rr-wrap{min-height:52px;padding:8px 16px} .rr-group.rr-table .rr-row+.rr-row::before{left:16px} .rr-group.rr-table .rr-name{font:var(--t-body-em)} } @media(min-width:1280px){ body.has-rail .two-pane .rr-row.rr-open{margin:0 10px;border-radius:8px;background:var(--fill-select);box-shadow:none} body.has-rail .two-pane .rr-row.rr-open::before,body.has-rail .two-pane .rr-row.rr-open+.rr-row::before{display:none} } /* ---------- STEP 3. THE LIQUID GLASS TAB BAR ---------- iPhone [3:70967]: a floating capsule 25 from each side and 25 above the bottom edge (16 with no device inset), 62 tall with 4 of glass around a 54 tab row, the selection a capsule as tall as the tab. Thick fill, so the gold active label clears 4.5 to 1 over the brightest backdrop. The clearance under a page is derived from the bar, never guessed. Phones and tablets only, per the navigation law. */ @media(max-width:999px){ html.pwa .pwa-tabs,.pwa-tabs.always{width:min(calc(100% - 50px),620px);padding:4px;gap:0;bottom:var(--tab-gap); background:var(--mat-bar);-webkit-backdrop-filter:var(--blur-ios);backdrop-filter:var(--blur-ios); border:0;box-shadow:var(--lg-shadow),var(--rim),inset 0 1px 0 rgba(247,242,230,.10)} .pwa-tabs button,.pwa-tabs button.btn-ghost,.pwa-tabs a{min-height:54px!important;padding:6px 8px 7px!important;font:600 .75rem/1rem var(--font-text)!important;letter-spacing:0;border-radius:var(--r-capsule)!important;background:transparent} .pwa-pill{top:4px;bottom:4px;background:var(--fill-select);box-shadow:none} html.pwa body,body.has-bar{padding-bottom:calc(var(--tab-h) + var(--tab-gap) + 16px)} body.has-bar .toast-stack,html.pwa .toast-stack{bottom:calc(var(--tab-h) + var(--tab-gap) + 8px)} } @media(max-width:999px) and (display-mode:standalone){ .pwa-tabs{width:min(calc(100% - 50px),620px);padding:4px;gap:0;bottom:var(--tab-gap); background:var(--mat-bar);-webkit-backdrop-filter:var(--blur-ios);backdrop-filter:var(--blur-ios); border:0;box-shadow:var(--lg-shadow),var(--rim),inset 0 1px 0 rgba(247,242,230,.10)} body{padding-bottom:calc(var(--tab-h) + var(--tab-gap) + 16px)} } /* ---------- STEP 3B. THE IPAD TAB BAR SITS AT THE TOP (1.1.0) ---------- Muds left the iPad ruling to the council, Sep 13 2026. iPadOS 27 puts the tab bar at the top in portrait and turns it into the sidebar when the screen is wide, which PropOS and Nurture already do from 1000px (the rail). So an installed tablet in portrait, 700 to 999 wide and at least 600 tall, floats the same glass capsule under the brand bar. A phone held sideways (956 by 440) fails the height floor and keeps the bottom bar. The clearance is derived from the bar: 10 above, the 62 bar, 10 below. The brand bar carries the clearance as its bottom margin so the page starts under the capsule; the drawer opens under it; toasts and the page foot go back to the bottom edge. Both pill scripts measure sideways only, and the Nurture frame fit reads a bar in the lower half only, so no script changes. */ :root{--tab-top-clear:calc(var(--tab-h) + 20px)} @media(min-width:700px) and (max-width:999px) and (min-height:600px){ html.pwa .pwa-tabs,.pwa-tabs.always{top:calc(var(--bar-h) + env(safe-area-inset-top,0px) + 10px);bottom:auto;width:min(560px,calc(100% - 80px))} html.pwa .topbar,body:has(>.pwa-tabs.always) .topbar{margin-bottom:var(--tab-top-clear)} html.pwa body,body:has(>.pwa-tabs.always){padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))} html.pwa .toast-stack,body:has(>.pwa-tabs.always) .toast-stack{bottom:calc(24px + env(safe-area-inset-bottom,0px))} html.pwa .mobile-nav,body:has(>.pwa-tabs.always) .mobile-nav{top:calc(var(--bar-h) + env(safe-area-inset-top,0px) + var(--tab-top-clear));padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))} } @media(display-mode:standalone) and (min-width:700px) and (max-width:999px) and (min-height:600px){ .pwa-tabs{top:calc(var(--bar-h) + env(safe-area-inset-top,0px) + 10px);bottom:auto;width:min(560px,calc(100% - 80px))} .topbar{margin-bottom:var(--tab-top-clear)} body{padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))} .toast-stack{bottom:calc(24px + env(safe-area-inset-bottom,0px))} .mobile-nav{top:calc(var(--bar-h) + env(safe-area-inset-top,0px) + var(--tab-top-clear));padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))} } /* ---------- STEP 4. THE TYPE RAMP ON TITLES AND META ---------- One ramp for phone, tablet and desktop, iOS sizes, the 16px reading floor and the 12px label floor held; Bebas keeps the large title. */ .page-title{font:var(--t-large-title);text-transform:uppercase;letter-spacing:.06em} .pane-name{font:var(--t-title2)} .stat-l{font:var(--t-subhead)} .stat-s{font:var(--t-footnote)} .card-hdr-sub{font:var(--t-subhead)} .page-status{font:var(--t-subhead)} .prose h3{font:var(--t-headline)} .toast{font:var(--t-callout)} .pane-sub{font:var(--t-subhead)} .pane-when{font:var(--t-footnote)} /* ---------- STEP 5. BARS AND THE DESKTOP SHELL ---------- The top bar is Apple's unified toolbar height, 52 [I4373:48605;4365:31924], a thick glass with a hairline instead of a border. Nav buttons are capsules, 36 on a mouse and 44 on touch, the active one a cream wash with its gold label. The desktop page bar sticks like a macOS toolbar over a hard scroll edge; its controls are 36 glass capsules. The rail is the macOS sidebar, 240 wide [4398:30637], items 36 [4358:6867], the wordmark aligned to the bar, the active item a cream wash so gold stays the action color. The pane is a macOS window: 16 radius, a light stroke, a 52 bar, 20 padding. */ .topbar{height:var(--bar-h);background:var(--mat-thick);-webkit-backdrop-filter:var(--blur-ios);backdrop-filter:var(--blur-ios);border-bottom:0;box-shadow:inset 0 -1px 0 var(--hair)} .mobile-nav{top:var(--bar-h)} /* the top bar's Search sits beside the account capsule, so it is a glass capsule too; a plain word beside a filled pill read as two kits */ .topbar #topbar-search{background:var(--fill-control);box-shadow:var(--rim);border:0;color:var(--ink);padding-left:16px;padding-right:16px} .topbar #topbar-search:hover{background:var(--fill-control-on)} .nav-btn{border:0;border-radius:var(--r-capsule);min-height:36px} .nav-btn:hover{border:0;background:var(--fill-control)} .nav-btn.active{border:0;background:var(--fill-select)} @media(pointer:coarse),(max-width:900px){.nav-btn{min-height:44px}} .mobile-nav .nav-btn{border:0;border-radius:var(--r-menu);background:transparent} .mobile-nav .nav-btn.active{background:var(--fill-select);border:0} @media(min-width:1000px){ body.has-rail{padding-left:240px} .rail{width:240px;padding:0 14px 20px;border-right:0} .rail-mark{display:flex;align-items:center;height:var(--bar-h);padding:0 12px;margin:0 0 8px} .rail-nav a,.rail-nav .nav-btn{min-height:36px;font:500 .9375rem/1.25rem var(--font-text);letter-spacing:0;border:0;border-radius:8px} .rail-nav a.active,.rail-nav .nav-btn.active{background:var(--fill-select);color:var(--ink);border:0} .rail-nav a:hover,.rail-nav .nav-btn:hover{background:var(--fill-control);color:var(--ink)} .rail-sec{padding:18px 12px 9px;font:var(--t-caption);text-transform:none;letter-spacing:0} body.has-rail .pagebar{position:sticky;top:0;z-index:90;height:var(--bar-h);padding:8px 20px;margin:0 auto; background:var(--mat-thick);-webkit-backdrop-filter:var(--blur-edge);backdrop-filter:var(--blur-edge);box-shadow:inset 0 -1px 0 var(--hair)} .pb-title{line-height:1} .pb-search{min-height:36px;height:36px;border:0;border-radius:var(--r-capsule);background:var(--fill-control);box-shadow:var(--rim)} .pb-search:hover{border:0;background:var(--fill-control-on)} .pb-bell,.pb-avatar{width:36px;height:36px;border:0;border-radius:50%;background:var(--fill-control);box-shadow:var(--rim)} .pb-avatar{line-height:36px;font-size:13px} .pb-bell:hover{border:0;background:var(--fill-control-on)} .pb-avatar:hover{border:0;background:var(--fill-control-on);color:var(--ink)} } @media(min-width:1000px) and (pointer:coarse){ .rail-nav a,.rail-nav .nav-btn{min-height:44px;border-radius:var(--r-capsule)} .pb-search{min-height:44px;height:44px} .pb-bell,.pb-avatar{width:44px;height:44px} .pb-avatar{line-height:44px} } @media(min-width:1280px){ body.has-rail .two-pane>.pane{top:64px;height:calc(100dvh - 82px);border:1px solid var(--stroke-float)} .pane-bar{min-height:var(--bar-h);border-bottom:0;box-shadow:inset 0 -1px 0 var(--hair)} .pane-body{padding:20px} } /* ---------- STEP 6. THE SEGMENTED CONTROL ---------- A plain pill row becomes one capsule track: the macOS toolbar XL, a 36 track with 28 segments on a mouse [4363:11730], 44 segments on touch. The selected segment keeps the cream fill with dark text, the brand's identity fill, where Apple uses a dark grey. Tabs and facets keep their own look. A long set scrolls inside the track, never the page. */ .stage-pills:not(.tabs):not(.facets){display:inline-flex;flex-wrap:nowrap;gap:0;padding:4px;border-radius:var(--r-capsule); background:var(--fill-control);box-shadow:var(--rim);max-width:100%;overflow-x:auto;scrollbar-width:none} .stage-pills:not(.tabs):not(.facets)::-webkit-scrollbar{display:none} .stage-pills:not(.tabs):not(.facets) .stage-pill{border:0;background:transparent;min-height:28px;padding:4px 14px;white-space:nowrap;flex:0 0 auto;border-radius:var(--r-capsule)} .stage-pills:not(.tabs):not(.facets) .stage-pill:hover{border:0;color:var(--ink);background:rgba(247,242,230,.06)} .stage-pills:not(.tabs):not(.facets) .stage-pill.active{background:#f7f2e6;color:#161b1d;border:0} @media(max-width:900px),(pointer:coarse){.stage-pills:not(.tabs):not(.facets){padding:2px}} .stage-pills.facets .stage-pill{border:0;background:var(--fill-control);box-shadow:var(--rim)} .stage-pills.facets .stage-pill:hover{border:0;background:var(--fill-control-on)} .stage-pills.facets .stage-pill.active{background:rgba(247,242,230,.16);box-shadow:0 0 0 .5px rgba(247,242,230,.35);border:0} /* ---------- STEP 7. SHEETS ---------- Phones: a real bottom sheet, full width, 38 top corners, a grabber, Apple's light overlay (black 20% [5551:18479]); the footer keeps the device inset inside it. Desktop keeps Muds Glass by the brand ruling, and gains the macOS sheet's light stroke and deep shadow [4358:15436]. */ .modal-bg{background:rgba(0,0,0,.2);-webkit-backdrop-filter:none;backdrop-filter:none} @media(max-width:599px){ .modal-bg.show{align-items:flex-end} .modal-bg>.modal{width:100%;max-width:none;max-height:calc(100dvh - 24px);border-radius:var(--r-sheet-touch) var(--r-sheet-touch) 0 0;border-bottom:0;padding-top:28px} .modal-bg>.modal::before{content:"";display:block;width:36px;height:5px;border-radius:3px;background:rgba(247,242,230,.30);margin:-16px auto 12px} } @media(min-width:1000px){ .modal{border:1px solid var(--stroke-float);border-radius:var(--r-float);box-shadow:var(--sheet-shadow)} .drawer-bg>.drawer{border-left:1px solid var(--stroke-float)!important;box-shadow:var(--sheet-shadow)} } .modal-actions{border-top:0;box-shadow:inset 0 1px 0 var(--hair)} /* ---------- STEP 8. MENUS AND THE SWITCH ---------- The desktop More board is a macOS menu: rows 32 on a mouse with an 8 radius hover capsule [4353:3044], 15px text (Apple's 13 sits under our floor), a mixed case 13 bold header [4353:3149]. Phone chips become capsules. The switch is the iOS 64 by 28 track with a 38 by 24 knob [5660:39603], gold when on with a dark knob (cream on gold measures 1.63, dark on gold 9.56), in a 44 row. Markup: */ .rr-more-sec{font:700 .8125rem/1.125rem var(--font-text);letter-spacing:0;text-transform:none;color:var(--ink-dim);border-top:0} .mg{border-top:0;box-shadow:inset 0 1px 0 var(--hair)} .mg-col .mg-rows a,.mg-col .mg-rows button{min-height:32px;padding:6px 8px;border-radius:8px;font:var(--t-subhead)} .mg-col .mg-rows a:hover,.mg-col .mg-rows button:hover{background:var(--fill-select)} .mg-phone .mg-rows a,.mg-phone .mg-rows button{border:0;border-radius:var(--r-capsule);background:var(--fill-control);box-shadow:var(--rim);min-height:44px} @media(max-width:900px),(pointer:coarse){.mg-col .mg-rows a,.mg-col .mg-rows button{min-height:44px}} .switch{-webkit-appearance:none;appearance:none;position:relative;flex:none;width:64px;height:28px;margin:8px 0;border-radius:var(--r-capsule); background:rgba(247,242,230,.16);cursor:pointer;transition:background .2s ease;vertical-align:middle} .switch::after{content:"";position:absolute;top:2px;left:2px;width:38px;height:24px;border-radius:var(--r-capsule); background:#f7f2e6;box-shadow:0 3px 36px rgba(0,0,0,.05);transition:transform .25s cubic-bezier(.23,1,.32,1),background .2s ease} .switch:checked{background:var(--yellow)} .switch:checked::after{transform:translateX(22px);background:#161b1d} .switch:focus-visible{outline:2px solid var(--yellow);outline-offset:2px} .switch:disabled{opacity:.5;cursor:default} @media(prefers-reduced-motion:reduce){.switch,.switch::after{transition:none}}