/* =========================================================================== TEAM GARDEN | the design language One language at every width. The desktop is not a different product with a grey sidebar: it is the same tinted page, the same hill, the same white cards, given more room. What changes is the shape of the nav and how many columns the board can afford. =========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Domine:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&family=Tinos:ital,wght@0,400;0,700;1,400&family=Karla:ital,wght@0,400;0,500;0,700;1,400&display=swap'); /* Two faces, two jobs. Instrument Serif carries the titles: it only ships a 400, which is the point, because the weight in this design comes from size and air rather than from bold. Karla does everything you operate: labels, buttons, tags, card titles, body. */ :root{ /* Domine was drawn for text on screen, so unlike a display face it holds at 1rem. That is what lets it name things all the way down to a card title. The division is by JOB, not by size: --display names something : page titles, section heads, card titles, tiles --text you read or operate it : body, subtitles, labels, buttons, pills A pill is chrome, not a name, so it stays in Karla with the body. */ --display:'Domine', ui-serif, Georgia, 'Times New Roman', serif; --text:'Karla', ui-sans-serif, system-ui, -apple-system, sans-serif; } :root{ /* the five rooms. Home is the emerald; the rest are the four languages. */ --home:#D90368; --home-pale:#FDEBF2; --tasks:#FE957C; --tasks-pale:#FFF4F2; --onboarding:#FF667A; --onboarding-pale:#FFF0F2; --marketplace:#9DA5FE;--marketplace-pale:#F5F6FF; --library:#595EBB; --library-pale:#EEEFF8; --ink:#000; --ink-2:#000; --soft:#000; --white:#fff; /* NO GREY TEXT, EVER, ANYWHERE (Maaria, 2026-09-01). These two were #4A4441 and #6B625E and carried every subtitle, meta line and inactive label in the app. They are text-only tokens (every one of their 51 uses is a color:), so black here is the whole sweep. Hierarchy is size and weight, never a lighter grey. */ --card-r:16px; --pill:999px; --shadow:0 1px 2px rgba(0,0,0,.06); --lift:0 4px 16px rgba(74,68,65,.10); /* set per room by app.js */ --room:var(--home); --pale:var(--home-pale); } body[data-room="home"] {--room:var(--home); --pale:var(--home-pale); --w1:#FADCEA; --w2:#F4B8D5; --w3:#EE8BBA; --w4:#E55397} body[data-room="tasks"] {--room:var(--tasks); --pale:var(--tasks-pale); --w1:#FFF0ED; --w2:#FFE1DA; --w3:#FFCEC3; --w4:#FEB7A6} body[data-room="onboarding"] {--room:var(--onboarding); --pale:var(--onboarding-pale); --w1:#FFEAEC; --w2:#FFD4DA; --w3:#FFB9C2; --w4:#FF97A5} body[data-room="marketplace"]{--room:var(--marketplace);--pale:var(--marketplace-pale); --w1:#F1F2FF; --w2:#E4E6FF; --w3:#D2D6FF; --w4:#BCC2FE} body[data-room="library"] {--room:var(--library); --pale:var(--library-pale); --w1:#E8E8F5; --w2:#D1D2EC; --w3:#B3B5E0; --w4:#8E92D1} *{box-sizing:border-box} /* One point up, app-wide (Maaria, 2026-09-01: "extremely small"). Everything here is sized in rem off the root, so this single line lifts every label, button and paragraph together instead of chasing them one at a time. */ html{font-size:17px} html,body{min-height:100%} body{ margin:0; background:var(--pale); color:var(--ink); font-family:var(--text); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; transition:background .25s ease; overflow-x:hidden; } /* --------------------------------------------------------------------------- THE WAVES. Not one hill: four nested irregular shapes in deepening saturation of the room's colour, the way a contour map nests. This is the single thing that stops the product looking like every other app, so it is built as real geometry rather than a border-radius trick. preserveAspectRatio="none" is deliberate: the waves stretch to any width, so a desktop gets the same language rather than a different one. --------------------------------------------------------------------------- */ #waves{ position:fixed; left:0; right:0; bottom:0; z-index:0; width:100%; height:56vh; pointer-events:none; display:block; } #waves path{transition:fill .3s ease} /* Granite. The two deepest bands are the largest flat areas on the page, and flat is where this stops looking like a material and starts looking like a fill. The tile is drawn at its own size and repeated, and masked so the grain fades in only where the colour is deep enough to carry it. */ #grain{ position:fixed; left:0; right:0; bottom:0; height:32vh; z-index:1; pointer-events:none; mix-blend-mode:multiply; opacity:.5; background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27160%27%20height%3D%27160%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.8%27%20numOctaves%3D%274%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27160%27%20height%3D%27160%27%20filter%3D%27url%28%23n%29%27%20opacity%3D%270.62%27%2F%3E%3C%2Fsvg%3E"); background-size:160px 160px; -webkit-mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.55) 38%, #000 100%); mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.55) 38%, #000 100%); } #waves .l1{fill:var(--w1)} #waves .l2{fill:var(--w2)} #waves .l3{fill:var(--w3)} #waves .l4{fill:var(--w4)} #app{position:relative; z-index:2; min-height:100dvh; display:flex; flex-direction:column} /* .pane exists at every width, not only on the desktop rail layout: without it main never stretches and nothing can be anchored to the bottom of a phone. */ .pane{flex:1; min-width:0; display:flex; flex-direction:column} /* Below the rail this is a phone layout, so it keeps a phone's measure and centres rather than stretching to fill a tablet. */ @media (max-width:759px){ /* The content keeps a phone's measure and centres. The tab bar does NOT: a bar with the page showing past its ends reads as a broken component. */ .pane{width:100%; max-width:560px; margin:0 auto} #nav > *{max-width:112px} #nav{justify-content:center; gap:0} } h1{margin:0;font-family:var(--display);font-weight:400;font-size:2.05rem; letter-spacing:-.015em;text-wrap:balance;line-height:1.1} h2{margin:0;font-family:var(--display);font-weight:600;font-size:1.2rem; letter-spacing:-.01em;text-wrap:balance;line-height:1.24} h3{margin:0;font-family:var(--display);font-weight:600;font-size:1rem;letter-spacing:-.01em} p{margin:0} button{font-family:inherit} /* ---------- head ---------- */ .head{padding:22px 22px 6px} .head .grow{flex:1;min-width:0} .head .sub{font-size:.86rem;color:var(--soft);margin-top:4px} .who{width:38px;height:38px;border-radius:50%;background:var(--room);flex:none; display:grid;place-items:center;font-weight:700;font-size:.9rem;color:#000; border:0;padding:0;cursor:pointer;font-family:var(--text)} .who:hover{box-shadow:var(--lift)} /* ---------- content ---------- */ main{flex:1; padding:14px 16px 96px; display:flex; flex-direction:column; gap:12px} /* One Tasks room, two layouts, and only ever one of them on screen. Below the breakpoint the columns are hidden and the segmented control drives a single list; above it the reverse. Showing both was the bug. */ .cols{display:none} /* Home is a welcome, but its title still starts where every other room's title starts: a heading that moves between rooms reads as two designs. The greeting sits at the top with the rest, and the bloom takes the slack and settles into the waves. */ body[data-room="home"] main{padding-bottom:104px} body[data-room="home"] .bloom{margin-top:auto} .lbl{font-size:.7rem;font-weight:700; color:var(--soft);padding:6px 4px 0} .card{background:var(--white);border-radius:var(--card-r);padding:15px 17px;border:0; display:flex;flex-direction:column;gap:7px;text-align:left;width:100%;color:var(--ink); box-shadow:var(--shadow)} a.card,button.card{cursor:pointer;transition:transform .12s ease,box-shadow .12s ease} a.card:hover,button.card:hover{box-shadow:var(--lift);transform:translateY(-1px)} a.card:focus-visible,button.card:focus-visible,button:focus-visible,a:focus-visible{ outline:2.5px solid var(--ink);outline-offset:3px;border-radius:var(--card-r)} .card .t{font-family:var(--display);font-size:1rem;font-weight:600;line-height:1.3; letter-spacing:-.01em} .card .m{font-size:.85rem;color:var(--soft);line-height:1.42} .row{display:flex;gap:7px;flex-wrap:wrap;align-items:center} .tag{font-family:var(--text);font-size:.7rem;font-weight:700;padding:4px 11px; border-radius:var(--pill);background:var(--ink);color:var(--white)} .tag.plain{background:rgba(0,0,0,.07);color:var(--ink)} .dot{width:10px;height:10px;border-radius:50%;flex:none;background:var(--room)} .cta{display:block;width:100%;text-align:center;background:var(--ink);color:var(--white); font-family:var(--text);font-weight:700;font-size:.95rem;padding:15px; border-radius:var(--pill);border:0;cursor:pointer} .cta.ghost{background:transparent;color:var(--ink);border:4px solid var(--ink)} /* A pill that is a link is still a link, and the browser draws a line through the label of every one of them. .mini already said this for the small pills; .cta never did, so the buy buttons on the locked rooms shipped underlined. */ a.cta{text-decoration:none} /* TWO BUTTONS SIT BESIDE EACH OTHER, in every room. .cta is a full-width block, so a pair of them stacked with their edges touching and no gap. They share the row now and wrap to two lines only when the row cannot hold them. */ .ctas{display:flex;gap:10px;flex-wrap:wrap} .ctas .cta{width:auto;flex:1 1 auto;min-width:190px} /* A BUTTON SITTING ON A ROOM-COLOURED CARD (Maaria, 2026-09-04: "we need button colors, white backgroun black text?"). The course room paints every .cta with the room's own colour, so that a black button never punches a hole in a coloured room. On a card that is ALREADY filled with that colour the same rule makes the button vanish into it, which is what the teaser's two buttons were doing: room-blue on a room-blue card. White fill, black ink, per the light-fill rule. The second button is an outline so a stacked pair never repeats a colour. The course-room selector is repeated here because that rule carries an attribute and would otherwise win. */ .cta.onroom, body[data-room="course"] .cta.onroom{ background-color:#fff;background-image:none;color:#000;border:0} .cta.ghost.onroom, body[data-room="course"] .cta.ghost.onroom{ background-color:transparent;background-image:none;color:#fff; border:4px solid rgba(255,255,255,.65)} /* The Heart button (Maaria, 2026-08-28: "make this button red"). Heart is a dark fill, so it carries white ink, per the house colour rules. Soul is a light fill and takes black ink. Stacked buttons never repeat a colour (Maaria, 2026-08-28: "no two colored same color buttons after one another"). */ .cta.heart{background:#FF667A;color:#fff} .cta.soul{background:#9DA5FE;color:#000} .seg{display:flex;gap:4px;background:rgba(255,255,255,.72);padding:4px;border-radius:var(--pill)} .seg button{flex:1;border:0;background:none;cursor:pointer;font-size:.78rem;font-weight:700; padding:9px 4px;border-radius:var(--pill);color:var(--soft)} .seg button[aria-selected="true"]{background:var(--ink);color:var(--white)} .field{background:var(--white);border:0;border-radius:var(--card-r);padding:14px 16px; font-size:.92rem;width:100%;font-family:inherit;color:var(--ink);box-shadow:var(--shadow)} .field::placeholder{color:#9A918C} /* A row is a button now: the whole step opens, because the instruction is in the step and a checklist you can only tick is a list of things you were already supposed to know. */ .chk{display:flex;gap:13px;align-items:flex-start;padding:14px 4px;width:100%; border:0;background:none; font-family:inherit;text-align:left;cursor:pointer;color:var(--ink); border-radius:0} .chk:hover .l{text-decoration:underline;text-underline-offset:3px} .chk:hover .box{border-color:var(--ink)} .chk:last-child{border-bottom:0} .box{width:23px;height:23px;border-radius:8px;border:4px solid var(--ink);flex:none;margin-top:1px} .box.done{background:var(--ink);border-color:var(--ink)} .box.lock{background:rgba(0,0,0,.06);border-style:dashed} .chk .l{font-size:.94rem;line-height:1.35} .chk .l.done{color:#7A726D;text-decoration:line-through} .chk .l.lock{color:#8A817C} .chk .why{display:block;font-size:.78rem;color:var(--soft);margin-top:2px} .chk .box{transition:border-color .12s ease} /* The instruction, exactly as it was typed. Somebody put those line breaks in and a renderer that reflows them turns a command into a paragraph. */ .detail{white-space:pre-wrap;font-size:.88rem;line-height:1.55;color:var(--ink-2); background:rgba(0,0,0,.04);border-radius:12px;padding:15px 16px; overflow-x:auto;max-height:46vh;overflow-y:auto} .shelf{display:flex;gap:10px;overflow-x:auto;padding:2px 0 4px;scrollbar-width:none} .shelf::-webkit-scrollbar{display:none} .tile{flex:none;width:124px;height:92px;border-radius:var(--card-r);padding:12px;border:0; display:flex;flex-direction:column;justify-content:flex-end;font-size:.9rem; font-family:var(--display);font-weight:600;cursor:pointer;text-align:left;color:var(--ink)} .blob{width:112px;height:112px;margin:4px auto 2px; border-radius:58% 42% 47% 53% / 46% 52% 48% 54%; background:radial-gradient(circle at 34% 30%, color-mix(in srgb,var(--room) 55%, #fff) 0%, var(--room) 100%)} .back{border:0;background:rgba(0,0,0,.07);border-radius:var(--pill);padding:8px 16px; font-weight:700;font-size:.8rem;cursor:pointer;color:var(--ink);align-self:flex-start} .empty{background:var(--white);border-radius:var(--card-r);padding:26px 22px;text-align:center; box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px} .empty .t{font-family:var(--display);font-weight:600;font-size:1.02rem} .empty .m{font-size:.88rem;color:var(--soft)} /* ---------- nav: bottom bar on a phone ---------- */ #nav{position:fixed;left:0;right:0;bottom:0;z-index:5;display:flex; padding:6px 4px calc(10px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.82);backdrop-filter:blur(12px); } #nav button{flex:1;border:0;background:none;cursor:pointer;font-size:.62rem;font-weight:500; color:var(--soft);display:flex;flex-direction:column;align-items:center;gap:4px; padding:7px 0 0} #nav button[aria-current="page"]{font-weight:700;color:var(--ink)} /* The mark IS the label, in the same colour. It inherits from the button, so it is --soft beside soft text and --ink beside ink text, and the active state needs no second rule. The old version faded a black icon to 34%, which is an opacity trick standing in for a colour decision. */ #nav .ic{width:22px;height:22px;display:block;color:currentColor} #nav .lab{white-space:nowrap} #nav .brand{display:none} /* desktop rail only; see the 860px block */ /* =========================================================================== DESKTOP. Same tint, same hill, same white cards. The nav becomes a rail of rounded pills sitting ON the tint, not a grey panel bolted to the side. =========================================================================== */ @media (min-width:760px){ #waves{height:50vh} #app{flex-direction:row;max-width:1240px;margin:0 auto;width:100%;gap:8px} /* THE RAIL SCROLLS. It is a fixed 100vh column and the client list grows with every garden, so without overflow-y everything past the fold is clipped and unreachable: at thirteen clients the last four could not be opened at all (Maaria, 2026-08-28). overscroll-behavior keeps a flick at the end of the rail from scrolling the page behind it, and the bottom padding stops the last name sitting flush against the edge of the screen. */ #nav{position:sticky;top:0;left:auto;right:auto;bottom:auto;height:100vh;width:314px; flex:none;flex-direction:column;gap:4px;padding:30px 16px 40px;background:none; backdrop-filter:none;border:0;overflow-y:auto;overscroll-behavior:contain; scrollbar-width:thin} #nav .brand{display:block;font-family:var(--display);font-weight:600;font-size:1.2rem; padding:0 14px 24px;letter-spacing:-.005em} #nav button{flex:none;flex-direction:row;justify-content:flex-start;gap:12px; padding:12px 14px;border-radius:14px;font-size:.95rem;font-weight:500;width:100%} #nav button:hover{background:rgba(255,255,255,.5)} #nav button[aria-current="page"]{background:var(--white);box-shadow:var(--shadow);font-weight:700} #nav .ic{width:21px;height:21px} .head{padding:34px 26px 10px} .head h1{font-size:2.5rem} main{padding:16px 26px 60px;gap:14px} /* Tasks can afford columns here, and drag */ .cols{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:start} .col-h{font-size:.7rem;font-weight:700; color:var(--soft);padding:2px 4px 10px} .col-b{display:flex;flex-direction:column;gap:10px;min-height:60px} /* the phone's single-column board and its control both go, together. Scoped to the board's OWN control by position, not by class: the card sheet reuses .seg for its move buttons, and a bare .seg rule here hid them at every desktop width. The sheet is a on body and is never inside #main, so this cannot reach it. */ #main > .seg,#onecol{display:none} /* rooms that are lists become grids */ .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:14px} .narrow{max-width:70ch} .tile{width:auto;height:104px} .shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));overflow:visible} } @media (min-width:760px) and (max-width:1120px){ .cols{grid-template-columns:repeat(2,1fr)} } @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}} /* =========================================================================== THE BLOOM Nested shapes radiating outward in deepening saturation, with the content sitting INSIDE them rather than beside them. This is the idiom the whole design turns on: the interface holds what you are looking at, it does not just place it on a background. =========================================================================== */ .bloom{padding:14px 22px 24px 12px;border-radius:48px 36px 44px 54px;background:var(--w1); animation:breathe 9s ease-in-out infinite} .bloom-2{padding:18px 12px 14px 22px;border-radius:32px 42px 28px 38px;background:var(--w2); animation:breathe 9s ease-in-out infinite .5s} .bloom-3{padding:12px 18px 17px 11px;border-radius:26px 20px 30px 24px;background:var(--w4); animation:breathe 9s ease-in-out infinite 1s} .bloom .card{border-radius:20px;box-shadow:0 6px 22px rgba(74,68,65,.10)} @keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.014)}} /* the circular form, for a moment rather than for content */ .orb{position:relative;width:min(78vw,300px);aspect-ratio:1;margin:8px auto;display:grid;place-items:center} .orb i{position:absolute;animation:breathe 7s ease-in-out infinite} /* Asymmetric on purpose. A stack of perfect circles is a target; these are shapes. Each ring gets its own irregularity so they never nest evenly. */ .orb i:nth-child(1){border-radius:56% 44% 47% 53% / 45% 51% 49% 55%} .orb i:nth-child(2){border-radius:43% 57% 55% 45% / 54% 44% 56% 46%} .orb i:nth-child(3){border-radius:52% 48% 41% 59% / 47% 57% 43% 53%} .orb i:nth-child(4){border-radius:47% 53% 58% 42% / 55% 46% 54% 45%} .orb i:nth-child(1){inset:0;background:var(--w1)} .orb i:nth-child(2){inset:13%;background:var(--w2);animation-delay:.4s} .orb i:nth-child(3){inset:28%;background:var(--w3);animation-delay:.8s} .orb i:nth-child(4){inset:44%;background:var(--w4);animation-delay:1.2s} .orb .mid{position:relative;z-index:2;font-weight:700;font-size:1.05rem;text-align:center;padding:0 10%} /* ---------- the waves drift ---------- */ #waves .l1{fill:var(--w1);animation:drift1 34s ease-in-out infinite} #waves .l2{fill:var(--w2);animation:drift2 27s ease-in-out infinite} #waves .l3{fill:var(--w3);animation:drift3 31s ease-in-out infinite} #waves .l4{fill:var(--w4);animation:drift4 23s ease-in-out infinite} @keyframes drift1{0%,100%{transform:translate(0,0)}50%{transform:translate(-0.7%,0.5%)}} @keyframes drift2{0%,100%{transform:translate(0,0)}50%{transform:translate(0.8%,-0.4%)}} @keyframes drift3{0%,100%{transform:translate(0,0)}50%{transform:translate(-0.5%,-0.6%)}} @keyframes drift4{0%,100%{transform:translate(0,0)}50%{transform:translate(0.6%,0.6%)}} /* ---------- content arrives, it does not appear ---------- */ .rise{animation:rise .5s cubic-bezier(.22,.8,.3,1) both} .rise:nth-child(2){animation-delay:.05s} .rise:nth-child(3){animation-delay:.10s} .rise:nth-child(4){animation-delay:.15s} .rise:nth-child(5){animation-delay:.20s} .rise:nth-child(6){animation-delay:.25s} .rise:nth-child(7){animation-delay:.30s} @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} /* the greeting sets the tone: generous, unhurried, plenty of air above it */ .welcome{padding:22px 22px 10px} .welcome h1{font-size:2.15rem;line-height:1.08;letter-spacing:-.025em} .welcome p{margin-top:12px;font-size:1rem;color:var(--ink-2);line-height:1.45;max-width:30ch} @media (min-width:760px){ .welcome{padding:34px 26px 10px} .welcome h1{font-size:3.1rem} .welcome p{font-size:1.12rem} .bloom{border-radius:60px 44px 54px 66px;padding:18px 28px 30px 16px} } @media (prefers-reduced-motion:reduce){ .bloom,.bloom-2,.bloom-3,.orb i,#waves path{animation:none!important;transform:none!important} .rise{animation:none!important} } /* =========================================================================== THE WRITE LAYER Adding, moving, assigning, approving. Every control here is drawn because a flag on the payload said the verb exists. None of it is styled to look disabled, because a control nobody may press is not rendered at all. =========================================================================== */ /* ---------- the + ---------- */ /* Above the tab bar on a phone, clear of the home indicator. It sits over the waves rather than in the content, so it survives a scrolled board. */ .fab{position:fixed;right:18px;bottom:calc(78px + env(safe-area-inset-bottom));z-index:6; width:56px;height:56px;border-radius:50%;border:0;cursor:pointer; background:var(--ink);color:var(--white);display:grid;place-items:center; box-shadow:0 6px 20px rgba(74,68,65,.28); transition:transform .12s ease,box-shadow .12s ease} .fab:hover{transform:translateY(-2px);box-shadow:0 9px 26px rgba(74,68,65,.32)} .fab:active{transform:translateY(0)} /* A head action: the lead's tray, and anything else that belongs beside a title rather than in the body. */ .pillbtn{border:4px solid var(--ink);background:transparent;color:var(--ink); border-radius:var(--pill);padding:8px 15px;font-family:var(--text); font-weight:700;font-size:.78rem;cursor:pointer;flex:none;align-self:center} .pillbtn:hover{background:var(--ink);color:var(--white)} /* ---------- the sheet ---------- */ /* A bottom sheet on a phone and a centred panel at a desk. Native , so Escape, the focus trap and the top layer come with it. */ #sheet{border:0;padding:0;background:transparent;max-width:none;max-height:none; width:100%;margin:0;position:fixed;inset:auto 0 0 0} #sheet::backdrop{background:rgba(35,30,28,.42);backdrop-filter:blur(2px)} .sheet-in{background:var(--white);color:var(--ink); border-radius:26px 26px 0 0;padding:20px 20px calc(22px + env(safe-area-inset-bottom)); max-height:88dvh;overflow-y:auto;margin:0 auto;max-width:560px; box-shadow:0 -8px 40px rgba(74,68,65,.20); animation:sheetup .26s cubic-bezier(.22,.8,.3,1) both} @keyframes sheetup{from{transform:translateY(24px);opacity:.4}to{transform:none;opacity:1}} .sheet-h{display:flex;align-items:flex-start;gap:14px;padding-bottom:4px} .sheet-h h2{flex:1;min-width:0;font-size:1.32rem;line-height:1.22} .sheet-h .x{flex:none;width:34px;height:34px;border-radius:50%;border:0;cursor:pointer; background:rgba(0,0,0,.06);color:var(--ink);display:grid;place-items:center; font-size:1.1rem;line-height:1} .sheet-h .x:hover{background:rgba(0,0,0,.12)} .sheet-b{display:flex;flex-direction:column;gap:15px;padding-top:12px} .sheet-meta{font-size:.86rem;color:var(--soft);line-height:1.45} .sheet-note{font-size:.82rem;color:var(--soft);line-height:1.45; background:rgba(0,0,0,.04);border-radius:12px;padding:11px 13px} /* A refused write says why, in the database's own words. */ .sheet-err{margin-top:10px;font-size:.85rem;line-height:1.4;color:#7E2F28; background:#FDEBE8;border-radius:12px;padding:11px 13px} .f{display:flex;flex-direction:column;gap:7px} /* Sentence case, never caps. The Team Garden's copy of this rule sets the label in letter-spaced uppercase and this one used to as well; nothing in this app used the class until the check-in's sheet arrived, so it was fixed here rather than carried across (her standing rule: no ALL-CAPS and no letter-spaced caps anywhere in a visual). Emphasis is weight, not case. */ .f > span{font-size:.8rem;font-weight:700;letter-spacing:.01em;color:var(--soft)} .f .opt{font-weight:500;opacity:.75} /* The fields sit ON white here, so the card's shadow would read as a smudge. A flat tint is the same idea one surface deeper. */ #sheet .field{background:rgba(0,0,0,.045);box-shadow:none} #sheet select.field{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%234A4441' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 16px center;padding-right:42px} #sheet .cta:disabled,#sheet .field:disabled{opacity:.5;cursor:default} /* the four columns, as a control */ .seg-move{background:rgba(0,0,0,.05)} .seg-move button[aria-selected="true"]{background:var(--room);color:var(--ink)} .seg-move button:disabled{cursor:default} /* one waiting suggestion */ .q{background:rgba(0,0,0,.035);border-radius:14px;padding:14px 15px; display:flex;flex-direction:column;gap:7px} .q .t{font-family:var(--display);font-weight:600;font-size:.97rem;line-height:1.3} .q .m{font-size:.8rem;color:var(--soft)} .mini{border:0;background:var(--ink);color:var(--white);border-radius:var(--pill); padding:8px 14px;font-family:var(--text);font-weight:700;font-size:.76rem;cursor:pointer} .mini.ghost{background:transparent;color:var(--ink);border:4px solid var(--ink)} /* A link wearing the pill is still a link, and the underline read as a third kind of control sitting between two buttons. */ a.mini{text-decoration:none;display:inline-flex;align-items:center} @media (min-width:760px){ /* height and width are spelled out because a carries height:fit-content from the UA sheet, and a fit-content box does not stretch between top and bottom however the insets are set. It sized to its own content and sat against the top edge of the window. */ #sheet{inset:0;width:100%;height:100%;display:grid;place-items:center} .sheet-in{border-radius:22px;max-width:470px;width:min(470px,92vw); padding:24px 24px 26px;box-shadow:0 20px 60px rgba(74,68,65,.28); animation:sheetin .22s cubic-bezier(.22,.8,.3,1) both} @keyframes sheetin{from{transform:scale(.97);opacity:0}to{transform:none;opacity:1}} .fab{right:34px;bottom:34px} } /* A dialog that is not open must not take the click. Chrome handles this, but a display:grid rule on the element itself overrides the UA's [hidden]. */ #sheet:not([open]){display:none} /* ---------- drag, at a desk ---------- */ /* Only the cards the server said this seat may move are draggable, so the grab cursor is itself a permission that was granted rather than a guess. */ .card.movable{cursor:grab} .card.lifting{opacity:.4;cursor:grabbing} /* The column being dragged over. `.colwrap` came across with the CSS and this board's markup calls it `.bcol`, so the rule matched nothing and there was no drop target to see. Both named, since the other one is still in the file. */ .bcol.over .col-b, .colwrap.over .col-b{background:rgba(255,255,255,.55);border-radius:var(--card-r); outline:2px dashed var(--room);outline-offset:3px} /* =========================================================================== YOUR BRIEF | what this instance changes, and nothing else Everything above is team-garden/style.css verbatim. Three changes live here so that a fix upstream can be copied straight down: the room colour, the waves running left to right instead of bottom up, and the nav carrying the four language textures instead of line icons. =========================================================================== */ /* ONE ROOM, ORANGE. Not a new palette: the Tasks room is already #FE957C with its own four-step wave ramp, so this reuses those exact values rather than inventing a sixth set that would drift from the five. The other products get the other languages the same way. */ /* HOME CAME OUT OF THIS GROUP, 2026-09-01. It sat here from the start, which is why --home at the top of this file had no effect on it: this rule comes later and won every time. Home now carries #D90368 from its own block above, and the seven rooms below keep the orange. */ body[data-room="brief"], body[data-room="documents"], body[data-room="call"], body[data-room="page"], body[data-room="briefs"], body[data-room="landings"], body[data-room="quizzes"], body[data-room="courses"], body[data-room="one"], body[data-room="gate"]{ --room:#FE957C; --pale:#FFF4F2; --w1:#FFF0ED; --w2:#FFE1DA; --w3:#FFCEC3; --w4:#FEB7A6} /* ---------- the waves, turned ---------- Left to right rather than bottom up (Maaria, 2026-08-27). The four paths are the originals with x and y swapped and then mirrored, so the geometry is the same proven organic shape and the deepest band hugs the left edge exactly the way it used to hug the bottom. The drift animations above still apply. */ #waves{left:0; right:auto; top:0; bottom:0; width:46vw; height:100%} @media (min-width:760px){ #waves{width:38vw; height:100%} } /* The grain follows the waves to the left edge, masked across instead of down. */ #grain{left:0; right:auto; top:0; bottom:0; width:26vw; height:100%; -webkit-mask-image:linear-gradient(to left, transparent 0%, rgba(0,0,0,.55) 38%, #000 100%); mask-image:linear-gradient(to left, transparent 0%, rgba(0,0,0,.55) 38%, #000 100%)} /* ---------- the nav, carrying the languages ---------- A texture, not a line icon. The four are the real brand textures off the site root, so this nav is made of the same material as everything else she ships rather than a drawing of it. */ #nav .tex{width:26px;height:26px;border-radius:50%;flex:none; display:grid;place-items:center; background-size:cover;background-position:center} #nav .tex.mind {background-image:url('/textures/texture_mind.jpg')} #nav .tex.body {background-image:url('/textures/texture_body.jpg')} #nav .tex.heart{background-image:url('/textures/texture_heart.jpg')} #nav .tex.soul {background-image:url('/textures/texture_soul.jpg')} /* Unvisited rooms sit back; the one you are in is at full strength. Saturation rather than opacity, because opacity on a texture reads as a faded photo. */ #nav button .tex{filter:saturate(.35);transition:filter .18s ease} /* ---------- the question card ---------- The .card idiom one size up: the same white, the same radius, the same shadow, given the room a question needs. */ .qcard{background:var(--white);border-radius:var(--card-r);padding:26px 24px; box-shadow:var(--shadow);display:flex;flex-direction:column;gap:16px} @media (min-width:760px){ .qcard{padding:32px 34px} } .qstep{font-size:.7rem;font-weight:700;color:var(--soft)} .qbar{height:8px;background:rgba(0,0,0,.06);border-radius:var(--pill);overflow:hidden} .qbar i{display:block;height:100%;background:var(--room);border-radius:var(--pill); transition:width .3s cubic-bezier(.22,.8,.3,1)} .qtitle{font-family:var(--display);font-weight:400;font-size:1.6rem;line-height:1.22; letter-spacing:-.015em;text-wrap:balance} @media (min-width:760px){ .qtitle{font-size:1.95rem} } /* The mirror. It sits ABOVE the question and reads smaller than it, because the line somebody has to answer is the point of the screen and their own previous answer is not. Same size as .qsub, tighter to what follows it. */ .qlead{font-size:.98rem;line-height:1.5;color:var(--ink-2);margin-bottom:-8px} .qsub{font-size:.98rem;line-height:1.5;color:var(--ink-2)} .qbox{background:rgba(0,0,0,.035);border:0;border-radius:14px;padding:16px 17px; font-size:.97rem;line-height:1.55;min-height:150px;width:100%;font-family:inherit; color:var(--ink);resize:vertical} .qbox::placeholder{color:#9A918C} .qbox:focus-visible{outline:2.5px solid var(--ink);outline-offset:2px} .qact{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap} .qright{display:flex;align-items:center;gap:10px;margin-left:auto} .qmic{width:46px;height:46px;border-radius:50%;border:0;background:rgba(0,0,0,.06); display:grid;place-items:center;cursor:pointer;flex:none;color:var(--ink); transition:background .12s ease,transform .12s ease} .qmic:hover{background:rgba(0,0,0,.12);transform:translateY(-1px)} .qmic svg{width:20px;height:20px} .qmic .on{display:none} .qmic.rec{background:var(--ink);color:var(--white)} .qmic.rec .off{display:none} .qmic.rec .on{display:block} .qsend{background:var(--ink);color:var(--white);font-family:var(--text);font-weight:700; font-size:.95rem;padding:14px 30px;border-radius:var(--pill);border:0;cursor:pointer} .qsend:disabled{opacity:.45;cursor:default} .qdev{border:0;background:rgba(0,0,0,.06);border-radius:var(--pill);padding:11px 14px; font-family:inherit;font-size:.8rem;color:var(--ink);max-width:190px} .qsaid{background:rgba(0,0,0,.035);border-radius:14px;padding:14px 16px;font-size:.94rem; line-height:1.5;white-space:pre-wrap} .qmsg{font-size:.88rem;color:var(--ink-2);line-height:1.45} /* ---------- the mark, top left ---------- The rail carries the Four Languages logo where the Team Garden carries a product name (Maaria, 2026-08-27). The display:none / display:block pair above still decides WHEN it shows, which is the desktop rail only, so this block only says how big it is. 168px is not a taste: title.png is 400x48, so at that width the mark stands 20px tall and lands on the same line the 1.2rem words used to, with the same 14px indent. max-width rather than width, so a wider file cannot push the rail out. The alt text is the brand string, which is what shows if the file ever 404s. */ #nav img.brand{width:100%;max-width:204px;height:auto;padding:2px 0 26px;letter-spacing:normal} /* ---------- the marks are stones ---------- Asymmetrical blobs, the shape water leaves on a pebble (Maaria, 2026-08-27). ONE colour, not the four language textures: this is one room, and five different photographs in a five-item nav was five things competing rather than one family. What varies is the shape, the tilt and a step of tone inside the same orange, so no two are the same stone and all five are obviously the same material. Which room you are IN is said by the white pill and the bold label, which is already the strongest signal in the rail, so the stones stay full colour rather than being dimmed into a second, quieter version of the same news. */ /* `#nav button .tex` up in the verbatim block desaturates an unvisited room, which was right for photographs and wrong for a flat fill: it turned four of the five stones grey. Matched at the same specificity here to switch it off, rather than edited up there where it has to stay copyable from upstream. */ #nav .tex, #nav button .tex, #nav button:hover .tex{ background-image:none;filter:none; transform:rotate(var(--tilt, 0deg)); transition:border-radius .5s ease, transform .5s ease} /* ---------- the mark inside the stone (Maaria, 2026-09-10) ---------- On a phone the bar carries no names, so the mark IS the name of the room. It sits inside the stone and turns back through the stone's own tilt: the pebbles lean and that is the point of them, but a drawing that leans is a drawing somebody hung crooked. --tilt is set by each stone below and read here, so the two always move together, including when a room settles to straight on arrival. */ /* PHONE ONLY, and off everywhere else (Maaria, 2026-09-10: "I don't want the icons in the non-mobile"). At a desk the row already carries the name of every room in words, and a mark beside a word it repeats is decoration. It earns its place on a phone because there the words are gone. Off here, on in the phone block at the foot of this file. */ #nav .nm{width:16px;height:16px;display:none;color:#fff; transform:rotate(calc(-1 * var(--tilt, 0deg))); transition:transform .5s ease} /* A light fill takes black ink and a dark fill white, the same rule every label on a colour follows. Three of the ten stones are light: Your mission is the garden's yellow, Your landing page the Body orange, Your maps the pale Mind lavender. */ #nav .tex.mission .nm, #nav [data-fam="mission"] .tex .nm, #nav [data-fam="briefs"] .tex .nm, #nav [data-fam="maps"] .tex .nm{color:#000} #nav .tex.all {background:#D90368; border-radius:63% 37% 54% 46% / 55% 48% 52% 45%; --tilt:-6deg} #nav .tex.mind {background:#FDA98F; border-radius:58% 42% 33% 67% / 47% 58% 42% 53%; --tilt:4deg} #nav .tex.body {background:#FE8E72; border-radius:41% 59% 62% 38% / 59% 36% 64% 41%; --tilt:-11deg} #nav .tex.heart{background:#FDB69F; border-radius:69% 31% 45% 55% / 38% 62% 38% 62%; --tilt:9deg} #nav .tex.soul {background:#FE9E85; border-radius:36% 64% 57% 43% / 62% 44% 56% 38%; --tilt:-3deg} /* The stone settles when you are standing in that room. */ #nav button[aria-current="page"] .tex{border-radius:52% 48% 46% 54% / 49% 51% 49% 51%; --tilt:0deg} /* ---------- an unvisited room carries no card ---------- The hover pill read as a second selected room sitting under the real one (Maaria, 2026-08-27). Only the room you are in gets the white card; hover says so with the stone coming back to full colour, which it already did. Scoped off the current room, because a bare :hover here came later than the aria-current rule at the same specificity and stripped the white card the moment the pointer touched it. */ #nav button:not([aria-current="page"]):hover{background:none} /* ---------- the journey ---------- One line down the left with the stones sitting on it, filled as far as the last step actually done. The line IS the progress, which is why there is no bar above it repeating the same number. Each step carries its description collapsed; the step they are ON is open by default and hover or keyboard focus opens any other, so this still says something on a phone, where nothing hovers. */ .jrn{list-style:none;margin:18px 0 0;padding:0 0 0 40px;position:relative} /* z-index, because both of these are positioned children of .jrn and ::after is the LAST one, so without it the fill paints over every stone it passes. */ .jrn::before,.jrn::after{content:'';position:absolute;left:11px;width:2px;border-radius:2px;z-index:0} .jrn::before{top:18px;bottom:22px;background:rgba(0,0,0,.10)} .jrn::after{top:18px;height:calc((100% - 40px) * var(--fill,0));background:var(--room); transition:height .5s ease} .jstep{position:relative;padding:14px 0 16px;outline:0;z-index:1} .jstep[data-step]{cursor:pointer} .jdot{position:absolute;left:-40px;top:16px;width:24px;height:24px; border-radius:58% 42% 45% 55% / 52% 47% 53% 48%; background:var(--pale);box-shadow:0 0 0 2px rgba(0,0,0,.10) inset; transition:background .25s ease,box-shadow .25s ease,transform .4s ease} .jstep:nth-child(2) .jdot{border-radius:41% 59% 62% 38% / 59% 36% 64% 41%} .jstep:nth-child(3) .jdot{border-radius:69% 31% 45% 55% / 38% 62% 38% 62%} .jstep:nth-child(4) .jdot{border-radius:36% 64% 57% 43% / 62% 44% 56% 38%} .jstep:nth-child(5) .jdot{border-radius:63% 37% 54% 46% / 55% 48% 52% 45%} .jstep.done .jdot{background:var(--room);box-shadow:none} .jstep.now .jdot{background:var(--ink);box-shadow:none;transform:scale(1.1)} .jt{display:block;font-family:var(--display);font-size:1.12rem;line-height:1.3;color:var(--ink)} .jm{display:block;font-size:.86rem;color:var(--soft);line-height:1.45;margin-top:2px} .jd{display:block;font-size:.92rem;line-height:1.55;color:var(--ink-2); max-height:0;opacity:0;overflow:hidden; transition:max-height .35s ease,opacity .25s ease,margin-top .35s ease} .jstep:hover .jd,.jstep:focus-visible .jd,.jstep.now .jd{max-height:130px;opacity:1;margin-top:9px} .jstep[data-step]:hover .jt,.jstep[data-step]:focus-visible .jt{color:var(--room)} @media (min-width:760px){ .jd{max-width:62ch} } .cta:disabled{opacity:.4;cursor:default} /* ---------- the shapes on the right ---------- A mix-of-four triangle, an ink pebble and a body-texture pebble, sitting in the right margin (Maaria, 2026-08-27). z-index 1 puts them under #app, which is 2, so an opaque card crops them and they read as coming out from behind it rather than sitting beside it. That is the only clipping they get: the rule about textures staying whole inside their section is kept by giving them a fixed full-height strip of their own, so only the viewport edge cuts them. Every one is an asymmetric pebble, never a circle, and no two rooms get the same arrangement: each room shifts the size, the tilt and the height so the page changes under you as you move without ever announcing that it did. They start at 1180px. Below that the container has no margin left to give and they would sit under the reading column, which is worse than not having them. */ #deco{position:fixed;top:0;right:0;bottom:0;width:min(32vw,440px);z-index:1; pointer-events:none;overflow:hidden;display:none} @media (min-width:1180px){ #deco{display:block} } #deco span{position:absolute;display:block; transition:transform .8s cubic-bezier(.22,.61,.36,1), top .8s ease, bottom .8s ease} /* The mix-of-four triangle. NEVER TILTED and ALWAYS SITTING ON THE BOTTOM: a tilted triangle is not a house rule with an exception in it. What varies room to room is how big it is and where along the edge it stands, never its angle and never whether its base is on the floor. */ .d1{width:330px;height:420px;right:-64px;bottom:0;top:auto; background:url('/mixof4.jpg') center/cover no-repeat; clip-path:polygon(50% 0%, 100% 100%, 0% 100%); transform-origin:50% 100%} /* the ink stone */ .d2{width:118px;height:102px;right:52px;top:46vh;background:var(--ink); border-radius:58% 42% 45% 55% / 52% 47% 53% 48%;transform:rotate(-9deg)} /* the body stone */ .d3{width:196px;height:176px;right:-58px;bottom:8vh; background:url('/textures/texture_body.jpg') center/cover no-repeat; border-radius:41% 59% 62% 38% / 59% 36% 64% 41%;transform:rotate(12deg)} /* Home leads with the triangle. Every other room moves it out of the way and lets one of the stones carry the corner instead. */ body[data-room="brief"] .d1{right:-118px;transform:scale(.86)} body[data-room="brief"] .d2{top:34vh;right:96px; border-radius:69% 31% 45% 55% / 38% 62% 38% 62%;transform:rotate(16deg) scale(.78)} body[data-room="brief"] .d3{bottom:16vh; border-radius:63% 37% 54% 46% / 55% 48% 52% 45%;transform:rotate(-7deg) scale(1.06)} body[data-room="documents"] .d1{right:-18px;transform:scale(.94)} body[data-room="documents"] .d2{top:12vh;right:24px; border-radius:36% 64% 57% 43% / 62% 44% 56% 38%;transform:rotate(23deg) scale(1.22)} body[data-room="documents"] .d3{bottom:-4vh;right:-96px; border-radius:58% 42% 33% 67% / 47% 58% 42% 53%;transform:rotate(4deg) scale(.9)} body[data-room="call"] .d1{right:34px;transform:scale(.72)} body[data-room="call"] .d2{top:66vh;right:-26px; border-radius:41% 59% 62% 38% / 59% 36% 64% 41%;transform:rotate(-19deg) scale(1.5)} body[data-room="call"] .d3{bottom:auto;top:6vh;right:-40px; border-radius:52% 48% 38% 62% / 45% 61% 39% 55%;transform:rotate(-14deg) scale(.82)} body[data-room="page"] .d1{right:-146px;transform:scale(1.14)} body[data-room="page"] .d2{top:56vh;right:72px; border-radius:63% 37% 54% 46% / 55% 48% 52% 45%;transform:rotate(7deg) scale(.92)} body[data-room="page"] .d3{bottom:12vh;right:-30px; border-radius:69% 31% 45% 55% / 38% 62% 38% 62%;transform:rotate(21deg) scale(.74)} body[data-room="gate"] .d1{right:-40px;transform:scale(.9)} body[data-room="gate"] .d2{top:58vh;right:38px;transform:rotate(-15deg) scale(1.1)} body[data-room="gate"] .d3{bottom:4vh;transform:rotate(6deg) scale(.88)} @media (prefers-reduced-motion:reduce){ #deco span{transition:none} } /* ---------- the links they have added ---------- Pills, not full-width rows: a list of links is a set of small things, and giving each one the width of the card made three links look like a filing cabinet. */ .pills{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0} .pill{display:inline-block;max-width:100%;background:rgba(0,0,0,.06); color:var(--ink);border-radius:var(--pill);padding:9px 17px; font-size:.86rem;line-height:1.2;text-decoration:none; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; transition:background .12s ease} .pill:hover{background:rgba(0,0,0,.12)} /* ---------- no shadows ---------- House rule, and the Team Garden shell is full of them because its own house allows them. Killing the two tokens catches every use that goes through a variable; the handful written as literals are switched off by name below. */ :root{--shadow:none; --lift:none} .bloom .card, .fab, .fab:hover, #sheet, #sheet .card, .who:hover, a.card:hover, button.card:hover{box-shadow:none} /* The stone's ring is a border doing a border's job, so it says so as an outline rather than as an inset shadow that has to be argued about. */ .jdot{box-shadow:none;outline:2px solid rgba(0,0,0,.10);outline-offset:-2px} .jstep.done .jdot,.jstep.now .jdot{outline:0} /* ---------- who you are, and how to leave ---------- */ .whobox{display:flex;align-items:center;gap:10px;flex:none} .whomail{display:none;font-size:.82rem;color:var(--soft);max-width:22ch; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .who{width:38px;height:38px;border-radius:58% 42% 45% 55% / 52% 47% 53% 48%; background:var(--room);flex:none;display:grid;place-items:center; font-weight:700;font-size:.9rem;color:#000;border:0;padding:0; font-family:var(--text);cursor:default} .signout{border:0;background:rgba(0,0,0,.06);color:var(--ink);font-family:var(--text); font-weight:700;font-size:.8rem;padding:9px 16px;border-radius:var(--pill); cursor:pointer;flex:none;transition:background .12s ease} .signout:hover{background:rgba(0,0,0,.12)} @media (min-width:760px){ .whomail{display:block} } /* ---------- the index of twelve ---------- Every question they have answered is one tap away, and so is the one they are on. The ones ahead sit there inert rather than hidden, because seeing how far it runs is the whole point of an index. Pebbles, like everything else here, and no two exactly alike. */ .qnums{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 4px} .qn{width:30px;height:30px;flex:none;border:0;padding:0;cursor:pointer; font-family:var(--text);font-weight:700;font-size:.78rem;color:var(--ink); background:rgba(0,0,0,.055); border-radius:58% 42% 45% 55% / 52% 47% 53% 48%; transition:background .15s ease,color .15s ease,transform .35s ease} .qn:nth-child(3n) {border-radius:41% 59% 62% 38% / 59% 36% 64% 41%} .qn:nth-child(3n+1){border-radius:63% 37% 54% 46% / 55% 48% 52% 45%} .qn:hover:not(:disabled){background:rgba(0,0,0,.12)} .qn.done{background:var(--room);color:#000} .qn.now{background:var(--ink);color:var(--white);transform:scale(1.12); border-radius:52% 48% 46% 54% / 49% 51% 49% 51%} .qn:disabled{opacity:.35;cursor:default} /* ---------- everything said so far ---------- One question on screen is right, and it left somebody with no way to see the answer a follow-up was following up on. This opens from any question. */ .thr{margin:0 0 2px} .thr summary{cursor:pointer;font-size:.82rem;color:var(--soft);padding:6px 0; list-style:none;font-weight:700;letter-spacing:.02em} .thr summary::-webkit-details-marker{display:none} .thr summary::before{content:'+ ';font-weight:700} .thr[open] summary::before{content:'- '} .thr summary:hover{color:var(--ink)} .thrbody{display:flex;flex-direction:column;gap:12px;padding:10px 0 14px; max-height:340px;overflow-y:auto} .thrturn{display:flex;flex-direction:column;gap:3px} .thrwho{font-size:.68rem;font-weight:700; color:var(--soft)} .thrtxt{font-size:.92rem;line-height:1.5;white-space:pre-wrap} .thrturn.me .thrtxt{background:rgba(0,0,0,.035);border-radius:14px;padding:11px 14px} /* ---------- a page walked back to ---------- Same card, same shape, same everything: the question as it was asked and the answer as it was typed, both live in the places they live on the current screen. The only difference is Rooti's warm ground, which says "this one is behind you" without changing a single thing about how you read it. */ .qcard.past{background:#F1E6DF} .qcard.past .qbox{background:rgba(255,255,255,.55)} .qcard.past .qstep{color:#8A7466} /* ---------- emphasis is colour, not weight ---------- Domine ships one weight here on purpose, so a bolded word inside a question was the browser faking one. The room's own orange carries it instead, which is the same rule the site follows in a heading. */ .qtitle strong,.qsub strong,.qlead strong{color:var(--room);font-weight:inherit} /* =========================================================================== THE SERVICE MAP ROOM | Mind (2026-08-27) A second tab for the Client Garden: the Service Map, standing in Mind the way the brief rooms stand in orange. The ramp is the Team Garden's Library room verbatim (#595EBB with its own four washes), reused rather than invented, same as the orange was. Mind is the one dark fill in the brand, so anything that puts text ON --room in this room carries white ink. =========================================================================== */ body[data-room="map"]{ --room:#595EBB; --pale:#EEEFF8; --w1:#E8E8F5; --w2:#D1D2EC; --w3:#B3B5E0; --w4:#8E92D1} body[data-room="map"] .who{color:#fff} /* ---------- alive (2026-08-27) ---------- The Team Garden's breathing, on this app's own boxes: a 1.4% swell over nine seconds, neighbours out of step. Its own keyframe on the standalone `scale` property, because the shell's breathe animates `transform` and the cards hover on transform; scale composes, transform fights. Cards carry `rise` in the same declaration: a second `animation:` line replaces the first, it never adds. The shell's reduced-motion blanket quiets all of it. */ @keyframes mapbreathe{0%,100%{scale:1}50%{scale:1.014}} .card,.qcard,.empty{ animation:rise .5s cubic-bezier(.22,.8,.3,1) both,mapbreathe 9s ease-in-out infinite} .grid .card:nth-child(3n+2){animation-delay:.06s,.5s} .grid .card:nth-child(3n){animation-delay:.12s,1s} @media (prefers-reduced-motion:reduce){ .card,.qcard,.empty{animation:none!important;scale:none!important}} /* ---------- the map itself ---------- The five stages as cards, one per stage, built on the .card idiom. The grid from the old renderer becomes a stack: a phone is the first reader here. */ .mstage{gap:12px} .mstage .mhead{display:flex;align-items:center;justify-content:space-between;gap:10px} .mstage .mhead .t{font-family:var(--display);font-weight:400;font-size:1.25rem;letter-spacing:-.01em} .mstage .mfeel{font-size:1.35rem;flex:none} .mwords{background:rgba(0,0,0,.035);border-radius:14px;padding:12px 14px; font-size:.94rem;line-height:1.55;white-space:pre-wrap} .mlbl{font-size:.68rem;font-weight:700;color:var(--soft)} .mtool{display:flex;align-items:baseline;justify-content:space-between;gap:10px; font-size:.92rem;line-height:1.5;padding:.3rem 0} .mtool:last-child{border-bottom:0} .mtool .mb{font-weight:700;white-space:nowrap} .mtool .heavy{color:var(--room);font-weight:700} body[data-room="map"] .mtool .heavy{color:#595EBB} .mmark{font-size:.7rem;font-weight:700;color:#FF667A;display:block} .mchips{display:flex;flex-wrap:wrap;gap:8px} .mchip{border:0;background:rgba(0,0,0,.05);border-radius:var(--pill);padding:.5rem .95rem; font-family:var(--text);font-size:.8rem;font-weight:700;color:var(--ink);cursor:pointer; text-align:left} .mchip.l-mind{background:#595EBB;color:#fff} .mchip.l-heart{background:#FF667A;color:#000} .mchip.l-body{background:#FE957C;color:#000} .mchip.l-soul{background:#9DA5FE;color:#000} .mchip.isnew{outline:2px dashed rgba(0,0,0,.25);outline-offset:2px} .mopen{background:rgba(0,0,0,.035);border-radius:14px;padding:14px 16px;font-size:.92rem; line-height:1.55;display:none} .mopen.show{display:block} .mopen .mod{font-weight:700;color:#595EBB;display:block;margin-top:.5rem} .mnote{background:#EEEFF8;border-radius:14px;padding:12px 14px;font-size:.94rem;line-height:1.55} .mnote .mlbl{color:#595EBB} /* A NOTE OF HERS IS PARAGRAPHS, NOT A SLAB (2026-09-10). .mnote is not a flex column like .qcard, so its

children had nothing setting them apart and two paragraphs ran together as one block of text. paras() has always split on the blank line; only the spacing was missing. */ .mnote p{margin:0 0 .8em} .mnote p:last-child{margin-bottom:0} /* The read-more under the offer button: a plain text link, on purpose, so the card carries one button and one line rather than two competing pills. */ .mmore{margin:0;text-align:center;font-size:.9rem} .mmore a{color:var(--ink);text-decoration:underline} /* THE OFFER BOX (2026-09-10, Maaria: "a really catchy, pop-uppable beautiful box with a flower"). Body peach into Soul lavender, both light fills, so it takes black ink per the house colour rule and both buttons still punch out of it. No border and 16px radius, like every other card. The flower rides the top edge in a white disc, half in and half out, which is the whole of the pop: the box reads as an object set down on the card rather than one more paragraph of it. Nothing is rotated, images included, and the disc is not an image. */ /* Her line in front of the video: plain type, not a tinted box, so the only box on the card is the one carrying the offer. */ .mintro{display:flex;flex-direction:column;gap:10px} .mintro p{margin:0;font-size:1.06rem;line-height:1.6;color:var(--ink)} .moffer{position:relative;margin-top:22px;border-radius:16px;padding:34px 24px 24px; background:linear-gradient(135deg,#FFD9C9 0%,#FFC7CE 42%,#C9CDFB 100%); color:#000;display:flex;flex-direction:column;gap:16px} @media (min-width:760px){ .moffer{padding:38px 30px 28px} } .moffer p{margin:0;font-size:1.06rem;line-height:1.62;color:#000} .moffer a{color:#000;text-decoration:underline;text-underline-offset:3px;font-weight:700} .moffer a.cta{text-decoration:none} /* The flower rides the top edge, half in and half out, and it is the only thing on the card that breaks its own container. Big enough to read as a deliberate object: at 40px it looked like a smudge on the corner. */ .mflower{position:absolute;top:-26px;left:24px;width:54px;height:54px;border-radius:50%; background:var(--white);display:grid;place-items:center;font-size:28px;line-height:1} /* the two weeks: Now in Heart, Ideal in Soul, black ink on both */ .mweeks{display:grid;gap:12px} @media (min-width:760px){ .mweeks{grid-template-columns:1fr 1fr} } .mnw{border-radius:var(--card-r);padding:20px 22px;color:#000;display:flex; flex-direction:column;gap:8px} .mnw .t{font-size:.7rem;font-weight:700;} /* Only the variable, never a background of their own: these cards are always painted by .btex below, and a background here would outrank its two layers. */ .mnw.now{--fill:#FF667A} .mnw.want{--fill:#9DA5FE} .mnw p{font-size:.95rem;line-height:1.55} .mnw button{align-self:flex-start;border:0;background:rgba(0,0,0,.14);border-radius:var(--pill); padding:.4rem .9rem;font-family:var(--text);font-size:.74rem;font-weight:700; color:#000;cursor:pointer} /* what you pay against what you own */ .mcost{display:grid;gap:12px} @media (min-width:760px){ .mcost{grid-template-columns:1fr 1fr} /* the ways row holds three now, and wraps rather than squeezing */ .mcost.ways{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))} } .mcp{background:var(--white);border-radius:var(--card-r);padding:20px 22px;display:flex; flex-direction:column;gap:6px} .mcp b{font-family:var(--display);font-weight:400;font-size:1.7rem;letter-spacing:-.02em} .mcp .t{font-size:.7rem;font-weight:700;color:var(--soft)} .mcp .per{font-size:.9rem;font-weight:700} .mcp .sub{font-size:.85rem;line-height:1.5;color:var(--ink-2)} .mstack{font-size:.92rem} .mstack summary{cursor:pointer;font-weight:700;padding:.3rem 0} .mstack li{display:flex;justify-content:space-between;gap:10px;list-style:none; padding:.3rem 0} .mstack li.tot{font-weight:700;border-bottom:0} .mstack ul{padding:0;margin:.4rem 0 0} /* the ways on, and the people who already walked them */ /* These sit INSIDE a white card, so they cannot be plain white themselves: each carries its texture as a border ring (Maaria, 2026-08-28), Body for the build-it-yourself way, Soul for built-for-you. */ .mway{text-decoration:none;color:var(--ink)} .mway .wt{font-family:var(--display);font-weight:400;font-size:1.2rem} .mway p{font-size:.92rem;line-height:1.55;color:var(--ink-2)} .mway .wgo{font-size:.82rem;font-weight:700;color:#595EBB} .mshow{display:grid;gap:12px} @media (min-width:760px){ .mshow{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))} } .mscard{background:var(--white);border-radius:var(--card-r);overflow:hidden;display:flex; flex-direction:column} .mscard .mmedia{position:relative;border:0;padding:0;cursor:pointer;display:block;width:100%; aspect-ratio:16/10;background:#000} .mscard .mmedia img{width:100%;height:100%;object-fit:cover;display:block} .mscard .mmedia .play{position:absolute;inset:0;display:grid;place-items:center;color:#fff; font-size:2rem;text-shadow:none} .mscard .mmedia iframe{width:100%;height:100%;border:0;display:block} .mscard .mbody{padding:12px 14px;display:flex;flex-direction:column;gap:4px} .mscard .mn{font-weight:700} .mscard .mbuilt{font-size:.85rem;line-height:1.5;color:var(--ink-2)} .mscard .mdur{font-size:.7rem;font-weight:700;color:var(--soft)} /* The map room's stone carries its own language: a Mind wash from the Library ramp, same stone shape, so the rail says which room is the odd one out. */ /* ---------- the next steps room, Mind ---------- One colour per nav header, for every page under it (Maaria, 2026-08-28): the Service Map world is Mind, so the financials stand in the same Library ramp as the map and the Maps roster. Heart is reserved for the 1:1 client rooms when they land. Mind is a dark fill, so white ink on --room. */ body[data-room="money"]{ --room:#595EBB; --pale:#EEEFF8; --w1:#E8E8F5; --w2:#D1D2EC; --w3:#B3B5E0; --w4:#8E92D1} body[data-room="money"] .who{color:#fff} /* ---------- the map is walked sideways ---------- Five stages in one row, scrolled through inside their own container, so the page itself never scrolls horizontally. Snap is proximity, not mandatory: a reader dragging halfway is allowed to stand between two stages. */ .mrow{display:flex;gap:12px;overflow-x:auto;padding:4px 4px 14px; scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch} .mrow .mstage{flex:0 0 min(86vw,340px);scroll-snap-align:start} .mrowcue{font-size:.78rem;font-weight:700;color:var(--soft);margin:2px 0 12px} /* ---------- the material is the border, not a circle (2026-08-28) ---------- The brand textures carry each card as a ring around it, the way the Team Garden nests its borders, never as small circles sitting on it (Maaria: "no circles with the texture, it's not the way I use them"). Two painted backgrounds: the fill takes the padding box, the texture takes the border box, and the transparent border between them is the ring you see. Same four jpgs the nav already shipped, so nothing new is loaded. */ .btex{--fill:var(--white);border:10px solid transparent; border-radius:calc(var(--card-r) + 4px); background:linear-gradient(var(--fill),var(--fill)) padding-box, var(--btex,none) center/cover no-repeat border-box} .btex.bt-mind {--btex:url('/textures/texture_mind.jpg')} .btex.bt-heart{--btex:url('/textures/texture_heart.jpg')} .btex.bt-body {--btex:url('/textures/texture_body.jpg')} .btex.bt-soul {--btex:url('/textures/texture_soul.jpg')} /* ---------- the stack that re-totals ---------- Their own lines, editable in place. Nothing here writes anywhere: the map keeps the answers as they were given, and this room does the arithmetic. */ .minputwrap{font-weight:700;white-space:nowrap;display:inline-flex;align-items:baseline;gap:4px} .minput{width:74px;border:0;background:rgba(0,0,0,.05);border-radius:8px; padding:.35rem .5rem;font-family:inherit;font-size:.9rem;font-weight:700; text-align:right;color:var(--ink)} .minput:focus-visible{outline:2px solid var(--ink);outline-offset:1px} /* =========================================================================== THE MAPS ROSTER | Mind (2026-08-28) The owner's roster of Service Maps stands in the same Mind ramp as the map room it opens into. A data-room with no palette block here leaves the wave paths with no fill at all and they paint black, which is exactly what this block exists to prevent. =========================================================================== */ body[data-room="maps"], body[data-room="calc"]{ --room:#595EBB; --pale:#EEEFF8; --w1:#E8E8F5; --w2:#D1D2EC; --w3:#B3B5E0; --w4:#8E92D1} body[data-room="maps"] .who, body[data-room="calc"] .who{color:#fff} /* ---------- the calculator (2026-08-28) ---------- Their tools as rows: name, editable price, and under each one the honest word on what the system builds instead. The module tag is a link a person who is not logged in can open. */ .clist{list-style:none;margin:4px 0 0;padding:0} /* A hairline under every row is the "lines" in "lines and boxes", and it is a border-bottom sliver, which the house rules ban outright. Space separates the rows instead: a gap does the same job and draws nothing. */ .crow{padding:0 0 18px} .crow:last-child{padding-bottom:0} .ctop{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap} .ctop b{font-size:.96rem} .ctop .minputwrap{margin-left:auto} .cband{font-size:.7rem;font-weight:700;color:var(--soft)} .cband.heavy{color:var(--room)} .cver{font-size:.88rem;line-height:1.55;color:var(--ink-2);margin-top:7px;max-width:62ch} .ctag{display:inline-block;font-size:.76rem;font-weight:700;color:#fff;background:var(--room); border-radius:var(--pill);padding:.3rem .85rem;text-decoration:none;margin-top:7px} .ctag.keep{background:rgba(0,0,0,.08);color:var(--ink);margin-top:0;margin-bottom:2px} .con{font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:2px} .ctot{display:flex;justify-content:space-between;gap:10px;font-weight:700; padding:13px 0 0} .cadd{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .cadd .field{flex:1;min-width:170px;background:rgba(0,0,0,.04);box-shadow:none} /* ---------- the owner rail: two headers, their rooms beneath (2026-08-28) Briefs and Maps are the only top-level rooms an owner holds. Whatever is open sits nested under its header: the open brief under Briefs, the open map's two rooms under Maps. The chevron says whether a group is folded, and the phone's bottom bar drops the chevron and simply shows or hides the nested tabs. */ #nav .chev{width:8px;height:8px;flex:none;margin-left:auto; border-right:2px solid currentColor;border-bottom:2px solid currentColor; transform:rotate(45deg);opacity:.4;transition:transform .2s ease} #nav button[aria-expanded="false"] .chev{transform:rotate(-45deg)} @media (min-width:760px){ #nav button.navkid{padding:8px 14px 8px 44px;font-size:.88rem} #nav button.navkid .tex{width:17px;height:17px} } @media (max-width:759px){ #nav .chev{display:none} } /* =========================================================================== ONE COLOUR PER HEADER (Maaria, 2026-08-28) The rail is coloured by FAMILY, not by room: `data-fam` names the header a room folds under, so every page beneath a header carries that header's colour and a new room cannot drift into a colour of its own. Briefs is the garden's orange, Maps is Mind, Clients is Heart. The header stone is the deepest tone and its rooms step lighter, so the family reads as one material at three depths rather than three unrelated marks. =========================================================================== */ #nav [data-fam="briefs"] .tex{background:#FE957C} #nav [data-fam="briefs"].navkid .tex{background:#FDB69F} #nav [data-fam="maps"] .tex{background:#8E92D1} #nav [data-fam="maps"].navkid .tex{background:#B3B5E0} #nav [data-fam="clients"] .tex{background:#FF667A} #nav [data-fam="clients"].navkid .tex{background:#FF97A5} /* =========================================================================== THE 1:1 ENGAGEMENT | Heart, all the way across Her rule: a 1:1 client's rooms are Heart red everywhere. The ramp is the Team Garden's onboarding room verbatim, the same reuse rule the orange and the Mind followed. Heart is a dark fill, so anything sitting ON --room in these rooms carries white ink. =========================================================================== */ body[data-room="clients"], body[data-room="proposal"], body[data-room="agreement"], body[data-room="onboarding"], body[data-room="sessions"], body[data-room="board"], body[data-room="library"], body[data-room="handover"]{ --room:#FF667A; --pale:#FFF1F3; --w1:#FFEAEC; --w2:#FFD4DA; --w3:#FFB9C2; --w4:#FF97A5} body[data-room="clients"] .who, body[data-room="proposal"] .who, body[data-room="agreement"] .who, body[data-room="onboarding"] .who, body[data-room="sessions"] .who, body[data-room="board"] .who, body[data-room="library"] .who, body[data-room="handover"] .who{color:#fff} /* ---------- the engagement's own parts (2026-08-28) ---------- Built on the pieces already here: .crow for a row, .clist for a list, .qcard for a section. What is genuinely new is the tick, the phone's one-column board and the shape of a card that is waiting on another. */ .tick{width:24px;height:24px;flex:none;border:4px solid var(--ink);cursor:pointer; background:none;padding:0;border-radius:58% 42% 45% 55% / 52% 47% 53% 48%; transition:background .15s ease,border-color .15s ease} .tick:hover{border-color:var(--ink)} .tick.on{background:var(--room);border-color:var(--room)} .ctop .isdone{color:var(--soft);text-decoration:line-through} .chkline{display:flex;align-items:center;gap:10px;font-size:.94rem;cursor:pointer} .chkline input{width:20px;height:20px;accent-color:var(--room)} /* The board. One column at a time on a phone, four at a desk: the same two layouts the shell already carries, and only ever one of them on screen. */ .collist{display:flex;flex-direction:column;gap:10px} .collist .card,.col-b .card{gap:9px} .card.locked{opacity:.72} .card.locked select{pointer-events:auto} .colwrap .col-h{padding:2px 4px 8px} @media (min-width:760px){ .collist{display:none} } .card select.qdev{max-width:none;width:100%;margin-top:2px} /* A page from the shelf, opened where it stands. */ .crow .mopen{margin-top:9px} .crow .mopen p{margin:0 0 .6rem} /* ---------- the phone bar carries the headers, and nothing else ---------- Her rule (2026-08-28): on a phone the bar is Home, Briefs, Maps, Clients, and NOTHING is added outside it. So the nested rooms leave the bar, and the way into them is the group's own page: the Clients roster opens a garden, and the garden opens on its journey, where every room is a step you tap. At a desk the rail lists them all, because a rail has the room. */ /* ---------- one continuous screen on a phone (Maaria, 2026-08-28) ---------- The waves sat at bottom:0 with height:56vh, so on a phone they began 44% of the way down and everything above them was flat --pale. Installed to a home screen that reads as a band across the top: the colour is right, the texture just is not there yet. The bands are vertical and the svg is preserveAspectRatio="none", so giving it the whole viewport stretches them taller rather than distorting anything. 100dvh, not 100vh: on a phone vh is the tallest the viewport ever gets, so vh would run the artwork under the browser chrome and lose the bottom of it. */ @media (max-width:759px){ #waves{top:0; height:100dvh} } @media (max-width:759px){ /* THE WHOLE ROW, not just its label. A step is a .navrow holding a .peb pebble AND a .navkid label, so hiding only the label left the pebbles behind: the phone bar came out as four headers followed by seven unlabelled dots (Maaria, on her phone, 2026-08-28). The pebble is a desk control anyway, since it toggles what a client sees. */ #nav button.navkid, #nav .navrow{display:none} } /* ---------- the shapes, in the engagement's rooms ---------- Every room shifts the arrangement so the page changes under you as you walk it. Without a block of their own the new rooms all inherited the same default, which put one black stone in the same place seven times. */ body[data-room="clients"] .d1{right:-90px;transform:scale(.9)} body[data-room="clients"] .d2{top:30vh;right:70px; border-radius:69% 31% 45% 55% / 38% 62% 38% 62%;transform:rotate(13deg) scale(.8)} body[data-room="clients"] .d3{bottom:14vh;transform:rotate(-9deg) scale(1.02)} body[data-room="client"] .d1{right:-30px;transform:scale(.8)} body[data-room="client"] .d2{top:58vh;right:-20px;transform:rotate(-16deg) scale(1.25)} body[data-room="client"] .d3{bottom:auto;top:8vh;right:-70px;transform:rotate(6deg) scale(.86)} body[data-room="proposal"] .d1{right:-120px;transform:scale(1.1)} body[data-room="proposal"] .d2{top:40vh;right:90px;transform:rotate(18deg) scale(.75)} body[data-room="proposal"] .d3{bottom:10vh;right:-40px;transform:rotate(-12deg) scale(.9)} body[data-room="agreement"] .d1{right:20px;transform:scale(.7)} body[data-room="agreement"] .d2{top:64vh;right:-30px;transform:rotate(-20deg) scale(1.4)} body[data-room="agreement"] .d3{bottom:auto;top:4vh;right:-50px;transform:rotate(9deg) scale(.8)} body[data-room="onboarding"] .d1{right:-10px;transform:scale(.95)} body[data-room="onboarding"] .d2{top:14vh;right:30px;transform:rotate(24deg) scale(1.15)} body[data-room="onboarding"] .d3{bottom:-2vh;right:-90px;transform:rotate(3deg) scale(.92)} body[data-room="sessions"] .d1{right:-140px;transform:scale(1.16)} body[data-room="sessions"] .d2{top:52vh;right:60px;transform:rotate(-7deg) scale(.95)} body[data-room="sessions"] .d3{bottom:16vh;right:-20px;transform:rotate(17deg) scale(.78)} body[data-room="board"] .d1{right:-60px;transform:scale(.84)} body[data-room="board"] .d2{top:22vh;right:-10px;transform:rotate(11deg) scale(.9)} body[data-room="board"] .d3{bottom:6vh;right:-70px;transform:rotate(-15deg) scale(1.08)} body[data-room="library"] .d1{right:40px;transform:scale(.76)} body[data-room="library"] .d2{top:70vh;right:40px;transform:rotate(-11deg) scale(1.05)} body[data-room="library"] .d3{bottom:auto;top:12vh;right:-30px;transform:rotate(20deg) scale(.84)} body[data-room="handover"] .d1{right:-100px;transform:scale(1.05)} body[data-room="handover"] .d2{top:36vh;right:100px;transform:rotate(5deg) scale(.88)} body[data-room="handover"] .d3{bottom:20vh;right:-50px;transform:rotate(-18deg) scale(.95)} /* ---------- the board is one row, at every width ---------- Four columns side by side that scroll inside their own container when they do not fit. The shell's wrapping grid put Review underneath To do and broke the left-to-right reading of the four steps, which is the one thing a board has to keep (Maaria, 2026-08-28). */ .bcols{display:flex;gap:12px;overflow-x:auto;padding:4px 4px 14px;align-items:flex-start; scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch} .bcols::-webkit-scrollbar{height:0} .bcol{flex:0 0 min(78vw,290px);scroll-snap-align:start;display:flex;flex-direction:column;gap:10px} .bcol .col-h{padding:2px 4px 2px} .bcol .col-b{display:flex;flex-direction:column;gap:10px} .bempty{padding:14px 4px;font-size:.85rem;color:var(--soft)} /* ---------- the head, at any width ---------- The actions used to sit in the identity box beside the avatar, which left the heading two characters wide and wrapped the subtitle one word a line on a narrow window. They live under the title now, and the head is allowed to wrap rather than squeezing (Maaria, 2026-08-28). */ .head .grow{min-width:0} .whose{font-size:.72rem;font-weight:700; color:var(--room);margin-bottom:4px} .headact{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px} .headact .pillbtn.on{background:var(--ink);color:var(--white)} @media (max-width:520px){ .head h1{font-size:1.7rem} .head .sub{font-size:.84rem} } /* ---------- the rail is a tree: Clients, a person, their rooms ---------- Her rule (2026-08-28): under Clients sit the PEOPLE, and a person's steps sit under that person. The indent is the boundary made visible, so a step can never look like it belongs to the whole roster. */ @media (min-width:760px){ #nav button.navstep{padding:7px 14px 7px 64px;font-size:.85rem;font-weight:500} #nav button.navstep .tex{width:14px;height:14px} #nav button.navstep[aria-current="page"]{font-weight:700} } /* The ink stone reads as a hole in a Heart room, so in the engagement it takes the family's deepest tone like everything else under that header. */ body[data-room="clients"] .d2, body[data-room="proposal"] .d2, body[data-room="agreement"] .d2, body[data-room="onboarding"] .d2, body[data-room="sessions"] .d2, body[data-room="board"] .d2, body[data-room="library"] .d2, body[data-room="handover"] .d2{background:#FF667A} /* ---------- the safe area, which an installed app has and a browser tab does not viewport-fit=cover in the head is what lets the waves run to the physical edge of the screen. It also means the page starts at pixel zero. In a browser tab nobody notices, because the browser's own chrome pushes everything down. Installed to a home screen there is no chrome, so the header sat under the status bar and the avatar was clipped by the corner radius (Maaria, on her phone, 2026-08-28). Only the CONTENT is inset. The waves are fixed and behind everything, so they keep bleeding edge to edge, which is the whole reason cover is on. */ #app{padding-top:env(safe-area-inset-top); padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right)} /* The bar is fixed to the viewport, so #app's padding never reaches it, and it carries its own. Phone only: at a desk this selector is the side rail, which has its own padding and no safe area to dodge. */ @media (max-width:759px){ #nav{padding-left:calc(4px + env(safe-area-inset-left)); padding-right:calc(4px + env(safe-area-inset-right))} } /* ---------- a roster card belongs to its room ---------- White cards on a tinted page read as though they came from somewhere else (Maaria, 2026-08-28). A person's card takes the room's own wash, so Briefs is orange all the way down, Maps is Mind and Clients is Heart. The tint is the family's second wave tone, already in the palette, so nothing new is invented and every room gets it from the same rule. */ .grid.roster .card{background:var(--w2)} .grid.roster .card:hover{background:var(--w3)} .grid.roster .tag.plain{background:rgba(0,0,0,.10)} /* ---------- the strip, and the way forward ---------- The rail lists a person's rooms at a desk. On a phone the bar carries the three headers and nothing else, which left a client's rooms reachable only from a screen nobody was on. Two answers, because they are two questions: the strip is for somebody who knows where they are going, the button at the bottom of the page is for somebody who has just finished reading. Icons only in the strip (Maaria, 2026-08-28). 44px, which is the smallest thing a thumb hits reliably. */ .strip{display:flex; gap:8px; padding:2px 22px 12px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch} .strip::-webkit-scrollbar{display:none} .strip button{flex:none; width:44px; height:44px; border:0; border-radius:14px; padding:0; cursor:pointer; display:grid; place-items:center; background:rgba(255,255,255,.55); color:var(--soft); transition:background .16s ease, color .16s ease} .strip button[aria-current="page"]{background:var(--white); color:var(--ink); box-shadow:var(--shadow)} .strip .ic{width:22px; height:22px; display:block} /* At a desk the rail already lists them, in a shape with room for their names. */ @media (min-width:760px){ .strip{display:none} } /* The way forward, on both. Somebody at a desk reaching the end of a page is asking the same question as somebody on a phone. */ .nextwrap{margin-top:6px} /* The room's own colour, so the way out of a page is not another white card in a stack of white cards (Maaria, 2026-08-28). It only ever appears inside Maps and Clients, which are Mind and Heart, and both of those take white text. A room on a light fill would need the black, per the house rule. */ .nextbtn{display:flex; align-items:center; gap:14px; width:100%; border:0; cursor:pointer; text-align:left; font-family:inherit; font-size:1rem; color:#fff; background:var(--room); border-radius:var(--card-r); padding:17px 20px} .nextbtn .ic{width:22px; height:22px; flex:none; color:#fff} .nextbtn .lab{flex:1; min-width:0; font-weight:600} /* "Next" and the room name are the same white. What separates them is size and weight, not a paler version of the same colour. */ .nextbtn .pre{display:block; font-weight:400; font-size:.8rem; color:#fff} .nextbtn .arrow{flex:none; font-size:1.1rem} /* A stored page reads in its own frame: full width, its own scroll, and its own stylesheet sealed off from the app's. */ .pageframe{width:100%;height:78vh;border:0;border-radius:var(--card-r); background:var(--white);display:block} /* ---------- the pebble is the switch (2026-08-28) ---------- Red means this client sees the room, grey means they do not. The label navigates, the pebble toggles, and the room she is standing in is underlined: in a rail where every stone is one colour, the white pill alone had stopped being findable. A step that carries no switch (the board and the files, which a client in a build always has) draws a pebble that is plainly not a button. */ .navrow{display:flex;align-items:center;gap:0} .navrow .navstep{flex:1;min-width:0} #nav .peb{border:0;background:none;padding:0;cursor:pointer;flex:none; display:grid;place-items:center;width:34px;height:34px;border-radius:12px; transition:background .12s ease} #nav .peb:hover{background:rgba(255,255,255,.6)} #nav .peb.fixed{cursor:default} #nav .peb.fixed:hover{background:none} #nav .peb .tex{width:15px;height:15px;transition:background .18s ease} /* The pebble sits outside the row's data-fam, so it never inherited the family colour and fell back to the generic stone. It states both states itself: Heart red for a room this client sees, grey for one they do not. */ /* Colour is its header's colour, not Heart for everything: the pebble is used under Maps too, where Heart red is a colour that group never wears. Grey is the one meaning that does not move, in any group: hidden from this client. */ #nav .peb.on .tex, #nav .peb.fixed .tex{background:#FF667A} #nav .peb[data-fam="maps"].on .tex, #nav .peb[data-fam="maps"].fixed .tex{background:#595EBB} #nav .peb[data-fam="briefs"].on .tex, #nav .peb[data-fam="briefs"].fixed .tex{background:#FE957C} #nav .peb.off .tex{background:#C3BCB9} #nav .navrow.isoff .lab{color:#8A817C} /* where you are, said in the text as well as in the pill */ #nav .navstep[aria-current="page"] .lab{text-decoration:underline;text-underline-offset:4px; text-decoration-thickness:1.5px} @media (min-width:760px){ /* the pebble takes the indent the step's own stone used to hold */ .navrow{padding-left:44px} #nav button.navstep{padding-left:8px} } /* ---------- the calculator, answering before it evidences ---------- The number the page exists to produce, said once and said first. It used to be assembled by the reader out of a twelve row list and then repeated three times underneath in three framings (Maaria, 2026-08-28). */ .cans{padding:2px 2px 4px} .cans-n{margin:0; font-family:var(--display); font-weight:400; font-size:2.4rem; letter-spacing:-.02em; line-height:1.05; color:var(--ink)} .cans-s{margin:6px 0 0; font-size:.95rem; color:var(--ink)} /* The row's two facts sit on one line. The name is the disclosure, so the whole left side is the tap target rather than a chevron somebody has to aim at. */ .cname{flex:1; min-width:0; border:0; background:none; padding:0; cursor:pointer; font-family:inherit; font-size:.96rem; font-weight:700; color:var(--ink); text-align:left; display:flex; align-items:center; gap:7px} .cname.flat{cursor:default; font-weight:700} .cchev{width:8px; height:8px; flex:none; border-right:2px solid var(--ink); border-bottom:2px solid var(--ink); transform:rotate(45deg) translateY(-2px); transition:transform .16s ease} .cname[aria-expanded="true"] .cchev{transform:rotate(-135deg) translateY(-2px)} .cwhat{margin:9px 0 0; display:flex; flex-direction:column; align-items:flex-start; gap:8px} /* A display rule beats the hidden attribute, so every row opened at once and the collapse did nothing. Caught on the render, not in the code. */ .cwhat[hidden]{display:none} /* The way back to everyone, sitting where the other names were. It carries no pebble, so it lines up with the names rather than with their stones. */ @media (min-width:760px){ #nav button.navall{padding-left:44px; font-weight:600} #nav button.navall .lab{text-decoration:underline; text-underline-offset:3px} } /* =========================================================================== THE PEOPLE HUB | green (Maaria, 2026-08-28: "the same green we use in team garden home page on the other repo") The fourth header and its seven rooms. The emerald is the Team Garden's home colour verbatim, ramp and all, carried across the way the orange, the Mind and the Heart were: a colour that already exists in the family rather than a sixth one invented here. Green is a LIGHT fill, so everything sitting on it takes BLACK ink, which is the one place these rooms differ from Maps and Clients. =========================================================================== */ body[data-room="people"], body[data-room="road"], body[data-room="atgate"], body[data-room="garden"], body[data-room="door"], body[data-room="table"], body[data-room="hosts"], body[data-room="person"]{ /* Royal plum, her call 2026-09-01, replacing the emerald. Home keeps the emerald: People borrowed it through tex:'home' and now stands on its own colour. Plum is DARK where the green was light, so everything that assumed a light fill under it flips to white ink below. */ --room:#820263; --pale:#F6EDF3; --w1:#F2E6EF; --w2:#DCB8D3; --w3:#C58BB7; --w4:#AA5395} /* The rail's stone. `home` is the only tex class the four textures do not name, so it gets its own blob here rather than borrowing one. */ #nav .tex.home {background:#AA5395; border-radius:47% 53% 61% 39% / 44% 57% 43% 56%; --tilt:7deg} #nav [data-fam="people"] .tex{background:#820263} #nav [data-fam="people"].navkid .tex{background:#AA5395} /* The way forward carries the room's colour. Plum is dark, so this is white, per the house rule: light fills take black, dark fills take white. It was black while this room was the emerald. */ body[data-room="people"] .nextbtn, body[data-room="road"] .nextbtn, body[data-room="atgate"] .nextbtn, body[data-room="garden"] .nextbtn, body[data-room="door"] .nextbtn, body[data-room="table"] .nextbtn, body[data-room="hosts"] .nextbtn{color:#fff} body[data-room="people"] .d2, body[data-room="road"] .d2, body[data-room="atgate"] .d2, body[data-room="garden"] .d2, body[data-room="door"] .d2, body[data-room="table"] .d2, body[data-room="hosts"] .d2, body[data-room="person"] .d2{background:#AA5395} body[data-room="people"] .nextbtn .ic, body[data-room="road"] .nextbtn .ic, body[data-room="atgate"] .nextbtn .ic, body[data-room="garden"] .nextbtn .ic, body[data-room="door"] .nextbtn .ic, body[data-room="table"] .nextbtn .ic, body[data-room="hosts"] .nextbtn .ic, body[data-room="people"] .nextbtn .pre, body[data-room="road"] .nextbtn .pre, body[data-room="atgate"] .nextbtn .pre, body[data-room="garden"] .nextbtn .pre, body[data-room="door"] .nextbtn .pre, body[data-room="table"] .nextbtn .pre, body[data-room="hosts"] .nextbtn .pre{color:#000} /* ---------- a person, one line ---------- The row the door, the table, the garden and the search all share, so a person looks the same wherever they are standing. Built out of the shell's own card, not a second card language: white, 16px, no border, no shadow trick and no grey rule between rows. Space separates them. */ .plist{display:flex;flex-direction:column;gap:8px} .prow{display:flex;align-items:center;gap:12px;background:var(--white); border-radius:var(--card-r);padding:13px 15px;cursor:pointer; transition:background .14s ease} .prow:hover{background:var(--w1)} .pav{width:36px;height:36px;flex:none;border-radius:50%;background:var(--w3); display:grid;place-items:center;font-size:.78rem;font-weight:700;color:#000} .pmain{flex:1;min-width:0} .pnm{font-family:var(--display);font-size:.98rem;font-weight:600;line-height:1.3; display:flex;align-items:center;gap:7px;flex-wrap:wrap} .pem{font-size:.82rem;color:var(--soft);line-height:1.4; overflow:hidden;text-overflow:ellipsis} .pchips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:5px} .pwhen{flex:none;font-size:.75rem;color:var(--soft);white-space:nowrap} .pacts{flex:none;display:flex;flex-direction:column;gap:4px;align-items:flex-end} .plink{border:0;background:none;padding:0;cursor:pointer;font-family:var(--text); font-size:.76rem;font-weight:700;color:var(--ink);text-align:right; text-decoration:underline;text-underline-offset:3px} .plink:hover{color:#0F7A5C} /* On a phone a row's actions belong under it, not squeezed into a column two words wide beside a name that has nowhere left to go. */ @media (max-width:759px){ .prow{flex-wrap:wrap} .pmain{flex:1 1 100%;order:2} .pwhen{order:3} .pacts{order:4;flex-direction:row;flex-wrap:wrap;gap:12px;flex:1 1 100%; justify-content:flex-start;margin-top:2px} .pacts .plink{text-align:left} } /* ---------- the small marks ---------- A chip is a fact about somebody; a pill is where they stand. Both are flat fills with real ink, never grey text or an opacity trick. */ /* A PILL NEVER WRAPS INSIDE ITSELF (2026-09-10). These carry a 999px radius and had nothing stopping the label breaking across lines, so in a narrow column "the Service Map" became three stacked words inside a shape whose radius then drew it as a tall oval, unreadable and enormous. The row above already wraps chips onto new lines, which is where a break belongs. A label too wide for the column ellipses rather than growing the row. */ .pchip,.ppill{white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis} .pchip{font-family:var(--text);font-size:.7rem;font-weight:700; padding:3px 9px;border-radius:var(--pill);background:rgba(0,0,0,.07);color:var(--ink)} .pchip.quiet{background:transparent;color:var(--soft);padding-left:0;padding-right:0} .pchip.garden{background:var(--w3)} .pchip.test{background:#9DA5FE;color:#000} .pchip.way{background:#CAF0E3;color:#000} .pchip.letter{background:#FE957C;color:#000} .ppill{font-family:var(--text);font-size:.7rem;font-weight:700; padding:3px 10px;border-radius:var(--pill)} /* A band says one true thing at the top of a room: a migration that is not applied, a door that needs answering first, a link that just got minted. */ .pband{background:var(--white);border-radius:var(--card-r);padding:16px 18px; font-size:.9rem;line-height:1.5;display:flex;flex-wrap:wrap;gap:10px; align-items:center} .pband strong{font-weight:700} .pcode{display:block;flex:1 1 100%;font-size:.78rem;word-break:break-all; background:rgba(0,0,0,.05);border-radius:10px;padding:9px 11px} /* ---------- the door's two columns ---------- The two featured doors sit side by side at a desk and stack on a phone. History keeps its own full-width block underneath: it is not a column you work. */ .pcols{display:grid;gap:14px} @media (min-width:900px){ .pcols{grid-template-columns:1fr 1fr} } .pcol{min-width:0} /* ---------- filters and the room's own search ---------- */ .pfield{width:100%;box-shadow:none;background:rgba(255,255,255,.75)} .pfilters{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .pfilters .pfield{flex:1 1 220px;width:auto} .pfilters .qdev{flex:0 1 auto;max-width:none} .pseg{max-width:520px} .pmore{align-self:flex-start} .pgap{margin:0 0 8px} .pthree{gap:10px} .card.isdone .t{color:var(--soft)} /* ---------- the road's table ---------- The only table in the app, because the road is the only room where the question is "compare these rows" rather than "who is this". It scrolls sideways inside its own box so the page body never does. */ .ptblwrap{overflow-x:auto;background:var(--white);border-radius:var(--card-r); padding:6px 4px;-webkit-overflow-scrolling:touch} .ptbl{width:100%;border-collapse:collapse;font-size:.85rem} .ptbl th{text-align:left;font-size:.68rem;font-weight:700;letter-spacing:.09em; color:var(--soft);padding:10px 12px;white-space:nowrap} .ptbl td{padding:11px 12px;vertical-align:top} .prowlink{cursor:pointer;transition:background .14s ease} .prowlink:hover{background:var(--w1)} .pcell{display:flex;gap:11px;align-items:flex-start} .pcell .pnm{font-size:.9rem} .pnowrap{white-space:nowrap;color:var(--soft)} .pscore{display:flex;flex-direction:column;gap:5px;min-width:74px} .pbar{height:5px;border-radius:var(--pill);background:rgba(0,0,0,.08);overflow:hidden} .pfill{height:100%;border-radius:var(--pill)} /* ---------- the dossier ---------- A room of its own with a Back button, not a modal over another room: every other thing in this shell that opens a person does the same. */ .pkv{margin:14px 0 0} .pkv .k{font-size:.68rem;font-weight:700; color:var(--soft);margin-bottom:5px} .pkv .v{font-size:.92rem;line-height:1.55;color:var(--ink-2);max-width:62ch;margin-bottom:5px} .pact{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;padding:5px 0} .pact .t{font-size:.7rem;font-weight:700; color:var(--ink);flex:none} .pact .s{flex:1;min-width:140px;font-size:.86rem;color:var(--ink-2)} .pact .w{font-size:.75rem;color:var(--soft);flex:none} /* One email per row, its body opening underneath. A row for a door whose bodies are not stored is drawn as a row, not as a button that raises. */ .pmail{display:flex;gap:11px;align-items:baseline;padding:8px 0} .pmail.can{cursor:pointer} .pmail.can:hover .pmtopic{text-decoration:underline;text-underline-offset:3px} .pmpos{flex:none;width:22px;height:22px;border-radius:50%;background:var(--w2); display:grid;place-items:center;font-size:.7rem;font-weight:700;color:#000} .pmtopic{flex:1;min-width:0;font-size:.88rem;font-weight:600} .pmwhen{flex:none;font-size:.75rem;color:var(--soft)} .pmbody{background:rgba(0,0,0,.04);border-radius:12px;padding:14px 16px;margin:2px 0 10px; font-size:.88rem;line-height:1.6} .pmbody p{margin:0 0 .7rem} .pmbody img{max-width:100%;height:auto} .pmsubj{font-family:var(--display);font-size:.98rem;font-weight:600;margin-bottom:.6rem} /* ---------- no grey on the calculator ---------- The house rules ban grey text outright and that page was carrying four different greys: the replacement line, the effort band, and both labels on the comparison cards. Black, with size and weight doing the hierarchy instead (Maaria, 2026-08-28). .cver and .cband exist only here, so they change outright. .qsub and .mcp are used in other rooms too, so they are scoped to this one. */ .cver{color:var(--ink)} .cband{color:var(--ink)} .cband.heavy{color:var(--room)} body[data-room="calc"] .qsub{color:var(--ink)} body[data-room="calc"] .mcp .t{color:var(--ink)} body[data-room="calc"] .mcp .sub{color:var(--ink)} /* ---------- demo mode (2026-08-28) ---------- Ported with the People Hub. The pill sits beside Sign out so it is on screen in every room, not only the ones that hold people. Heart when it is on, which always takes black ink: loud enough that it cannot be on without her noticing, quiet enough to leave in shot on a call. */ .demopill{border:0;cursor:pointer;font-family:var(--text);font-weight:700; font-size:.72rem;padding:6px 12px;border-radius:var(--pill); background:rgba(0,0,0,.07);color:var(--ink);white-space:nowrap;flex:none} .demopill:hover{background:rgba(0,0,0,.14)} html.yb-demo .demopill{background:#FF667A;color:#000} /* ---------- setting up the second factor (2026-08-28) ---------- The QR sits on its own ground inside the white card so a phone camera has something to lock onto, and the secret is printed underneath for anyone without a working camera. Only ever on screen the first time. */ .mfaqr{text-align:center;margin-bottom:6px} .mfaqr img{width:190px;height:190px;background:var(--white);border-radius:12px; padding:8px;display:inline-block} .mfaqr code{display:block;margin-top:10px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.8rem;font-weight:700;word-break:break-all; background:rgba(0,0,0,.05);border-radius:10px;padding:9px 11px} .mfaqr .qsub{margin-top:8px} /* =========================================================================== TWO THINGS A PHONE DOES THAT A DESK DOES NOT (Maaria, on her phone, 2026-08-28: "I need to zoom out to see the whole thing, and there's a white block on top") =========================================================================== */ /* 1. iOS ZOOMS THE WHOLE PAGE IN when a form control under 16px takes focus, and it never zooms back out. Every control here was under it: .field at .92rem, .qdev at .8rem, .qbox at .97rem. At a desk that is invisible; on a phone one tap in a search box leaves the app permanently magnified, which is what "I need to zoom out" was. The Team Garden never had this because it has almost no inputs. The People Hub has a dozen, so it went from theoretical to certain. 16px is the threshold, not a suggestion: 15.9 zooms, 16 does not. Pointer coarse rather than a width, because an iPad in landscape is wider than the breakpoint and zooms just the same. */ @media (pointer: coarse){ .field, .pfield, .qbox, .qdev, .minput, .cadd .field, input, select, textarea{font-size:16px} } /* 2. THE STATUS BAR IS PAINTED WITH theme-color, NOT WITH THE PAGE. Installed to a home screen there is no browser chrome, so the strip behind the clock is whatever that one meta tag says, and it said #FFF4F2 for every room. Above a green room that is a pale pink band sitting on mint, which is the "white block on top". app.js keeps the tag in step with --pale from here on; this is only the note that says why. */ /* =========================================================================== A ROW THAT SCROLLS SIDEWAYS SAYS SO (Maaria, 2026-08-28, on her Service Map: "can you put an indication of the service map continuing instead of it just stopping at the edge") The stages ran off the right edge with a hard cut, which reads as the page ending rather than as more to come. Three parts, and the third is the one that matters: the fade says there is more, the arrow takes you there, and BOTH GO at the end, so nothing ever points at nothing. Used by the Service Map, the board and the gate's three days. =========================================================================== */ .swipe{position:relative} /* The fade lives on the scroller, so it stays at the edge while the cards move under it. Both sides: scrolled in from the left, the first card is running off too, and cutting that one hard is the same lie in the other direction. */ .swipe .mrow, .swipe .bcols{ -webkit-mask-image:linear-gradient(to right, transparent 0, #000 56px, #000 calc(100% - 84px), transparent 100%); mask-image:linear-gradient(to right, transparent 0, #000 56px, #000 calc(100% - 84px), transparent 100%); } .swipe.atstart .mrow, .swipe.atstart .bcols{ -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 84px), transparent 100%); mask-image:linear-gradient(to right, #000 calc(100% - 84px), transparent 100%); } .swipe.atend .mrow, .swipe.atend .bcols{ -webkit-mask-image:linear-gradient(to right, transparent 0, #000 56px, #000 100%); mask-image:linear-gradient(to right, transparent 0, #000 56px, #000 100%); } /* Both ends at once means the whole row fits, so nothing is masked at all. */ .swipe.atstart.atend .mrow, .swipe.atstart.atend .bcols, .swipe.still .mrow, .swipe.still .bcols{ -webkit-mask-image:none; mask-image:none; } /* The arrow is a real control, not a decoration: it walks you one card on. It sits ON the fade, which is why it needs no background of its own beyond the white disc that keeps it legible over a card. */ .swipe .more{ position:absolute; top:50%; right:2px; transform:translateY(-50%); width:40px; height:40px; border:0; border-radius:50%; cursor:pointer; display:grid; place-items:center; font-size:1.1rem; font-weight:700; font-family:var(--text); color:var(--ink); background:var(--white); box-shadow:var(--lift); z-index:2; transition:opacity .18s ease, transform .18s ease; } .swipe .more:hover{transform:translateY(-50%) scale(1.06)} /* At the end there is nowhere to go, so it leaves rather than sitting there inert. Same for a row short enough to need no scrolling in the first place. */ .swipe.atend .more, .swipe.still .more{opacity:0; pointer-events:none} /* A thumb reaches the cards, not a 40px target floating over them. On a phone the fade does the whole job and swiping is the gesture people already use. */ @media (pointer: coarse){ .swipe .more{display:none} } /* ---------- the check-in ---------- */ /* Home's own card, and Home is nothing else now. One question in the morning, the four in the evening, and a line about the day at the end of it. Copied from team-garden/app/style.css and repointed, per her 2026-08-26 rule. Two things changed: `.ck .qn` became `.ck-qn`, because this app already has a global `.qn` that is a 30px numbered stone above the twelve brief questions and the check-in's question inherited it; and the caps came off every label, per her standing rule that nothing in a visual is set in ALL-CAPS or letter-spaced caps. What goes in it is unreadable to Maaria and to everybody else, which is a fact about the migration and not a promise this stylesheet makes. */ .ck{margin:16px 22px 2px;display:flex;flex-direction:column;gap:9px} /* The close is the other end of the day, so it does not wear the same white as the morning. Warm and neutral rather than the room's own colour. */ .ck-eve{background:#F3F0EB} .ck .card{gap:10px} .ck-qn{font-family:var(--display);font-size:1.02rem;font-weight:400;line-height:1.32; display:flex;align-items:baseline;gap:8px;text-align:left} /* Which day, and which end of it. A sheet that opens with a question and no anchor leaves somebody working out what they are answering. */ .ck-when-sub{font-size:.78rem;font-weight:700;letter-spacing:.02em;color:var(--soft); padding-top:2px} /* Moving between days. Back as far as they have used this, forward to tomorrow and no further, because a check-in is written on the day. */ .ck-nav{display:flex;align-items:center;justify-content:center;gap:14px;padding:2px 0 4px} .ck-when{font-family:var(--display);font-size:.95rem;font-weight:400;min-width:9ch; text-align:center} .ck-arrow{border:0;background:rgba(255,255,255,.72);color:var(--ink);cursor:pointer; width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none} .ck-arrow:disabled{color:rgba(0,0,0,.2);cursor:default} /* A day you can read and cannot write. The card stops being a button rather than offering one that refuses. */ .ck .card.flat{cursor:default} /* Their own words, with their own line breaks. A renderer that reflows what somebody typed at eleven at night has edited it. */ .ck .said{font-size:.94rem;line-height:1.5;white-space:pre-wrap;color:var(--ink);text-align:left} .ck .ask{font-size:.88rem;color:var(--soft);line-height:1.42;text-align:left} /* ---------- the shape of a language, and its colour ---------- */ .ck-q{display:flex;align-items:baseline;gap:8px;font-size:.86rem;font-weight:700; letter-spacing:.02em;color:var(--soft);padding-bottom:7px} .sheet-b .ck-q{padding-top:6px} /* Seven across, and they stay seven across: a wrap puts three of the day's possible shapes on a second line and makes them read as the lesser ones. */ .ck-faces{display:flex;gap:5px} .ck-fc{flex:1 1 0;min-width:0;border:0;background:none;cursor:pointer;padding:9px 4px 7px; border-radius:15px;font-family:inherit;color:var(--ink); display:flex;flex-direction:column;align-items:center;gap:5px; transition:background .16s ease,transform .16s ease} .ck-fc .ck-shape{width:100%;height:66px;display:block} /* Seven across is tight on a phone long before it is tight on a desk, so they lose height there rather than losing one of the seven to a second line. */ @media (max-width:560px){ .ck-fc .ck-shape{height:44px} } .ck-fc:hover:not(:disabled){background:rgba(0,0,0,.04);transform:translateY(-1px)} /* The one you picked, marked and nothing more. No colour on it: the colour is the other question's answer, and exactly one thing on this card wears it. */ .ck-fc.on{background:rgba(0,0,0,.075)} .ck-fc:disabled{cursor:default} /* A refused tap says so here, because this card has no sheet to say it in. */ .ck-err{font-size:.8rem;color:#B4342F;padding:4px 0 0} /* Four faces in a row and nothing around them. No frame, no border, no card: the language IS the face, and the only thing that changes is the face. */ .ck-row{display:flex;align-items:flex-end;justify-content:space-between; gap:8px;padding:14px 2px 4px;min-height:112px} .ck-one{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1; border:0;background:none;padding:6px 2px 4px;cursor:pointer; font-family:inherit;color:var(--ink);border-radius:14px} .ck-one:disabled{cursor:default} .ck-one:hover:not(:disabled) .ck-blob{transform:translateY(-3px)} .ck-nm{font-size:.76rem;font-weight:700;letter-spacing:.01em} /* The ring that marks the one that was most present. Always in the markup and only sometimes coloured, so wearing it moves nothing on the row. A pebble rather than a circle, because a circle around one of four reads as a score. */ .ck-ring{display:block;padding:10px;border:3px solid transparent; transition:border-color .3s ease} /* Square by ratio rather than by a second number, so the column can cap a face without squashing it, and one language growing cannot push another off the card. Width is the only thing the room sets. */ .ck-blob{position:relative;display:block;flex:none;background-size:cover; background-position:center;aspect-ratio:1;max-width:100%; transition:width .9s cubic-bezier(.34,1.2,.5,1),transform .14s ease} /* Two and two on a phone. Four faces across a 375px screen caps them all at the same size, and the size is half of what the row says. */ @media (max-width:560px){ .ck-row{flex-wrap:wrap;row-gap:14px} .ck-one{flex:1 1 calc(50% - 4px)} } .ck-face{position:absolute;inset:0;width:100%;height:100%} .ck-eye{animation:ckBlink 4.6s infinite;transform-box:fill-box;transform-origin:center} @keyframes ckBlink{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.12)}} /* The language that led wears the day's shape instead of a blob. It carries its own black outline, so it takes neither the ring below nor a background: the fill is inside the path, which is the whole reason these are SVG. */ .ck-cr{background:none} .ck-cr .ck-shape{position:absolute;inset:0;width:100%;height:100%;display:block} .ck-shape .body{fill:var(--paint,#fff)} /* Written into the page once, and never seen: four patterns the creatures fill from. */ .ck-defs{position:absolute;width:0;height:0;overflow:hidden} /* ---------- the five steps ---------- */ .ck-dots{display:flex;gap:6px;justify-content:center;padding:10px 0 2px} .ck-dots i{width:6px;height:6px;border-radius:50%;background:rgba(0,0,0,.13)} .ck-dots i.on{background:var(--ink)} /* The bloom, in one language's colour. Three nested shapes, each a step deeper than the one holding it. The ramp is the language; the texture is on the creature in the middle, which is the one thing on the card that is actually that language's material. Irregular radii on every layer, so they never nest evenly and it reads as a grown thing rather than three rounded rectangles. */ .ck-bloom{padding:16px 24px 22px 14px;border-radius:46px 34px 42px 52px; background:color-mix(in srgb, var(--lang) 13%, #fff)} .ck-bloom .b2{padding:16px 12px 12px 22px;border-radius:30px 40px 26px 36px; background:color-mix(in srgb, var(--lang) 27%, #fff)} .ck-bloom .b3{padding:16px;border-radius:26px 20px 30px 22px; background:color-mix(in srgb, var(--lang) 46%, #fff); display:grid;place-items:center} /* One thing, already said. Its own language's colour, and an x that takes it off rather than a checkbox that grades it. */ .ck-pills{display:flex;flex-wrap:wrap;gap:7px} .ck-pill{display:inline-flex;align-items:center;gap:8px;border-radius:var(--pill); padding:7px 8px 7px 14px;font-size:.85rem;font-weight:500;max-width:100%} .ck-pill .t{min-width:0;overflow-wrap:anywhere} .ck-pill b{font-size:.7rem;font-weight:700;letter-spacing:.01em} .ck-pill .x{border:0;background:rgba(255,255,255,.32);color:inherit;cursor:pointer; width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex:none} /* The small i beside a question, and the line it opens. Shut it reads as one more character on the label; open it is a sentence, not a tooltip that disappears the moment somebody moves to read it. The panel measures itself against the sheet, so the sheet is what it is positioned inside. */ .sheet-b{position:relative} .ck-info{display:inline-block;vertical-align:middle;position:static} .ck-info summary{list-style:none;cursor:pointer;width:17px;height:17px;border-radius:50%; display:grid;place-items:center;background:rgba(0,0,0,.08); color:var(--soft);font-size:.62rem;font-weight:700;font-family:var(--text); letter-spacing:0} .ck-info summary::-webkit-details-marker{display:none} .ck-info summary:hover{background:rgba(0,0,0,.14)} .ck-info[open] summary{background:var(--ink);color:var(--white)} .ck-info p{position:absolute;left:0;right:0;z-index:5;margin:6px 0 0; background:var(--ink);color:var(--white);padding:11px 14px;border-radius:13px; font-size:.78rem;font-weight:400;line-height:1.45;letter-spacing:0; text-align:left} .ck-mostrow{display:flex;align-items:center;gap:9px;margin-top:2px} .ck-mostrow .ck-most{margin-top:0} .ck-most{width:100%;border:0;cursor:pointer;font-family:var(--text);font-weight:700; font-size:.78rem;padding:10px 12px;border-radius:var(--pill);margin-top:2px; background:rgba(0,0,0,.05);color:var(--soft);transition:background .16s ease} .ck-most:hover{background:rgba(0,0,0,.09)} .ck-most.on{background:var(--ink);color:var(--white)} .ck-side{display:flex;gap:8px;margin-top:2px} /* Adding a thing and leaving the step are not the same act, so they do not wear the same clothes. These two are one choice in the language's own colour, which leaves exactly one black button on the screen and no chequerboard of black and white across two rows. */ .ck-side .mini{flex:1;border:0;background:var(--lang);color:var(--langfg)} .ck-side .mini.ghost{border:0;color:var(--ink); background:color-mix(in srgb,var(--lang) 18%,#fff)} /* Their own vocabulary, folded away. Somebody who names the same walk every week should tap it, and somebody on their first evening should not see an empty box pretending to be a list. */ .ck-known summary{font-size:.8rem;font-weight:700;cursor:pointer;padding:4px 0; color:var(--soft)} .ck-knownlist{display:flex;flex-direction:column;gap:6px;padding-top:6px} .ck-kn{display:flex;align-items:center;gap:9px;width:100%;text-align:left;border:0; background:rgba(0,0,0,.045);border-radius:12px;padding:11px 13px;cursor:pointer; font-family:inherit;font-size:.87rem;color:var(--ink)} .ck-kn .d{font-weight:700;color:var(--soft)} .ck-kn b{margin-left:auto;font-size:.7rem;font-weight:700;letter-spacing:.01em; color:var(--soft)} /* Back and forward through the five. Big enough for a thumb, because the walk is done on a phone at the end of a day. */ .ck-steps{display:flex;justify-content:space-between;align-items:center;padding-top:6px} .ck-go{width:50px;height:50px;border-radius:50%;border:0;cursor:pointer;flex:none; background:var(--ink);color:var(--white);display:grid;place-items:center} .ck-go.ghost{background:rgba(0,0,0,.06);color:var(--ink)} @media (min-width:760px){ .ck{margin:20px 26px 2px} } /* =========================================================================== YOUR COURSE (2026-08-31) Everything below belongs to the course room. Copied in from the prototype at context/pad/2026-08-31-course-platform-prototype/ and repointed, per her rule that UI moves between these products by being copied, never referenced. Class names are prefixed where the garden already owns the plain one: .cpath, .cstop, .cmedia, .cdetail, .cstep, .mcard. Nothing here changes a rule another room stands on. =========================================================================== */ /* Its own room, its own colour: the course is a main nav item now, not a page under the Clients header, so it does not carry the Clients heart. */ body[data-room="course"]{ --room:#595EBB; --pale:#EEEFF8; --w1:#E8E8F5; --w2:#D1D2EC; --w3:#B3B5E0; --w4:#8E92D1} /* the fourteen stones: one set, no two alike, used by the path and the steps */ .pb0 {border-radius:63% 37% 54% 46% / 55% 48% 52% 45%; transform:rotate(-8deg)} .pb1 {border-radius:38% 62% 71% 29% / 66% 34% 66% 34%; transform:rotate(13deg) scale(1.08)} .pb2 {border-radius:72% 28% 39% 61% / 32% 68% 32% 68%; transform:rotate(-19deg) scale(.92)} .pb3 {border-radius:24% 76% 48% 52% / 58% 25% 75% 42%; transform:rotate(6deg)} .pb4 {border-radius:56% 44% 22% 78% / 74% 41% 59% 26%; transform:rotate(-27deg) scale(1.05)} .pb5 {border-radius:81% 19% 63% 37% / 41% 77% 23% 59%; transform:rotate(21deg) scale(.9)} .pb6 {border-radius:34% 66% 33% 67% / 25% 71% 29% 75%; transform:rotate(-4deg) scale(1.12)} .pb7 {border-radius:47% 53% 79% 21% / 68% 52% 48% 32%; transform:rotate(31deg)} .pb8 {border-radius:69% 31% 26% 74% / 39% 62% 38% 61%; transform:rotate(-14deg) scale(.95)} .pb9 {border-radius:29% 71% 57% 43% / 76% 33% 67% 24%; transform:rotate(9deg) scale(1.06)} .pb10{border-radius:58% 42% 84% 16% / 30% 64% 36% 70%; transform:rotate(-23deg)} .pb11{border-radius:77% 23% 44% 56% / 52% 79% 21% 48%; transform:rotate(17deg) scale(.88)} .pb12{border-radius:41% 59% 31% 69% / 63% 28% 72% 37%; transform:rotate(-11deg) scale(1.1)} .pb13{border-radius:65% 35% 68% 32% / 22% 55% 45% 78%; transform:rotate(26deg)} /* ---------- the reading column ---------- The old course pages had one way to give a paragraph a title, which was to put a box round it, and 83% of the 536 boxes across the twelve modules hold nothing but sentences. Three treatments replace the one: a run of titled paragraphs is a set and nothing is drawn, a single one is a run-in heading and nothing is drawn, and a container survives only where it holds something that is not a sentence. */ body[data-room="course"] .lessoncard{padding:46px 52px;gap:34px} .lbody{display:flex;flex-direction:column;gap:32px} /* A flex child will not shrink below its content unless it is told to, so one wide table pushes the whole page sideways. This is the line that stops it. */ .lbody > *,.hold > *,.runin > *,.cstep .sb > *{min-width:0;max-width:100%} .lbody p,.hold p,.bul li{overflow-wrap:anywhere} .lbody > *{max-width:68ch} .lbody > .hold,.lbody > .car,.lbody > .mediawrap,.lbody > .cdetail, .lbody > .rawhtml,.lbody > .ctas{max-width:none} /* A section title is the title face and clearly bigger than the sentence under it. They were arriving as flat body text because the styler was calling them paragraphs; that is fixed at the source, and this makes sure they land as titles when they get here. */ .lbody > h2{margin:34px 0 -8px;font-family:var(--display);font-weight:400; font-size:1.55rem;letter-spacing:-.015em;line-height:1.22;color:var(--ink)} .lbody > h2:first-child{margin-top:0} .prose{font-size:1rem;line-height:1.62;color:var(--ink-2)} .prose p{margin:0} /* Two paragraphs with no gap between them read as one wall of text. The long pages (privacy and GDPR above all) were arriving as a single slab because every p was flush against the next. Maaria, 2026-09-04. */ .prose p + p{margin-top:.9em} .prose strong{color:var(--ink)} .runin{display:flex;flex-direction:column;gap:8px} .runin > b{font-family:var(--display);font-weight:600;font-size:1.1rem;letter-spacing:-.01em} /* Wide, so bordered rather than filled: at that width a fill is a slab. */ .hold{border-radius:var(--card-r);padding:30px 34px;display:flex;flex-direction:column;gap:16px; background:transparent;border:4px solid color-mix(in srgb, var(--room) 72%, transparent)} .hold > b{font-family:var(--display);font-weight:600;font-size:1.1rem;letter-spacing:-.01em} .hold .hold{background:var(--w1);border:0} .bul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px; font-size:1rem;line-height:1.62;color:var(--ink-2)} .bul li{padding-left:1.1rem;position:relative} .bul li::before{content:'-';position:absolute;left:0;color:var(--room);font-weight:700} /* Authored numbers, so the number is the marker and there is no dash. The digit sits in its own column and the text lines up under itself. */ .nlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px; font-size:1rem;line-height:1.62;color:var(--ink-2)} .nlist li{display:flex;gap:12px;align-items:baseline} .nlist .nnum{flex:none;min-width:1.5rem;font-weight:700;color:var(--room); font-variant-numeric:tabular-nums} .nlist .ntx{flex:1;min-width:0} .cdetail{white-space:pre-wrap;font-size:.86rem;line-height:1.55;color:var(--ink-2); font-family:ui-monospace,'SF Mono',Menlo,monospace;overflow-wrap:anywhere; background:rgba(0,0,0,.04);border-radius:12px;padding:15px 16px;overflow-x:auto;max-width:100%} .cdetail.say{white-space:normal;font-family:var(--display);font-size:1rem;line-height:1.45; color:var(--ink);background:color-mix(in srgb,var(--room) 15%,#fff);padding:14px 17px} .rawhtml{overflow-x:auto;font-size:.93rem;line-height:1.6;color:var(--ink-2)} .rawhtml table{border-collapse:collapse;width:100%} .rawhtml th,.rawhtml td{text-align:left;padding:10px 13px} .rawhtml summary{cursor:pointer;font-family:var(--display);font-weight:600;padding:4px 0} .rawhtml img,.rawhtml svg{max-width:100%;height:auto;border-radius:var(--card-r)} .rawhtml audio{width:100%} body[data-room="course"] .pn{font-family:var(--display);font-size:.78rem;font-weight:700; letter-spacing:.02em;color:var(--soft);display:block} body[data-room="course"] .sect{font-size:.82rem;font-weight:700;color:var(--soft);padding:12px 4px 0} body[data-room="course"] .grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;align-items:start} @media (max-width:759px){ body[data-room="course"] .grid2{grid-template-columns:1fr} } /* No link wears the browser blue: ink for the word, the room for the rule. */ .lbody a,.hold a,.runin a,.bul a{color:var(--ink);font-weight:700;text-decoration:underline; text-underline-offset:3px;text-decoration-thickness:1.5px;text-decoration-color:var(--room)} .lbody code,.hold code{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:.88em; background:rgba(0,0,0,.05);padding:.1em .38em;border-radius:6px} /* ---------- media ---------- */ .mediawrap{display:flex;flex-direction:column;gap:7px} .mtitle{font-family:var(--display);font-weight:600;font-size:.98rem;letter-spacing:-.01em} .cmedia{position:relative;border-radius:var(--card-r);overflow:hidden; background:rgba(0,0,0,.05);aspect-ratio:16/9} .cmedia iframe,.cmedia video{position:absolute;inset:0;width:100%;height:100%;display:block;border:0} .cmedia.free{aspect-ratio:auto} .cmedia.free img{display:block;width:100%;height:auto} .mcap{font-size:.82rem;color:var(--soft);line-height:1.45} /* ---------- the carousel ---------- A stack of sibling cards is a queue: you read the first, you scroll, and by the fourth you have lost what they had in common. Sideways they sit next to each other, which is how a set is actually understood. */ .car{position:relative;display:flex;flex-direction:column;gap:12px} .carscroll{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory; padding:2px;scrollbar-width:none;-webkit-overflow-scrolling:touch} .carscroll::-webkit-scrollbar{display:none} .carscroll > *{scroll-snap-align:start;flex:0 0 auto;width:min(390px,86%)} /* The arrow says the set keeps going, and says it by being an arrow rather than a line of text asking to be read. It swells once as the row lands. */ .carnav{position:absolute;right:-4px;top:calc(50% - 34px);width:46px;height:46px;border:0; border-radius:50%;display:grid;place-items:center;cursor:pointer;color:#fff;z-index:3; background-color:var(--ink);background-size:cover;background-position:center; transition:transform .25s cubic-bezier(.22,.8,.3,1)} .carnav svg{width:19px;height:19px;transition:transform .3s cubic-bezier(.22,.8,.3,1)} .carnav:hover{transform:scale(1.08)} .carnav.back svg{transform:rotate(180deg)} .carnav.grow{animation:carGrow 1s cubic-bezier(.22,.8,.3,1) .3s both} @keyframes carGrow{0%{transform:scale(.15);opacity:0}45%{transform:scale(1.3);opacity:1} 72%{transform:scale(.93)}100%{transform:scale(1)}} .carrail{height:2px;background:rgba(0,0,0,.10);border-radius:2px;position:relative;overflow:hidden} .carrail i{position:absolute;top:0;bottom:0;left:0;background:var(--room);border-radius:2px; width:var(--cw,40%);transform:translateX(var(--cx,0px))} /* A set that scrolls is a set of cards, and the cards wear the room. Black ink on all of them, Heart red included (Maaria, 2026-08-31). */ .lbody .car .runin{background:var(--room);color:#000;border-radius:var(--card-r); padding:38px 40px;gap:14px} .lbody .car .runin > b,.lbody .car .runin p,.lbody .car .runin li, .lbody .car .runin .prose{color:#000} .lbody .car .runin a{color:#000;text-decoration-color:rgba(0,0,0,.45)} .lbody .car .runin code{background:rgba(0,0,0,.10)} .lbody .car .runin .bul li::before{color:#000} .lbody .car .hold{padding:38px 40px} /* ---------- steps ---------- */ /* A step list is steps: without a gap on the container every step's title sat against the last line of the step before it and the four read as one block (Maaria, 2026-09-01: "titles hugging the end of the previous paragraph"). */ .steps{display:flex;flex-direction:column;gap:22px} .cstep{display:flex;gap:13px;align-items:flex-start} .snum{width:29px;height:29px;flex:none;display:grid;place-items:center;font-weight:700; font-size:.78rem;background:var(--w2)} .cstep .sb{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px} .cstep .sb b{font-family:var(--display);font-weight:600;font-size:.98rem;letter-spacing:-.01em} /* ---------- the path, turned on its side ---------- A stone is empty until the module is done. Held is the only one that fills, and it fills with the language's own cloth; where you are now is the same empty stone with its ring closed in ink, so the page says "here" without saying "finished". */ /* ONE PATH, ONE LANE, TOP TO BOTTOM (Maaria, 2026-09-01). It ran left to right and scrolled sideways, which turns a sequence of five into a thing you drag. A path you walk in order reads down the page with its line on the left, the way the People journey does. The line is 4px in the room's own colour: any line we draw is 4px, never a hairline, and never grey. Progress is the stones, not a second line laid over the first, so the two-tone fill that used to sit here is gone. */ .cpath{list-style:none;margin:0;padding:8px 0 8px 42px;position:relative; display:flex;flex-direction:column;gap:14px} .cpath::before{content:'';position:absolute;left:16px;top:18px;bottom:18px;width:4px; height:auto;border-radius:2px;background:var(--room);z-index:0} .cstop{position:relative;z-index:1;width:auto;flex:none; display:flex;flex-direction:column} .cstop .card{width:100%;height:100%;text-align:left;display:flex;flex-direction:column;gap:6px} .cstop .card .t{font-family:var(--display);font-weight:600;font-size:1.02rem;line-height:1.25} .pdot{position:absolute;left:-33px;top:18px;width:17px;height:17px;z-index:2;box-sizing:border-box; border:2px solid color-mix(in srgb, var(--room) 50%, transparent); background:transparent;background-size:cover;background-position:center} .cstop.held .pdot{background-color:var(--room);border-color:transparent} .cstop.now .pdot{border-color:var(--ink);border-width:2.5px} /* ---------- a module tile ---------- */ .mcard{border:0;border-radius:var(--card-r);padding:28px 30px;cursor:pointer;text-align:left; min-height:160px;display:flex;flex-direction:column;gap:10px;font-family:inherit; background-size:cover;background-position:center;transition:transform .12s ease} .mcard:hover{transform:translateY(-2px)} .mcard .t{font-family:var(--display);font-weight:600;font-size:1.12rem;line-height:1.25; letter-spacing:-.01em;margin-top:auto} /* ---------- the foot of a lesson ---------- */ body[data-room="course"] .cta.plain{background:rgba(0,0,0,.06);color:var(--ink)} /* The page arrives as it is scrolled, rather than all at once. */ .rv{opacity:0;transform:translateY(22px); transition:opacity .55s cubic-bezier(.22,.8,.3,1),transform .55s cubic-bezier(.22,.8,.3,1)} .rv.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}.carnav.grow{animation:none}} /* ---------- the strand, in the rail ---------- One stone a row. A thread drops out of the parent's stone and every child is strung on it, ending on the last one, so depth is traced rather than counted. No icons: the stone is already the mark, and a glyph inside it is a second one arguing with the first. A module's stone carries its number and a lesson's carries its own, which is what keeps it readable on a phone. */ #nav .crow{position:relative;border:0;background:none;cursor:pointer;width:100%; display:flex;align-items:center;gap:10px;text-align:left; font-family:var(--text);font-weight:500;color:var(--ink);border-radius:14px} #nav .crow:hover{background:rgba(255,255,255,.5)} #nav .crow[aria-current="page"]{background:var(--white);font-weight:700} #nav .crow.lv1{padding:9px 10px 9px 36px;font-size:.87rem} #nav .crow.lv2{padding:8px 10px 8px 58px;font-size:.83rem} #nav .crow.lv3{padding:7px 10px 7px 80px;font-size:.79rem} #nav .cthread{position:absolute;left:0;top:0;height:100%;z-index:0; overflow:visible;pointer-events:none} #nav .cthread path{fill:none;stroke:color-mix(in srgb, var(--room) 45%, transparent); stroke-width:2;stroke-linecap:round} #nav .crow[aria-current="page"] .cthread path{ stroke:color-mix(in srgb, var(--room) 80%, transparent)} #nav .cpeb{display:grid;place-items:center;flex:none;color:#fff;position:relative;z-index:1; background-size:cover;background-position:center;width:21px;height:21px} #nav .crow.lv3 .cpeb{width:16px;height:16px} #nav .cnum{font-family:var(--text);font-weight:700;font-size:.62rem;color:#fff;line-height:1} #nav .crow.lv3 .cnum{font-size:.55rem} #nav .crow .lab{position:relative;z-index:1;line-height:1.25; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} #nav .crow .chev{position:relative;z-index:1;margin-left:auto} @media (max-width:759px){ #nav .crow{display:none} } /* ---------- the free courses ---------- Four modules, four colours. As a checklist they were four identical rows with four identical sublines and the eye had nothing to hold: the colour IS the difference between them, so the colour does the work. */ .fcard{border:0;border-radius:var(--card-r);padding:32px 34px;cursor:pointer;text-align:left; min-height:190px;display:flex;flex-direction:column;gap:10px;font-family:inherit; background-size:cover;background-position:center;transition:transform .12s ease} .fcard:hover{transform:translateY(-2px)} .fcard .t{font-family:var(--display);font-weight:600;font-size:1.12rem;line-height:1.25; letter-spacing:-.01em} .fcard .w{font-size:.88rem;line-height:1.5;opacity:.92;margin-top:auto} /* ---------- the corner shapes ---------- Its own block, because without one this room inherits the default and puts a black stone in the middle of the reading column. The stylesheet above says exactly that about the seven rooms it happened to before. A lesson is for reading, so its corner goes quiet: the triangle drops out of sight and one small stone holds the edge. */ body[data-room="course"] .d1{right:-58px;transform:scale(.88)} body[data-room="course"] .d2{top:22vh;right:-24px; border-radius:41% 59% 62% 38% / 59% 36% 64% 41%;transform:rotate(-17deg) scale(.82)} body[data-room="course"] .d3{bottom:6vh;right:-84px;transform:rotate(8deg) scale(.94)} /* ---------- room to breathe ---------- The prototype's spacing, which is looser than the console's on purpose: a room somebody reads in is not a room somebody scans in. */ body[data-room="course"] main{padding:24px 46px 90px;gap:20px} @media (max-width:759px){ body[data-room="course"] main{padding:16px 18px 96px;gap:16px} } body[data-room="course"] .head{padding:40px 46px 18px} body[data-room="course"] .sect{padding:22px 4px 2px} /* Sentence case, like everything else in this room: the shared .lbl is an uppercase letter-spaced label, and caps are not a thing this course wears (Maaria: no all-caps and no letter-spaced caps anywhere in a visual). */ body[data-room="course"] .lbl{padding:10px 4px 2px;text-transform:none;letter-spacing:0; font-size:.82rem;font-weight:700;color:var(--soft)} body[data-room="course"] .shelf{gap:14px;padding:4px 2px 8px} body[data-room="course"] .cpath{gap:16px;padding:10px 0 10px 42px} /* The three parts are a stack, and a stack is not three cards touching. They had no gap at all: the class came across with the markup and its layout rules did not, so they butted edge to edge and read as one striped block. Cards get air, here and everywhere (Maaria, 2026-09-01, twice). */ body[data-room="course"] .stack{display:flex;flex-direction:column;gap:16px;padding:4px 0 10px} body[data-room="course"] .scard{border-radius:var(--card-r);width:100%;text-align:left; display:flex;flex-direction:column;gap:8px;padding:26px 28px} body[data-room="course"] .card{padding:26px 28px} body[data-room="course"] .tile{width:190px;height:132px;padding:18px} /* The waves carry the module's colour now, so the page reads as that module rather than as one orange room holding twelve. */ body[data-room="course"] #waves{opacity:1} /* ---------- the lesson strip, phones only ---------- The rail is a desktop idea. On a phone the stones ARE the navigation, so they come to the top of the page where a thumb reaches them. */ .cstrip{display:none} @media (max-width:759px){ .cstrip{display:flex;gap:9px;overflow-x:auto;padding:4px 2px 10px; scrollbar-width:none;-webkit-overflow-scrolling:touch} .cstrip::-webkit-scrollbar{display:none} .spb{flex:none;width:36px;height:36px;border:0;cursor:pointer;color:var(--ink); font-family:var(--text);font-weight:700;font-size:.8rem; display:grid;place-items:center;background-size:cover;background-position:center} .spb.now{outline:2.5px solid var(--ink);outline-offset:2px} } /* ---------- cloth is worn once, not tiled ---------- texBg() sets only the image. Without these the browser repeats it, and a wide card ends up wearing the same swatch five times across. `.tex` cannot do this job here: in this app that class is the 26px swatch in the rail, not a background modifier, so the course states it itself. */ body[data-room="course"] .scard, body[data-room="course"] .tile, body[data-room="course"] .mcard, body[data-room="course"] .fcard, body[data-room="course"] .pdot, body[data-room="course"] .spb, #nav .cpeb{ background-size:cover;background-position:center;background-repeat:no-repeat} /* The corner stone takes the room rather than staying ink: a black blob in a reading room reads as a hole in the page. */ body[data-room="course"] .d2{background:var(--room)} /* Four module stops have to FIT, or the last three sit off the right edge with nothing saying they are there. Narrower stops, and the row scrolls only when a module genuinely has more lessons than the column can hold. */ body[data-room="course"] .cstop{width:auto} /* ---------- no borders ---------- Her call, 2026-09-01. A container is told apart by its fill and the air round it, never by a line drawn round it. */ body[data-room="course"] .hold, body[data-room="course"] .lbody > .hold, body[data-room="course"] .lbody > .grid2 > .hold{ border:0;background:color-mix(in srgb, var(--room) 9%, #fff);padding:32px 34px} body[data-room="course"] .rawhtml th, body[data-room="course"] .rawhtml td{border:0;padding:11px 14px} body[data-room="course"] .rawhtml tbody tr:nth-child(odd){ background:color-mix(in srgb, var(--room) 6%, transparent)} /* The stone says done or not by what fills it, not by a ring round it. */ body[data-room="course"] .pdot{border:0;background:color-mix(in srgb, var(--room) 22%, #fff)} body[data-room="course"] .cstop.held .pdot{background-color:var(--room)} body[data-room="course"] .cstop.now .pdot{background:var(--ink)} body[data-room="course"] .spb.now{outline:0;background:var(--ink);color:#fff} /* Two cards fit; the arrow only stands from three up, and comes back on a phone where one card fills the row whatever the count. */ .car.few .carnav{display:none} @media (max-width:759px){ .car.few .carnav{display:grid} } /* ---------- the course's own pebble in the MAIN rail ---------- Mind blue, flat, like every other main-rail pebble. Setting tex:'mind' in config did not do it: the swatch takes a colour from elsewhere in this nav, so the room states it here rather than guessing at the mechanism again. */ #nav button[data-go="course"] .tex, #nav button[data-go="course"] .peb{ background-color:#595EBB !important;background-image:none !important} #nav button[data-go="course"] .tex{filter:none} /* The freebie's stone carries no cloth. */ #nav .crow .cpeb{background-image:none} #nav .crow.lv1:first-of-type .cpeb{background-color:#FDF8F5} /* ---------- the rail shows the whole name ---------- A flex child will not shrink below its content unless it is told to, so the label sat at full width and the rail cut it off. min-width:0 lets it shrink, and normal wrapping lets it use the second line it already had room for. */ #nav .crow{align-items:flex-start} #nav .crow .lab{flex:1;min-width:0;white-space:normal;overflow-wrap:break-word; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden;line-height:1.3} #nav .crow .cpeb{margin-top:1px} #nav .crow .chev{margin-top:3px} /* A little of the indent back, so a two-line name is two lines and not three. */ #nav .crow.lv1{padding-left:32px} #nav .crow.lv2{padding-left:52px} #nav .crow.lv3{padding-left:72px} #nav .crow{padding-right:8px} /* Nothing in a lesson lifts or fades as you scroll: it is read, not scanned. */ body[data-room="course"] .lbody > *{opacity:1 !important;transform:none !important; transition:none !important} /* ---------- every button wears the page ---------- Her call, 2026-09-01: a black button in a coloured room is a hole in it. paintRoom() already sets --tex to the module's cloth, so the buttons only have to ask for it. Rooms that are not a language have no cloth and the flat room colour carries them. */ body[data-room="course"] .cta, body[data-room="course"] .ck-go, body[data-room="course"] .carnav, body[data-room="course"] .mini, body[data-room="course"] .tag:not(.plain){ background-color:var(--room); background-image:var(--tex,none); background-size:cover;background-position:center;background-repeat:no-repeat; color:#fff;border:0} body[data-room="course"] .cta.plain, body[data-room="course"] .tag.plain{ background-color:rgba(0,0,0,.06);background-image:none;color:var(--ink)} body[data-room="course"] .ck-go:disabled{opacity:.3} body[data-room="course"] .back{background:rgba(255,255,255,.72);color:var(--ink)} /* ---------- NOTHING IN THIS ROOM MOVES UP OR DOWN ---------- Her call, 2026-09-01, and it is not a preference: "makes me nauseous, it is like being on a boat." Motion sickness is triggered by exactly this, content sliding vertically while the eye tries to hold a line of text. So the whole room is still. Not the reveal, not the card rise, not the wave drift, not the bloom. Desktop and phone alike, and it does not wait for the reader to have set prefers-reduced-motion: the room is simply still. */ body[data-room="course"] *, body[data-room="course"] *::before, body[data-room="course"] *::after{ animation:none !important; transition-property:background-color,color,opacity,fill,stroke !important} body[data-room="course"] .rise, body[data-room="course"] .rv, body[data-room="course"] .lbody > *, body[data-room="course"] .card, body[data-room="course"] .bloom, body[data-room="course"] .scard, body[data-room="course"] .tile, body[data-room="course"] .mcard, body[data-room="course"] .fcard{ opacity:1 !important;transform:none !important} /* Hover lifts are movement too. */ body[data-room="course"] .tile:hover, body[data-room="course"] .mcard:hover, body[data-room="course"] .fcard:hover, body[data-room="course"] .carnav:hover, body[data-room="course"] a.card:hover, body[data-room="course"] button.card:hover{transform:none !important} /* The waves stop drifting while you are reading. */ body[data-room="course"] #waves path{animation:none !important} /* The rail carries module and lesson names three levels deep now, and a name cut in half is a name you cannot use. 392px rather than 236 (Maaria, 2026-09-01: "we have plenty of space"), which also lets the rosters above show a full client name instead of an ellipsis. It narrows again on the laptop widths where the reading column would otherwise get squeezed. */ @media (min-width:760px) and (max-width:1180px){ #nav{width:262px} } /* ---------- the People hub is a journey ---------- Six rooms that are one path somebody walks: known of, reached out to, in conversation, at the door, at the table. A grid says "pick one of six"; a line down the side says "this leads to that" (Maaria, 2026-09-01). And they are never allowed to touch. Cards butted edge to edge read as one striped block rather than as six things. */ .pjourney{list-style:none;margin:0;padding:6px 0 6px 30px;position:relative; display:flex;flex-direction:column;gap:18px} .pjourney::before{content:'';position:absolute;left:9px;top:26px;bottom:26px;width:2px; border-radius:2px;background:color-mix(in srgb, var(--room) 30%, transparent)} .pstop{position:relative} .pstop .card{width:100%;text-align:left;display:flex;flex-direction:column;gap:7px} .pjdot{position:absolute;left:-29px;top:26px;width:18px;height:18px;z-index:2; background:var(--room);border-radius:58% 42% 45% 55% / 52% 47% 53% 48%; transform:rotate(-9deg)} @media (max-width:759px){ .pjourney{padding-left:26px;gap:16px} .pjourney::before{left:7px} .pjdot{left:-25px;width:15px;height:15px} } /* A card list anywhere in this app has air between its cards. Two cards with no gap are one card with a line through it. */ .grid.roster{gap:16px} /* ---------- no system scrollbars, anywhere in this app ---------- Her call, 2026-09-01: "I never want to see this system grey scroller in the app, or on the page." The grey track is the operating system drawing over a page that has its own colours. Scrolling still works exactly as it did; only the bar is gone. */ *{scrollbar-width:none;-ms-overflow-style:none} *::-webkit-scrollbar{width:0;height:0;display:none} /* The lesson names itself inside its own card. */ .lhead{display:flex;flex-direction:column;gap:6px;padding-bottom:6px} .lhead h1{margin:0;font-family:var(--display);font-weight:400;font-size:2.05rem; letter-spacing:-.015em;line-height:1.12;text-wrap:balance} @media (max-width:759px){ .lhead h1{font-size:1.7rem} } /* ---------- air above every title ---------- A heading that begins immediately under the last line of the paragraph before it reads as part of that paragraph. The h2 had its margin; the run-in titles inside a set had none, so "Need to install Claude Code?" sat straight on top of the sentence above it. Every title gets room now, not just the big ones (Maaria, 2026-09-01). */ body[data-room="course"] .lbody > h2{margin-top:52px} body[data-room="course"] .lbody > h2:first-child{margin-top:0} body[data-room="course"] .defs{gap:38px} body[data-room="course"] .runin{gap:12px} body[data-room="course"] .lbody > .runin{margin-top:14px} body[data-room="course"] .lbody > .runin:first-child{margin-top:0} /* THE ALARM BOX: run /activate N before this lesson. Heart red with BLACK text, her call for this one box (2026-09-04), which is the one place the white-on-Heart default does not apply. Karla, sentence case, 16px radius, no border, no shadow. It is always the first block, so it carries no top margin and the block after it keeps its own. */ /* The packs card heading. An h1 in Heart, because it opens its own section under the one download rather than labelling a list inside one. */ /* The packs card. One card: what it is, then why, then the thing you press (Maaria, 2026-09-04). Same disclosure as the Help room, shut by default, and opening is a reveal rather than an animation. The control is a line of Karla with the chevron after it, so it reads as something to press rather than as a second heading competing with the card's own. */ body[data-room="course"] .packscard{gap:10px} body[data-room="course"] .packsfold summary{cursor:pointer;list-style:none; display:inline-block;margin-top:4px} body[data-room="course"] .packsfold summary::-webkit-details-marker{display:none} body[data-room="course"] .packs-open{display:inline-block;position:relative; padding-right:26px;font-family:var(--text);font-size:.95rem;font-weight:700; color:#ff667a} body[data-room="course"] .packs-open::after{content:'';position:absolute; right:4px;top:.34em;width:9px;height:9px; border-right:2px solid #ff667a;border-bottom:2px solid #ff667a;transform:rotate(45deg)} body[data-room="course"] .packsfold[open] .packs-open::after{transform:rotate(-135deg); top:.52em} body[data-room="course"] .packsfold .hcmds{margin-top:14px} body[data-room="course"] .lbody > .alarm{background:#ff667a;color:#000;border-radius:16px; padding:18px 22px;margin:0 0 26px} body[data-room="course"] .lbody > .alarm p{margin:0;color:#000;font-family:var(--text); font-size:1rem;line-height:1.55} body[data-room="course"] .lbody > .alarm code{color:#000;background:rgba(0,0,0,.08)} body[data-room="course"] .hold > b, body[data-room="course"] .cstep .sb b{margin-bottom:2px} /* ---------- the line that draws itself under a title ---------- THE ONE EXCEPTION to "nothing in this room moves", and it is deliberate. What made her ill was content sliding VERTICALLY under the eye trying to read it. This never moves a word: the title is already at rest, and a rule grows sideways beneath it. Horizontal, once, under a thing nobody is mid-sentence in. Anyone who has asked their system for less motion gets it drawn already finished. */ body[data-room="course"] .lbody > h2{position:relative;padding-bottom:14px} body[data-room="course"] .lbody > h2::after{ content:'';position:absolute;left:0;bottom:0;height:3px;width:2.6rem; border-radius:3px;background:var(--room);transform-origin:left center; animation:h2rule .5s cubic-bezier(.22,.8,.3,1) both !important} @keyframes h2rule{from{transform:scaleX(0)}to{transform:scaleX(1)}} @media (prefers-reduced-motion:reduce){ body[data-room="course"] .lbody > h2::after{animation:none !important;transform:none} } /* ---------- a link wears the room ---------- The page is this module's colour, so its links are too. Ink on ink made them read as bold words rather than as somewhere to go. */ body[data-room="course"] .lbody a, body[data-room="course"] .hold a, body[data-room="course"] .runin a, body[data-room="course"] .bul a{color:var(--room);text-decoration-color:var(--room)} /* Except on a filled card, where the room colour on the room colour would vanish: there the ink stays black and the rule under it carries the weight. */ body[data-room="course"] .lbody .defs .runin a{color:#000; text-decoration-color:rgba(0,0,0,.45)} /* A definition card has to be readable on its own, because it is read on its own: it is one card of a set you push through, not a paragraph with company. Room enough for a name and its description without either being cramped. */ body[data-room="course"] .lbody .car .runin{padding:34px 36px;gap:14px; min-height:210px;justify-content:flex-start} body[data-room="course"] .lbody .car .runin > b{font-size:1.16rem;line-height:1.25} body[data-room="course"] .lbody .car .runin .prose{font-size:.98rem;line-height:1.6} body[data-room="course"] .carscroll > *{width:min(360px,84%)} /* ---------- an image, full screen ---------- No animation: it is here or it is not, same as everything else in this room. */ #clb{position:fixed;inset:0;z-index:60;display:none;place-items:center; background:rgba(20,10,18,.94);padding:28px;cursor:zoom-out} #clb.on{display:grid} #clb img{max-width:100%;max-height:100%;width:auto;height:auto;display:block; border-radius:10px;object-fit:contain} .clb-x{position:fixed;top:18px;right:20px;width:44px;height:44px;border:0;cursor:pointer; border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:1.05rem; display:grid;place-items:center} .clb-x:hover{background:rgba(255,255,255,.26)} body[data-room="course"] .cmedia.free img.zoomable{cursor:zoom-in} /* ---------- the Help room ---------- Native

. Opening one is a disclosure, not an animation, so it keeps the rule that nothing in this room moves on its own. */ body[data-room="course"] .faqlist{display:flex;flex-direction:column;gap:0;padding:8px 26px} body[data-room="course"] .faq{border-bottom:0;padding:16px 0} body[data-room="course"] .faq + .faq{box-shadow:0 -1px 0 rgba(0,0,0,.07)} body[data-room="course"] .faq summary{cursor:pointer;list-style:none; font-family:var(--display);font-weight:600;font-size:1.02rem;line-height:1.35; padding-right:26px;position:relative} body[data-room="course"] .faq summary::-webkit-details-marker{display:none} body[data-room="course"] .faq summary::after{content:'';position:absolute;right:4px;top:.42em; width:8px;height:8px;border-right:2px solid var(--room);border-bottom:2px solid var(--room); transform:rotate(45deg)} body[data-room="course"] .faq[open] summary::after{transform:rotate(-135deg);top:.62em} body[data-room="course"] .faq[open] summary{color:var(--room)} body[data-room="course"] .faq .prose{padding:12px 0 4px} body[data-room="course"] .sect .tag{margin-left:8px;vertical-align:middle} /* ── HELP: search, and the four things this room holds ────────────────────── Questions, errors, commands and the glossary, searched here in the browser. Rooti can answer any of it and every answer costs money, so search is the thing offered first (Maaria, 2026-09-01). Sentence case throughout: .lbl is uppercase and this room does not need more of it. */ /* HELP: the section pills and the topic dropdown, back from the old course page (Maaria, 2026-09-04). The chosen one is filled rather than outlined, because a border on one pill in a row of five reads as a box around a word rather than as a choice. Sentence case, like everything else in this room. */ body[data-room="course"] #hsecs{padding:12px 4px 2px} body[data-room="course"] .hsec{font-family:var(--text);font-weight:700;cursor:pointer; border:0;background:rgba(0,0,0,.06);color:var(--ink)} body[data-room="course"] .hsec:hover{background:rgba(0,0,0,.12)} body[data-room="course"] .hsec.on{background:var(--ink);color:#fff} body[data-room="course"] .hsec.on:hover{background:var(--ink)} body[data-room="course"] #htopicwrap:not(:empty){padding:10px 4px 2px} body[data-room="course"] .hsearch{padding:14px 4px 2px} body[data-room="course"] .hsearch input{width:100%;box-sizing:border-box; font:inherit;font-size:1rem;padding:14px 18px;border-radius:999px; border:4px solid var(--ink);background:#fff;color:var(--ink); -webkit-appearance:none;appearance:none} body[data-room="course"] .hsearch input:focus{outline:none; border-color:var(--room);box-shadow:0 0 0 3px rgba(0,0,0,.05)} body[data-room="course"] .hcount{font-size:.85rem;color:var(--soft);padding:8px 6px 0;margin:0} body[data-room="course"] .hsub{font-size:.95rem;font-weight:700;color:var(--ink); padding:14px 4px 2px;margin:0} /* The Repo(sitory) inventory sits on white. The triangle behind this page eats black text, and a section label in the room's soft colour is not a title. */ body[data-room="course"] .rcatwrap{background:#fff;border-radius:16px;padding:36px 32px 28px; position:relative;z-index:1} body[data-room="course"] .rcatwrap > h1{font-family:var(--display);font-weight:400; font-size:2.05rem;letter-spacing:-.02em;line-height:1.15;color:#000;margin:0 0 10px} @media (max-width:759px){ body[data-room="course"] .rcatwrap{padding:24px 18px 18px} body[data-room="course"] .rcatwrap > h1{font-size:1.7rem} } body[data-room="course"] .rcatwrap > h1 em{font-style:italic;font-weight:400} body[data-room="course"] .rcatwrap > .hsub{font-weight:400;padding:0 0 18px;max-width:1000px} body[data-room="course"] .rcatwrap .hcount{color:#000} body[data-room="course"] .rcatwrap .sect{color:#000} body[data-room="course"] .rcatwrap .card{box-shadow:none;padding:8px 0} /* commands: the name, what it does, when you reach for it */ body[data-room="course"] .hcmds{display:flex;flex-direction:column} body[data-room="course"] .hcmd{padding:12px 0} body[data-room="course"] .hcmd + .hcmd{box-shadow:0 -1px 0 rgba(0,0,0,.07)} body[data-room="course"] .hcmd code{font-size:.95rem;font-weight:700;color:var(--room)} body[data-room="course"] .hcmd .hcw{display:block;margin-top:3px} body[data-room="course"] .hcmd .hcn{display:block;margin-top:2px;font-size:.85rem;color:var(--soft)} /* glossary: the word carries the weight, the meaning sits under it */ body[data-room="course"] .hgl{margin:0} body[data-room="course"] .hglrow{padding:12px 0} body[data-room="course"] .hglrow + .hglrow{box-shadow:0 -1px 0 rgba(0,0,0,.07)} body[data-room="course"] .hgl dt{font-weight:700;color:var(--ink);margin:0} body[data-room="course"] .hgl dd{margin:3px 0 0;color:var(--soft)} body[data-room="course"] .faq summary code{font-size:.9rem;word-break:break-word} /* =========================================================================== YOUR ACCOUNT, AT THE FOOT OF THE RAIL (Maaria, 2026-09-01) It used to sit beside the page title, which squeezed every heading into a narrow column and wrapped the long ones. An account is not part of the room you are standing in, so it moved to the bottom of the nav, where the eye goes for it, and the title took the width back. =========================================================================== */ .acct{display:flex;align-items:center;gap:10px} .acct .whomail{display:none} .acct .who{width:34px;height:34px;border-radius:58% 42% 45% 55% / 52% 47% 53% 48%; display:grid;place-items:center;font-weight:700;font-size:.9rem; background:#D90368;color:#fff;flex:none} /* On a phone the rail is a tab bar: one "You" tab, and the three controls live in the sheet it opens. A Sign out you can thumb past by accident is not a convenience. */ @media (max-width:759px){ .acct{flex:1;max-width:112px;flex-direction:column;gap:4px;padding:7px 0 0} .acct .demopill, .acct .signout{display:none} .acct .acctwho{flex-direction:column;gap:4px;font-size:.62rem;font-weight:500; color:var(--soft);border:0;background:none;cursor:pointer; display:flex;align-items:center} .acct .who{width:22px;height:22px;font-size:.7rem} } @media (min-width:760px){ /* margin-top:auto is what puts it at the bottom of a column rail whatever the rail holds above it. The selectors carry #nav because the rail styles every button it holds (full width, 14px radius, room-sized padding), and an account pill is not a room. */ /* No rule above it: any line we draw is 4px and black, and a 4px bar across the foot of the rail is louder than this block needs. The gap does it. */ #nav .acct{margin-top:auto;flex-wrap:wrap;gap:8px;padding:18px 14px 0} #nav .acct .acctwho{width:auto;flex:none;padding:0;background:none;border:0; cursor:default;display:flex;flex-direction:row} #nav .acct .acctwho:hover{background:none} #nav .acct .acctwho .lab{display:none} /* Black, never grey. */ #nav .acct .whomail{display:block;font-size:.82rem;color:var(--ink);font-weight:500; max-width:17ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #nav .acct .demopill, #nav .acct .signout{width:auto;flex:none;padding:7px 13px; border-radius:999px;font-size:.78rem;font-weight:700; flex-direction:row;gap:0} #nav .acct .signout{background:rgba(0,0,0,.06);color:var(--ink)} #nav .acct .signout:hover{background:rgba(0,0,0,.12)} } /* The two free courses under Home wear Home's own pink. */ #nav [data-fam="home"] .tex{background:#D90368} #nav [data-fam="home"].navkid .tex{background:#E8558F} #nav .peb[data-fam="home"].fixed .tex{background:#D90368} /* A module tag in the Repo(sitory) list is the way into that module, so it reads as a link rather than a fact in brackets. */ .modlink{border:0;background:none;padding:0;font:inherit;color:var(--room); font-weight:700;cursor:pointer;text-decoration:underline; text-decoration-thickness:1px;text-underline-offset:3px} .modlink:hover{text-decoration-thickness:2px} /* =========================================================================== THE FOUR, TWO BY TWO, BREATHING (Maaria, 2026-09-01) Each language in its own cloth, four cards that fit on one screen, so there is nothing to scroll sideways for. White text, because these are texture cards and that is the one place the black-on-light rule does not apply. =========================================================================== */ .fintro{gap:10px} .fintro .t{font-family:var(--display);font-size:1.06rem;font-weight:600;line-height:1.4; color:var(--ink)} /* Black, never grey. */ .fintro .meta{font-size:.88rem;line-height:1.5;color:var(--ink);font-weight:600} .fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} @media (max-width:520px){ .fgrid{grid-template-columns:minmax(0,1fr)} } .fgrid .flang{position:relative;overflow:hidden;min-height:172px;padding:18px 19px; display:flex;flex-direction:column;gap:8px;justify-content:flex-end; background-size:cover;background-position:center;color:#fff;border:0; text-align:left} .fgrid .flang .t{font-family:var(--display);font-size:1.06rem;font-weight:600; line-height:1.26;color:#fff} .fgrid .flang .w{font-size:.82rem;line-height:1.45;color:#fff} /* THE ONE THING IN THIS ROOM THAT MOVES, and it is deliberate. body[data-room="course"] * turns every animation off, because prose sliding under the eye makes her seasick. These four are not prose: they are pictures you look at, the movement is a slow swell in place with nothing sliding vertically, and she asked for it by name (2026-09-01: "make it animated, pulsating/breathing"). So the exception is written for these cards only, and it stays the only one. Kill it by deleting this block; the cards then sit still and nothing else changes. Every rule below carries !important because the stillness rule does, and the reduced-motion guard at the end is written to the same weight so a reader who has asked for no motion still wins. */ /* LIFE: beauty, balance, harmony. The edges are never quite still and the breath is long, the way a slow one is. */ /* Organic, not oval. Percentage radii turned these into ellipses and the words fell outside the shape; px corners keep a card a card while no two of them agree, which is the part that reads as alive. */ @keyframes fbreathe-life{ 0%,100%{transform:scale(1); border-radius:38px 20px 32px 24px} 50% {transform:scale(1.02);border-radius:22px 36px 20px 38px} } .fgrid.life .flang{border-radius:38px 20px 32px 24px} body .fgrid.life .flang{animation:fbreathe-life 9s ease-in-out infinite !important} body .fgrid.life .flang:nth-child(2){animation-delay:-2.2s !important} body .fgrid.life .flang:nth-child(3){animation-delay:-4.5s !important} body .fgrid.life .flang:nth-child(4){animation-delay:-6.7s !important} /* WORK: the same four, said officially. Square, steady, a smaller breath. */ @keyframes fbreathe-work{ 0%,100%{transform:scale(1)} 50% {transform:scale(1.008)} } .fgrid.work .flang{border-radius:16px} body .fgrid.work .flang{animation:fbreathe-work 7s ease-in-out infinite !important} body .fgrid.work .flang:nth-child(2){animation-delay:-1.75s !important} body .fgrid.work .flang:nth-child(3){animation-delay:-3.5s !important} body .fgrid.work .flang:nth-child(4){animation-delay:-5.25s !important} /* Why .flang and not .fcard: the stillness block pins transform:none !important on .fcard, and an !important declaration beats a keyframe by spec, so the scale half of the breath could never have run under that name. These are their own thing anyway. */ /* Asked for no motion, gets no motion: same weight as the rule above, later in the file, so this is the one that lands. */ @media (prefers-reduced-motion:reduce){ body .fgrid .flang{animation:none !important} } /* A language's own cloth across the top of its lesson path, so the page you opened looks like the card you clicked. */ .flangtex{height:120px;border-radius:20px;background-size:cover;background-position:center} /* THE GROUPS ARE THE FILTER. 207 things in one list is a scroll, not an answer: pick the job you are trying to do and the list becomes that job's. */ .rcats{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .rcatlab{font-family:var(--text);font-weight:700;font-size:.86rem;color:var(--ink)} .rcatsel{font-family:var(--text);font-weight:700;font-size:.9rem;color:var(--ink); background:var(--white);border:0;box-shadow:var(--shadow);cursor:pointer; padding:12px 16px;border-radius:var(--pill);min-width:min(320px,100%)} /* The download wears Heart's cloth, not the room's (Maaria, 2026-09-01): it is the one button on the page that matters, and Heart is the warm one. */ .dlcta{background-size:cover;background-position:center;color:#fff} /* THE ONE BACK BUTTON. Above the title, left, on every page that is not Home. Its own row, so a long destination name never squeezes the heading. */ .head .upback{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer; font-family:var(--text);font-weight:700;font-size:.84rem;color:var(--ink); background:var(--white);box-shadow:var(--shadow); padding:9px 16px 9px 13px;border-radius:var(--pill);margin-bottom:12px; max-width:100%} .head .upback:hover{background:var(--pale)} .head .upback .arw{font-size:1rem;line-height:1} .head .upback .lab{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* WOHOO. One creature, centre screen, a hop and a spin, then gone. The rules carry !important and enough weight to beat the still-room rule, the same way the breathing cards do: the stillness is for prose sliding under the eye, and this is a second and a half of reward with nothing else on the page moving. */ #wohoo{position:fixed;inset:0;z-index:60;display:grid;place-items:center; pointer-events:none} #wohoo .wohoo-b{display:block;width:min(210px,44vw);filter:drop-shadow(0 14px 30px rgba(0,0,0,.18))} #wohoo .wohoo-b svg{width:100%;height:auto;display:block} /* The body path takes the language's cloth, the outline and face stay on top: the same --paint the day card uses. */ #wohoo .wohoo-b svg .body{fill:var(--paint)} /* Opacity is pinned the whole way across, not just at the ends: with only a start and a finish it interpolates between them and the creature spends the entire hop half see-through. */ @keyframes wohoo-hop{ 0% {transform:translateY(46px) scale(.55) rotate(0deg); opacity:0} 14% {transform:translateY(10px) scale(1) rotate(40deg); opacity:1} 42% {transform:translateY(-52px) scale(1.06) rotate(190deg);opacity:1} 66% {transform:translateY(4px) scale(1) rotate(360deg);opacity:1} 80% {transform:translateY(-16px) scale(1.01) rotate(360deg);opacity:1} 92% {transform:translateY(2px) scale(1) rotate(360deg);opacity:1} 100%{transform:translateY(6px) scale(.92) rotate(360deg);opacity:0} } html body #wohoo .wohoo-b{animation:wohoo-hop 1.5s cubic-bezier(.3,.8,.4,1) both !important} @media (prefers-reduced-motion:reduce){ html body #wohoo{display:none !important} } /* A card about one language wears that language: its colour, its cloth, white ink over both. Never the room's own colour, which would say the four are one thing in four words. */ .langcard{background-size:cover !important;background-repeat:no-repeat !important; background-position:center !important;color:#fff; border-radius:16px;padding:18px 20px} /* The course room styles .runin and .hold by name, which outranks a bare .langcard, so the ink is claimed here at the same weight. Texture cards take white: the black-on-light rule is for flat fills. */ body[data-room="course"] .langcard, body[data-room="course"] .langcard b, body[data-room="course"] .langcard p, body[data-room="course"] .langcard li, body[data-room="course"] .langcard code, body[data-room="course"] .langcard .prose{color:#fff !important} /* Delete: quiet until you want it, never the loudest thing on a card. It sits at the end of the row it belongs to, and it asks before it does anything. */ .delx{margin-left:auto;flex:none;border:0;cursor:pointer;background:rgba(0,0,0,.06); color:var(--ink);font-family:var(--text);font-weight:700;font-size:.8rem; line-height:1;width:28px;height:28px;border-radius:50%;display:grid; place-items:center} .delx:hover{background:#FF667A;color:#fff} .delx:disabled{opacity:.5;cursor:default} .ctop{display:flex;align-items:center;gap:8px;flex-wrap:wrap} /* =========================================================================== YOUR SESSIONS | the one room with a colour of its own (Maaria, 2026-09-04) Every other room takes its colour from the header it folds under. This one folds under nothing, so she picked it off a swatch: #656176 for the room, #DECDF5 for the wash. The room half read as dark grey on the page rather than as the lavender beside it, so it was lifted to #7A6DA8, which is that wash at depth. It is still a dark fill and still carries white ink, the same way Heart and Mind do. =========================================================================== */ body[data-room="calls"]{ --room:#7A6DA8; --pale:#F6F3FB; --w1:#F0EAFA; --w2:#DECDF5; --w3:#BBA7DC; --w4:#9C8CC6} body[data-room="calls"] .who{color:#fff} #nav [data-fam="calls"] .tex{background:#7A6DA8} #nav [data-fam="calls"].navkid .tex{background:#9C8CC6} /* ---------- the calendar, in the events page's shape ---------- Carried across from /events/: the day cell is a card with a 4px black border and a 14px radius, tall enough to hold something, white when the day is empty and filled edge to edge when it is not, with a pill sitting on its bottom edge. On a phone the grid keeps its width and scrolls sideways, with that page's own swipe line above it. Not carried: its uppercase day names and pills, and its opacity fade for a past day. Sentence case and a plain white cell do the same jobs without breaking the two rules this app follows everywhere else. */ .calwrap{background:var(--white);border-radius:var(--card-r);padding:18px 16px 16px} .calhead{display:flex;align-items:center;justify-content:space-between;gap:12px; margin-bottom:14px} .calnavs{display:flex;gap:8px;flex:none} /* ADD A SESSION (Maaria, 2026-09-04: "just be a red + icon on top for me to add a session"). It replaces the card that used to sit above the calendar, so the page is the month and then the bookings. Heart, because it is the one thing on this page that makes something new. */ .caladd{flex:none;width:40px;height:40px;border-radius:var(--pill);background:#FF667A; color:#fff;font-family:var(--text);font-weight:700;font-size:1.35rem; line-height:38px;text-align:center;text-decoration:none;display:block} .caladd:hover{opacity:.88} .calnav.ghost{visibility:hidden} .calmon{font-family:var(--display);font-weight:400;font-size:1.18rem;color:var(--ink)} .calnav{border:0;background:var(--w1);color:var(--ink);border-radius:var(--pill); width:40px;height:40px;font-size:1rem;cursor:pointer;flex:none; font-family:var(--text);line-height:1} .calnav:hover{background:var(--w2)} .calswipe{display:none;font-size:.8125rem;font-weight:700;margin:0 0 10px;color:var(--ink)} .calscroll{} .calgrid{display:grid;grid-template-columns:repeat(var(--cols,5),1fr);gap:.6rem} .caldow{font-size:.75rem;font-weight:700;color:var(--ink);text-align:center; padding:2px 0 4px} .calday{display:flex;flex-direction:column;align-items:flex-start;gap:2px; min-height:112px;padding:.6rem .65rem;border:4px solid var(--ink); border-radius:14px;background:var(--white);color:var(--ink); font-family:var(--text);cursor:default;text-align:left} .calday .cn{font-size:.8125rem;font-weight:700;line-height:1} .calday.out{border-color:transparent;background:transparent} .calday.out .cn{color:var(--soft);font-weight:400} .calday.today{box-shadow:inset 0 0 0 4px var(--room)} /* A day with a live booking is filled edge to edge, the way an event day is on the events page. The room colour is a dark fill, so its ink is white. */ .calday.has{background:var(--room);color:#fff;cursor:pointer} .calday.has:hover{transform:translateY(-3px)} /* A day whose booking is cancelled, moved or already done keeps the card and loses the fill, so the month still shows where it was. */ .calday.had{background:var(--w1);cursor:pointer} .calday.had:hover{background:var(--w2)} .calday.pick{box-shadow:0 0 0 4px var(--ink)} /* A DAY THAT HAS BEEN (Maaria, 2026-09-04: "we want to make past days greyed out"). The events page fades its past days the same way, and this is the one place the app's no-opacity rule gives: a calendar has to say which half of the month is behind you, and dimming is how her own page already says it. */ .calday.gone{opacity:.42} .calday.gone.has{opacity:.55} .calday[data-day]:not([disabled]){transition:transform .15s ease,background .15s ease} .cev{font-size:.8125rem;font-weight:700;line-height:1.2;margin-top:.35rem} .cpill{margin-top:auto;align-self:flex-start;font-size:.66rem;font-weight:700; padding:.22rem .6rem;border-radius:var(--pill);background:var(--white); color:var(--ink)} .calday.has .cpill{background:var(--white);color:var(--ink)} .calday.had .cpill{background:var(--white);color:var(--ink)} /* ---------- one booking, and the three things you can do to it ---------- */ .calrow{padding:0 0 18px} .calrow:last-child{padding-bottom:0} .calrow.gone .ctop b{text-decoration:line-through} .calacts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px} .calact{display:inline-block;font-size:.78rem;font-weight:700;text-decoration:none; border-radius:var(--pill);padding:.42rem .95rem;background:var(--room);color:#fff} .calact:hover{opacity:.88} .calact.off{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 3px var(--ink)} /* Her own row into the CRM, so it does not read as one of the three a client sees. Same pill, the People Hub's green. */ .calact.crm{background:#D90368;color:#fff;border:0;font-family:var(--text);cursor:pointer} /* Only drawn while the call is actually open, so it never competes with the three that move it. Heart, the same as the + that made the booking. */ .calact.live{background:#FF667A;color:#fff} /* The phone keeps the whole month and scrolls to it, rather than squeezing seven columns into a screen. The events page's own answer, same swipe line. */ @media (max-width:760px){ .calwrap{padding:14px 12px 12px} .calswipe{display:block} .calscroll{overflow-x:auto;-webkit-overflow-scrolling:touch} .calgrid{grid-template-columns:repeat(var(--cols,5),132px)} } /* =========================================================================== YOUR MISSION | one view (2026-09-07) What you are selling, who you are helping, and the questions that sell it, on one page. Emerald: the Team Garden home colour People wore before it went plum, so the row after Home has a colour no other header carries. =========================================================================== */ /* GOLD, from her palette (2026-09-07): the two rooms that were green and black take the colours nothing else in the app had claimed. Gold is the mission because it is the thing that is supposed to pull her forward, and it is a LIGHT fill, so every piece of ink on it is black. */ body[data-room="mission"]{ --room:#FFD400; --pale:#FFFBEA; --w1:#FFF6D1; --w2:#FFEFAE; --w3:#FFE577; --w4:#F5C400} #nav .tex.mission{background:#FFD400; border-radius:39% 61% 52% 48% / 57% 43% 57% 43%; --tilt:-5deg} #nav [data-fam="mission"] .tex{background:#F5C400} body[data-room="mission"] .d2{background:#FFE577} /* the mission: the whole point of the page, so it is the biggest thing on it */ .ms-mission{background:var(--room);color:#000;border-radius:var(--card-r);padding:22px 24px; display:flex;flex-direction:column;gap:10px} .ms-mrow{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap} .ms-eyebrow{font-size:.78rem;font-weight:700} .ms-mission .pillbtn{border-color:#000;color:#000} .ms-mission .pillbtn:hover{background:#000;color:var(--room)} .ms-offer{font-family:var(--display);font-weight:400;font-size:1.85rem;line-height:1.2;margin:0;color:#000} .ms-tag{font-size:.72rem;font-weight:700;display:block;margin-bottom:.25rem} .ms-who,.ms-why{background:rgba(0,0,0,.07);border-radius:14px;padding:12px 14px} .ms-who p,.ms-why p{margin:0;font-size:.92rem;line-height:1.5} .ms-mgrid{display:grid;gap:12px;grid-template-columns:1fr} @media(min-width:760px){.ms-mgrid{grid-template-columns:repeat(3,1fr)}} .ms-mstat{background:#fff;color:var(--ink);border-radius:14px;padding:14px 16px; display:flex;flex-direction:column;gap:5px} .ms-mstat .t{font-family:var(--display);font-size:.95rem;line-height:1.3} .ms-mstat .t small{font-family:var(--text);font-size:.8rem;font-weight:400} .ms-mstat .m{font-size:.78rem;line-height:1.4} .ms-big{font-family:var(--display);font-size:2rem;line-height:1;letter-spacing:-.02em} .ms-big small{font-family:var(--text);font-size:.9rem;font-weight:400} .ms-track{display:block;height:10px;border-radius:var(--pill);background:rgba(0,0,0,.09);overflow:hidden} .ms-track span{display:block;height:100%;border-radius:var(--pill);background:#F5C400;transition:width .5s ease} .ms-mdoor{font-size:.85rem;line-height:1.5;margin:0} .ms-mdoor a{color:#000;font-weight:700} /* the form: the same card, opened up */ .ms-form .ms-f{display:flex;flex-direction:column;gap:5px;font-size:.8rem;font-weight:700} .ms-form .pfield,.ms-form .qbox{background:#fff;color:var(--ink);font-weight:400} .ms-area{min-height:74px;font-size:.92rem} .ms-frow{display:grid;gap:10px;grid-template-columns:1fr 1fr} @media(min-width:760px){.ms-frow{grid-template-columns:repeat(4,1fr)}} .ms-form .mini{background:#000;color:#fff} .ms-form .mini.ghost{background:transparent;color:#000;border-color:#000} /* the one to answer */ .ms-today{gap:10px} .ms-today.isdone .ms-q{text-decoration:line-through;text-decoration-thickness:3px} .ms-q{font-family:var(--display);font-size:1.35rem;line-height:1.3;letter-spacing:-.01em} .ms-whoin{background:var(--w1);color:var(--ink)} .ms-how summary{font-size:.78rem;font-weight:700;cursor:pointer;list-style:none;display:flex;align-items:center;gap:.4rem;padding:.2rem 0} .ms-how summary::-webkit-details-marker{display:none} .ms-how summary::before{content:'▸';font-size:.7rem;transition:transform .15s} .ms-how[open] summary::before{transform:rotate(90deg)} .ms-shape{font-size:.88rem;margin-top:.4rem} .ms-shape li{display:flex;gap:10px;align-items:flex-start;line-height:1.45} .ms-shape .n{flex:none;width:22px;height:22px;display:grid;place-items:center; background:var(--w2);border-radius:50%;font-size:.72rem;font-weight:700} .ms-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:6px} .ms-plan{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700} .ms-plan input{font-family:inherit;font-size:.82rem;border:0;border-radius:var(--pill); padding:7px 11px;background:rgba(0,0,0,.06);color:var(--ink)} .ms-urlrow{display:flex;gap:8px;align-items:flex-start;flex:1 1 100%} .ms-url{flex:1;padding:10px 14px} .ms-urlrow .ms-area{flex:1} .ms-add{display:flex;gap:8px;align-items:center;margin-bottom:6px} .ms-add .pfield{flex:1} .ms-note{font-weight:700} /* the three lists, folded on the same page */ .ms-list{display:flex;flex-direction:column;gap:8px} .ms-listhead{display:flex;align-items:center;gap:10px;width:100%;border:0;cursor:pointer; background:var(--white);border-radius:var(--card-r);padding:15px 17px; font-family:inherit;color:var(--ink);text-align:left} .ms-listhead:hover{background:var(--w1)} .ms-listhead .t{font-family:var(--display);font-size:1.1rem} .ms-listhead .m{font-size:.82rem;font-weight:700} .ms-listhead .chev{margin-left:auto;width:9px;height:9px;flex:none;border-right:3px solid var(--ink); border-bottom:3px solid var(--ink);transform:rotate(45deg);transition:transform .18s ease} .ms-listhead[aria-expanded="true"] .chev{transform:rotate(-135deg)} /* one row */ .ms-row{display:flex;align-items:flex-start;gap:12px;background:var(--white); border-radius:var(--card-r);padding:13px 15px;cursor:pointer;transition:background .14s ease} .ms-row:hover{background:var(--w1)} .ms-row.isopen{background:var(--w1)} /* NO SLIVER. A border-left stripe is banned house-wide (absolutes.md) and it was saying what the black pill on the row already says. The row that sells the mission is marked by its pill and by sitting in its own block, never by an edge. */ .ms-row.isdone .ms-title{text-decoration:line-through;text-decoration-thickness:2px} .ms-num{width:30px;height:30px;flex:none;border-radius:50%;background:var(--w3); display:grid;place-items:center;font-size:.78rem;font-weight:700;color:#000} .ms-main{flex:1;min-width:0} .ms-title{font-family:var(--display);font-size:1rem;line-height:1.35;letter-spacing:-.01em} .ms-wholine{font-size:.82rem;line-height:1.4;margin-top:3px} .ms-open{margin-top:10px;display:flex;flex-direction:column;gap:8px;cursor:default} .ms-open .qmsg strong{font-weight:700} .ms-door{text-decoration:none;background:var(--w2)} .ms-row .pwhen{margin-top:4px} /* the week */ .ms-gridwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px} .ms-grid{min-width:840px} .ms-day{min-height:150px;gap:6px} .ms-day.has{background:var(--white);color:var(--ink);cursor:default} .ms-day.has:hover{transform:none} .ms-dayitem{border:0;background:none;padding:0;text-align:left;cursor:pointer; display:flex;flex-direction:column;gap:3px;font-family:inherit;color:var(--ink)} .ms-dayitem:hover .ms-daytitle{text-decoration:underline;text-underline-offset:3px} .ms-dayitem.isdone .ms-daytitle{text-decoration:line-through} .ms-daykind{font-size:.64rem;font-weight:700;padding:2px 8px;border-radius:var(--pill);align-self:flex-start} .ms-daytitle{font-size:.76rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:3; -webkit-box-orient:vertical;overflow:hidden} .ms-post{display:flex;flex-direction:column;gap:3px;margin-top:4px} .ms-thumb{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:8px;border:4px solid var(--ink);display:block} .ms-posttitle{font-size:.74rem;font-weight:700;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2; -webkit-box-orient:vertical;overflow:hidden} .ms-postmeta{font-size:.66rem;font-weight:700} .ms-shapeline{margin-top:auto;font-size:.66rem;line-height:1.3;padding-top:6px} /* =========================================================================== YOUR TIME | the whole Time tab, in the garden (2026-09-06) Copied from the dashboard's Time tab and repointed: the bomb, the heart, the four as creatures, the bars with the goal marked, the day by name, the sites, the curve. Black is the room: the cap. What changed on the way in: the house fonts, 16px cards, no letter-spaced labels, no grey text, and every fill that is light takes black ink (Heart pink included, her rule). =========================================================================== */ /* SPACE INDIGO, from her palette (2026-09-07). A dark fill, so white ink on it, and Dust Grey is left unspent. */ body[data-room="time"]{ --room:#2E294E; --pale:#EFEEF4; --w1:#EAE9F1; --w2:#D3D1E1; --w3:#B0ACC8; --w4:#7C769F} body[data-room="time"] .who{color:#fff} body[data-room="time"] .d2{background:#7C769F} #nav .tex.time{background:#2E294E; border-radius:61% 39% 44% 56% / 48% 55% 45% 52%; --tilt:8deg} #nav [data-fam="time"] .tex{background:#2E294E} .wh-wrap{--cream:#EADEDA;display:flex;flex-direction:column;gap:12px} .wh-bomb{background:var(--white);border-radius:var(--card-r);padding:20px 22px} .wh-bomb-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:.5rem} .wh-bomb-title{font-family:var(--display);font-size:1.15rem} .wh-refresh{border:4px solid var(--ink);background:transparent;color:var(--ink);border-radius:var(--pill); padding:7px 14px;font-family:var(--text);font-weight:700;font-size:.78rem;cursor:pointer} .wh-refresh:hover{background:var(--ink);color:var(--white)} .wh-bomb-main{display:flex;align-items:center;gap:1.1rem;margin:.25rem 0 .6rem} .wh-bombimg{flex:none} .wh-left{font-family:var(--display);font-size:2.4rem;line-height:1;font-variant-numeric:tabular-nums} .wh-left small{display:block;font-family:var(--text);font-size:.9rem;font-weight:700;margin-top:.3rem} .wh-sub{font-size:.85rem;font-weight:700;margin-top:.4rem} .wh-bar{height:14px;border-radius:var(--pill);background:rgba(0,0,0,.08);overflow:hidden;margin:.2rem 0 .8rem} .wh-bar-fill{height:100%;border-radius:var(--pill);transition:width .6s ease} .wh-rule{font-size:.82rem;line-height:1.5;margin:0} .wh-rule strong{font-weight:700} .wh-sides{display:grid;grid-template-columns:1fr 18rem;gap:14px;align-items:stretch} @media(max-width:900px){.wh-sides{grid-template-columns:1fr}} .wh-lifeside{background:#FF667A;color:#000;border-radius:var(--card-r);padding:16px 18px;display:flex;flex-direction:column;gap:.6rem} .wh-lifeside-title{font-family:var(--display);font-size:1.05rem} .wh-lifemain{display:flex;align-items:center;gap:1rem;flex:1;min-height:130px} .wh-heart{width:118px;flex:none;display:block} .wh-heart-blob{transform-box:fill-box;transform-origin:center;animation:whPop .6s cubic-bezier(.34,1.4,.5,1) both} @keyframes whPop{from{transform:scale(0)}to{transform:scale(1)}} .wh-life-nums{padding-bottom:.2rem;min-width:0} .wh-life-big{font-family:var(--display);font-size:2.3rem;line-height:1;font-variant-numeric:tabular-nums} .wh-life-big small{font-family:var(--text);font-size:.85rem;font-weight:700;display:block;margin-top:.25rem} .wh-life-sub{font-size:.8rem;margin-top:.35rem;line-height:1.4} .wh-life-rule{font-size:.75rem;line-height:1.45;margin:0} .wh-path-wrap{background:#FE957C;color:#000;border-radius:var(--card-r);padding:14px 17px;margin-top:12px} .wh-path-wrap summary{font-size:.8rem;font-weight:700;cursor:pointer;list-style:none;display:flex;align-items:center;gap:.45rem;user-select:none} .wh-path-wrap summary::-webkit-details-marker{display:none} .wh-path-wrap summary::before{content:'▸';font-size:.7rem;transition:transform .15s} .wh-path-wrap[open] summary::before{transform:rotate(90deg)} .wh-space-tag{font-size:.72rem;font-weight:700;display:block;margin-bottom:.3rem} .wh-path-block{font-size:.88rem;line-height:1.55;margin:.75rem 0} .wh-card{background:var(--white);border-radius:var(--card-r);padding:18px 20px} .wh-card h3{font-family:var(--display);font-weight:400;font-size:1.05rem;margin:0 0 .5rem;letter-spacing:0} .wh-card-log{background:#FF667A;color:#000} .wh-card-work{background:#FE957C;color:#000} .wh-card-four{background:#9DA5FE;color:#000} .wh-four-head{display:flex;align-items:center;gap:.6rem} .wh-four-dots{display:inline-flex;gap:.3rem} .wh-four-dots span{width:15px;height:15px;border-radius:50%;background-size:cover;background-position:center;display:inline-block} .wh-langs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:.9rem} @media(max-width:1050px){.wh-langs{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:560px){.wh-langs{grid-template-columns:minmax(0,1fr)}} .wh-lang{background:#fff;border-radius:var(--card-r);padding:14px;display:flex;flex-direction:column;align-items:center;gap:.35rem;min-width:0} .wh-lang.islead{box-shadow:inset 0 0 0 4px var(--ink)} .wh-lang-stage{display:flex;align-items:flex-end;justify-content:center;height:112px} .wh-blob{position:relative;display:block;flex:none;transition:width .9s cubic-bezier(.34,1.2,.5,1),height .9s cubic-bezier(.34,1.2,.5,1)} .wh-face{position:absolute;inset:0;width:100%;height:100%} .wh-face-eye{animation:whBlink 4.6s infinite;transform-box:fill-box;transform-origin:center} @keyframes whBlink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}} .wh-cr{background:none} .wh-cr .wh-shape{position:absolute;inset:0;width:100%;height:100%;display:block} .wh-shape .body{fill:var(--paint,#fff)} .wh-blob-name{font-family:var(--display);font-size:1rem} .wh-blob-name small{font-family:var(--text);font-size:.7rem;font-weight:700} .wh-lang-hours{font-size:.8rem;font-weight:700;font-variant-numeric:tabular-nums} .wh-lang-want{font-size:.75rem} .wh-lang-theme{font-size:.75rem;line-height:1.45;text-align:center;margin:.15rem 0 .3rem} .wh-lang-words{width:100%;margin:.15rem 0 .3rem} .wh-lang-words summary,.wh-items-wrap summary{font-size:.72rem;font-weight:700;cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:center;gap:.35rem;user-select:none;padding:.3rem 0} .wh-lang-words summary::-webkit-details-marker,.wh-items-wrap summary::-webkit-details-marker{display:none} .wh-lang-words summary::before,.wh-items-wrap summary::before{content:'▸';font-size:.7rem;transition:transform .15s} .wh-lang-words[open] summary::before,.wh-items-wrap[open] summary::before{transform:rotate(90deg)} .wh-items{width:100%;display:flex;flex-direction:column;gap:.35rem;margin-top:auto} .wh-items-wrap{width:100%} .wh-items-list{display:flex;flex-direction:column;gap:.3rem;margin-top:.2rem} .wh-item{display:flex;align-items:center;gap:.25rem;width:100%;border-radius:var(--pill);padding:.2rem .3rem;background:var(--cream);color:#000} .wh-item-sm{padding:.1rem .25rem} .wh-item-sm .wh-item-main{font-size:.75rem;padding:.18rem .5rem} .wh-item-main{flex:1;min-width:0;display:flex;align-items:center;gap:.5rem;background:none;border:none;font-family:var(--text);font-size:.8rem;font-weight:700;color:inherit;cursor:pointer;text-align:left;padding:.25rem .6rem} .wh-item-undo{flex:none;border:none;border-radius:var(--pill);background:#fff;color:#000;font-family:var(--text);font-size:.7rem;font-weight:700;padding:.28rem .7rem;cursor:pointer} .wh-item-dash{flex:none} .wh-item-name{flex:1;min-width:0} .wh-item-got{font-size:.7rem;font-weight:700;flex:none;font-variant-numeric:tabular-nums} .wh-chips-row{display:none;flex-wrap:wrap;gap:.3rem;padding:.1rem .2rem .2rem} .wh-chip-t{border:none;border-radius:var(--pill);padding:.3rem .7rem;font-family:var(--text);font-size:.72rem;font-weight:700;background:#000;color:#fff;cursor:pointer} .wh-chip-x{background:var(--cream);color:#000} .wh-item-addrow{display:flex;gap:.35rem;width:100%;margin-top:.15rem} .wh-item-add-in{flex:1;min-width:0;font-family:var(--text);font-size:.8rem;padding:.45rem .8rem;border:none;border-radius:var(--pill);background:var(--cream);outline:none;color:var(--ink)} .wh-item-add-btn{border:none;border-radius:var(--pill);padding:.45rem .95rem;font-family:var(--text);font-size:.8rem;font-weight:700;background:#000;color:#fff;cursor:pointer} .wh-four-status{font-size:.8rem;font-weight:700;min-height:1rem;margin-top:.5rem} .wh-goalrow{display:flex;align-items:center;gap:.6rem;margin-bottom:.55rem} .wh-row-name{font-size:.85rem;font-weight:700;width:7.5rem;flex:none} .wh-row-wide{width:11.5rem} .wh-row-track{position:relative;flex:1;height:14px;border-radius:var(--pill);background:#fff;overflow:hidden} .wh-card .wh-row-track{background:rgba(0,0,0,.07)} .wh-card-work .wh-row-track{background:#fff} .wh-row-fill{display:block;height:100%;border-radius:var(--pill)} .wh-goal-marker{position:absolute;top:0;bottom:0;width:3px;background:var(--ink);border-radius:2px} .wh-row-h{font-size:.8rem;font-weight:700;width:6.5rem;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;flex:none} .wh-goal{font-size:.75rem;font-weight:700;white-space:nowrap;display:flex;align-items:center;gap:.3rem} .wh-goal-input{width:3.4rem;padding:.3rem .4rem;border:none;border-radius:8px;background:#fff;font-family:var(--text);font-weight:700;font-size:.8rem;text-align:center;outline:none;color:var(--ink)} .wh-grouphead{font-size:.8rem;font-weight:700;margin:1rem 0 .6rem} .wh-logrow{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center} .wh-log-sel,.wh-log-num,.wh-log-lbl,.wh-log-date{font-family:var(--text);font-size:.92rem;padding:.55rem .75rem;border:none;border-radius:12px;background:#fff;outline:none;color:var(--ink)} .wh-log-num{width:5rem} .wh-log-lbl{flex:1;min-width:10rem} .wh-log-btn{font-family:var(--text);font-weight:700;font-size:.92rem;padding:.55rem 1.6rem;border:none;border-radius:var(--pill);background:#000;color:#fff;cursor:pointer} .wh-log-status{font-size:.8rem;font-weight:700;margin-top:.6rem;min-height:1rem} .wh-sites-toggle{display:flex;gap:.4rem;margin:.2rem 0 1rem;flex-wrap:wrap} .wh-st-btn,.wh-day-btn{font-family:var(--text);font-size:.78rem;font-weight:700;border:none;border-radius:var(--pill);padding:.32rem .85rem;background:var(--cream);color:#000;cursor:pointer} .wh-st-btn.is-on,.wh-day-btn.is-on{background:#000;color:#fff} .wh-bottles{display:flex;gap:1.2rem;flex-wrap:wrap;align-items:flex-end;margin:.2rem 0 .6rem} .wh-bottle-wrap{display:flex;flex-direction:column;align-items:center;gap:.2rem} .wh-bottle{display:block} .wh-liq{transform-box:fill-box;transform-origin:bottom;transition:transform 1.1s cubic-bezier(.34,1.2,.5,1)} .wh-bottle-h{font-size:.8rem;font-weight:700;font-variant-numeric:tabular-nums} .wh-bottle-lbl{font-size:.7rem;font-weight:700} .wh-empty{font-size:.9rem;padding:.6rem 0} .wh-list-wrap{margin-top:1rem;padding-top:.9rem} .wh-list-sum{font-size:.8rem;font-weight:700;cursor:pointer;list-style:none;display:flex;align-items:center;gap:.45rem;user-select:none} .wh-list-sum::-webkit-details-marker{display:none} .wh-list-sum::before{content:'▸';font-size:.7rem;transition:transform .15s} .wh-list-wrap[open] .wh-list-sum::before{transform:rotate(90deg)} .wh-list{margin-top:.75rem;display:flex;flex-direction:column;gap:.1rem} .wh-list-row{display:flex;align-items:center;gap:.6rem;padding:.4rem 0} .wh-list-dot{width:9px;height:9px;border-radius:999px;flex:none} .wh-list-lbl{flex:1;font-size:.86rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .wh-list-n{font-size:.75rem;font-weight:400} .wh-list-bkt{font-size:.7rem;font-weight:700;background:var(--cream);padding:.15rem .5rem;border-radius:var(--pill);flex:none;color:var(--ink)} .wh-list-tag{font-family:var(--text);-webkit-appearance:none;appearance:none;border:none;outline:none;cursor:pointer;text-align:center;padding-right:.5rem} .wh-list-src{font-size:.7rem;font-weight:700;flex:none;width:6rem;text-align:right} .wh-list-h{font-size:.8rem;font-weight:700;width:3.2rem;text-align:right;font-variant-numeric:tabular-nums;flex:none} .wh-list-legend{font-size:.75rem;line-height:1.5;margin:.85rem 0 0} .wh-site-name{font-size:.85rem;font-weight:700;width:11rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:.4rem;flex:none} .wh-leak{font-size:.62rem;font-weight:700;color:#fff;background:#ff4d4f;border-radius:var(--pill);padding:.08rem .4rem} .wh-sites-total{font-size:.8rem;font-weight:700;margin-top:.6rem;font-variant-numeric:tabular-nums} .wh-curve{width:100%;height:auto;display:block;margin:.25rem 0 .5rem} .wh-curve-ax{font-family:Karla,sans-serif;font-size:11px;fill:#000} .wh-curve-day{font-family:Karla,sans-serif;font-size:9px;font-weight:400;fill:#000} .wh-curve-mon{font-weight:700} .wh-curve-empty{font-size:.875rem;margin:1rem 0} .wh-curve-key{display:flex;align-items:center;gap:.4rem;margin-bottom:.2rem} .wh-curve-sw{width:12px;height:3px;border-radius:2px;display:inline-block;flex:none} .wh-q-grid{display:grid;grid-template-columns:1fr;gap:12px;margin:.75rem 0 .5rem} .wh-q-panel{background:#FDF8F5;border-radius:var(--card-r);padding:14px 16px} .wh-q-title{font-size:.75rem;font-weight:700} .wh-q-big{font-family:var(--display);font-size:1.25rem;line-height:1.3;margin:.15rem 0 0} .wh-q-sub{font-size:.75rem;margin:.3rem 0 .4rem;line-height:1.45} @media(max-width:560px){ .wh-row-name{width:5.5rem} .wh-row-wide{width:8rem} .wh-row-h{width:4.5rem;white-space:normal;line-height:1.2} .wh-site-name{width:7rem} .wh-list-src{width:4.5rem} .wh-list-n{display:block} } /* the week's shape: one newsletter, one podcast, three questions */ .ms-shapebar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 10px} .ms-shapechip{font-family:var(--text);font-size:.78rem;font-weight:700;padding:6px 13px; border-radius:var(--pill);background:var(--white);color:var(--ink)} .ms-shapechip.ok{background:var(--room);color:#000} .ms-invite{margin:0 0 10px} /* your weeks: the history, one row a week */ .wh-weeks{display:flex;flex-direction:column;gap:5px;margin-top:.7rem} .wh-wkrow{display:flex;align-items:center;gap:.6rem} .wh-wkrow.is-now .wh-wk-when{font-weight:700} .wh-wk-when{font-size:.78rem;width:5.2rem;flex:none;font-variant-numeric:tabular-nums} .wh-wk-when small{font-weight:700} .wh-wk-track{position:relative;flex:1;height:15px;border-radius:var(--pill); background:rgba(0,0,0,.07);overflow:hidden;display:flex} .wh-wk-seg{display:block;height:100%} .wh-wk-cap{position:absolute;top:0;bottom:0;width:3px;background:var(--ink);border-radius:2px;transform:translateX(-1px)} .wh-wk-h{font-size:.8rem;font-weight:700;width:4.4rem;text-align:right;font-variant-numeric:tabular-nums;flex:none} .wh-wk-life{font-size:.75rem;width:5rem;text-align:right;flex:none;font-variant-numeric:tabular-nums} .wh-wk-key{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:.7rem;font-size:.75rem} .wh-chip-note{font-size:.7rem;font-weight:700;align-self:center;padding:0 .3rem} @media(max-width:560px){ .wh-wk-life{display:none} .wh-wk-when{width:4.2rem} } /* how long a thing took, set on Home where the thing is written */ /* THE LENGTH IS A CONTROL, so it looks like one. It was a translucent wash on the language's own colour and read as part of the pill rather than as something to press. Solid white, the language's colour as its ink. */ .ck-pill .len{border:0;background:var(--white);color:var(--ink);cursor:pointer; font-family:var(--text);font-size:.68rem;font-weight:700; border-radius:var(--pill);padding:4px 10px;flex:none} .ck-pill .len:hover{background:var(--ink);color:var(--white)} .ck-pill .len.on{background:var(--ink);color:var(--white)} .ck-lens{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px 0 2px} .ck-lens .l{font-size:.78rem;font-weight:700;width:100%} .ck-len{border:0;border-radius:var(--pill);padding:7px 13px;cursor:pointer; font-family:var(--text);font-size:.76rem;font-weight:700; background:rgba(0,0,0,.07);color:var(--ink)} .ck-len.on{background:var(--ink);color:var(--white)} .ck-hint{font-size:.78rem;line-height:1.45;margin:6px 0 0} .ck-hint b{font-weight:700} /* =========================================================================== THE PHONE BAR IS STONES, NOT NAMES (Maaria, on her phone, 2026-09-10) Her rule of 2026-08-28 sized this bar for four: Home, Briefs, Maps, Clients. Five owner rooms arrived at the top level after it (Your time, Your sessions, Your mission, Your people, Your course) and the You tab makes ten. A label is `white-space:nowrap` and a flex item will not shrink below its own content, so ten of them wanted about 780px inside a 375px screen. The bar is `justify-content:center`, so it spilled off BOTH ends, and a fixed element's overflow cannot be scrolled to: Home and Your time were gone off the left, Your course off the right, and nothing reached them. Her call: the mark goes inside the stone and the names come off. Ten stones at 30px need 300px, which fits the narrowest phone, and every room is one thumb away again. The room you land in still says its own name, in the heading at the top of the page. LAST IN THE FILE ON PURPOSE. Every rule in here restates one that is set further up at the same specificity, and a media query adds none of its own, so the only thing that decides is which comes last. Put this block up beside the rest of the phone nav rules and the 26px stone at `#nav .tex` wins again. =========================================================================== */ @media (max-width:759px){ #nav{padding:7px 3px calc(9px + env(safe-area-inset-bottom))} /* 30px of stone in a 47px target: past a thumb's width, and the bar stays the height a bottom bar is. */ #nav button{padding:9px 0 8px} #nav .lab{display:none} #nav .tex{width:30px;height:30px} #nav .nm{display:block;width:18px;height:18px} /* ---------- ROOTI IS NOT A GUEST IN HER OWN GARDEN ---------- (Maaria, on her phone, 2026-09-10: "remove rooti from MY client garden mobile completely, no need there for me".) She is not a visitor asking the site assistant what the site sells, and on a phone the creature sits in the bottom-right corner directly on top of Your clients and Your course. Off for the owner seat, at every phone width. The desk keeps it, where there is no bar under it and nothing to cover. `data-seat` is set by render() in app.js. Rooti mounts from its own file and knows nothing about seats, so the body is where the two meet. */ body[data-seat="owner"] #rti-launch, body[data-seat="owner"] #rti-panel{display:none} /* AND FOR EVERYONE ELSE IT SITS ABOVE THE BAR, NEVER ON IT. A client gets Rooti and gets the same tab bar, so the corner it lands in is somebody's last two rooms. The bar is 63px plus the phone's own bottom inset, so this clears it with a thumb's gap and moves with the inset rather than guessing at it. Rooti's own rules break at 600px and the bar's at 759px, which left a whole band of phones where it thought it was on a desktop: this is the bar's breakpoint, because the bar is the thing being cleared. `body` is in front of the id on purpose. Rooti injects its stylesheet at runtime, so it lands after this file and a bare `#rti-launch` here would tie on specificity and lose on order. */ body #rti-launch{bottom:calc(71px + env(safe-area-inset-bottom))} /* WHICH ROOM YOU ARE STANDING IN, now that there is no label left to go bold. At a desk that job is done by the white card under the row and the name in black; on a phone both are gone and all that remained was the stone settling out of its tilt, which is far too quiet to find at a glance. A stone of ink beneath the one you are in, the same mark the lesson strip uses for the lesson you are on. */ #nav button[aria-current="page"]{position:relative} #nav button[aria-current="page"]::after{content:"";position:absolute; left:50%;bottom:1px;width:5px;height:5px;margin-left:-2.5px; border-radius:50%;background:var(--ink)} /* SIGN OUT WAS IN THE BAR, and had been since the account block moved into the rail. The rule meant to hide it reads `.acct .signout`, which is three classes and loses to `#nav button` a hundred lines above it: an id beats any number of classes. So a live Sign out sat at the end of the phone bar as an eleventh item, 41px tall, which is what made the bar 107px deep and is the exact mis-tap the account sheet exists to prevent. Same rule, said at a specificity that can win. */ #nav .acct .signout, #nav .acct .demopill{display:none} /* You is the tenth tab and wears your initial, so it carries no mark and stands the same size as the nine beside it. The padding belongs to the button inside it, which is a `#nav button` like every other tab and already has it: setting it here too stacked the two and made this one tab 17px taller than the nine, which set the height of the whole bar. */ #nav .acct{gap:0;padding:0} #nav .acct .who{width:30px;height:30px;font-size:.82rem} }