/* ========================================================================== FKC corporate identity — Finest Kitchen and Cupboards (Sep 2026). -------------------------------------------------------------------------- Linked last in by fkc-brand.php, after fkc-overrides.css and fkc-cinematic.css, so these tokens win. The cinematic MOTION layer is unaffected; only its palette values are superseded here. BRAND COLOURS (from the identity brief) green #3A9A2E · green-deep #2C7A23 · green-light #5CC04E ink #201E1D · white #FFFFFF · ground #F3F2F2 CONTRAST ROLES (checked against WCAG 2.2 AA, 4.5:1 for text) white on green-deep 5.4:1 → buttons and green panels with text white on green 3.6:1 → NOT used behind text (fails AA) green-deep on white 5.4:1 → green links and eyebrows on light green-light on ink 7.2:1 → accents and eyebrows on dark ink on white 16.6:1 → body text ========================================================================== */ @font-face { font-family: "Archivo"; src: url("../fonts/archivo-latin-var.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root:root:root:root { --brand-green: #3A9A2E; --brand-green-deep: #2C7A23; --brand-green-light: #5CC04E; --brand-ink: #201E1D; --brand-white: #FFFFFF; --brand-ground: #F3F2F2; /* Existing token system, re-pointed. --fkc-green is the overrides' accent on DARK surfaces (footer headings, eyebrows, focus rings), so it takes green-light; text-bearing buttons use --fkc-action. */ --fkc-white: var(--brand-white); --fkc-paper: var(--brand-white); --fkc-tint: var(--brand-ground); --fkc-ink: var(--brand-ink); --fkc-forest: var(--brand-ink); --fkc-green: var(--brand-green-light); --fkc-green-hover: #7BD06F; --fkc-action: var(--brand-green-deep); --fkc-action-hover: #225F1B; --fkc-link: var(--brand-green-deep); --fkc-muted: #57534F; --fkc-line: #D9D6D3; --fkc-silver: #CFCBC7; --fkc-dark-line: #4A4643; --rgb-surface: 255, 255, 255; --rgb-shadow: 32, 30, 29; --rgb-scrim: 32, 30, 29; --rgb-accent-glow: 58, 154, 46; --brand-font: "Archivo", "Helvetica Neue", Arial, sans-serif; /* The build routes every font through these two (31 uses): Inter and Fraunces become Archivo site-wide. */ --ff-body: var(--brand-font); --ff-display: var(--brand-font); } /* Kitchen Explorer hard-codes Fraunces in fkc-overrides.css. */ html body :is(.explorer h1, .explorer__step h2, .explorer__detail h3, .explorer__footnote > p:first-child) { font-family: var(--brand-font); } /* --- Typography -------------------------------------------------------- */ html body, html body :is(p, li, dd, dt, td, th, input, select, textarea, button, label, figcaption, blockquote) { font-family: var(--brand-font); } html body { font-weight: 400; line-height: 1.55; } html body :is(h1, h2, h3, h4), /* beats fkc-cinematic.css `html .client-page .section h2` (Fraunces) */ html body .client-page .section :is(h1, h2, h3, h4), html body .section.section :is(h1, h2, h3, h4), html .pagehero__title, html .closing__title, html .showroom-opening h1, html .showroom-opening .elementor-heading-title { font-family: var(--brand-font); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; } /* The build and the overrides set h2 weight 500 with `.client-page .section h2:not(…):not(…):not(…):not(…)` (specificity 0,6,1), so the brand weight is !important here, as the radius rule below is. */ html body :is(h1, h2, h3, h4) { font-weight: 800 !important; } /* The display face has no italic cut: accent words in headings keep their colour role but not a synthesised slant. */ html body :is(h1, h2, h3) em { font-style: normal; } /* Eyebrows and small labels: Archivo 600, uppercase, 0.2em, green. */ html .eyebrow, html .showroom-opening__eyebrow, html .showroom-opening__eyebrow p, html .showroom-opening__process p { font-family: var(--brand-font); font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: var(--brand-green-deep); } /* Dark-surface labels. The 01 · 02 · 03 strip (.showroom-opening__process) is deliberately absent: it sits inside .showroom-opening in the markup but is displayed on the white band, so it keeps the on-light green above (Lighthouse caught #5CC04E on white at 2.3:1). */ html :is(.is-dark, .showroom-opening, .workshop-story, .pagehero, .footer, .closing.is-dark) :is(.eyebrow, .showroom-opening__eyebrow, .showroom-opening__eyebrow p) { color: var(--brand-green-light); } /* --- Colour roles -------------------------------------------------------- */ html .section--band, html .client-page .section--band, html .client-page .bedroom { background: var(--brand-ground); } html .client-page .workshop-story, html .section.is-dark:not(.closing), html .pagehero.is-dark, html .footer.is-dark { background: var(--brand-ink); } html main p a:not(.btn), html main li a:not(.btn) { color: var(--brand-green-deep); } html :is(.is-dark, .workshop-story, .pagehero, .footer) p a:not(.btn) { color: var(--brand-green-light); } /* .btn--primary paints var(--btn-primary-bg), which the overrides point at --fkc-green (now the light accent), so it gets the action green explicitly: white on #2C7A23 is 5.4:1. Every other text-bearing green button already reads --fkc-action through fkc-cinematic.css. */ html .btn--primary, html .client-page .btn--primary { background: var(--brand-green-deep); border-color: var(--brand-green-deep); color: #FFFFFF; } html .btn--primary:hover, html .client-page .btn--primary:hover { background: var(--fkc-action-hover); border-color: var(--fkc-action-hover); color: #FFFFFF; } /* --- Square corners ------------------------------------------------------- The brief asks for square corners on buttons, cards, inputs and images. Many older rules set radii at higher specificity, so this one rule is !important; radio buttons and checkboxes keep their native shapes. */ html body :is(.btn, button, [class*="card"], [class*="__media"], .pill, .chip, img, picture, figure, video, iframe, input:not([type="radio"]):not([type="checkbox"]), select, textarea, .frm_forms .frm_submit button, .lightbox__panel, .unit__add, .totop, .explorer__consult, .elementor-button, .showroom-opening__primary) { border-radius: 0 !important; } /* --- 2 px ink rules instead of soft shadows on card grids ----------------- */ html body :is(.projcard, .pathcard, .svccard, .hubcard, .rangecard) { box-shadow: none; border: 2px solid var(--brand-ink); } html main .section + .section { border-top: 2px solid var(--brand-ink); } /* --- Logos ------------------------------------------------------------------ */ html .header__brand { flex: 0 0 auto; width: auto; } html .header__brand img.fkc-brand-logo { display: block; height: 44px; width: auto; max-width: none; } html .footer__logo img.fkc-brand-logo { display: block; width: 140px; height: auto; max-width: 100%; } @media (max-width: 720px) { html .header__brand img.fkc-brand-logo { height: 34px; } } @media (max-width: 359px) { /* Below 360 px the brief swaps to the symbol alone; the wordmark still reaches screen readers through the link's aria-label and the img alt. */ html .header__brand img.fkc-brand-logo { height: 32px; width: 51px; object-fit: cover; object-position: 0 50%; } }