/* ============================================================ REALUMA FORMS — the glass system's fourth file, and the first one where light falls INTO something rather than off it. THE PRINCIPLE THAT GOVERNS EVERY RULE HERE: RAISED IS AN OBJECT. RECESSED IS A HOLE. Every surface in realuma-glass.css is raised: a lit top rim, thickness at the base, a cast shadow below. That is an object sitting on the world. An input is the opposite. It is a hole in the object, so its light comes from ABOVE and lands INSIDE it: the shadow is at the top, the cast is gone. Nothing else in the system reads that way, which is exactly why a field is unmistakable without a border announcing it. A HOLE IS WHERE LIGHT COLLECTS. That is the rule restated for two themes, and it is a restatement rather than an inversion. The invariant is the SHADOW AT THE TOP: light comes from above in daylight too, so the inset never moves. What follows the ground is the FILL. On obsidian, light collecting in a hole still leaves it darker than the panel around it. On ivory it leaves it CLEANER and BRIGHTER than the panel, because the panel is the thing carrying tint and the hole is where the ground's own light gathers. Measured, the day input fill is rgb(255,254,254) inside a rgb(250,247,242) panel. The old sentence, "the fill is darker than what surrounds it", was true of one theme and read as a law. This one is true of both. SIX SECTIONS, and each exists because nothing in the system covers it: 1. entry and choice .rg-input, .rg-textarea, .rg-select, .rg-readonly 2. the checkbox .rg-check 3. the field error .rg-err, .rg-warn - inline, NOT .rg-fail, which is a block with a retry and answers a different question 4. the date .rg-date3, .rg-date-echo - three boxes and the line that says what the three came to 5. the help line .rg-help - about the FIELD, never about the value 6. the nested surface .rg-inset - a panel inside a section body, which must not read as a card inside a card Everything else the tenancy screen needs is a restyle of something that already exists, so it is not here. A vocabulary that grows past what is missing stops being a vocabulary. ============================================================ */ /* ============================================================ 1. TEXT ENTRY AND CHOICE .rg-select is in this section rather than in one of its own because it IS one of these: it shares the declarations below literally, by being in the same selector lists, rather than by having them copied onto it. A copied set of metrics is a set of metrics that drifts, and a select sitting one pixel off the input above it is the tell. ============================================================ */ .rg-field{display:block;margin-bottom:var(--rg-sp3,16px)} .rg-field:last-child{margin-bottom:0} .rg-label{ display:block;margin-bottom:7px; font-family:var(--rg-mono,'IBM Plex Mono',monospace); font-size:9.5px;letter-spacing:.15em;text-transform:uppercase; color:var(--rg-faint,rgba(247,244,237,.58)); } /* Required is marked, optional is marked, and the reason both are is that marking only one leaves the reader inferring the other. On a form where most fields are optional, an unmarked field is a question. */ .rg-label em{font-style:normal;color:var(--rg-champ,#C9A170);margin-left:3px} .rg-label small{ font-style:normal;text-transform:none;letter-spacing:0; font-family:var(--rg-body,'Be Vietnam Pro',system-ui,sans-serif); font-size:11px;color:var(--rg-faint,rgba(247,244,237,.58));margin-left:6px; } /* THE HOLE. Light from above, landing inside: the inset shadow is at the TOP, there is no cast below, and the fill is darker than the surface it sits in. A raised input is the single most common tell of an interface that has a design system and does not understand it. */ .rg-input, .rg-textarea, .rg-select{ display:block;width:100%; padding:12px 14px; border:none;border-radius:var(--rg-r-in,12px); background:rgba(0,0,0,.26); box-shadow: inset 0 2px 5px rgba(0,0,0,.42), /* the light falls in */ inset 0 0 0 1px rgba(255,255,255,.07); /* the rim of the hole */ color:var(--rg-text,#F7F4ED); font-family:var(--rg-body,'Be Vietnam Pro',system-ui,sans-serif); font-size:15px;line-height:1.5; transition:box-shadow .24s cubic-bezier(.32,.72,0,1), background .24s cubic-bezier(.32,.72,0,1); -webkit-appearance:none;appearance:none; } /* 15px is not a style choice. Mobile Safari zooms the viewport on focus for anything under 16px, and a form that zooms is a form that fights the layout. 15px plus the -webkit-text-size-adjust below is the pair that holds; dropping either one brings the zoom back. */ .rg-input,.rg-textarea,.rg-select{-webkit-text-size-adjust:100%} .rg-textarea{resize:vertical;min-height:88px} .rg-input::placeholder, .rg-textarea::placeholder{color:var(--rg-faint,rgba(247,244,237,.58))} /* FOCUS IS CHAMPAGNE, because focus is a human acting, per the law. It is also never ONLY a colour: the rim thickens and a glow appears, so the focused field is findable without seeing hue. */ .rg-input:focus, .rg-textarea:focus, .rg-select:focus{ outline:none; background:rgba(0,0,0,.32); box-shadow: inset 0 2px 5px rgba(0,0,0,.42), inset 0 0 0 1.5px var(--rg-champ,#C9A170), 0 0 0 4px rgba(201,161,112,.13); } /* keyboard navigation gets a stronger ring than a tap does, since a person arriving by tab has no pointer telling them where they are. */ .rg-input:focus-visible, .rg-textarea:focus-visible, .rg-select:focus-visible{box-shadow: inset 0 2px 5px rgba(0,0,0,.42), inset 0 0 0 1.5px var(--rg-champ,#C9A170), 0 0 0 5px rgba(201,161,112,.2)} .rg-input:disabled, .rg-textarea:disabled, .rg-select:disabled{opacity:.45;cursor:not-allowed} /* A FIELD IN ERROR carries it on the field, not only in the sentence below it. A red line under an unmarked input makes the reader hunt for which input it belongs to. */ .rg-input.rg-invalid, .rg-textarea.rg-invalid, .rg-select.rg-invalid{ box-shadow: inset 0 2px 5px rgba(0,0,0,.42), inset 0 0 0 1.5px var(--rg-stop,#E07A6B); } /* ---------- CHOICE: A HOLE WITH A CHEVRON, AND NO JAVASCRIPT ---------- It stays a real , so the label, the keyboard, the form and the screen reader all keep working for free. ============================================================ */ /* THE FIFTH CONTROL TO GET THE 44px FLOOR, and the last one that could take it as a min-height. MEASURED 16 Aug in a real browser at 360 and 390, inside a real .rg-sec-body: 23.0px on one line and 40.5 on two. The four raised on 15 Aug were 34 to 38; this was the shortest control in the product and it is the one you tick to say a charge belongs on somebody's bill. min-height AND align-items:flex-start TOGETHER ARE THE FIX, and the second half is why nothing moves. The box has no background, no border and no padding: what is painted is a 21px square and a line of text, both pinned to the top of the flex line. Growing the box downward moves neither. A `height` would break the two-line case and `align-items:center` would slide the square 10px down the moment a label wrapped, which is exactly the kind of change this pass is not allowed to make. WHAT IT DOES COST, said rather than discovered: whatever follows a one-line checkbox now begins 21px lower. That is the tappable area existing, and there is no way to have it without the space. */ .rg-check{ display:flex;align-items:flex-start;gap:11px; min-height:44px; cursor:pointer; font-size:13.5px;line-height:1.5; color:var(--rg-muted,rgba(247,244,237,.60)); -webkit-tap-highlight-color:transparent; } .rg-check input[type="checkbox"]{ -webkit-appearance:none;appearance:none; flex:none;margin:1px 0 0; width:21px;height:21px; border:none;border-radius:var(--rg-r-sm,9px); background:rgba(0,0,0,.26); box-shadow: inset 0 2px 4px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.12); cursor:pointer;position:relative; transition:background .22s cubic-bezier(.32,.72,0,1), box-shadow .22s cubic-bezier(.32,.72,0,1); } /* CHECKED IS CHAMPAGNE AND IT FILLS: a human acted, and the control stops being a hole and becomes an object, which is the same grammar the rest of the system uses. The tick is drawn, not a glyph, so it cannot be missing from a font. */ .rg-check input[type="checkbox"]:checked{ background:linear-gradient(178deg,var(--rg-champ-lit,#E0BC8E),var(--rg-champ,#C9A170)); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 3px 10px -4px rgba(201,161,112,.8); } .rg-check input[type="checkbox"]:checked::after{ content:'';position:absolute; left:7px;top:3px;width:5px;height:10px; border:solid var(--rg-ink,#080F14); border-width:0 2.2px 2.2px 0; transform:rotate(42deg); } .rg-check input[type="checkbox"]:focus-visible{ outline:none; box-shadow: inset 0 2px 4px rgba(0,0,0,.4), inset 0 0 0 1.5px var(--rg-champ,#C9A170), 0 0 0 4px rgba(201,161,112,.2); } .rg-check:active input[type="checkbox"]{transform:scale(.9)} .rg-check input[type="checkbox"]{transition:transform .3s cubic-bezier(.34,1.4,.5,1), background .22s cubic-bezier(.32,.72,0,1), box-shadow .22s cubic-bezier(.32,.72,0,1)} /* the sentence brightens once it is true, so the state is legible from the text as well as from the box. */ .rg-check:has(input:checked){color:var(--rg-text,#F7F4ED)} /* ============================================================ 3. THE FIELD ERROR Inline, one line, attached to the thing that is wrong. This is NOT .rg-fail: that is a block with a left rule and a retry, and it answers "this section could not load". This answers "what you typed will not do", and it never carries a retry, because retrying is the person's job and the control to do it is already on screen. ============================================================ */ .rg-err{ display:flex;align-items:flex-start;gap:7px; margin-top:8px; color:var(--rg-stop,#E07A6B); font-size:12.5px;line-height:1.5; } .rg-err::before{ content:'!';flex:none; width:15px;height:15px;margin-top:1px;border-radius:50%; display:grid;place-items:center; font-family:var(--rg-mono,'IBM Plex Mono',monospace);font-size:10px;font-weight:600; background:rgba(200,73,60,.18); box-shadow:inset 0 0 0 1px currentColor; } /* A warning is not an error. The record's inverted-translation note and the contradicted-language marker are true statements about data that is already written and cannot be corrected, so they must not wear the colour of something a person can fix. */ .rg-warn{ display:flex;align-items:flex-start;gap:7px; margin-top:8px; color:var(--rg-champ,#C9A170); font-size:12.5px;line-height:1.5; } .rg-warn::before{ content:'!';flex:none; width:15px;height:15px;margin-top:1px;border-radius:50%; display:grid;place-items:center; font-family:var(--rg-mono,'IBM Plex Mono',monospace);font-size:10px;font-weight:600; background:var(--rg-champ-wash,rgba(201,161,112,.14)); box-shadow:inset 0 0 0 1px currentColor; } /* hidden until it has something to say, and it says it by gaining .rg-on rather than by being written into the DOM, so the layout below it does not jump when a copy fails. */ /* .rg-hush MEANS HIDDEN, ON ANYTHING, AND UNTIL 14 AUGUST IT DID NOT. It existed only as the two COMPOUND selectors below, so on any element that was not .rg-err or .rg-warn the class matched nothing and hid nothing. Three data-driven toggles were written against it and all three silently did nothing: the "Your share (%)" box on Record a deal, which is meaningless on a solo deal and was visible on one, defaulted to 50, next to help text about an agent who has no Realuma account; the two halves of the listing Offer sheet, which are meant to swap between a Realuma peer and an outside agent and instead showed BOTH at once. The generic rule is what the name always promised. The .rg-on overrides still win on an error because three classes beat one, so nothing about the error behaviour below changes. */ .rg-hush{display:none} .rg-err.rg-hush,.rg-warn.rg-hush{display:none} .rg-err.rg-hush.rg-on,.rg-warn.rg-hush.rg-on{display:flex} /* ============================================================ 4. THE DATE, AS THREE BOXES Day, then month, then year, because that is the order on a Vietnamese contract and therefore the order the eye supplies the numbers in. Three boxes rather than one field is not a decoration: a single box invites 08/09 and cannot tell you which number it took as the month, and a native date picker asks a landlord to scroll to 2019 to type a lease they are holding in their hand. THE YEAR BOX IS VISIBLY WIDER. It holds twice the digits, so it needs the room, and the different width is a second way to know which box the cursor is in without reading the placeholder. ============================================================ */ .rg-date3{display:grid;grid-template-columns:1fr 1fr 1.6fr;gap:var(--rg-sp1,6px)} .rg-date3 .rg-input{text-align:center} /* THE ECHO IS DATA, NOT ADVICE, and that is why it is mono and why it sits directly under the control, above any help line. It is the value the record will hold, spelled out, so somebody can confirm their three numbers produced the date they meant. Mono against the help line's body font is the whole distinction: a machine-readable value against a sentence about the field. min-height reserves the row, so the form does not jump the moment the third box is filled. */ .rg-date-echo{ margin-top:7px;min-height:17px; font-family:var(--rg-mono,'IBM Plex Mono',monospace); font-size:var(--rg-fs-sm,12.5px);line-height:1.35; color:var(--rg-muted,rgba(247,244,237,.60)); } /* The same line carries the refusal when three filled boxes make a date that does not exist, so at that moment it has to read as a problem rather than as information. It is the only state in this file where one element changes what KIND of thing it is, and it earns that because the alternative is a second line that is blank almost always. */ .rg-date-echo.rg-bad{color:var(--rg-stop,#E07A6B)} /* ============================================================ 5. THE HELP LINE THE RULE THAT SEPARATES THIS FROM .rg-warn, and it is the whole reason both exist: HELP IS ABOUT THE FIELD. WARN IS ABOUT THE VALUE. If a line can appear and disappear depending on what is in the field, it is a warn. If it is the same sentence every time the field renders, it is help. That test settles every case without anyone having to judge how serious the sentence sounds. So it is unconditional, and being unconditional is exactly why it must be calm: no glyph, no border, no colour, and quieter than both .rg-warn and .rg-err on two axes at once, size and weight of colour. A help line that competes with a warning teaches people to ignore warnings. ============================================================ */ .rg-help{ margin-top:6px; font-size:var(--rg-fs-xs,11.5px);line-height:1.5; color:var(--rg-muted,rgba(247,244,237,.60)); } /* ============================================================ 6. THE NESTED SURFACE A panel opening inside a section body: invite a party, send a bill, reply to a turn. It must NOT be .rg-g, because a raised card inside a raised card is two objects claiming the same space and the eye reads neither. So it goes the other way. It is RECESSED, exactly like an input, because it is a hole opened in the card rather than a thing placed on it. That also carries a meaning worth having: a panel is temporary. It opened because you asked, and it will close. ============================================================ */ .rg-inset{ position:relative; margin:12px 0 4px; padding:16px; border-radius:var(--rg-r-mid,18px); background:rgba(0,0,0,.2); box-shadow: inset 0 2px 6px rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,255,255,.06); animation:rg-inset-in .42s cubic-bezier(.34,1.4,.5,1) both; } @keyframes rg-inset-in{from{opacity:0;transform:translateY(-6px) scale(.99)}} /* A HUMAN'S PANEL. The champagne edge on the left says a person opened this and a person will close it, the same mark the hero task carries. */ .rg-inset-champ{box-shadow: inset 0 2px 6px rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,255,255,.06), inset 3px 0 0 var(--rg-champ,#C9A170)} /* REALUMA AI'S PANEL. Teal, per the law, and only where the AI is the actor. */ /* SOLE-CARRIER FIX, per the rule at the head of realuma-glass.css. A champagne rim and a teal rim were the only difference between a human's panel and the machine's, and the two law colours are 1.24:1 apart in greyscale, so that difference vanished for a colourblind reader. The AI rim is DOUBLED, 3px plus a second inner line, so the two are told apart by thickness as well as hue. */ .rg-inset-ai{box-shadow: inset 0 2px 6px rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,255,255,.06), inset 3px 0 0 var(--rg-ai,#5FA0AE), inset 6px 0 0 var(--rg-ai-wash,rgba(95,160,174,.07))} .rg-inset-h{ font-family:var(--rg-display,'Playfair Display',serif); /* an h5, so the user agent supplies bold. Only the 400 of the display face is loaded, on purpose: see the note at --rg-display in realuma-glass.css. Without this the browser reaches for a bold this product did not choose. */ font-weight:400; font-size:16px;line-height:1.3;margin-bottom:4px; color:var(--rg-text,#F7F4ED); } .rg-inset-p{ font-size:13px;line-height:1.55;margin:0 0 13px; color:var(--rg-muted,rgba(247,244,237,.60)); } .rg-inset-p:last-child{margin-bottom:0} /* the actions at the foot of a panel. one primary at most, per the rule that size encodes importance and a screen has one most important thing. */ .rg-inset-foot{display:flex;gap:9px;margin-top:14px;flex-wrap:wrap} .rg-inset-foot > *{flex:1;min-width:120px} /* ---------- REDUCED MOTION ---------- */ @media (prefers-reduced-motion:reduce){ .rg-inset{animation:none} .rg-input,.rg-textarea,.rg-select,.rg-readonly,.rg-check input[type="checkbox"]{transition:none} } /* ---------- NO :has() ---------- Baseline since December 2023, so this is a floor and not a fallback. The sentence simply stays muted when checked, which loses an emphasis and nothing else: the box itself still fills champagne, and the box is what carries the state. */ @supports not selector(:has(*)){ .rg-check{color:var(--rg-muted,rgba(247,244,237,.60))} } /* ============================================================ DAYLIGHT: THE HOLE, INVERTED IN FILL AND UNCHANGED IN LIGHT. The inset stays at the TOP in both themes, because light comes from above in both. What follows the ground is the fill: on ivory a hole is where the ground's own light collects, so it is cleaner and brighter than the panel around it rather than darker. ============================================================ */ [data-theme="light"] .rg-input, [data-theme="light"] .rg-textarea, [data-theme="light"] .rg-select{ background:rgba(255,255,255,.92); box-shadow: inset 0 2px 4px rgba(22,51,58,.10), /* the light still falls in */ inset 0 0 0 1px rgba(22,51,58,.12); /* the rim of the hole */ color:var(--rg-text); } [data-theme="light"] .rg-input:focus, [data-theme="light"] .rg-textarea:focus, [data-theme="light"] .rg-select:focus{ background:#fff; box-shadow: inset 0 2px 4px rgba(22,51,58,.10), inset 0 0 0 1.5px var(--rg-champ), 0 0 0 4px rgba(143,107,54,.16); } [data-theme="light"] .rg-input:focus-visible, [data-theme="light"] .rg-textarea:focus-visible, [data-theme="light"] .rg-select:focus-visible{box-shadow: inset 0 2px 4px rgba(22,51,58,.10), inset 0 0 0 1.5px var(--rg-champ), 0 0 0 5px rgba(143,107,54,.24)} [data-theme="light"] .rg-input.rg-invalid, [data-theme="light"] .rg-textarea.rg-invalid, [data-theme="light"] .rg-select.rg-invalid{box-shadow: inset 0 2px 4px rgba(22,51,58,.10), inset 0 0 0 1.5px var(--rg-stop)} [data-theme="light"] .rg-readonly{ background:rgba(22,51,58,.05); box-shadow:inset 0 0 0 1px rgba(22,51,58,.12); } /* THE TICK FILLS CHAMPAGNE IN BOTH THEMES, because a human chose it. What inverts is the mark on it, which follows --rg-ink. No cast in day. */ [data-theme="light"] .rg-check input[type="checkbox"]{ background:rgba(255,255,255,.92); box-shadow:inset 0 2px 4px rgba(22,51,58,.10), inset 0 0 0 1px rgba(22,51,58,.14); } [data-theme="light"] .rg-check input[type="checkbox"]:checked{ background:linear-gradient(178deg,var(--rg-champ-lit),#B08A4E); box-shadow:inset 0 1px 0 rgba(255,255,255,.4), inset 0 0 0 1px rgba(143,107,54,.5); } [data-theme="light"] .rg-check input[type="checkbox"]:checked::after{border-color:#FBFAF6} [data-theme="light"] .rg-check input[type="checkbox"]:focus-visible{box-shadow: inset 0 2px 4px rgba(22,51,58,.10), inset 0 0 0 1.5px var(--rg-champ), 0 0 0 4px rgba(143,107,54,.22)} /* the recessed panel, same doctrine: a hole in the card rather than a card on it */ [data-theme="light"] .rg-inset{ background:rgba(22,51,58,.045); box-shadow:inset 0 2px 5px rgba(22,51,58,.09), inset 0 0 0 1px rgba(22,51,58,.08); } [data-theme="light"] .rg-inset-champ{box-shadow: inset 0 2px 5px rgba(22,51,58,.09), inset 0 0 0 1px rgba(22,51,58,.08), inset 3px 0 0 var(--rg-champ)} [data-theme="light"] .rg-inset-ai{box-shadow: inset 0 2px 5px rgba(22,51,58,.09), inset 0 0 0 1px rgba(22,51,58,.08), inset 3px 0 0 var(--rg-ai), inset 6px 0 0 var(--rg-ai-wash)} [data-theme="light"] .rg-err::before{background:rgba(168,54,42,.12)} [data-theme="light"] .rg-warn::before{background:var(--rg-champ-wash)}