/* ================================================================ * demo-engineering-1.css — Framo theme for the Engineering demo * * The colors, fonts and layout settings of the Engineering demo (a * safety orange for the actions, graphite for the dark slabs, steel * for the drawing lines, concrete for the stone tones and a signal * yellow used rarely, on white and concrete grounds). Its pages load * this file after the template's own CSS, so a value set here wins. * Each brand color generates its own scale of tints and shades — * change one line, the whole palette follows. * * Your own CSS goes in custom.css, which loads after this file. * ================================================================ */ /* Body, heading and code fonts (Google Fonts). Change a family here, then name it in --font-sans / --font-heading below. Keep JetBrains Mono in the URL: code blocks use it (--font-mono). This @import must stay the first rule in the file. Each page also preloads this URL in its (the line) so the fonts arrive sooner: after changing it here, replace it in the pages too, or delete that line. Schibsted Grotesk (400..900) sets the headings and figures (700, with 500 for the second half of a title); Inter the text. */ @import url("https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400..900&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"); /* Dark scheme: take ONE of these two lines out of this comment. @import url("../dark.css"); the whole site dark @import url("../dark.css") (prefers-color-scheme: dark); dark when the visitor's system is */ :root { /* ------------------------------------------------------------ * BRAND COLORS * ------------------------------------------------------------ */ --color-primary-base: #f26322; /* main color: safety orange for buttons, links, focus and the hero full stop; labels on it are white */ --color-secondary-base: #1b1e22; /* second color: graphite, the ink of the dark slabs; the dark scheme takes its hue */ --color-tertiary-base: #808c98; /* third color: steel, the drawing lines (dimension lines, crosshairs, hatching) */ --color-quaternary-base: #bdb8ae; /* fourth color: concrete, for stone tones and chips */ --color-accent-base: #f2b705; /* attention color: signal yellow, used rarely; text on it is ink */ /* Readable text (-ink), text on each fill (on-) and hover are derived from the seeds. */ /* ------------------------------------------------------------ * NEUTRALS * Tinted by the seeds above, so a Style Switcher preset retints them * too. A plain hex here fixes one for good. * ------------------------------------------------------------ */ --color-text: var(--color-secondary-base); /* headings and body text (#1b1e22) */ --color-text-soft: oklch(from var(--color-secondary-base) 0.4866 calc(c * 1.664) h); /* secondary text (#5a6068) */ --color-bg: #ffffff; /* page background */ --color-bg-soft: oklch(from var(--color-quaternary-base) 0.9435 calc(c * 0.384) h); /* concrete: the alternate section ground (#eeece8) */ --color-border: oklch(from var(--color-quaternary-base) 0.8834 calc(c * 0.696) calc(h - 2.8)); /* lines and borders (#dcd8d1) */ /* Brand-coloured text on light grounds: a deeper orange than the template default, which reads at about 3:1 on white; dark mode keeps its own lifted value */ --color-primary-ink: oklch(from var(--color-primary-base) min(l, 0.55) c h); /* Labels on the primary: white on the safety orange (the demo's choice, about 3.3:1), dark only on a very light primary such as the Signal Yellow preset */ --color-on-primary: oklch(from var(--color-primary-base) clamp(0.2, (0.75 - l) * 1000, 1) 0 0); --color-dark: var(--color-secondary-base); /* dark sections and dark buttons (#1b1e22) */ /* ------------------------------------------------------------ * TYPOGRAPHY * ------------------------------------------------------------ */ --text-scale: 1; /* text size, spacing follows: 0.875 = 14px · 1 = 16px · 1.125 = 18px */ --font-sans: 'Inter', system-ui, sans-serif; /* body text */ --font-heading: 'Schibsted Grotesk', system-ui, sans-serif; /* headings and figures */ --font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif; /* italic accents */ --font-tertiary: 'Urbanist', system-ui, sans-serif; /* display accents */ /* Stylesheets of the accent fonts, fetched only on pages that use them. Change a family above and its URL here together. Set one to "" to load nothing, e.g. when that font is a system font. */ --font-serif-src: "https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap"; --font-tertiary-src: "https://fonts.googleapis.com/css2?family=Urbanist:wght@500;600;700;800;900&display=swap"; /* Headings and buttons */ --heading-weight: 700; /* 400–900: Schibsted Grotesk loads the whole range above */ --heading-tracking: -0.035em; /* set tight: the display sizes are large */ --btn-font-weight: 600; /* 500–700 */ --btn-letter-spacing: 0; /* button tracking */ --btn-text-transform: none; /* or uppercase: buttons in capitals */ /* ------------------------------------------------------------ * SHAPE * ------------------------------------------------------------ */ --radius-scale: 1; /* corner rounding: 0 square · 0.5 subtle · 1 · 1.5 round */ --btn-radius-override: 0.25rem; /* one shape for every button: 0px square · 0.5rem rounded · 9999px pill */ /* ------------------------------------------------------------ * LAYOUT * ------------------------------------------------------------ */ --container-max: 1360px; /* widest content column (1140px, 1280px, 1320px, 1440px …) */ --section-y-scale: 1.2; /* space between sections: 0.75 compact · 1 · 1.25 spacious */ }