/* Naveed Rashid — Gold account. Obsidian and bullion: plain, warm, human. */ /* ============================================================================ THE TWO VOICES — both served from this origin, both under `default-src 'self'` There is no CDN and no third-party request anywhere on this site, so the faces are files in static/fonts and nothing else. Only the Latin ranges are carried (the interface is English and the figures are Arabic numerals); a name with an accent in it pulls the -ext file, and nothing else ever does. Inter everything read as data: the balance, every table, every label and every control. It is here for one reason above the rest — its tabular figures are drawn on one width, so a column of dirhams lines up digit under digit and a price does not jiggle sideways when it ticks. Instrument Serif the desk's own name, and the few headings that carry it. A high-contrast display serif used only at 19px and above, where its hairlines are an asset instead of a risk. `font-display:swap` on both: the page is readable in the system face from the first frame and re-sets when the file lands — a statement is never blank while a font is in flight. size-adjust holds the fallback close to the real face, so that re-set moves as little as it can. Licence: SIL Open Font Licence 1.1 — static/fonts/OFL.txt. ============================================================================ */ @font-face{font-family:"Inter";font-style:normal;font-weight:400 800;font-display:swap; src:url(/fonts/inter-latin.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC, U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215, U+FEFF,U+FFFD} @font-face{font-family:"Inter";font-style:normal;font-weight:400 800;font-display:swap; src:url(/fonts/inter-latin-ext.woff2) format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304, U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0, U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap; src:url(/fonts/instrumentserif-latin.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC, U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215, U+FEFF,U+FFFD} @font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap; src:url(/fonts/instrumentserif-latin-ext.woff2) format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304, U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0, U+2113,U+2C60-2C7F,U+A720-A7FF} *{box-sizing:border-box;margin:0;padding:0} :root{ /* the identity — unchanged, and the only place these colours are written */ --bg:#05070c; --panel:#0c111e; --line:#1b2437; --line2:#2a3854; --txt:#f0f3fa; --mut:#9aa8c2; --gold:#d9b45b; --gold2:#f0d48a; --golddark:#8a6a1f; --up:#37d188; --down:#ff7a70; --paper:#f7f4ec; --paper-txt:#1c1f2c; --paper-mut:#5c6172; --paper-line:#dcd6c6; /* ---- the metal, as a ramp -------------------------------------------- A single flat gold is paint. Five steps of one hue is metal: the specular where the light hits, the two working tones, the deep body and the shadow it casts. Every gold surface below is built from these and nothing else — which is why a button, a chip and a hairline all read as the same alloy. --gold (the core) and --gold2 (the light) keep their names and their values: forty rules and every alpha wash in the sheet are written against them. */ --gold-lit:#fdf3d6; --gold-hi:#f7e3ae; --gold-mid:#d9b45b; --gold-deep:#b08a3c; --gold-shade:#7d5f23; /* the light the metal throws — used as a shadow colour, never as a fill */ --gold-glow:#d9b45b3d; /* ---- the elevation ladder -------------------------------------------- Five surfaces, and each one is a measurable step above the last. The old sheet had them all within a hair of each other, which is precisely why the interface looked flat: a card and the page it sat on were the same black. */ --lift1:#070910; /* the deepest inset: an input, a code, a well */ --lift2:#090d17; /* a recessed box inside a panel */ --lift3:#0b101c; /* a low panel */ --lift4:#0e1524; /* a card that has to come off the page */ --lift5:#131c30; /* a hover, a control, the top of a gradient */ /* ---- the two voices --------------------------------------------------- */ --ui:"Inter",-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --display:"Instrument Serif",Georgia,"Times New Roman",serif; --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; /* ---- depth: four shadows, and every raised thing uses one of them ----- Each is a pair — a tight contact shadow that sits the element on the page, and a wide soft one that gives it its height — plus a 1px inner highlight along the top edge, which is what makes a surface read as lit from above rather than simply filled. */ --sh1:0 1px 2px #00000059, 0 2px 8px -2px #0000006b; --sh2:0 2px 4px #00000066, 0 10px 26px -10px #000000a6; --sh3:0 4px 10px -2px #00000073, 0 22px 50px -18px #000000b8; --sh4:0 8px 20px -6px #00000080, 0 40px 90px -28px #000000cc; --edge:inset 0 1px 0 #ffffff0f; /* the lit top edge of a raised surface */ --edge-soft:inset 0 1px 0 #ffffff0a; /* ---- one rhythm: spacing on the 4px grid, and nothing off it ---------- Every gap, pad and margin in the interface below is one of these seven. (The printed statement keeps its own document metrics — see the note at the top of the paper section — because it is a replica of the PDF.) */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; /* ---- one voice: five type levels, nothing in between ------------------ t1 micro · t2 small · t3 body · t4 strong · t5 display (the balance) */ --t1:11px; --t2:13px; --t3:16px; --t4:19px; --t5:clamp(32px,6.2vw,46px); /* ---- corners + motion ------------------------------------------------- */ --r1:8px; --r2:11px; --r3:16px; --r4:20px; --fast:140ms; --slow:180ms; --ease:cubic-bezier(.4,0,.2,1); } html,body{background:var(--bg);color:var(--txt); font:var(--t3)/1.5 var(--ui); -webkit-font-smoothing:antialiased} /* Inter's own contextual alternates: a straight-sided `l`, a `1` that cannot be read as an `l`, and the disambiguated zero. On a screen where every other line is a figure, that is legibility, not typography for its own sake. */ body{font-feature-settings:"cv05" 1,"cv09" 1,"ss03" 1;font-optical-sizing:auto; letter-spacing:-.006em} /* ============================================================================ THE LIGHT IN THE ROOM The page is not a flat black rectangle: it is an obsidian surface with the desk's own light on it. Four layers, all of them in ONE fixed pseudo-element behind the content, so they cost one paint, never move when the page scrolls, and cannot touch the layout of a single element above them: 1. a warm gold bloom off the top right — the light the metal is lit by 2. a cold blue counter-light low on the left, which is what stops the black going muddy where the two meet 3. a guilloché: two crossed hairline rasters at 2% — the engine-turned engraving on a share certificate or a banknote, at the strength where it is felt rather than seen. It is what the eye reads as "this is printed on something", and it is drawn by the browser from two gradients rather than carried as a file. 4. film grain — a single tile of fractal noise at 3.5%, tiled. It takes the banding out of the two big gradients above (a 1400px gradient over a near-black quantises into visible steps on an 8-bit panel) and gives the surface a texture instead of a vacuum. `z-index:-1` + `pointer-events:none`: nothing here is ever hit-tested, focused, read aloud, or in the way. Print puts it out entirely — see the print block. ============================================================================ */ body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; background: radial-gradient(1200px 620px at 88% -12%, #d9b45b1c, transparent 62%), radial-gradient(900px 540px at 4% 104%, #1c3a6b2e, transparent 70%), repeating-linear-gradient(58deg, #ffffff05 0 1px, transparent 1px 7px), repeating-linear-gradient(-58deg, #ffffff04 0 1px, transparent 1px 7px), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E"), var(--bg); background-size:auto,auto,auto,auto,160px 160px,auto; background-repeat:no-repeat,no-repeat,repeat,repeat,repeat,no-repeat} /* the guilloché is a texture, not a pattern to be read: it fades out entirely on a phone, where a 7px raster on a 3x screen becomes moiré */ @media screen and (max-width:620px){ body::before{background-image: radial-gradient(760px 420px at 92% -14%, #d9b45b1a, transparent 62%), radial-gradient(620px 380px at 0% 104%, #1c3a6b26, transparent 70%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E"); background-size:auto,auto,160px 160px; background-repeat:no-repeat,no-repeat,repeat} } /* what the cursor leaves behind when a figure is dragged over: the desk's gold, not the browser's blue */ ::selection{background:#d9b45b3d;color:#fff8e4} /* the scrollbars are part of the room. Thin, dark, and gold under the thumb — the two properties Firefox understands, and the shadow-parts webkit does. */ *{scrollbar-width:thin;scrollbar-color:#2a3854 transparent} ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:#22304f;border-radius:99px; border:2px solid transparent;background-clip:content-box} ::-webkit-scrollbar-thumb:hover{background:#3d4f77;background-clip:content-box} /* Every figure a customer can read or add up is tabular: the digits line up in a column, so two rows can be compared by eye and a price does not jiggle sideways when it ticks. (.num stays for the elements JS marks by hand.) */ .num,.hero-equity,.hero-meta,.hero-avail,.hero-cap,.acct-chip,.mkbar,.stat .v, .ov b,.meta b,.cap-row span:last-child,.preview .main,.preview.big,.total-row b, .j-ts,input[type=number],.otp-input,.sec-input,.adm-table td.num, .st .r,th.r,td.up,td.down{font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1} button{font-family:inherit} /* Keyboard only: whoever is tabbing can see where they are. A mouse or a thumb never triggers :focus-visible, so nothing about the design changes for touch. */ :focus-visible{outline:2px solid var(--gold2);outline-offset:2px} .btn:focus-visible,button.big:focus-visible,.mid:focus-visible,.x:focus-visible,.step:focus-visible{ outline:2px solid var(--gold2);outline-offset:3px} /* A button that is waiting on the server says so in its own label; this only keeps the colour from looking "live" while it is not. */ button:disabled{cursor:default;opacity:.62} .busy{position:relative} .step:disabled,button.big:disabled{opacity:.7} /* ============ text for a screen reader, and nothing for the eye ============ The same class the skip link, the loading announcements and the live region use: out of the flow (a 1px clipped box), so it takes no space and moves no pixel — which also means it can never appear in a screenshot or a printed sheet. */ .sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} /* ============ the skip link: the first thing a keyboard meets ============ Off the top of the page until it is focused, so a mouse, a thumb and every screenshot see nothing at all; the moment Tab reaches it, it is a gold button over the header that jumps straight to the content. */ .skip-link{position:absolute;left:var(--s3);top:var(--s3);z-index:200; transform:translateY(-320%);background:var(--gold);color:#181203;font-weight:700; font-size:var(--t2);padding:var(--s2) var(--s4);border-radius:var(--r2); text-decoration:none;transition:transform var(--fast) var(--ease)} .skip-link:focus{transform:none} /* ============ the page's own closing line (a real