/* ============================================================ AES INVESTOMANIA — Global Design System Apple-inspired liquid/matte glass + financial-terminal density. ============================================================ */ /* Fonts are linked from each page's , not @import-ed here. An @import inside a stylesheet cannot start downloading until this file itself has been fetched and parsed — it serialises two round trips that should overlap. */ :root { /* ---------- Ground ---------- Very slightly warm blacks rather than neutral grey. Against a metallic gold, a pure-neutral ground reads cold and cheap; a few degrees of warmth is what makes the two feel like one material. */ --black: #0B0A09; --matte-black: #141210; --charcoal: #1C1917; --charcoal-2: #24211E; --hairline: rgba(232, 220, 196, 0.08); --hairline-strong: rgba(232, 220, 196, 0.15); /* ---------- Gold ---------- Antique / champagne gold, not signal yellow. Pure #FFD700 is a saturated primary — it reads as a warning colour and as "default yellow". This scale is desaturated and warmed toward brass, which is what actually reads as precious metal on a dark ground. */ --gold-pale: #E9DCBB; /* gold-tinted text, quiet emphasis */ --gold: #C6A464; /* the accent — borders, labels, numbers */ --gold-deep: #A2803F; /* pressed states, gradient floor */ --gold-shadow: #6E5424; /* the shadow side of a metal edge */ --gold-lit: #E0CB96; /* the lit top edge of a metal surface */ --gold-glow: rgba(198, 164, 100, 0.26); --gold-wash: rgba(198, 164, 100, 0.10); /* Four stops, not two. Real metal has a bright top edge, a broad mid-tone, a darker roll-off and a hint of bounce light at the bottom — a two-stop gradient just looks like a coloured rectangle. The stops are what make a filled button read as an object with a surface rather than as a fill. */ --gold-sheen: linear-gradient(168deg, #E0CB96 0%, #C6A464 42%, #AC8A48 76%, #BE9C5C 100%); --cream: #F5EEDD; --white: #FFFFFF; --on-gold: #171208; /* text that sits on a gold fill */ --text-primary: #F4F1EA; --text-secondary: #A7A199; --text-tertiary: #6E6862; --positive: #46C98B; --negative: #E8695F; --neutral: #A7A199; --glass-surface: rgba(255, 250, 240, 0.038); --glass-surface-hover: rgba(255, 250, 240, 0.062); --glass-border: rgba(232, 220, 196, 0.09); --glass-highlight: rgba(255, 250, 240, 0.055); /* ---------- Type scale ---------- */ /* Fraunces (a high-contrast optical-size serif) carries the display voice; Inter carries every working surface. One voice for identity, one for data — rather than one family doing both jobs badly. */ --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif; --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono-nums: 'Inter', -apple-system, sans-serif; /* ---------- Spacing ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* ---------- Radius ---------- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; /* ================= MATERIALS ================= Three material vocabularies, each with one job. Mixing them is only an improvement if the mixing is *rule-based* — if glass, soft-extrusion and metal appear at random the result reads as three unfinished designs stacked on top of each other. So: GLASS — for surfaces that genuinely float OVER content and need the content behind to stay legible through them: the top bar, modals, toasts, the sticky trading panel, the live banner. Blur is expensive (a compositor layer each) and meaningless on a surface with nothing behind it, so nothing else gets it. RELIEF — soft extrusion from the page's own surface, for small controls that should read as physically pressable: steppers, chips, toggles, the sound button. Light from above-left, so a raised control has a pale top edge and a dark underside, and a pressed or selected one inverts to inset. This is the state cue itself, which is why active chips don't need to shout in colour. METAL — actual brass: bevel, specular sweep, warm bounce light. Reserved for the few moments that carry value — the primary action, a ticker's plate, a podium rank. If everything is metal, nothing is. ============================================= */ /* GLASS */ --glass-blur: blur(20px) saturate(135%); --glass-blur-heavy: blur(30px) saturate(150%); --glass-edge: inset 0 1px 0 rgba(255, 252, 245, 0.10), inset 0 -1px 0 rgba(0, 0, 0, 0.32); /* RELIEF — the light source is above-left, at low intensity, because on a near-black ground a strong highlight looks like plastic rather than like a surface. */ --relief-light: rgba(255, 250, 238, 0.055); --relief-dark: rgba(0, 0, 0, 0.55); --relief-raised: -1px -1px 2px var(--relief-light), 2px 3px 6px var(--relief-dark); --relief-raised-lg: -2px -2px 4px var(--relief-light), 4px 6px 14px var(--relief-dark); --relief-pressed: inset 2px 2px 5px var(--relief-dark), inset -1px -1px 2px var(--relief-light); --relief-flat: 0 0 0 0 transparent; /* METAL */ --metal-bevel: inset 0 1px 0 rgba(255, 248, 226, 0.42), inset 0 -1px 0 rgba(70, 52, 18, 0.55), inset 1px 0 0 rgba(255, 248, 226, 0.14), inset -1px 0 0 rgba(70, 52, 18, 0.30); --metal-cast: 0 1px 1px rgba(0,0,0,0.45), 0 5px 14px rgba(70, 52, 18, 0.34); /* ---------- Shadow ---------- Two-part: a tight contact shadow plus a wide ambient one. A single soft blur is the thing that makes an interface look sprayed-on. */ --shadow-soft: 0 1px 2px rgba(0,0,0,0.5), 0 8px 24px rgba(0,0,0,0.32); --shadow-lift: 0 2px 4px rgba(0,0,0,0.5), 0 18px 44px rgba(0,0,0,0.44); --shadow-gold: 0 1px 0 rgba(246, 238, 214,0.28) inset, 0 6px 18px rgba(110, 84, 36,0.34); /* ---------- Motion ---------- */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-emphasis: cubic-bezier(0.2, 0.9, 0.24, 1); --dur-fast: 130ms; --dur-base: 220ms; --dur-slow: 380ms; color-scheme: dark; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; /* One low, wide warm lift from the top edge — enough to keep the page from reading as flat black, far short of a decorative glow. */ background: radial-gradient(120% 60% at 50% -20%, rgba(198, 164, 100, 0.055), transparent 62%), var(--black); background-attachment: fixed; color: var(--text-primary); font-family: var(--font-body); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; min-height: 100vh; } h1, h2, h3, h4 { font-family: var(--font-ui); font-weight: 700; letter-spacing: -0.018em; margin: 0; color: var(--white); } /* The serif is reserved for identity moments, never for working UI. */ .display-serif { font-family: var(--font-display); font-weight: 600; font-variation-settings: "opsz" 96, "SOFT" 0, "WONK" 0; letter-spacing: -0.015em; } p { margin: 0; } a { color: inherit; text-decoration: none; } /* Buttons carry a user-agent background (`buttonface`) and border by default. Any component that styles a button but doesn't explicitly null those out — the scenario tabs did exactly this — renders as a grey system box on a black page. Reset once here; every component that wants a surface declares its own. */ button { font-family: inherit; font-size: inherit; cursor: pointer; background: none; border: none; color: inherit; padding: 0; -webkit-tap-highlight-color: transparent; } button:disabled { cursor: not-allowed; } input, select, textarea { font-family: inherit; color: var(--text-primary); } /* ---------- Focus states ---------- */ :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 5px; } /* A pointer click should never leave a ring behind; a keyboard tab always should. */ :focus:not(:focus-visible) { outline: none; } /* ---------- Scrollbars ---------- */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(232, 220, 196, 0.13); border-radius: 10px; border: 2px solid var(--black); } ::-webkit-scrollbar-thumb:hover { background: rgba(198, 164, 100, 0.34); } * { scrollbar-width: thin; scrollbar-color: rgba(232, 220, 196,0.16) transparent; } /* ---------- Numeric / tabular figures ---------- */ .num, .financial-table td, .stat__value { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* ---------- Layout primitives ---------- */ .page { max-width: 1360px; margin: 0 auto; padding: var(--space-6) var(--space-5) var(--space-8); } .page--narrow { max-width: 880px; } .eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-tertiary); } .section-title { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); margin: 0 0 var(--space-3); } .divider { border: none; border-top: 1px solid var(--hairline); margin: var(--space-5) 0; } .positive { color: var(--positive) !important; } .negative { color: var(--negative) !important; } .gold-text { color: var(--gold); } .gold-pale { color: var(--gold-pale); } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ---------- Entrance animation ---------- */ @keyframes riseIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .page > * { animation: riseIn var(--dur-slow) var(--ease-out-expo) both; } .page > *:nth-child(1) { animation-delay: 0ms; } .page > *:nth-child(2) { animation-delay: 40ms; } .page > *:nth-child(3) { animation-delay: 80ms; } .page > *:nth-child(4) { animation-delay: 120ms; } .page > *:nth-child(5) { animation-delay: 160ms; } @media (prefers-reduced-motion: reduce) { .page > * { animation: none; } } /* ---------- Number transitions ---------- */ .num-animated { transition: color var(--dur-base) var(--ease-standard); } /* ---------- Responsive page padding ---------- */ @media (max-width: 768px) { .page { padding: var(--space-5) var(--space-4) var(--space-7); } } /* ---------- Credit line ---------- Present on every page. A real link to the developer's Instagram, so it reads as one: an outlined control at secondary-text contrast, with the handle in the accent colour. Still below the interface in weight — no fill, no shadow, no motion beyond the hover colour. */ .site-credit { display: flex; justify-content: center; padding: var(--space-6) var(--space-5) var(--space-5); } .site-credit__link { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 6px 8px; min-height: 38px; padding: 8px 14px; border: 1px solid var(--hairline-strong); border-radius: var(--radius-sm); font-size: 13px; line-height: 1.3; color: var(--text-secondary); text-decoration: none; transition: color var(--dur-fast), border-color var(--dur-fast), background-color var(--dur-fast); } .site-credit__icon { flex-shrink: 0; color: var(--gold); } .site-credit__handle { color: var(--gold-pale); font-weight: 600; } .site-credit__link:hover { color: var(--text-primary); border-color: rgba(198, 164, 100, 0.5); background-color: rgba(198, 164, 100, 0.06); } .site-credit__link:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } .site-credit__link:active { background-color: rgba(198, 164, 100, 0.12); } @media (max-width: 700px) { .site-credit { padding: var(--space-5) var(--space-4); } .site-credit__link { font-size: 12.5px; max-width: 100%; } }