/* ============================================================================ ALMEER SECURITIES — GLOBAL DESIGN SYSTEM (tokens) ============================================================================ Every colour, size, radius, shadow and spacing step in the site resolves from this file. Nothing downstream hard-codes a brand colour, so the whole identity can be re-themed by editing the block below and nothing else. KTRADE REBRAND (branch rebrand/ktrade-palette). Values sampled from kasb.com computed styles. Every old value survives as a trailing comment, so the emerald+gold identity can be restored line by line: signature green #17A013 (large fills only — 3.46:1, no small text) action green #007A36 (the ONLY green under white text — 5.47:1) charcoal chrome #211D1A (header/footer) page #FFFFFF / #F4F5F5 Change the six --brand-* values and the entire site follows. ========================================================================= */ :root { /* ---- BRAND (sampled from the live site — do not guess new values) ----- */ --brand-primary: #17A013; /* was #0C3D22 */ --brand-primary-deep: #007A36; /* was #021709 */ --brand-primary-soft: #23B052; /* was #092917 */ --brand-accent: #17A013; /* was #F3BA26 */ --brand-accent-soft: #C8ECD4; /* was #1E1A0B */ --brand-ink: #FFFFFF; /* was #F7F2E3 */ /* ---- CHROME ---------------------------------------------------------- The top bar, header, mega panels, mobile drawer and footer are DARK in every theme, so that a light inner page still reads as the same site as the dark homepage. They therefore resolve from --chrome-* rather than from --color-*. A light theme overrides --color-* only; nothing below changes, so the chrome cannot accidentally turn light and strand cream text on a cream bar. */ --chrome-bg: #0D3524; /* was #021709 */ --chrome-bg-blur: rgba(13, 53, 36, .90); /* was rgba(2, 23, 9, .88) */ --chrome-bg-deep: #082418; /* was #000000 */ --chrome-surface: #124531; /* was #092917 */ --chrome-ink: #F7F3E8; /* was #F7F2E3 */ --chrome-ink-muted: #D9C98F; --chrome-ink-subtle: #9FB3A5; /* was #7C8C80 */ --chrome-border: rgba(201, 162, 39, .25); /* was #17301F */ --chrome-border-strong: rgba(201, 162, 39, .45); /* was #27452F */ /* ---- SEMANTIC COLOUR — THE READING SURFACE --------------------------- THIS BLOCK IS LIGHT, AND THAT IS THE WHOLE REDESIGN. The chrome above stays dark and the main content area below is pale, so every page reads: dark header -> dark-green hero -> light content -> black footer. Because every component downstream already resolved from --color-*, flipping these values re-themes the entire site at once — no page has its own colours and none needed editing to follow. CONTRAST IS MEASURED, NOT ASSUMED. Ratios are recorded beside each value against the surface it is used on. AA needs 4.5:1 for body text and 3:1 for large text and UI borders. */ --color-primary: #17A013; /* was #0C3D22 */ --color-secondary: #23B052; /* was var(--brand-accent) */ --color-accent: #17A013; /* was var(--brand-accent) */ /* Gold is the brand and it stays the brand — as a FILL. As TEXT on a pale page #F3BA26 measures 1.7:1, which is unreadable, and it is what links and small-caps eyebrows used on the dark theme. Gold text therefore resolves to a deepened version of the same hue at 5.2:1, while the gold itself is untouched wherever it is a button, a rule or an icon. */ --color-accent-text: #007A36; /* was #8A6206 */ --color-text: #334155; /* was #243129 */ /* Section headings. Both values were navy (#102A43) and teal (#0F766E) and have been folded back into the green-and-gold brand. The rule is NOT --brand-accent #F3BA26. That gold measures 1.62:1 against this page background — it would be a decorative element nobody can see, on 239 headings. #8A6206 is the same hue deepened for a light surface and measures 5.03:1, so the mark stays gold AND stays visible. */ --color-heading: #1E293B; /* was #0C3D22 */ --color-heading-rule: #17A013; /* was #8A6206 */ --color-text-muted: #6F6F6F; /* was #58635C. KTrade uses #757575, but that is 4.22:1 on the #F4F5F5 alt surface — fails AA. Darkened until it passes everywhere it appears. */ --color-text-subtle: #6F6F6F; /* was #626D66 — same reason as muted above */ --color-text-inverse: #FFFFFF; /* was #F7F2E3 */ --color-on-accent: #FFFFFF; /* was #04150A */ --color-bg: #FFFFFF; /* was #F7F5EF */ --color-bg-alt: #F4F5F5; /* was #EDF4EE */ --color-bg-tint: #FFFFFF; /* cards, panels, raised surfaces */ --color-bg-inverse: #211D1A; /* was var(--brand-primary-deep) */ --color-border: #E4E4E4; /* was rgba(6, 42, 24, .12) */ --color-border-strong: rgba(16, 16, 16, .26); /* was rgba(6, 42, 24, .26) */ /* Status colours darkened for a pale surface. The dark-theme green and red were tuned for a near-black page and fail contrast on this one. */ --color-success: #007A36; /* was #1E6B42 */ --color-success-bg: #E8F6EC; /* was #E7F2EB */ --color-warning: #8A6206; --color-warning-bg: #FDF6E4; --color-error: #A3342B; --color-error-bg: #FBEBE9; /* ---- KTRADE REBRAND ADDITIONS ---------------------------------------- */ --brand-action: #007A36; /* the ONLY green that may carry white text (5.47:1) */ --brand-accent-on-dark: #5ABC67; /* green accents on charcoal (7.03:1 on #211D1A) */ --font-nav: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --r-btn: 5px; --gradient-hero: linear-gradient(to right, #C8ECD4, #5ABC67); /* ---- MARKET DATA ON DARK BANDS --------------------------------------- #1E6B42 and #A3342B are correct on the light page, but measure 2.87:1 and 2.73:1 against #021709 — a rising price would be almost unreadable on a dark band. These are the same semantics tuned for that surface. Verified: 9.78:1 and 7.66:1 on --brand-primary-deep, and 6.48:1 / 5.07:1 against --brand-primary, so "up" can never be mistaken for the surface. */ --color-success-on-dark: #6FCF97; --color-error-on-dark: #F08A80; /* ---- WASHES AND OVERLAYS ---------------------------------------------- Every translucent value in the site, named once. main.css previously carried 55 distinct rgba() literals; they all reduce to six base colours differing only in alpha, which is what a token is for. Alphas are snapped to a shared scale — the largest shift is 0.03, which is below the threshold of visible change. Edit a base colour above and every wash derived from it follows. Bases: white | --brand-accent | --brand-primary | --brand-primary-deep --brand-ink | black */ --wash-black-45: rgba(0, 0, 0, 0.45); --wash-brand-04: rgba(23, 160, 19, .04); --wash-brand-10: rgba(23, 160, 19, .1); --wash-brand-00: rgba(23, 160, 19, 0); --wash-brand-03: rgba(23, 160, 19, 0.03); --wash-brand-22: rgba(23, 160, 19, 0.22); --wash-brand-35: rgba(23, 160, 19, 0.35); --wash-brand-42: rgba(23, 160, 19, 0.42); --wash-brand-45: rgba(23, 160, 19, 0.45); --wash-brand-55: rgba(23, 160, 19, 0.55); --wash-brand-62: rgba(23, 160, 19, 0.62); --wash-brand-70: rgba(23, 160, 19, 0.7); --wash-brand-75: rgba(23, 160, 19, 0.75); --wash-brand-94: rgba(23, 160, 19, 0.94); --wash-gold-00: rgba(90, 188, 103, 0); --wash-gold-08: rgba(90, 188, 103, 0.08); --wash-gold-10: rgba(90, 188, 103, 0.1); --wash-gold-28: rgba(90, 188, 103, 0.28); --wash-gold-35: rgba(90, 188, 103, 0.35); --wash-gold-42: rgba(90, 188, 103, 0.42); --wash-gold-45: rgba(90, 188, 103, 0.45); --wash-gold-55: rgba(90, 188, 103, 0.55); --wash-gold-62: rgba(90, 188, 103, 0.62); --wash-gold-70: rgba(90, 188, 103, 0.7); --wash-gold-82: rgba(90, 188, 103, 0.82); --wash-ink-04: rgba(255, 255, 255, 0.04); --wash-ink-22: rgba(255, 255, 255, 0.22); --wash-ink-35: rgba(255, 255, 255, 0.35); --wash-ink-42: rgba(255, 255, 255, 0.42); --wash-ink-45: rgba(255, 255, 255, 0.45); --wash-ink-82: rgba(255, 255, 255, 0.82); --wash-ink-90: rgba(255, 255, 255, 0.9); --wash-white-04: rgba(255, 255, 255, 0.04); --wash-white-08: rgba(255, 255, 255, 0.08); --wash-white-12: rgba(255, 255, 255, 0.12); --wash-white-18: rgba(255, 255, 255, 0.18); --wash-white-22: rgba(255, 255, 255, 0.22); --wash-white-35: rgba(255, 255, 255, 0.35); --wash-white-28: rgba(255, 255, 255, 0.28); --wash-white-55: rgba(255, 255, 255, 0.55); --wash-white-65: rgba(255, 255, 255, 0.65); --wash-white-70: rgba(255, 255, 255, 0.7); --wash-white-82: rgba(255, 255, 255, 0.82); /* ---- TYPOGRAPHY ------------------------------------------------------ */ --font-display: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --font-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; /* Fluid type scale — clamp() so nothing needs breakpoint overrides. */ --fs-display: clamp(2.6rem, 1.6rem + 3.4vw, 4.4rem); --fs-h1: clamp(2.1rem, 1.5rem + 2.2vw, 3.2rem); --fs-h2: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem); --fs-h3: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem); --fs-lead: clamp(1.06rem, 1rem + 0.4vw, 1.25rem); /* 17px on desktop, never below 16px on a phone. Set in rem so a visitor who has raised their browser's default text size still gets the increase. */ --fs-body: clamp(1rem, 0.955rem + 0.19vw, 1.0625rem); --fs-sm: 0.94rem; --fs-xs: 0.82rem; --lh-tight: 1.14; --lh-snug: 1.32; /* 1.75. On a light page with a long measure this is the difference between text that is read and text that is skimmed. */ --lh-normal: 1.75; --ls-tight: -0.021em; --ls-wide: 0.14em; --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; /* ---- SPACING (4px base) ---------------------------------------------- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 2.5rem; --sp-8: 3rem; --sp-9: 4rem; --sp-10: 5rem; --sp-11: 6.5rem; --sp-12: 8rem; /* ---- LAYOUT ---------------------------------------------------------- THREE MEASURES, ONE PURPOSE EACH. The widest is for grids and dashboards, the middle for standard page content, the narrowest for prose — because a paragraph that runs the full width of a laptop is genuinely harder to read: the eye loses the start of the next line. */ --container: 1180px; /* wide — card grids, tables, dashboards */ --container-content: 960px; /* standard page content */ --container-read: 740px; /* articles and long-form prose */ /* Kept as an alias: existing markup uses .narrow in several places. */ --container-narrow: var(--container-content); /* 20px on a phone, 28 on a tablet, 32 on desktop — exactly the brief. */ --gutter: clamp(1.25rem, 0.55rem + 1.6vw, 2rem); /* Vertical rhythm: 40-56 mobile, 56-72 tablet, 72-96 desktop. One token, so no section can drift out of step with the rest of the site. */ --section-y: clamp(2.5rem, 1.1rem + 4.6vw, 6rem); /* ---- RADIUS ---------------------------------------------------------- */ --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px; /* ---- ELEVATION ------------------------------------------------------- Tinted with the brand green rather than neutral black: a pure grey shadow on a warm off-white page reads as dirt rather than depth. Kept very light — the brief asks for a calm page, and heavy shadows are the fastest way to make a financial site look like a template. */ --shadow-xs: 0 1px 2px rgba(16, 16, 16, .06); /* was 0 1px 2px rgba(6, 42, 24, .06) */ --shadow-sm: 0 2px 10px rgba(16, 16, 16, .07); /* was 0 2px 10px rgba(6, 42, 24, .07) */ --shadow-md: 0 10px 28px rgba(16, 16, 16, .10); /* was 0 10px 28px rgba(6, 42, 24, .10) */ --shadow-lg: 0 20px 56px rgba(16, 16, 16, .13); /* was 0 20px 56px rgba(6, 42, 24, .13) */ /* For elements sitting ON a dark band, where the light shadows vanish. */ --shadow-dark: 0 20px 56px rgba(0, 0, 0, .55); /* ---- MOTION ---------------------------------------------------------- */ --ease: cubic-bezier(.22, .61, .36, 1); --dur-fast: 140ms; --dur: 220ms; --dur-slow: 380ms; /* ---- LAYERS ---------------------------------------------------------- */ --z-header: 100; --z-drawer: 200; --z-overlay: 190; /* Scroll buttons: above the Ask Almeer chat launcher (60) so they are always reachable, but below the drawer overlay (190) so an open menu covers them rather than floating on top of it. */ --z-float: 80; /* ---- COMPONENT SIZES ------------------------------------------------- */ --topbar-h: 40px; --header-h: 76px; --header-h-compact: 64px; } /* Users who ask for less motion get none of it. */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; } }