/* ========================================================================== Nimbuz design tokens Extracted and normalised from nimbuz.tech/assets/nimbuz-landing-page.css Single source of truth — the portal should consume these too. ========================================================================== */ /* Two themes live here. Dark is the default and the one the brand was designed in; light is a full override of the surface, ink and fill tokens further down. Nothing outside this file should hardcode a colour — if a rule needs a shade that isn't a token, add the token here in both themes instead, or the light theme will quietly break. The token *names* are historical (`--bg-dark` is the page background in both themes, not "the dark one"). Renaming them would touch every rule in the stylesheet for no visual gain. */ :root { color-scheme: dark; /* --- Surfaces: near-black, violet-tinted --- */ --bg-dark: hsl(250, 24%, 9%); --bg-dark-2: hsl(250, 20%, 7%); --bg-deep: #140505; /* hero radial gradient terminus */ --bg-section: linear-gradient(180deg, #0b0b0b, #0f0f0f); /* --- Brand: warm orange --- */ --accent: #ff6b3a; --accent-2: #ff8a4c; --accent-deep: #ce5718; /* gradient end for buttons/icons */ /* --- Neutrals --- */ --cream: #fdf3ea; --cream-2: #f7e8da; --ink: #e9e6e2; --ink-soft: rgba(233, 230, 226, .68); --ink-faint: rgba(233, 230, 226, .45); --ink-dark: #241005; --ink-dark-soft: #5a4436; /* --- Lines & fills --- */ --line: rgba(255, 255, 255, .06); --line-faint: rgba(255, 255, 255, .04); --line-strong: rgba(255, 255, 255, .12); --fill-card: rgba(255, 255, 255, .035); --fill-raised: rgba(255, 255, 255, .06); --fill-hover: rgba(255, 255, 255, .05); --fill-strong: rgba(255, 255, 255, .1); --fill-input: rgba(255, 255, 255, .04); --fill-gradient: linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02)); --inset: rgba(0, 0, 0, .3); --dot: rgba(255, 255, 255, .16); --accent-tint: rgba(255, 107, 58, .12); --accent-tint-soft: rgba(255, 107, 58, .06); /* The wash behind the auth panel. Larger and warmer than --accent-tint; separate token because the two want different values in light mode. */ --accent-glow: rgba(255, 107, 58, .18); --scrim: rgba(8, 6, 12, .68); /* behind a modal */ --on-green: #06210f; /* text sitting on a green fill */ --on-accent: #fff; /* text sitting on an accent fill */ /* Dark mode's --red is a light coral, so text on it has to be dark. In light mode --red is a deep brick and the same text has to be white — hence a token rather than a fixed colour on the button. */ --on-red: #2c0902; /* Translucent header backgrounds — they sit over scrolling content, so they can't just be --bg-dark. */ --header-bg: hsl(250 24% 9% / .78); --header-bg-stuck: hsl(250 24% 7% / .92); /* --- Semantic --- */ --green: #51d681; --red: #ff7d66; --amber: #f4b94a; /* Readable text versions of the above, for alert bodies. */ --green-ink: #a6ecc0; --red-ink: #ffb8ab; --amber-ink: #f3d79b; /* Alert backgrounds and borders. Tints rather than the solid colour, so an alert sits on the page instead of shouting from it. */ --green-tint: rgba(81, 214, 129, .10); --red-tint: rgba(255, 125, 102, .10); --amber-tint: rgba(244, 185, 74, .09); --green-edge: rgba(81, 214, 129, .34); --red-edge: rgba(255, 125, 102, .34); --amber-edge: rgba(244, 185, 74, .30); /* --- Geometry --- */ --radius: 18px; --radius-lg: 22px; --radius-sm: 12px; --pill: 999px; --wrap: 1180px; --gutter: 32px; --section-y: 100px; /* --- Type --- */ --disp: 'Baloo Bhai 2', system-ui, sans-serif; --body: 'Baloo Bhai 2', system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace; /* --- Elevation --- */ --shadow-accent: 0 10px 30px -10px rgba(235, 95, 40, .65); --shadow-card: 0 20px 50px -30px rgba(0, 0, 0, .85); /* --- Motion --- */ --ease: cubic-bezier(.2, .9, .2, 1); } /* ========================================================================== LIGHT THEME Set by theme.js as data-theme="light" on . Only surfaces, ink, lines and fills change — the accent, the geometry and the type are the brand and stay put. The neutrals are warm rather than pure grey. A cool grey under that orange reads as cheap, and the dark theme's violet-tinted black has a warmth to it that a light theme needs to answer. ========================================================================== */ :root[data-theme="light"] { color-scheme: light; --bg-dark: #fbf8f5; --bg-dark-2: #f3ede7; --bg-deep: #f8ece3; --bg-section: linear-gradient(180deg, #fdfbf9, #f5efe9); --ink: #241005; --ink-soft: rgba(36, 16, 5, .72); --ink-faint: rgba(36, 16, 5, .5); --line: rgba(36, 16, 5, .11); --line-faint: rgba(36, 16, 5, .07); --line-strong: rgba(36, 16, 5, .2); --fill-card: rgba(255, 255, 255, .72); --fill-raised: #fff; --fill-hover: rgba(36, 16, 5, .045); --fill-strong: rgba(36, 16, 5, .09); --fill-input: #fff; --fill-gradient: linear-gradient(160deg, #fff, rgba(255, 255, 255, .55)); --inset: rgba(36, 16, 5, .05); --dot: rgba(36, 16, 5, .18); --accent-tint: rgba(255, 107, 58, .12); --accent-tint-soft: rgba(255, 107, 58, .07); --accent-glow: rgba(255, 107, 58, .13); --scrim: rgba(40, 24, 12, .38); --on-green: #05230f; --on-red: #fff; --header-bg: hsl(30 40% 98% / .82); --header-bg-stuck: hsl(30 40% 97% / .95); /* Same hues, darkened until they clear contrast on a light fill. */ --green: #1c9a4c; --red: #cf3c22; --amber: #a97400; --green-ink: #14622f; --red-ink: #8f2814; --amber-ink: #6d4a00; /* Light needs its own tints: the dark theme's are mixed for a near-black backdrop and wash out to nothing on cream. */ --green-tint: rgba(28, 154, 76, .10); --red-tint: rgba(207, 60, 34, .08); --amber-tint: rgba(169, 116, 0, .10); --green-edge: rgba(28, 154, 76, .30); --red-edge: rgba(207, 60, 34, .28); --amber-edge: rgba(169, 116, 0, .28); --shadow-accent: 0 10px 26px -12px rgba(235, 95, 40, .5); --shadow-card: 0 18px 40px -28px rgba(60, 30, 10, .45); }