/* ============================================================================ ADORE OS · the design The single place any of this is decided. Every screen loads this file and declares nothing of its own, so changing the look is one edit here and one deploy, and no screen can drift because there is nowhere for it to drift to. THE ONE RULE: if you are about to write a hex value in a screen, stop. It belongs here with a name, or it is a mistake. A raw colour in a screen is invisible to a redesign and will still be slate grey in a year. --------------------------------------------------------------------------- Quiet luxury is dark AND unmistakably purple, which sounds like a contradiction and is not: the two moves are on different axes. Lightness stays very low and the steps between surfaces stay small, so nothing on screen competes and the room feels still. The identity comes from CHROMA at that darkness: a near-black that is genuinely violet rather than a grey with a rumour of purple in it. When the purple is not reading, add chroma. Never lightness. Lifting the panels until you can see it is exactly how a brand starts shouting. ========================================================================= */ :root{ /* ---- the room -------------------------------------------------------- */ --bg:#080310; /* the room itself */ --panel:#110819; /* a card sitting in it */ --panel-2:#180D24; /* something raised on the card */ --line:#2A1940; --line-soft:#1F1230; --header:#1E1136; /* the one place the brand is allowed to be loud */ /* ---- text ------------------------------------------------------------ There is no grey in this system. White on dark is comfortable; grey on dark is not, and a light purple on a purple ground is worse than either. So hierarchy is built from LESS WHITE, never from a darker colour. Every level is the same white at a different strength, which reads as the same ink further away rather than as a second, muddier colour. It also means the ink can never introduce a hue that fights the ground: white at any strength composites to a tint of whatever is underneath it, so it always belongs. And the levels stop early on purpose. Dropping a label to 50 per cent to say "this is less important" is the move that produces the grey nobody can stand looking at, and it is unnecessary: a label is already smaller, already uppercase, already letter-spaced. It does not need to be dim as well. Hierarchy below the second level is SIZE AND WEIGHT, not colour. Only --ink-4 is genuinely faint, and nothing that has to be read ever uses it: rules, disabled controls, a struck-through day in a calendar. The white carries a hair of warmth. A clinical white on aubergine reads as a spreadsheet; this one reads as paper under a warm light, and at these strengths the difference is felt rather than seen. ------------ */ --ink:#FFFCFA; /* what you actually read */ --ink-2:rgba(255,252,250,.80); /* what you read second */ --ink-3:rgba(255,252,250,.70); /* small print, still comfortably read */ --ink-4:rgba(255,252,250,.32); /* rules and disabled. Never text. */ /* ---- the metal ------------------------------------------------------- One metal, on at most three things per screen: the mark, the single action that matters, and whatever we are trying to sell. A gold on a fourth element is a gold that has stopped meaning anything. --------- */ --accent:#C9A227; --gold-lit:#E8CE79; /* gold as text; the solid goes muddy under 15px */ /* Every structural label in the system: section headings, the eyebrow over a block, column headers, the caption on a field. These were white at low strength and they were the grey Guy kept seeing and disliking, over and over, because that is what dimmed white IS. The fix is not another point of opacity. In a system made of one dark hue and one metal, the METAL carries the structure: it is warm, it is on brand, it reads instantly as "this is a label and not a sentence", and there is no grey left anywhere on the screen. */ --label:rgba(226,199,132,.78); --gold-dim:#241A09; --gold-line:#6B5518; /* ---- meaning --------------------------------------------------------- These are not chosen for beauty. Green has to read as green across a room in the diary and red has to stop somebody. Desaturated to live on aubergine, never picked for how they sit next to it. ---------------- */ --ok:#4ED09A; --ok-dim:#0E2E22; --ok-line:#2A7C58; /* Attention is a second METAL, not a second hue. Orange on aubergine is the one pairing that cannot be rescued: it sits opposite the ground and reads as plastic however far it is desaturated. Bronze is warm enough to mean "look at this", belongs to the same family as the gold, and the two of them together are the oldest luxury pairing there is. */ --hot:#BE8352; --hot-dim:#2A1A0F; --hot-line:#6B4526; --bad:#E56478; --bad-dim:#301522; --bad-line:#87344A; /* ---- surfaces that are neither panel nor line ------------------------ */ --pressed:#2C1B44; /* a control that is currently chosen */ --hover-line:#3E2A58; /* a border under the cursor */ --focus-line:#4A2E6B; /* a border with the caret in it */ --sunk:#0A0513; /* inset: keycaps, tracks, wells */ --cool:#B49AE0; /* the one non-brand accent: wrap-up, information */ /* ---- text that sits ON a colour ------------------------------------- A tint is not a text colour. These are the ones that stay readable on their own dim ground, and they were the most-copied raw hexes in the system before this file existed. ------------------------------------ */ --on-gold:#1A1405; /* type on a gold surface */ --ok-text:#D6F5E4; --hot-text:#E4BE94; --bad-text:#F2AFBA; /* ---- the one gold gradient ------------------------------------------ Save and next, Confirm, the primary of any screen. Nothing else. Four stops rather than two. A metal is not a flat colour with a slope on it: light catches the top edge, the body is deeper than either end, and there is a lift again at the very bottom where the surface turns away. Two stops read as plastic no matter which two you pick. ------------- */ --gold-a:#F0D89A; /* the lit top edge */ --gold-b:#D9B443; /* the face */ --gold-c:#B48C1E; /* the body, deeper than either end */ --gold-d:#C79E2C; /* the turn at the foot */ /* ---- two more surfaces, because three were never enough ------------- */ --raised-2:#251739; /* a thing raised on a thing that is already raised */ --well:#1E1231; /* an inset field or track */ /* ---- the occupancy ramp --------------------------------------------- Capacity's five steps. It is a data scale rather than brand, but it is still colour, so it still lives here: there is one file, or there is no single source. Empty and full shout, the middle recedes on purpose. -- */ --h0:#E8523F; /* almost empty, and that costs money */ --h1:#C25A44; --h2:#6D6484; /* fine. nothing to look at */ --h3:#4FA87A; --h4:#33CD80; /* full */ /* ---- the door ------------------------------------------------------- The entrance animation is the one piece of pure art in the system, and even it declares nothing of its own. ------------------------------- */ --door-deep:#2A1436; --door-warm:#D9736A; --radius:10px; } /* ============================================================================ THE SHEEN One pass of light across a surface when the cursor arrives, and never again while it stays. A loop is a toy; a single pass is the light moving because you did, which is what a real metal or a lacquered surface does. Anything that wants it says class="lit". It costs nothing when unused. ========================================================================= */ .lit{position:relative;overflow:hidden;isolation:isolate} .lit::after{ content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.16) 45%, rgba(255,255,255,.30) 50%, rgba(255,255,255,.16) 55%, transparent 70%); transform:translateX(-120%); } .lit:hover::after{ animation:sheen 1.15s cubic-bezier(.32,.9,.28,1) 1 } /* Slower, and it does something on the way. It enters narrow and hard, widens and softens as it crosses the middle where the eye is, then narrows again as it leaves. A band of light that just slides across at one width is a gradient moving; this one behaves like a reflection. */ @keyframes sheen{ 0% { transform:translateX(-120%) skewX(-14deg) scaleX(.55); opacity:.35 } 42% { opacity:1 } 55% { transform:translateX(6%) skewX(-14deg) scaleX(1.25); opacity:1 } 100%{ transform:translateX(130%) skewX(-14deg) scaleX(.6); opacity:0 } } /* on gold the light is warmer, because white over gold reads as a smear */ .lit.on-gold::after{ background:linear-gradient(105deg, transparent 30%, rgba(255,246,214,.34) 46%, rgba(255,252,238,.62) 50%, rgba(255,246,214,.34) 54%, transparent 70%); } @media (prefers-reduced-motion:reduce){ .lit:hover::after{animation:none} } /* ============================================================================ THE SCROLL RAIL A column that scrolls should say so. Two hairline arrows, one at each end, each of which fades out when there is nothing left that way. Put class "scrolls" on the scrolling element and Adore.rails() does the rest. Not "rail": the dialer already owns that name for the script navigation, and a shared stylesheet that takes a name a screen is already using turns three columns into three flex rows. A global class needs a name nothing local would ever choose. ========================================================================= */ /* Sticky, not absolute. An absolutely positioned child of a scrolling box is placed against the CONTENT, not against the frame you are looking through, so top:0 meant "the top of 892px of rows" and the arrow sat far above the visible area for every scroll position but one. Sticky is the only position that means "the edge of the scrollport". Zero height so it displaces nothing; the visible band is a child drawn outside that empty box. The up arrow has to be the first child in flow and the down arrow the last, or they stick at the wrong moment. */ /* The band itself takes the press. The wrapper has to stay click-through or it would cover the top and bottom of every column with an invisible sheet; only the 30px strip that is actually drawn responds. */ .scrollcap{position:sticky;z-index:6;height:0;pointer-events:none; opacity:0;transition:opacity .2s} .scrollcap.on i{pointer-events:auto;cursor:pointer} .scrollcap i:hover svg{fill:var(--gold-lit);transform:scale(1.15)} .scrollcap i:active svg{transform:scale(.92)} .scrollcap svg{transition:fill .15s,transform .12s} .scrollcap.on{opacity:1} .scrollcap.up{top:calc(-1 * var(--cap-t,0px))} .scrollcap.down{bottom:calc(-1 * var(--cap-b,0px))} .scrollcap i{position:absolute;inset-inline:0;height:30px; display:flex;align-items:center;justify-content:center} .scrollcap.up i{top:0; background:linear-gradient(180deg,var(--panel) 34%,transparent)} .scrollcap.down i{bottom:0;background:linear-gradient(0deg,var(--panel) 34%,transparent)} .scrollcap svg{width:13px;height:13px;fill:var(--label); filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))} /* ============================================================================ THE BRAND ON PAPER The scan report is sent as a LINE link and opened on a phone. Nobody prints it, so it is dark like everything else: a patient opening it should get the same expensive room the clinic gives her, not a document. This block therefore only applies when somebody actually prints. Aubergine at #080310 on a sheet of paper is unreadable and empties a cartridge, so on paper the identity inverts: the aubergine becomes the ink for headings and rules, the gold goes deeper so it holds on white, and the ground is a warm sheet rather than the blue-white a browser defaults to. Same company either way. It costs nothing to be right in both. ========================================================================= */ /* The same inversion, offered on screen too. Somebody reading in a bright lobby should be able to flip it, and print should get it automatically. One palette, two grounds, no third design. */ body.lightside{ --bg:#FBFAF7; /* warm sheet, never #FFF */ --panel:#FFFFFF; --panel-2:#F6F3EE; --line:#E4DFD6; --line-soft:#F0ECE4; --header:#FBFAF7; --ink:#1A1020; /* the aubergine, as ink */ --ink-2:#4A4152; --ink-3:#7C7387; --ink-4:#A9A2B2; --accent:#8A6D3B; /* gold holds its own on paper only when deeper */ --gold-lit:#8A6D3B; --gold-dim:#F5F0E6; --gold-line:#D9CBAE; --gold-a:#A8894E; --gold-b:#8A6D3B; --gold-c:#7A5F32; --gold-d:#8A6D3B; --on-gold:#FFFFFF; --label:#8A6D3B; --ok:#4A6B57; --ok-dim:#EDF2EE; --ok-line:#BFD1C6; --ok-text:#2F4A3B; --hot:#9A7F45; --hot-dim:#F6F1E5; --hot-line:#DCCBA6; --hot-text:#6B5423; --bad:#A8543A; --bad-dim:#F8EEEA; --bad-line:#E0C4B8; --bad-text:#7A3826; --pressed:#EFEAE1; --hover-line:#CFC7BA; --focus-line:#8A6D3B; --sunk:#F3F0EA; --raised-2:#FFFFFF; --well:#F6F3EE; --cool:#4A5E7A; background:#FBFAF7; } @media print{ :root{ --bg:#FBFAF7; /* warm sheet, never #FFF */ --panel:#FFFFFF; --panel-2:#F6F3EE; --line:#E4DFD6; --line-soft:#F0ECE4; --header:#FBFAF7; --ink:#1A1020; /* the aubergine, as ink */ --ink-2:#4A4152; --ink-3:#7C7387; --ink-4:#A9A2B2; --accent:#8A6D3B; /* gold holds its own on paper only when deeper */ --gold-lit:#8A6D3B; --gold-dim:#F5F0E6; --gold-line:#D9CBAE; --gold-a:#A8894E; --gold-b:#8A6D3B; --gold-c:#7A5F32; --gold-d:#8A6D3B; --on-gold:#FFFFFF; --label:#8A6D3B; --ok:#4A6B57; --ok-dim:#EDF2EE; --ok-line:#BFD1C6; --ok-text:#2F4A3B; --hot:#9A7F45; --hot-dim:#F6F1E5; --hot-line:#DCCBA6; --hot-text:#6B5423; --bad:#A8543A; --bad-dim:#F8EEEA; --bad-line:#E0C4B8; --bad-text:#7A3826; --pressed:#EFEAE1; --hover-line:#CFC7BA; --focus-line:#8A6D3B; --sunk:#F3F0EA; --raised-2:#FFFFFF; --well:#F6F3EE; --cool:#4A5E7A; background:#FBFAF7; } } /* ============================================================================ BUTTONS Only one button on a screen should be beautiful, and that is what makes it beautiful. If Save and next, Booked, Objections, LINE and Call are all metal, none of them is the one, and the eye has nowhere to land. But the answer is not "everything else goes flat". A rectangle with a one-pixel border does not read as restraint, it reads as unfinished, and Guy is right that most of these do not look pressable at all. So: three tiers of the SAME physical language. Every one of them is an object with a lit top edge, a body, and a seat underneath. What changes is how much light falls on it. .btn-1 the metal. One per screen. Save and next, Confirm, Take it now. .btn-2 the same object in the surface colour. Call, LINE, Booked, a rail tab. Pressable, obviously, and quiet. .btn-3 almost nothing until you touch it. Back to script, Not now. The tint modifiers colour tier 2 without changing its weight: .is-go for the ones that mean yes, .is-no for the ones that end something. ========================================================================= */ .btn-1,.btn-2,.btn-3{ font:inherit;font-weight:600;cursor:pointer;border-radius:10px; display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:11px 18px;line-height:1;position:relative;isolation:isolate; transition:transform .12s cubic-bezier(.2,.7,.3,1), box-shadow .16s, background .16s, border-color .16s, color .16s; } .btn-1:active,.btn-2:active,.btn-3:active{transform:translateY(1px)} /* ---- tier one: the metal ------------------------------------------------ */ .btn-1{ background:linear-gradient(180deg,var(--gold-a) 0%,var(--gold-b) 18%, var(--gold-c) 82%,var(--gold-d) 100%); color:var(--on-gold);border:0; box-shadow:0 1px 0 rgba(255,255,255,.45) inset, 0 -1px 0 rgba(0,0,0,.25) inset, 0 8px 22px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.4); } .btn-1:hover{filter:brightness(1.06)} /* ---- tier two: the same object, in the room's own colour ---------------- This is the tier that was missing. The top edge catches light, the body is a shade deeper than the panel it sits on, and there is a real shadow under it. It is unmistakably a button and it never competes with the gold. ---- */ .btn-2{ background:linear-gradient(180deg,var(--panel-2),var(--panel)); color:var(--ink-2); border:1px solid var(--line); box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 2px 6px rgba(0,0,0,.35), 0 1px 1px rgba(0,0,0,.25); } .btn-2:hover{ color:var(--ink);border-color:var(--hover-line); background:linear-gradient(180deg,var(--raised-2),var(--panel-2)); box-shadow:0 1px 0 rgba(255,255,255,.10) inset, 0 5px 14px rgba(0,0,0,.45), 0 1px 1px rgba(0,0,0,.3); } .btn-2[aria-pressed="true"],.btn-2.on{ background:var(--pressed);border-color:var(--focus-line);color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.4) inset; } /* the two tints. Weight unchanged, meaning added. */ .btn-2.is-go{color:var(--ok);border-color:var(--ok-line); background:linear-gradient(180deg,var(--ok-dim),var(--panel))} .btn-2.is-go:hover{color:var(--ok-text);border-color:var(--ok)} .btn-2.is-no{color:var(--bad);border-color:var(--bad-line); background:linear-gradient(180deg,var(--bad-dim),var(--panel))} .btn-2.is-no:hover{color:var(--bad-text);border-color:var(--bad)} /* ---- tier three: nothing until you touch it ----------------------------- */ .btn-3{background:none;border:1px solid transparent;color:var(--ink-3); box-shadow:none;font-weight:500} .btn-3:hover{background:var(--panel-2);border-color:var(--line);color:var(--ink)} /* ---- the sheen, slower --------------------------------------------------- It was 0.62s, which is fast enough to register as a flicker rather than as light moving. A real highlight travelling across a surface takes about a second, and the difference between those two numbers is the difference between expensive and cheap. ------------------------------------------- */ .lit:hover::after{animation:sheen 1.05s cubic-bezier(.25,.55,.3,1) 1} /* ============================================================================ MOVING BETWEEN SCREENS Thirteen separate documents, so every navigation was a white-out and a repaint: the browser tears one page down and builds the next, and for a frame or two you see the seam. The browser will cross-fade that for us if we ask. One line, no JavaScript, and it degrades to exactly what happens today on anything that does not support it. Deliberately short. A transition you notice twice is a transition somebody is waiting through two hundred times a day. ========================================================================= */ @view-transition{ navigation:auto } /* The default is a cross-fade: both snapshots go half transparent at the same moment, and what you see through the two of them is the browser's own white canvas. That was the flash. So: paint the canvas, and never fade the old screen out. The outgoing screen holds at full opacity and the new one dissolves in on top of it, which means there is no frame where the stack is see-through. */ html{ background:var(--bg) } ::view-transition-group(root){ animation-duration:.26s } ::view-transition-old(root){ animation:none; opacity:1 } ::view-transition-new(root){ animation:vt-in .26s cubic-bezier(.32,.72,.3,1) both } @keyframes vt-in{ from{ opacity:0 } } /* Browsers without it get the same feeling on arrival, which is most of the effect: the seam is on the way IN, not on the way out. */ /* No view transitions here, so there is nothing to hold open. The best that can be done is to not show the skeleton at full strength while it is still a skeleton. */ @supports not (view-transition-name: none){ body{ animation:vt-in .26s ease-out both } } @media (prefers-reduced-motion:reduce){ ::view-transition-old(root),::view-transition-new(root),body{ animation:none } } /* ============================================================================ LOOKING AS SOMEBODY ELSE The band is not decoration. An admin who forgets whose day they are reading will report a bug that is not there, and will eventually make a call on numbers that belong to another person. It is gold, it is above everything, and the way out of it is the only button on it. ========================================================================= */ #__vabar{position:fixed;inset-block-start:0;inset-inline:0;z-index:9998; display:flex;align-items:center;gap:10px;justify-content:center; padding:7px 14px;font-size:12.5px;letter-spacing:.02em; color:var(--on-gold); background:linear-gradient(180deg,var(--gold-a),var(--gold-c)); box-shadow:0 2px 14px rgba(0,0,0,.45)} #__vabar b{font-weight:700} #__vabar span{opacity:.62;text-transform:uppercase;font-size:10px;letter-spacing:.14em} #__vabar button{font:inherit;font-size:11.5px;font-weight:600;cursor:pointer; padding:3px 11px;border-radius:99px;color:var(--gold-a); background:rgba(0,0,0,.72);border:0} #__vabar button:hover{background:#000} body.viewing-as{padding-block-start:32px} /* the header on most screens is sticky at 0, so it has to move down with it */ body.viewing-as header,body.viewing-as .h{inset-block-start:32px} #__vapanel{position:fixed;inset-block-start:52px;inset-inline-start:14px;z-index:9999; width:min(320px,calc(100vw - 28px));max-height:min(70vh,560px);overflow:auto; background:var(--panel);border:1px solid var(--line);border-radius:13px; box-shadow:0 24px 60px rgba(0,0,0,.6);padding:8px} body.viewing-as #__vapanel{inset-block-start:84px} #__vapanel .vh{padding:9px 11px 7px;font-size:10px;letter-spacing:.18em; text-transform:uppercase;color:var(--label);font-weight:700} #__vapanel > button{font-size:14px;padding:11px 13px} #__vapanel .vg{border-top:1px solid var(--line-soft)} #__vapanel .vr{display:flex;align-items:center;justify-content:space-between;gap:10px; padding:9px 11px;font-size:10px;letter-spacing:.16em;cursor:pointer; text-transform:uppercase;color:var(--label);font-weight:700;list-style:none} #__vapanel .vr::-webkit-details-marker{display:none} #__vapanel .vr:hover{color:var(--gold-lit)} #__vapanel .vr em{font-style:normal;font-weight:400;letter-spacing:.02em; text-transform:none;font-size:11px;color:var(--ink-4)} #__vapanel details[open] .vr{color:var(--gold-lit)} #__vapanel details > button{margin-inline-start:8px} #__vapanel button{display:block;width:100%;text-align:start;font:inherit; font-size:13.5px;padding:8px 11px;border-radius:8px;cursor:pointer; background:none;border:0;color:var(--ink-2)} #__vapanel button:hover{background:var(--panel-2);color:var(--ink)} #__vapanel button.on{color:var(--accent);font-weight:600} #__vapanel button.on::after{content:" · you";font-weight:400;color:var(--ink-4)} #__vapanel .vback{margin-top:6px;border-top:1px solid var(--line-soft); border-radius:0 0 8px 8px;color:var(--accent);font-weight:600}