/* AMOMO portal stylesheet — shared by every server-rendered page: serving's own templates and infrastructure's _base.html shell both link /ui/styles.css, so the class vocabulary here (.shell, .panel, nav, .sub, .msg, .row, form controls, tables, code.token) is a rendering contract. Keep those selectors stable; page-specific classes (.hero, .cards, .auth) are additive. Self-contained: system fonts only, no external assets. */ /* The portal is light unless the reader chose dark (/ui/theme.js puts data-theme="dark" on before anything is drawn). Both are the AMOMO brand palette — AMindOfMyOwn_Color_Guide v1.0: its light, print set (Off- White ground, white cards, Ink and Slate text, the print cyan-to-pink pair) and its approved dark, screen set (Navy ground, the screen pair) — the same values the amomo terminal draws with. Names stay role-based (--bg, --panel, --accent) so a page never encodes which brand colour fills a role; the guide's names appear only here, where the mapping is made once. The -rgb tokens are the same colours as bare channels, for tints: rgba(var(--x-rgb), a). The cyan-to-pink gradient is reserved for the wordmark and progress fills and is deliberately not offered as a variable. */ :root { /* Declared, so Chrome's Auto Dark Mode knows the page chose its scheme. */ color-scheme: light; /* The width of the sign-in box, and of everything that has to line up with it: the step heading above it, and the cards below. One definition, because the moment these were two numbers they drifted — the box narrowed and the heading did not, so "Log in" started to the left of the box it names. */ --box: 380px; --bg: #F8F9FC; /* off-white — the page ground */ --panel: #FFFFFF; /* card — raised surfaces */ --card-soft: #F3F5F9; /* a card inside a card */ --field: #FFFFFF; /* inset controls */ --border: #E3E6EC; --border-strong: #D9D9D9; /* guide border */ --text: #1A2233; /* ink */ --strong: #1A2233; /* headline text that is white on the dark ground */ --muted: #4E5A73; /* slate */ --placeholder: rgba(78, 90, 115, 0.55); --accent: #0077B6; /* print cyan, deepened to read as text on white */ --accent-rgb: 0, 180, 230; /* print cyan, for tints and glows */ --accent-2: #E0156F; /* print pink — a discrete accent, never blended */ --accent-2-rgb: 240, 32, 131; --accent-hover: #0090D0; --link: #0077B6; /* links: the accent, readable on white */ --on-accent: #FFFFFF; /* text on an accent or status fill */ --tint-rgb: 26, 34, 51; /* neutral hover and selection tints: ink */ --ok: #138A4E; --ok-rgb: 19, 138, 78; --bad: #D0214F; --bad-rgb: 208, 33, 79; --warn: #B26A00; --warn-rgb: 178, 106, 0; --shadow-rgb: 26, 34, 51; --shadow-k: 0.35; /* shadows are lighter on a light ground */ --glow-k: 0.5; --radius: 0; --radius-sm: 0; --gap: 18px; font-size: 16px; } :root[data-theme="dark"] { color-scheme: dark; --bg: #14203A; /* navy */ --panel: rgba(31, 46, 80, 0.72); /* track, over navy */ --card-soft: rgba(31, 46, 80, 0.35); --field: #0F1930; /* deep — below the ground */ --border: rgba(47, 65, 107, 0.55); --border-strong: #2F416B; --text: #EDF1F8; /* soft */ --strong: #FFFFFF; --muted: #AFBAD2; --placeholder: rgba(154, 163, 181, 0.55); --accent: #00C8FF; /* screen cyan */ --accent-rgb: 0, 200, 255; --accent-2: #FF2E92; /* screen pink */ --accent-2-rgb: 255, 46, 146; --accent-hover: #5FDCFF; --link: #7FDBFF; /* highlight cyan — the guide's links on navy */ --on-accent: #0F1930; --tint-rgb: 175, 186, 210; --ok: #4ade80; --ok-rgb: 74, 222, 128; --bad: #f87171; --bad-rgb: 248, 113, 113; --warn: #fbbf24; --warn-rgb: 251, 191, 36; --shadow-rgb: 0, 0, 0; --shadow-k: 1; --glow-k: 1; } * { box-sizing: border-box; } a { color: var(--link); } a:hover { color: var(--accent-hover); } html, body { margin: 0; padding: 0; min-height: 100%; } body { background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.55; -webkit-font-smoothing: antialiased; } /* Fixed ambient glows behind everything — cheap depth without images. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: radial-gradient(600px 400px at 15% -5%, rgba(var(--accent-rgb), calc(0.16 * var(--glow-k))), transparent 60%), radial-gradient(700px 500px at 90% 10%, rgba(var(--accent-2-rgb), calc(0.12 * var(--glow-k))), transparent 60%), radial-gradient(500px 400px at 50% 110%, rgba(45, 212, 191, calc(0.07 * var(--glow-k))), transparent 60%); } .shell { max-width: 780px; margin: 0 auto; padding: 56px 24px 48px; } /* Two widths, one column. The shell is wide so the wordmark and the motto can be full size; the box inside it stays the narrow shape people recognise as "this is where you go in". Making the shell do both jobs is what forced the choice between a big mark and a narrow box — the mark was capped by whatever width the form wanted. Every child that is not the header is held to the box width, so the page reads as one centred column rather than a wide header over a narrow form. */ .shell.auth { max-width: 780px; padding-top: 9vh; } .shell.auth .panel, .shell.auth .cards { /* Narrower than the 460 it was. At that width the sign-in box was a wide, shallow strip — two fields and a button in a box half again as wide as it was tall. Closer to square reads as a form to fill in rather than a bar across the page. The cost lands on register, which has one more field and so grows taller; that is the right place for the cost, since the page someone uses once can afford to be longer than the one they use daily. */ max-width: var(--box); margin-left: auto; margin-right: auto; } .shell h1 { /* The step, not the identity. It sits under the wordmark and must read as smaller than it: a page whose heading out-shouts the brand tells the reader the step matters more than whose product this is. */ font-size: clamp(1.15rem, 0.95rem + 0.8vw, 1.45rem); font-weight: 650; letter-spacing: -0.025em; margin: 0 0 8px; } .shell p.sub { color: var(--muted); margin: 0 0 calc(var(--gap) + 6px); max-width: 56ch; } /* Brand wordmark — small link-home lockup used above page titles. */ .brand { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 26px; text-decoration: none; color: var(--text); font-weight: 650; letter-spacing: 0.02em; } .panel { background: var(--panel); backdrop-filter: blur(14px); border: 1px solid var(--border); border-radius: 0; padding: 26px; margin-bottom: var(--gap); box-shadow: 0 18px 48px rgba(var(--shadow-rgb), calc(0.42 * var(--shadow-k))); } /* Nav renders as a pill tab-bar; _base.html places it at the top of .panel. */ nav { display: flex; flex-wrap: wrap; gap: 4px; margin: -6px 0 var(--gap); padding-bottom: 14px; border-bottom: 1px solid var(--border); } nav a { color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 550; padding: 6px 12px; border-radius: 0; transition: color 0.12s ease, background 0.12s ease; } nav a:hover { color: var(--text); background: rgba(var(--tint-rgb), 0.10); } nav a.active { color: var(--text); background: rgba(var(--accent-rgb), 0.18); } /* The light/dark switch at the end of the nav (/ui/theme.js labels it with what it switches to). A nav item, not a button: no fill, no lift. */ nav .theme-toggle { margin-left: auto; background: transparent; color: var(--muted); border: 1px solid var(--border); box-shadow: none; padding: 4px 10px; font-size: 14px; line-height: 1.4; border-radius: 0; } nav .theme-toggle:hover { color: var(--text); background: rgba(var(--tint-rgb), 0.10); filter: none; transform: none; box-shadow: none; } label { display: block; font-size: 13.5px; font-weight: 550; margin: 14px 0 6px; color: var(--muted); } input, select, textarea { width: 100%; background: var(--field); border: 1px solid var(--border-strong); border-radius: 0; color: var(--text); padding: 11px 13px; font-family: inherit; font-size: 15px; transition: border-color 0.12s ease, box-shadow 0.12s ease; } input::placeholder, textarea::placeholder { color: var(--placeholder); } /* A password field and the control that reveals it. The button sits inside the field's box rather than beside it, so the input keeps its full width and the layout does not shift when the control appears. */ .reveal { position: relative; } .reveal input { padding-right: 44px; } .reveal button { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 36px; height: 32px; padding: 0; display: grid; place-items: center; background: none; border: none; box-shadow: none; color: var(--muted); cursor: pointer; } .reveal button:hover { color: var(--text); background: none; } /* Focus stays visible: the control is reachable by keyboard, and a reveal toggle that cannot be seen when tabbed to is a control only a mouse has. */ .reveal button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .reveal svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.22); } button, a.button { display: inline-block; background: var(--accent); color: var(--on-accent); border: none; border-radius: 0; padding: 11px 20px; font-weight: 650; font-size: 15px; text-decoration: none; text-align: center; cursor: pointer; box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.28); transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease; } button:hover, a.button:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 10px 26px rgba(var(--accent-rgb), 0.36); } button:active, a.button:active { transform: translateY(0); } button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; } button.secondary, a.button.secondary { background: rgba(var(--tint-rgb), 0.08); color: var(--text); border: none; box-shadow: none; } button.secondary:hover, a.button.secondary:hover { background: rgba(var(--tint-rgb), 0.14); filter: none; } button.danger { background: var(--bad); color: var(--on-accent); box-shadow: 0 6px 20px rgba(var(--bad-rgb), 0.25); } .row { display: flex; gap: 12px; align-items: center; } .row > * { flex: 1; } .row button { flex: 0 0 auto; } .msg { padding: 12px 14px; border-radius: 0; margin: 14px 0 0; font-size: 14px; } .msg.ok { background: rgba(var(--ok-rgb), 0.10); color: var(--ok); border: 1px solid rgba(var(--ok-rgb), 0.30); } .msg.bad { background: rgba(var(--bad-rgb), 0.10); color: var(--bad); border: 1px solid rgba(var(--bad-rgb), 0.30); } .msg.warn { background: rgba(var(--warn-rgb), 0.10); color: var(--warn); border: 1px solid rgba(var(--warn-rgb), 0.30); } table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--border); font-size: 14px; } th { color: var(--muted); font-weight: 550; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.06em; } tr:last-child td { border-bottom: none; } tbody tr { transition: background 0.1s ease; } tbody tr:hover { background: rgba(var(--tint-rgb), 0.05); } code.token { display: block; background: var(--field); border: 1px solid var(--border-strong); border-radius: 0; padding: 13px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; word-break: break-all; } /* ── Landing page (templates/index.html) ─────────────────────────── */ .hero { text-align: center; padding: 4vh 0 10px; } .hero .brand { justify-content: center; margin-bottom: 34px; } .hero h1 { /* Smaller than the wordmark above it. The mark is the identity; this is a line about it, and a line that outgrows the mark inverts the two. */ font-size: clamp(1.1rem, 0.9rem + 0.9vw, 1.5rem); font-weight: 700; letter-spacing: -0.03em; margin: 0 0 14px; } .hero h1 .grad { /* Plain white, not the accent and not the gradient: the cyan-to-pink blend belongs to the wordmark directly above, and a line wearing it reads as a second logo competing with the first. */ color: var(--strong); font-weight: 600; letter-spacing: 0.01em; } .hero p.sub { margin: 0 auto 30px; max-width: 46ch; font-size: 1.06rem; } .cta { display: flex; justify-content: center; gap: 12px; margin-bottom: 44px; } .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; /* Clear of the way-in panel above. What AMOMO offers is a separate thought from how you get in, and the two read as one list without this. */ margin-top: 34px; } /* In the narrow sign-in column three cards would fall two-then-one, leaving an orphan that reads as a mistake. Stacked, they are a list. */ .shell.auth .cards { grid-template-columns: 1fr; } .card { display: block; background: var(--panel); backdrop-filter: blur(14px); border: 1px solid var(--border); border-radius: 0; padding: 18px 20px; text-decoration: none; color: var(--text); transition: border-color 0.14s ease, transform 0.14s ease, box-shadow 0.14s ease; } .card:hover { border-color: rgba(var(--accent-rgb), 0.45); transform: translateY(-2px); box-shadow: 0 14px 34px rgba(var(--shadow-rgb), calc(0.35 * var(--shadow-k))); } .card h3 { margin: 0 0 6px; font-size: 15.5px; font-weight: 650; letter-spacing: -0.01em; } .card p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.45; } .footnote { text-align: center; color: var(--muted); font-size: 13.5px; margin-top: 34px; } .footnote a { color: var(--accent); text-decoration: none; } .footnote a:hover { color: var(--accent-hover); } /* A six-digit code, wherever one is asked for: signing in, enrolling an authenticator, confirming an address. One rule rather than three, so the three cannot drift apart — they are the same act to the person typing. Tabular figures keep the digits from shifting width as they are entered; the text-indent offsets the trailing letter-space so the run sits centred rather than pushed right. */ input.code { letter-spacing: 0.55em; text-indent: 0.55em; font-size: 1.9rem; text-align: center; padding: 14px 12px; font-variant-numeric: tabular-nums; } /* The company wordmark, in place of a text heading on the landing page. It is the full lock-up including the ™, so it is given room and capped so it never outgrows the column on a wide screen. The asset has a transparent background and its own gradient, so it needs no plate behind it in either theme. */ .hero .wordmark { display: block; width: 100%; max-width: 680px; height: auto; margin: 0 auto 18px; } /* The wordmark where the "A" tile and the word AMOMO used to sit. Sized by height rather than width so it lines up with whatever it shares a bar with, and capped in width so a wide header cannot stretch it. One rule for every surface — auth pages, chat, widget — because a brand that differs per page is not a brand. */ .brandmark { /* Sized by width, not height. The wordmark is roughly eight times wider than it is tall, so a height that looks right implies a width of some hundreds of pixels — and a max-width smaller than that silently wins, which is how this ended up shrunk on the pages that set both. One dimension governs; the other follows. */ display: block; width: 200px; max-width: 60%; height: auto; } .brand .brandmark { /* The sign-in pages carry the mark at the same weight as the landing page: someone arriving at /login should meet the same company, at the same size, as someone arriving at the front door. Percentage cap so a narrow window shrinks it instead of overflowing the panel. */ width: 680px; max-width: 92%; margin-bottom: 10px; } /* `hidden` must actually hide. An element with a `display` rule of its own — nav is flex, rows are flex — ignores the attribute's default styling and stays on screen, which is how the sign-in nav survived into the code step it was supposed to leave. One rule, so no page has to remember this. */ [hidden] { display: none !important; } /* Two columns where there is room, one where there is not. The pages that use this put the pair that belong together first — agents beside you, posture beside identity — so the reader's eye lands on both without scrolling, and a narrow window stacks them in the same order rather than reflowing into something else. */ .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 14px; align-items: start; } /* The line under the wordmark on the auth pages. It is the same promise the landing page makes, said in the same words, so someone who arrives straight at /login meets the company rather than a bare form. White and light: the cyan-to-pink gradient belongs to the wordmark directly above it, and a line wearing it reads as a second logo competing with the first. Sized well below the mark, because the mark is the name and this is the sentence about it. */ /* The motto, identical on the landing page and both sign-in pages: same size, same colour, same distance from the mark above and the way-in below. White, not the gradient — the cyan-to-pink blend belongs to the wordmark directly above, and a line wearing it reads as a second logo competing with the first. The gap beneath it is deliberately large. The mark and the motto are one thought and belong together; what follows is a different thought — the way in — and running them together made the page read as one dense block. */ .tagline { margin: 2px auto 52px; text-align: center; color: var(--strong); font-size: clamp(1.3rem, 1rem + 1.3vw, 1.95rem); font-weight: 600; letter-spacing: 0.01em; } /* The lockup is centred on every front-of-house page, whichever shell it is in: `.brand` is an inline-flex row, which does not centre itself. */ .shell > .brand { display: flex; justify-content: center; margin: 0 auto 10px; } /* The step name ("Log in", "Create your account") belongs to the panel below it, not to the motto above it: it is centred over the form and sits close to it, so the large gap under the motto separates identity from way-in rather than stranding the heading between the two. */ /* The step name sits above the box and starts at its left edge, not centred under the motto: it names what the box below is for, so it belongs to the box. Held to the panel width so the two left edges line up — without it the heading would start at the edge of the wider header column instead. */ .shell.auth > h1 { max-width: var(--box); margin: 0 auto 12px; text-align: left; } /* A card that is not yet anywhere. It keeps the shape of the real ones so the row reads as a row, but it is not an , does not lift on hover, and says plainly that it is unfinished — a card that looks clickable and goes nowhere teaches a visitor that the site is broken rather than that the section is coming. */ .card.soon { cursor: default; opacity: 0.72; } .card.soon:hover { transform: none; } .card.soon .badge { display: inline-block; margin-top: 10px; padding: 2px 9px; border: 1px solid var(--border-strong); border-radius: 0; font-size: 0.74rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); } /* The two ways in, side by side and equal: neither creating an account nor signing in is the lesser choice, and a row where one button is wider says otherwise. They fill the panel the way a form fills it on /login, so the box does not read as empty. */ .row.wayin { display: flex; gap: 10px; margin-top: 18px; } .row.wayin .button { flex: 1; text-align: center; } /* A checkbox that reads as one line, not as a field with a label above it: the box and its sentence belong together, and `label` is block-level with a bottom margin by default, which stacked them. */ .check { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: 0.85rem; font-weight: 500; color: var(--muted); cursor: pointer; } .check input { width: auto; margin: 0; accent-color: var(--accent); cursor: pointer; } /* --------------------------------------------------------------------------- The money and estate pages. These rules used to be three `