/* ══════════════════════════════════════════════════════════════════════ Shalobot — the site 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 ────────────────────────────────────────────────────────────── Navy is the default; light 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. Light mode is the alternative here; Shalobot is navy first. */ --base: #f4f6f9; --raise: #ffffff; --surface: #ffffff; --surface-2: #eef2f6; --line: #dfe5ec; --line-hi: #c9d2dd; --ink: #0f172a; --ink-muted: #526175; --ink-faint: #7f8c9e; /* Mint is the action colour, amber the accent; both deep enough here to carry their text on a light page. */ --pink: #b45f00; --pink-hi: #955000; --blue: #0d8f62; --blue-hi: #0a7852; --ok: #0d8f62; --real: #0d8f62; --real-tint: rgba(13, 143, 98, 0.10); --danger: #d92d20; --amber: #b45f00; --violet: #6d3bd8; --teal: #0f7f8a; --on-accent: #ffffff; --ring: rgba(0, 0, 0, 0.45); --dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='1' cy='1' r='1' fill='%230369a1' fill-opacity='0.12'/%3E%3C/svg%3E"); --alt-tint: rgba(0, 0, 0, 0.025); --gutter: clamp(20px, 4.5vw, 72px); --radius: 16px; --radius-sm: 12px; } :root[data-theme="dark"] { --base: #070b12; --raise: #0e1522; --surface: #111a29; --surface-2: #172234; --line: #22304a; --line-hi: #2f405e; --ink: #f2f5f9; --ink-muted: #9aa8b8; --ink-faint: #6b7a8f; --pink: #ffb020; --pink-hi: #ffc24d; --blue: #3ddc97; --blue-hi: #5fe6ab; --ok: #3ddc97; --real: #3ddc97; --real-tint: rgba(61, 220, 151, 0.14); --danger: #ff6a6a; --amber: #ffb020; --violet: #b794ff; --teal: #4fd1c5; /* Mint and amber sit on navy and carry dark text. */ --on-accent: #0b1220; --ring: rgba(255, 255, 255, 0.55); /* The same dotted ground as Clunoid Trading: sky-blue dots at a tenth, on a 24px grid. */ --dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='1' cy='1' r='1' fill='%237dd3fc' fill-opacity='0.10'/%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: 24px 24px; 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 ─────────────────────────────────────────────────────── */ /* A column the height of the window, so the footer sits at the bottom of the screen rather than floating with dead ground beneath it, and so the grid inside can be told to take whatever is left over. */ .dash { display: flex; flex-direction: column; min-height: 100svh; } /* Clearing the fixed header and no more. The nav is 68px, so that plus a breath is the whole requirement — clamp(84px, 9vh, 100px) was clearing a bar that is 68px tall and spending the difference on nothing, and 56px of bottom padding on a laptop is most of a tile. `flex: 1` so this takes the height the header leaves, and a column so the grid inside it can be handed the remainder. */ .dash-main { flex: 1; display: flex; flex-direction: column; padding-top: calc(68px + clamp(10px, 1.4vh, 18px)); padding-bottom: clamp(10px, 1.4vh, 16px); } .dash-title { margin-bottom: clamp(10px, 1.3vw, 14px); font-size: clamp(1.45rem, 2.4vw, 1.8rem); 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; /* The same ink as the Real balance in the portfolio below it. It is the same money, in both modes, and two colours for one figure read as two figures. */ color: var(--real); } /* 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. */ /* Three across rather than two and a stray, and each one the size of the thing it is — a link with a name and a line under it. They were card-sized before, which made a dashboard of three links look like a whole page. */ .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px; margin-bottom: 18px; } .tile { display: grid; gap: 4px; padding: 16px 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); 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: 32px; height: 32px; margin-bottom: 8px; background: var(--surface-2); border: 1px solid var(--line-hi); border-radius: 9px; } .tile-icon svg { width: 17px; height: 17px; } .tile-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .tile-t { font-size: 0.95rem; font-weight: 650; } .tile-s { font-size: 0.82rem; line-height: 1.5; 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; } /* The MetaTrader mark is a WIDE wordmark, not a square glyph. Squeezed into the 42px icon box it came out 24x4 and unreadable, so this tile's box grows to fit the logo instead of the logo shrinking to fit the box. */ .tile--logo .tile-icon { width: auto; min-width: 32px; padding: 0 10px; } .tile-logo { height: 15px; width: auto; max-width: 130px; object-fit: contain; } /* The MetaTrader wordmark ships white, which disappears on the light theme. Two files, one per ground; the theme picks which one is painted. */ .tile-logo--pale { display: none; } :root[data-theme="dark"] .tile-logo--ink { display: none; } :root[data-theme="dark"] .tile-logo--pale { display: block; } /* A blank canvas for a page that has not been built yet. */ /* ── 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); } /* The two answers on the connect card, each the full width of it: this is a choice between them, not a main action with an afterthought beside it. */ .choice-actions { display: grid; gap: 10px; margin-top: 22px; } .choice-actions .btn { width: 100%; } .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; } /* The Real group carries the account's own colour: a coloured pill on the title and the balance in the same ink, so the row that is actual money is the one the eye lands on. Demo stays quiet. Same in practice mode — the figure changes, the emphasis does not. */ .grp--real .grp-t { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; background: var(--real-tint); color: var(--real); } .grp--real .grp-t::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--real); box-shadow: 0 0 0 3px var(--real-tint); } .grp--real .acct-bal { color: var(--real); font-weight: 750; } /* 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