/* ========================================================================== base.css — design tokens, reset, and global typography -------------------------------------------------------------------------- Load order matters. This file must come FIRST because every other stylesheet consumes the custom properties (CSS variables) defined here. Anything you might want to re-brand later (colours, max page width) lives in the :root block below. Change it once here and the whole site follows. ========================================================================== */ :root { /* --- Surfaces (darkest -> lightest) ---------------------------------- */ --bg: #080b09; /* page background */ --bg-2: #0c110e; /* slightly raised background (gradient ends) */ --surface: #111713; /* cards, steps, feature tiles */ --surface-2: #17201a; /* hovered / emphasised card */ /* --- Text ------------------------------------------------------------ */ --text: #edf2ee; /* primary copy */ --muted: #9baaa1; /* secondary copy, paragraphs */ --muted-2: #6c7a72; /* tertiary copy, footnotes, labels */ /* --- Brand accents ---------------------------------------------------- Derived from the logo, then desaturated so nothing reads as neon. Logo source colours: green #088c5b, yellow #ffd11b, red #ee395c. Green leads; gold is the secondary voice (Courier section); red is held in reserve and deliberately unused on this page. ---------------------------------------------------------------------- */ --accent: #4fa87c; /* muted green — primary CTA, highlights */ --accent-2: #d4a94e; /* muted gold — secondary accent, Courier */ --accent-3: #2d6b4d; /* deep green — ambient glows, illustration fill */ /* --- Lines & layout -------------------------------------------------- */ --line: rgba(207, 226, 214, 0.12); /* hairline borders on dark surfaces */ --maxw: 1160px; /* max content width */ } /* --- Reset ------------------------------------------------------------ */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; /* anchor links (#customer, #contact) glide */ } body { font-family: 'Inter', system-ui, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; overflow-x: hidden; /* ambient glows overflow the viewport by design */ -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } /* --- Typography ------------------------------------------------------- */ /* Sora is the display face used for headings and the wordmark. Inter (set on body above) carries all body copy. */ h1, h2, h3, .brand-name { font-family: 'Sora', sans-serif; letter-spacing: -0.02em; } /* --- Amharic typography ------------------------------------------------ When the language switcher sets , swap to Noto Sans Ethiopic so Ge'ez script renders correctly. Latin fonts are kept as fallbacks for any untranslated strings and the Adrash wordmark. See assets/js/language.js. ---------------------------------------------------------------------- */ html[lang="am"] body { font-family: 'Noto Sans Ethiopic', 'Inter', sans-serif; } html[lang="am"] h1, html[lang="am"] h2, html[lang="am"] h3, html[lang="am"] h4 { font-family: 'Noto Sans Ethiopic', 'Sora', sans-serif; } /* --- Shared layout helper --------------------------------------------- */ /* .wrap centres content and provides the page gutter. */ .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }