/* ============================================================ REALUMA NAV — the liquid lens and the AI bloom. THE SIZE RELATIONSHIP IS THE WHOLE IDEA, and it is the thing the first version got wrong. The lens BREATHES: at rest SMALLER than the bar. A quiet pill sitting inside it, snug around the icon. It highlights and nothing more. in motion BIGGER than the bar, bulging past top and bottom. That is the magnification, and it exists only while something is happening. held the same as in motion, because a grabbed object is in motion whether or not it has moved yet. A lens that matches its tab exactly is a fitted highlight. A lens that is smaller at rest and larger in motion is an object that was always free and only sometimes still. IT FLIES, IT DOES NOT SPAN. One motion on the spring with a modest stretch in the direction of travel. The first version elongated into a capsule covering both tabs, which reads as a droplet detaching rather than a magnifying glass crossing a page. Behaviour lives in realuma-nav.js. Nothing here is decided in a view. ============================================================ */ /* ---------- THE DOCK ---------- SHORT ON PURPOSE. Every pixel of height here is a pixel the lens cannot exceed, and the lens exceeding it is the entire magnification effect. A positioning shell and nothing else: the material lives on ::before so it can deform under a finger without transforming the lens, whose chromatic rim must hold one crisp thickness at every moment. */ /* ---------- ANCHORED TO .app, NOT TO THE VIEWPORT. Corrected 2026-08-13. ---------- IT WAS position:fixed, AND THAT IS THE BUG, not the unit it was sized in. A fixed box resolves `bottom` against the INITIAL CONTAINING BLOCK, and the ICB is the LARGE viewport: the one you get with the browser's retractable toolbar hidden. That is the same definition that makes 100vh too tall on a phone. Meanwhile .app is height:100dvh, the DYNAMIC viewport, which ends where the toolbar begins. So the shell and the dock were anchored to two different viewports and the gap between them is exactly the toolbar. On iOS, where the URL bar is at the BOTTOM, the dock therefore rendered BELOW the visible area by (toolbar height - 18px) and could not be tapped. Nothing about that is a Safari quirk; it is what the spec says a fixed box does, and every iOS browser is WebKit besides. .app is position:fixed, so it is ALREADY the containing block for an absolutely positioned child, and its padding box ends at 100dvh. One property re-anchors the dock to the same viewport the rest of the app is measured in. getBoundingClientRect stays viewport-relative either way, so the lens gestures in realuma-nav.js are untouched. .app's overflow:hidden now clips this box, and what it clips is the dock's downward shadow, which was off-screen already. */ .rg-dock-nav{ position:absolute;left:50%;transform:translateX(-50%);z-index:60; bottom:calc(18px + env(safe-area-inset-bottom,0px)); width:min(400px,calc(100% - 30px)); padding:6px;border-radius:27px;overflow:visible; background:none; touch-action:none; -webkit-user-select:none;user-select:none; -webkit-tap-highlight-color:transparent; } /* ---------- THE MATERIAL, ON ITS OWN LAYER ---------- THE BLUR AND THE SATURATION ARE THE DESIGN SYSTEM'S TOKENS NOW, not literals here, and that is the whole of what makes the dock, the sheet and the More panel one material rather than three surfaces that happened to be typed the same. realuma-glass.css carries both numbers and the measurement behind them: at saturate(200%) this bar handed back 0.78x the chroma it was given, because the fill above the filter dilutes it by (1 - alpha) and .55 needs the filter to beat 2.22 before the surface gains anything at all. THE SPLIT IS NOT HERE, and that is deliberate rather than an omission: it rides .rg-rim, one layer up, because this layer is underneath the band's own blur and a one pixel fringe painted here is smeared away by it before anybody sees it. Measured, and the number is in section 2b. */ .rg-dock-nav::before{ content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:rgba(22,34,41,.55); backdrop-filter:blur(var(--rg-blur-dock,30px)) saturate(var(--rg-sat-dock,260%)); -webkit-backdrop-filter:blur(var(--rg-blur-dock,30px)) saturate(var(--rg-sat-dock,260%)); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.10), 0 20px 46px -22px rgba(0,0,0,.88); transform-origin:center; transition: transform .46s cubic-bezier(.34,1.5,.5,1), border-radius .46s cubic-bezier(.34,1.5,.5,1), box-shadow .3s cubic-bezier(.32,.72,0,1); } .rg-pressed::before{transform:scaleY(.968) scaleX(1.004);border-radius:29px} /* THE SPLIT SURVIVES THIS STATE WITHOUT BEING NAMED IN IT, which is the second reason it lives on .rg-rim. box-shadow is a single property, so every state that rewrites the list drops whatever is not repeated in it, and the dispersion vanishing for exactly as long as a finger is on the bar would have been the worst possible moment to lose it. */ .rg-dragging::before{ transform:scaleY(.92) scaleX(1.014);border-radius:33px; box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 0 1px rgba(255,255,255,.13), 0 12px 30px -20px rgba(0,0,0,.9); } /* ---------- THE BAND DEFORMS WITH THE MATERIAL, BECAUSE IT IS THE MATERIAL'S EDGE ---------- .rg-rim is a SIBLING of ::before rather than part of it — one element carries one backdrop-filter, and the band's is a second one — so nothing about the squeeze reaches it automatically. Left alone it would hold the dock's resting box while the material shrank by 8% underneath it, which is a five pixel ring of glass floating clear of the thing it is the rim of, for exactly as long as a finger is down. THE THREE NUMBERS ARE THE ::before RULES' OWN, repeated. There is no way to share them: they are values on two different elements. Anything that changes above changes here. SCOPED TO THE DOCK, because .rg-rim is the design system's component and three surfaces wear it. Only this one squeezes; an unscoped rule here would be the nav file quietly deciding something for the sheet and the menu. */ .rg-dock-nav .rg-rim{ transform-origin:center; transition: transform .46s cubic-bezier(.34,1.5,.5,1), border-radius .46s cubic-bezier(.34,1.5,.5,1); } .rg-pressed .rg-rim{transform:scaleY(.968) scaleX(1.004);border-radius:29px} .rg-dragging .rg-rim{transform:scaleY(.92) scaleX(1.014);border-radius:33px} .rg-tabs{display:flex;position:relative} /* ---------- THE LENS ---------- AT REST: inset from the bar on every side. top and bottom are POSITIVE, so it sits inside. left and width come from the component, which insets them from the tab's own bounds. Small, quiet, obviously not the bar. left and width animate, NEVER transform. A transform scale smears the chromatic rim and the backdrop blur with it, and the rim has to hold one crisp thickness the whole way. That is the difference between glass and a stretched picture of glass. */ .rg-lens{ position:absolute;top:6px;bottom:6px;left:0;width:0; border-radius:19px;pointer-events:none; background: linear-gradient(163deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.04) 38%, transparent 62%), rgba(255,255,255,.06); backdrop-filter:blur(7px) saturate(215%) brightness(1.16); -webkit-backdrop-filter:blur(7px) saturate(215%) brightness(1.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.34), inset 0 -1px 0 rgba(255,255,255,.12), 0 6px 16px -8px rgba(0,0,0,.5); transition: left .44s cubic-bezier(.34,1.42,.5,1), width .44s cubic-bezier(.34,1.42,.5,1), top .34s cubic-bezier(.34,1.5,.5,1), bottom .34s cubic-bezier(.34,1.5,.5,1), border-radius .34s cubic-bezier(.34,1.5,.5,1), box-shadow .28s cubic-bezier(.32,.72,0,1), backdrop-filter .3s cubic-bezier(.32,.72,0,1); } /* IN MOTION, OR HELD. It exceeds the bar, top and bottom, and that exceeding IS the magnification. Nothing else on this surface breaks the dock's silhouette, so the eye reads it as lifted rather than filled. The blur deepens and the rim brightens, because glass in motion catches more light and a magnifier magnifies. */ .rg-lens.rg-flying{ top:-9px;bottom:-9px;border-radius:26px; backdrop-filter:blur(10px) saturate(240%) brightness(1.26); -webkit-backdrop-filter:blur(10px) saturate(240%) brightness(1.26); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(255,255,255,.18), 0 12px 28px -10px rgba(0,0,0,.68); } /* SETTLING. It lands on the spring rather than stopping. */ .rg-settling{ transition: left .34s cubic-bezier(.34,1.5,.5,1), width .34s cubic-bezier(.34,1.5,.5,1), top .34s cubic-bezier(.34,1.5,.5,1), bottom .34s cubic-bezier(.34,1.5,.5,1), border-radius .34s cubic-bezier(.34,1.5,.5,1), box-shadow .28s cubic-bezier(.32,.72,0,1), backdrop-filter .3s cubic-bezier(.32,.72,0,1); } /* HELD BY A FINGER. No transition on position at all: an eased follow is lag, and a thing stuck to a finger may never lag. Everything else still eases, so the magnification arrives smoothly while the position does not. */ .rg-dragging .rg-lens{ transition: top .3s cubic-bezier(.34,1.5,.5,1), bottom .3s cubic-bezier(.34,1.5,.5,1), border-radius .3s cubic-bezier(.34,1.5,.5,1), box-shadow .28s cubic-bezier(.32,.72,0,1), backdrop-filter .3s cubic-bezier(.32,.72,0,1); } /* ---------- CHROMATIC DISPERSION ---------- A thick edge splits light: red and amber along one arc, green and blue along the other. Built as a RING, not a fill: a conic gradient masked to the border box alone, then blurred, so it behaves like refraction rather than a drawn outline. Quiet at rest, full while flying: a still lens is an indicator, a moving one is glass. */ .rg-lens::before{ content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1.4px; background:conic-gradient(from 200deg, rgba(255,96,64,.62), rgba(255,214,120,.52), rgba(126,255,190,.48), rgba(96,196,255,.62), rgba(196,128,255,.5), rgba(255,96,64,.62)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude; filter:blur(1.2px);opacity:.62; transition:opacity .3s ease, filter .3s ease; } .rg-lens::after{ content:'';position:absolute;inset:-2.5px;border-radius:inherit;padding:2.5px; background:conic-gradient(from 20deg, rgba(96,196,255,.34), transparent 30%, rgba(255,150,80,.34) 55%, transparent 80%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude; filter:blur(3px);opacity:0; transition:opacity .3s ease; } .rg-lens.rg-flying::before{opacity:1;filter:blur(1px)} .rg-lens.rg-flying::after{opacity:.75} /* ---------- TABS ---------- Tighter than the first version, because the bar is shorter and every pixel of height it does not use is a pixel the lens gets to exceed. */ .rg-tab{ flex:1;position:relative;z-index:2;background:none;border:none;cursor:pointer; padding:8px 2px 6px;display:flex;flex-direction:column;align-items:center;gap:4px; color:var(--rg-faint,rgba(247,244,237,.58)); font-family:var(--rg-body,'Be Vietnam Pro',system-ui,sans-serif); font-size:10px;font-weight:500; -webkit-tap-highlight-color:transparent; transition:color .3s cubic-bezier(.32,.72,0,1); } .rg-tab-ic{font-size:18px;line-height:1;position:relative; transition:transform .5s cubic-bezier(.34,1.5,.5,1), filter .3s} .rg-on{color:var(--rg-text,#F7F4ED)} .rg-on .rg-tab-ic{transform:scale(1.1) translateY(-1px); filter:drop-shadow(0 2px 8px rgba(255,255,255,.28))} /* LIT: under the lens right now, but not the destination. */ .rg-lit{color:rgba(247,244,237,.82)} .rg-lit .rg-tab-ic{transform:scale(1.06); filter:drop-shadow(0 2px 7px rgba(255,255,255,.2))} /* THERE IS NO TEAL TAB, AND THERE MUST NEVER BE ONE. Two .rg-tab-ai rules lived here, left over from a five-tab design in which Realuma AI was a tab. The bloom replaced it. Teal appears on the bloom and nowhere else in the chrome, per the law, and a tab painted teal would say the AI is a place. Dead rules that contradict a stated law are worse than no rules: the next person finds them, assumes they are meant to be used, and the law is broken by someone who thought they were following it. */ .rg-tab-dot{ position:absolute;top:-3px;right:-7px;min-width:14px;height:14px;padding:0 4px; border-radius:999px;background:var(--rg-champ,#C9A170);color:var(--rg-ink,#080F14); font-family:var(--rg-mono,'IBM Plex Mono',monospace); font-size:8.5px;font-weight:600;display:grid;place-items:center; box-shadow:0 0 12px -2px rgba(201,161,112,.9); } /* ============================================================ THE AI BLOOM — and it is LIGHT, not a button. The first version made it a solid ball with a gradient fill, a rim and a drop shadow, and that killed the thing the brand already owned: a soft radial glow with the mark silhouetted DARK inside it, no edge, no body. It reads as a light source rather than a control, which is exactly right for the one thing in the app that is not a place. IT IS NOT A TAB. Tabs are places; Realuma AI is a companion that belongs to no screen, so it takes no lens and never moves. ---- IT LEFT THE BAR ON 2026-08-18, AND FIVE THINGS LEFT WITH IT ---- It used to hover over an empty cell held open between the tabs — the CENTRE of the dock, which is the strongest position in the whole chrome, and it read as a mistake rather than as a decision, because a thing floating over a gap looks like a thing that missed its slot. GONE. Each of these existed ONLY because the bloom was in the bar, so each is deleted rather than left to be found and rebuilt around: .rg-slot the empty cell. Five tabs divide five ways now instead of six, which is 12px more per tab at 360. .rg-ai-glow the spill painted BEHIND the glass, first inside .rg-tabs and before .rg-lens, so the lens's own backdrop-filter sampled it and genuinely caught the light as it passed underneath. The lens passes under nothing now. .rg-near-ai the lens's chromatic rim warming toward the bloom's colour while it was under it. Same reason. Nav.seatOrb it measured the gap and centred the light in it. Nav.underLight it asked, on every move, whether the lens was under the light. It is why the other two had to exist. A dead rule that contradicts a stated design is worse than no rule: the next person finds it, assumes it is meant to be used, and rebuilds an effect whose source is not there. The four tab-coloured rules deleted from this file in an earlier pass went for exactly this reason. ============================================================ */ /* THE ORB IS NOT THE AI SPEAKING. IT IS THE BRAND'S DOOR TO THE AI, and that is why it is champagne rather than teal. The mark on it is the Realuma mark, so it takes the brand's colour like every other place a human reaches for something. Teal stays reserved for words Realuma AI actually produced, which is what makes teal rare, and rare is what makes it readable: a landlord who sees teal knows the machine wrote it, every time, with no exceptions to hold in their head. A door painted in the machine's colour would have spent that signal on furniture. */ /* ---------- THE BLOOM ITSELF ---------- NO background-colour, NO border, NO ring. A radial gradient that fades to nothing, and a dark mark inside it. If you can see where it ends, it has stopped being light. */ /* ---------- WHERE IT SITS, AND WHY IT IS A CHILD OF A BAR IT IS NOT IN ---------- CENTRED, ABOVE THE BAR, CLEAR OF IT. It spent one commit in the bottom right corner and that was the wrong category before anybody read the icon: the bottom right is where every site on the web puts a support widget, and a support widget means "ask a stranger for help". Realuma AI is the product. It goes back to the middle, which is where the eye already is, and it goes there ABOVE the bar rather than inside it — the thing that made the old centre position read as a mistake was the empty cell it hovered over, not the middle itself. THE CENTRE OF THE DOCK IS THE CENTRE OF THE INBOX TAB, because Inbox is tab 2 of 5. So the whole question is vertical, and it is answered in the box rather than by eye: bottom:calc(100% + 8px) puts the bloom's bottom edge 8px above the dock's TOP, and the dock pads its tabs by 6 more, so the nearest pixel of the bloom's box is 14px clear of the Inbox tab's box and further still from its label. No part of the box overlaps, so no tap can land on the wrong control. Only the halo reaches down, and a halo is pointer-events:none — light falling on the bar, not a control sitting on it. The numbers are measured every run by npm run render. IT IS STILL A CHILD OF .rg-dock-nav, and that is deliberate. The dock owns pointerdown, pointermove and pointerup for the lens drag, and the bloom's own handler stops that gesture at its own box. Moving the element to a sibling of the dock would mean re-deciding where those listeners live for a change that is about where light falls. .rg-dock-nav is overflow:visible and always has been. 64px. It was 82 in the bar, 56 in the corner, and 64 back in the middle: a shade under the width of one tab cell at 360, which is what makes it read as belonging to the row it stands over rather than floating free of it. Twenty past the 44px this product holds every target to. */ .rg-orb{ position:absolute;left:50%;bottom:calc(100% + 8px);z-index:5; width:64px;height:64px;border:none;padding:0;cursor:pointer; background:none;border-radius:50%; transform:translateX(-50%); display:grid;place-items:center; -webkit-tap-highlight-color:transparent; transition:transform .5s cubic-bezier(.34,1.5,.5,1), opacity .3s; } /* the light. bright at the core, gone by the edge, no boundary anywhere. */ .rg-orb::before{ content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none; background:radial-gradient(circle, rgba(224,188,142,.95) 0%, rgba(201,161,112,.72) 17%, rgba(201,161,112,.34) 36%, rgba(201,161,112,.12) 55%, transparent 74%); filter:blur(2px); transition:opacity .34s cubic-bezier(.32,.72,0,1), filter .34s; } /* a second, wider halo that reaches past the button box entirely. this is what makes it read as light in a room rather than a lit circle. IT REACHES FURTHER DOWN THAN UP, AND THAT ASYMMETRY IS THE WHOLE POINT OF IT NOW. A light floating clear of a surface reads as adrift; a light whose spill lands ON the surface reads as attached to it. 20 above and 30 below puts the faint end of the gradient across the dock's top rim, which is exactly where the rim band and the specular hairline are, so the three agree about where the top of the glass is. NOT FURTHER THAN THAT. The tab labels sit 32 to 50px below the bloom's box, and the measured contrast of all five with the bloom lit is printed by npm run render in both themes: anything that moves this number has to show that every label still clears the 4.5:1 this product holds text to. NOT AN ELLIPSE EITHER. The gradient stays a circle and the BOX moves, because a stretched radial reads as a smear rather than as light. */ .rg-orb::after{ content:'';position:absolute;inset:-20px -20px -30px;border-radius:50%; pointer-events:none; background:radial-gradient(circle, rgba(201,161,112,.34) 0%, rgba(201,161,112,.13) 34%, transparent 66%); filter:blur(13px); animation:rg-orb-breathe 4.6s ease-in-out infinite; } @keyframes rg-orb-breathe{50%{opacity:.62;transform:scale(.9)}} /* THE MARK, silhouetted dark in the light, exactly as the brand had it. */ .rg-orb-ic{ position:relative;z-index:2; font-size:21px;line-height:1;color:#0F1108; transition:transform .5s cubic-bezier(.34,1.5,.5,1); } /* EVERY STATE RESTATES THE CENTRING, because translateX(-50%) is half of it: left:50% puts the bloom's LEFT EDGE at the middle and the translate is what pulls it back by half its own width. A state that writes transform without it drops the bloom a full half-width to the right, which is a 32px jump on a tap. This is why the corner position did not need it and the centre does. */ .rg-orb:active{transform:translateX(-50%) scale(.93)} .rg-orb:active .rg-orb-ic{transform:scale(1.1)} .rg-orb:active::before{filter:blur(1px);opacity:1} /* the bloom is where you are. it rises and its light reaches further. */ .rg-orb-on{transform:translateX(-50%) translateY(-4px)} .rg-orb-on::before{filter:blur(1px)} .rg-orb-on::after{inset:-26px -26px -36px;background:radial-gradient(circle, rgba(201,161,112,.46) 0%, rgba(201,161,112,.18) 34%, transparent 66%)} /* something is being dragged through the bar. the bloom steps back and dims, so the thing under the finger is the brightest object on screen. it does not compete for a gesture it is not part of. */ .rg-dragging .rg-orb{transform:translateX(-50%) scale(.95);opacity:.72} /* ---------- LOCKED ---------- Not entitled to the assistant. The bloom keeps its light, because the thing it stands for still exists and is still worth wanting. It simply goes quiet, and says so with a mark rather than by disappearing. */ .rg-orb-locked::before{ background:radial-gradient(circle, rgba(224,188,142,.42) 0%, rgba(201,161,112,.28) 20%, rgba(201,161,112,.12) 42%, transparent 70%); } .rg-orb-locked::after{opacity:.4} .rg-orb-locked .rg-orb-ic{color:rgba(15,17,8,.55)} /* THE LOCK MOVES WITH THE BOX. On the 82px bloom it sat 19px from each corner, which is 23% of the way in; the same fraction of 64 is 15, and the light has faded to nothing by 74% of the radius, so anything further out than that is a badge floating in the dark. */ .rg-orb-lock{ position:absolute;z-index:3;right:15px;bottom:15px; width:16px;height:16px;border-radius:50%; display:grid;place-items:center;font-size:10px; background:var(--rg-champ,#C9A170);color:var(--rg-ink,#080F14); box-shadow:0 2px 8px -2px rgba(0,0,0,.7); } /* ---------- REDUCED MOTION ---------- The lens still moves, because a selection indicator that does not move is a selection indicator that lies. It stops being a performance: no flight, no spring, no squeeze, no breathing. It is simply where it belongs, and the bloom is simply lit. */ @media (prefers-reduced-motion:reduce){ .rg-lens,.rg-settling,.rg-dragging .rg-lens{transition:left .01s linear,width .01s linear} .rg-lens.rg-flying{top:6px;bottom:6px;border-radius:19px} .rg-tab-ic{transition:none} .rg-dock-nav::before,.rg-dock-nav .rg-rim{transition:none} .rg-pressed::before,.rg-dragging::before, .rg-pressed .rg-rim,.rg-dragging .rg-rim{transform:none;border-radius:27px} .rg-orb::after{animation:none} .rg-orb{transition:none} /* THE CENTRING IS NOT MOTION AND MUST SURVIVE THIS RULE. transform:none here would drop the bloom half its own width to the right for anybody with reduced motion on, which is the exact defect the states above are commented against. */ .rg-dragging .rg-orb{transform:translateX(-50%);opacity:1} } /* ---------- NO BACKDROP-FILTER ---------- Older Android WebView. The dock goes solid rather than transparent: an unreadable translucent bar is worse than an opaque one. The lens keeps its rim, which is drawn rather than filtered, so the selection stays obvious with no glass at all. The bloom is unaffected: it is gradients and a blur filter, never a backdrop-filter, which is why it survives here and on every device this app will ever run on. */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .rg-dock-nav::before{background:#16242C} .rg-lens{background:rgba(255,255,255,.12)} }