/* ================================================================ * demo-construction-2.css — Framo theme for the Construction & Renovation demo * * The colors, fonts and layout settings of the Construction & Renovation * demo (Framo Build & Restore, general contractor for construction, * renovation and restoration in Franklin, Tennessee). * 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. Pages preload this URL on their own (the build reads it from here). Montserrat 800 sets the headings, the figures and the buttons: wide, heavy letters that read like a site sign from across the street (Archivo Black is the other construction demo's family, Inter Tight sat too close to the running text). Inter sets the running text. */ @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,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: #f45b14; /* main color: site-safety orange for the hero column, buttons and links; labels on it are white */ --color-secondary-base: #0a2457; /* second color: deep navy for the headings, the text, the dark bands and the footer; the dark scheme takes its hue */ --color-tertiary-base: #eef1f5; /* third color: cool off-white, the soft bands */ --color-quaternary-base: #66707f; /* fourth color: slate grey, for meta */ --color-accent-base: #ffbf8f; /* attention color: pale apricot, the hero's second line and small marks on navy */ /* Readable text (-ink), text on each fill (on-) and hover are derived from the seeds. */ --color-on-primary: #fff; /* labels on the brand fill: white (a preset picks its own) */ /* The fill is the seed itself, white labels on it; hover goes a step deeper. */ --color-primary: var(--color-primary-base); --color-primary-hover: oklch(from var(--color-primary-base) calc(l - 0.06) c h); /* ------------------------------------------------------------ * 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 */ --color-text-soft: oklch(from var(--color-quaternary-base) 0.5 c h); /* running text: the slate deepened, 4.5:1 on the soft bands */ --color-text-muted: oklch(from var(--color-quaternary-base) 0.5 c h); /* meta text */ --color-bg: #ffffff; /* page background: white */ --color-bg-soft: var(--color-tertiary-base); /* the soft bands */ --color-bg-muted: oklch(from var(--color-tertiary-base) calc(l - 0.03) c h); /* hover fills */ --color-border: oklch(from var(--color-tertiary-base) calc(l - 0.06) c h); /* lines and card borders */ --color-border-soft: oklch(from var(--color-tertiary-base) calc(l - 0.03) c h); /* the faintest rules */ --color-dark: var(--color-secondary-base); /* dark sections and dark buttons */ /* Brand-colored text on white: the orange, held at or under 0.56 lightness so a preset's lighter primary still reads at 4.5:1 */ --color-primary-ink: oklch(from var(--color-primary-base) min(l, 0.56) c h); /* ------------------------------------------------------------ * 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: 'Montserrat', 'Arial', system-ui, sans-serif; /* headings, buttons and figures */ --font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif; /* italic accents (unused so far) */ --font-tertiary: 'Urbanist', system-ui, sans-serif; /* display accents (unused so far) */ /* 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: 800; --heading-tracking: -0.03em; --btn-font-weight: 700; /* 500–700 */ --btn-letter-spacing: 0; /* button tracking */ --btn-text-transform: none; /* or uppercase: buttons in capitals */ /* ------------------------------------------------------------ * SHAPE * ------------------------------------------------------------ */ --radius-scale: 0.5; /* 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; /* space between sections: 0.75 compact · 1 · 1.25 spacious */ }