/* ══════════════════════════════════════════════════════════════════════ Evie — landing page Flat by design: every colour is a solid value. There is not a single gradient in this file — no linear-gradient, no radial-gradient, no gradient text. Depth comes from solid surfaces, 1px borders and spacing instead. Full-bleed: content runs to the edges of the viewport with a padding gutter, so nothing is boxed into a narrow centred column. ══════════════════════════════════════════════════════════════════════ */ /* ── Theme ────────────────────────────────────────────────────────────── Light is the default, the way the analysis tools it mirrors are. Dark is one class away: everything below is a token, so the palette swaps and nothing else moves. data-theme on wins over the system preference, because a person who has pressed the button has said what they want. */ :root { /* Surfaces — four flat steps from the page up to a raised card. */ --base: #f3f4f7; --raise: #ffffff; --surface: #ffffff; --surface-2: #f1f3f6; --line: #e2e6ec; --line-hi: #cdd3dc; --ink: #14161a; --ink-muted: #59616d; --ink-faint: #838b97; /* Accents deep enough to carry white text on a light page. */ --pink: #e11d74; --pink-hi: #c4165f; --blue: #0d8ecf; --blue-hi: #0a76ae; --ok: #14a05a; /* Text sitting ON an accent fill. */ --on-accent: #ffffff; /* The ring around a "leading" control — must contrast with the fill. */ --ring: rgba(0, 0, 0, 0.45); /* The dotted ground, and the tint of an alternating band. */ --dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Ccircle cx='1.5' cy='1.5' r='1.5' fill='%23000000' fill-opacity='0.06'/%3E%3C/svg%3E"); --alt-tint: rgba(0, 0, 0, 0.025); /* The full-bleed gutter — the only horizontal rhythm on the page. */ --gutter: clamp(20px, 4.5vw, 72px); --radius: 16px; --radius-sm: 12px; } :root[data-theme="dark"] { --base: #0b0b0f; --raise: #121218; --surface: #16161d; --surface-2: #1c1c24; --line: #26262f; --line-hi: #34343f; --ink: #f2f2f5; --ink-muted: #a3a3ae; --ink-faint: #6e6e7a; /* Brighter, because they sit on near-black and carry dark text. */ --pink: #ff3d87; --pink-hi: #ff5c9c; --blue: #38c6ff; --blue-hi: #5bd2ff; --ok: #5fd39a; --on-accent: #0b0b0f; --ring: rgba(255, 255, 255, 0.55); --dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Ccircle cx='1.5' cy='1.5' r='1.5' fill='%23ffffff' fill-opacity='0.07'/%3E%3C/svg%3E"); --alt-tint: rgba(255, 255, 255, 0.026); } * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 76px; /* anchors clear the fixed nav */ -webkit-text-size-adjust: 100%; } body { margin: 0; color: var(--ink); /* Dotted ground. The dots are an SVG tile of solid circles rather than a radial-gradient, so the page keeps its no-gradient rule. `fixed` pins the grid to the viewport, so it never scrolls out of register or stretches — the tile is a constant 26px at every screen size, which is why this needs no breakpoints. */ background-color: var(--base); background-image: var(--dots); background-size: 26px 26px; background-attachment: fixed; font-family: Inter, "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3 { margin: 0; line-height: 1.1; letter-spacing: -0.025em; } p { margin: 0; } ul, ol, dl { margin: 0; padding: 0; list-style: none; } /* Full width, gutter only — no max-width, so the page fills the screen. */ .bleed { width: 100%; padding-inline: var(--gutter); } /* ── Home dashboard ─────────────────────────────────────────────────────── */ .dash { min-height: 100svh; } .dash-main { padding-top: clamp(104px, 13vh, 132px); padding-bottom: 64px; } .dash-title { margin-bottom: clamp(22px, 3vw, 30px); font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 700; } /* The real balance, perched top right in the nav. */ .perch { display: flex; align-items: center; gap: 10px; margin-left: auto; } .perch-v { font-size: clamp(0.95rem, 1.8vw, 1.15rem); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; } .dash-sub { max-width: 56ch; margin-top: -8px; margin-bottom: 28px; color: var(--ink-muted); } /* Real vs demo. Blue is the live account; the demo is deliberately quieter so the two can never be mistaken for one another at a glance. */ .badge { padding: 5px 12px; font: inherit; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--blue); background: transparent; border: 1px solid var(--blue); border-radius: 999px; cursor: pointer; user-select: none; white-space: nowrap; transition: color 0.18s ease, border-color 0.18s ease; } .badge:hover { color: var(--blue-hi); border-color: var(--blue-hi); } /* The two things you can actually do from here. */ .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; max-width: 720px; margin-bottom: 24px; } .tile { display: grid; gap: 6px; padding: clamp(22px, 2.6vw, 28px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color 0.18s ease, background 0.18s ease; } .tile:hover { background: var(--surface-2); border-color: var(--line-hi); } .tile-icon { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 10px; background: var(--surface-2); border: 1px solid var(--line-hi); border-radius: 11px; } .tile-h { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .tile-t { font-size: 1.1rem; font-weight: 650; } .tile-s { font-size: 0.92rem; color: var(--ink-muted); } /* What the tile actually is. Outlined rather than filled, so it labels the heading without competing with it. */ .tag-bot { padding: 3px 9px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--blue); border: 1px solid var(--blue); border-radius: 999px; white-space: nowrap; } /* A blank canvas for a page that has not been built yet. */ .panel { min-height: 220px; border: 1px dashed var(--line-hi); border-radius: var(--radius); } /* ── Detail sheet ───────────────────────────────────────────────────────── */ .sheet { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; } .sheet[hidden] { display: none; } .sheet-back { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.62); opacity: 0; transition: opacity 0.2s ease; } .sheet.is-in .sheet-back { opacity: 1; } .sheet-card { position: relative; width: min(100%, 480px); max-height: min(84vh, 680px); overflow-y: auto; padding: clamp(22px, 3vw, 28px); background: var(--surface); border: 1px solid var(--line-hi); border-radius: var(--radius); opacity: 0; transform: translateY(10px) scale(0.985); transition: opacity 0.2s ease, transform 0.2s ease; } .sheet.is-in .sheet-card { opacity: 1; transform: none; } .sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .sheet-k { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-faint); } .sheet-t { margin-top: 6px; font-size: 1.2rem; font-weight: 700; } .sheet-x { flex: none; display: grid; place-items: center; width: 34px; height: 34px; color: var(--ink-muted); background: transparent; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; transition: color 0.18s ease, border-color 0.18s ease; } .sheet-x:hover { color: var(--ink); border-color: var(--line-hi); } .sheet-body { margin-top: 20px; } .sheet-who { font-size: 14px; font-weight: 650; margin-bottom: 16px; } .sheet-note { margin-top: 18px; font-size: 12.5px; line-height: 1.55; color: var(--ink-faint); } .sheet-note strong { color: var(--ink-muted); font-weight: 650; } .sheet-foot { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); } .grp + .grp { margin-top: 18px; } .grp-t { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-faint); margin-bottom: 6px; } /* Every account: kind, id, balance — the figures line up down the right. */ .accts { border-top: 1px solid var(--line); } .acct { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; } .acct:last-child { border-bottom: 0; } .acct-kind { padding: 3px 8px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-faint); background: var(--surface-2); border-radius: 6px; } .acct-id { color: var(--ink-muted); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .acct-bal { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; } .acct--none { display: block; color: var(--ink-faint); } /* The one link that stays on the page. */ .notice-go { display: inline-flex; align-items: center; gap: 6px; padding: 11px 18px; font-size: 13.5px; font-weight: 600; color: var(--blue); border: 1px solid var(--line-hi); border-radius: 999px; transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease; } .notice-go:hover { color: var(--blue-hi); border-color: var(--blue); background: var(--surface); } /* ── Flash messages ─────────────────────────────────────────────────────── */ .flash { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 20px; padding: 10px 16px; font-size: 13.5px; font-weight: 600; border-radius: 999px; border: 1px solid; opacity: 0; transform: translateY(-6px); transition: opacity 0.3s ease, transform 0.3s ease; } .flash.is-in { opacity: 1; transform: none; } .flash[hidden] { display: none; } .flash--ok { color: var(--ok); border-color: var(--ok); background: var(--surface); } /* On the landing page the flash is a failure, and floats over the page. */ .flash--error { position: fixed; left: 50%; bottom: 24px; z-index: 80; transform: translate(-50%, 8px); color: var(--pink); border-color: var(--pink); background: var(--surface); max-width: calc(100vw - 40px); text-align: center; } .flash--error.is-in { transform: translate(-50%, 0); } /* ── Buttons ────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 999px; padding: 11px 20px; font: inherit; font-size: 14.5px; font-weight: 600; white-space: nowrap; cursor: pointer; /* Explicit, because a