/* ========================================================================== DESIGN TOKENS -------------------------------------------------------------------------- The single place in this theme where a colour, size or spacing value is written as a literal. Every other stylesheet uses var() only. Three layers, in order: 1. PALETTE the raw colours from the design system, under the design's own names (theme-1, theme-2, black, gray, …) 2. CHANNELS the same colours as "r, g, b" lists, so rgba() can build transparent variants without repeating a hex 3. SEMANTIC what each colour is FOR (heading, body, border, surface). Components use this layer, so re-pointing one alias restyles everything that plays that role. inc/dynamic-css.php overrides the palette from Theme Options, and 02-bootstrap.css hands these tokens to Bootstrap's own --bs-* variables. ========================================================================== */ :root { /* ---------------------------------------------------------------------- 1. Palette ---------------------------------------------------------------------- */ --mtfs-theme-1: #EA580C; /* orange — accent, eyebrow labels, highlights */ --mtfs-theme-2: #2563EB; /* blue — primary buttons, links, navigation */ --mtfs-black: #000000; --mtfs-black-2: #1E293B; /* headings, dark sections, footer */ --mtfs-gray: #485468; /* body text, secondary buttons */ --mtfs-gray-2: #F8FAFF; /* alternating section background, cards */ --mtfs-white: #FFFFFF; --mtfs-border: #E2E8F0; /* Hover / pressed states. Mixed from the palette rather than declared as new hex values, so changing a brand colour in Theme Options carries its hover with it. */ --mtfs-theme-1-hover: color-mix(in srgb, var(--mtfs-theme-1) 85%, var(--mtfs-black)); --mtfs-theme-2-hover: color-mix(in srgb, var(--mtfs-theme-2) 85%, var(--mtfs-black)); /* ---------------------------------------------------------------------- 2. Channels ---------------------------------------------------------------------- rgba() cannot take a hex variable, so the same colours are repeated as channel lists. inc/dynamic-css.php regenerates these from the saved hex whenever a palette colour is changed, so they never drift. ---------------------------------------------------------------------- */ --mtfs-theme-1-rgb: 234, 88, 12; --mtfs-theme-2-rgb: 37, 99, 235; --mtfs-black-rgb: 0, 0, 0; --mtfs-black-2-rgb: 30, 41, 59; --mtfs-gray-rgb: 72, 84, 104; --mtfs-white-rgb: 255, 255, 255; /* ---------------------------------------------------------------------- 3. Semantic aliases ---------------------------------------------------------------------- */ --mtfs-color-primary: var(--mtfs-theme-2); --mtfs-color-primary-hover: var(--mtfs-theme-2-hover); --mtfs-color-accent: var(--mtfs-theme-1); --mtfs-color-accent-hover: var(--mtfs-theme-1-hover); --mtfs-color-heading: var(--mtfs-black-2); --mtfs-color-body: var(--mtfs-gray); --mtfs-color-muted: color-mix(in srgb, var(--mtfs-gray) 72%, var(--mtfs-white)); --mtfs-color-surface: var(--mtfs-gray-2); --mtfs-color-border: var(--mtfs-border); --mtfs-color-footer-bg: var(--mtfs-black-2); /* On dark backgrounds — footer, dark sections, image overlays. */ --mtfs-on-dark: rgba(var(--mtfs-white-rgb), 0.82); --mtfs-on-dark-muted: rgba(var(--mtfs-white-rgb), 0.72); --mtfs-border-on-dark: rgba(var(--mtfs-white-rgb), 0.12); --mtfs-surface-on-dark: rgba(var(--mtfs-white-rgb), 0.08); --mtfs-outline-on-dark: rgba(var(--mtfs-white-rgb), 0.6); /* Scrim behind white text on a photograph. */ --mtfs-overlay: rgba(var(--mtfs-black-2-rgb), 0.72); --mtfs-overlay-soft: rgba(var(--mtfs-black-2-rgb), 0.66); /* Heavier scrim, for a photograph used purely as texture behind a whole band — the "Why Choose Us" mesh. Almost opaque: the picture reads as a surface, not as a picture. */ --mtfs-overlay-texture: rgba(var(--mtfs-black-2-rgb), 0.9); /* Form fields drawn on a dark card. Sampled from the design: the field fill is the palette's own gray, and the border is that gray lifted a twentieth of the way to white. */ --mtfs-field-on-dark: var(--mtfs-gray); --mtfs-field-border-on-dark: color-mix(in srgb, var(--mtfs-gray) 95%, var(--mtfs-white)); /* The two corner glows on the "Request a Custom Quote" card — orange out of the top-left, blue out of the bottom-right, both over black-2. */ --mtfs-glow-accent: rgba(var(--mtfs-theme-1-rgb), 0.32); --mtfs-glow-primary: rgba(var(--mtfs-theme-2-rgb), 0.3); /* Pressed state on the coloured navigation bar. */ --mtfs-press: rgba(var(--mtfs-black-rgb), 0.14); /* Tint used behind icon chips. */ --mtfs-tint-primary: color-mix(in srgb, var(--mtfs-theme-2) 12%, transparent); /* Focus ring. */ --mtfs-focus-ring: 0 0 0 0.2rem rgba(var(--mtfs-theme-2-rgb), 0.2); /* State colours. Not part of the brand palette — only form validation and admin notices use them. */ --mtfs-color-success: #16A34A; --mtfs-color-error: #DC2626; --mtfs-color-warning: #CA8A04; /* ---------------------------------------------------------------------- 4. Typography ---------------------------------------------------------------------- */ --mtfs-font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mtfs-font-heading: var(--mtfs-font-body); /* Type scale — one token per style in the design system. */ --mtfs-size-h1: 48px; --mtfs-size-h2: 32px; --mtfs-size-h3: 24px; --mtfs-size-h4: 20px; --mtfs-size-h5: 18px; --mtfs-size-h6: 16px; --mtfs-size-body-1: 16px; --mtfs-size-body-2: 14px; --mtfs-size-body-3: 12px; --mtfs-size-button: 16px; --mtfs-size-menu: 15px; /* Alias, so a component can ask for "small text" without picking a step. */ --mtfs-size-sm: var(--mtfs-size-body-2); /* Every block of copy in the frames sits on a 26px pitch: 16px body copy at 1.625, and 20px card headings at 1.3. */ --mtfs-line-height: 1.625; --mtfs-line-height-heading: 1.2; --mtfs-line-height-card: 1.3; /* The hero headline is the only heading in the design that wraps, and it is set tighter than the rest — 53px of pitch on a 48px face. */ --mtfs-line-height-display: 1.1; /* Form controls and field labels. Tighter than body copy — a textarea is not prose, and the design draws its fields on this leading. */ --mtfs-line-height-control: 1.5; --mtfs-weight-h1: 700; --mtfs-weight-h2: 700; --mtfs-weight-h3: 700; --mtfs-weight-h4: 500; --mtfs-weight-body: 400; --mtfs-weight-button: 700; /* bold */ --mtfs-weight-menu: 500; /* Body 3 is the small uppercase label style. */ --mtfs-tracking-label: 0.08em; --mtfs-tracking-heading: -0.02em; /* ---------------------------------------------------------------------- 5. Spacing ---------------------------------------------------------------------- */ --mtfs-space-1: 4px; --mtfs-space-2: 8px; --mtfs-space-3: 12px; --mtfs-space-4: 16px; --mtfs-space-5: 24px; --mtfs-space-6: 32px; --mtfs-space-7: 48px; --mtfs-space-8: 64px; --mtfs-space-9: 96px; /* ---------------------------------------------------------------------- 6. Layout ---------------------------------------------------------------------- */ /* Content width measured from the design: the page edge sits at x=320 in a 1920 frame, so the content box is 1280px. 02-bootstrap.css adds the Bootstrap gutter on top of this, which is why elements land at exactly 320px and not 332px. */ --mtfs-container: 1280px; --mtfs-container-wide: 1440px; --mtfs-logo-width: 180px; /* Section rhythm ------------------------------------------------------ Measured off the Figma frames rather than taken from the spacing scale above: every band is padded 80px top and bottom, and there is a 60px gap under a heading block and above a section's trailing button. The scale is a 4px grid and holds neither value, so they live here. */ --mtfs-section-space: 80px; --mtfs-heading-space: 60px; /* The inner-page frames set the same block closer to what follows — 40 under a grid heading, 16 where the copy reads as part of the statement. The section's "Space under the heading" control picks. */ --mtfs-heading-space-tight: 40px; --mtfs-heading-space-snug: var(--mtfs-space-5); --mtfs-heading-space-close: var(--mtfs-space-4); /* Two-column bands — a heading beside a tick list, a FAQ beside a FAQ — are drawn as two 610px columns with 60 between them, which is a wider gutter than the 24 the card grids use. Inside a column the tick list then splits again with 48 between its own columns. */ --mtfs-gutter-wide: 60px; --mtfs-list-gap: 48px; /* One blank line between paragraphs — the frames set the gap to exactly the 26px pitch the body copy runs on, not to a step of the scale. */ --mtfs-para-space: 26px; /* Header --------------------------------------------------------------- Heights are taken straight from the design. */ --mtfs-topbar-h: 70px; --mtfs-header-h: 86px; --mtfs-control-h: 38px; /* topbar search field and language pill */ --mtfs-cta-h: 53px; /* every button in the frames is 53 tall */ --mtfs-topbar-field-w: 410px; /* The chevron beside a menu item that has a submenu. Measured off the design: a wide, shallow V rather than a small tight one. */ --mtfs-caret-w: 13px; --mtfs-caret-h: 7px; /* FAQ panels: 74 tall closed, 24 apart, and the answer set a size down on a 22px pitch of its own. */ --mtfs-faq-gap: var(--mtfs-space-5); --mtfs-faq-pad: var(--mtfs-space-5); --mtfs-line-height-answer: 1.571; --mtfs-hero-h: 213px; /* inner-page title band */ --mtfs-hero-measure: 720px; /* how wide the hero paragraph runs */ --mtfs-crumb-h: 53px; /* breadcrumb pill */ /* The hero gradient. Peach at the top, pale blue at the bottom — the only two colours in the design that are not in the core palette. */ --mtfs-hero-from: #FDEEE6; --mtfs-hero-to: #EAEFFC; /* Footer --------------------------------------------------------------- The newsletter strip sits on gray, the columns below on black-2. */ --mtfs-newsletter-bg: var(--mtfs-gray); --mtfs-newsletter-field-w: 360px; /* Left padding on a field that carries an icon inside it: the icon's own inset, its width, and a gap before the text starts. */ --mtfs-field-icon-pad: 44px; /* The hover rule under a footer link. */ --mtfs-underline-h: 1px; /* Every rule in the design is the same weight: the line between two bands, the one between a FAQ question and its answer, a card's outline. */ --mtfs-hairline: 1px; /* Section heading ------------------------------------------------------ The eyebrow pill and the dashed rule that open and close every section heading in the design. */ --mtfs-eyebrow-h: 44px; --mtfs-eyebrow-dot: 10px; /* Numbered points ------------------------------------------------------ The orange chip in front of each "Why Choose Us" point. */ --mtfs-num-chip: 60px; /* Cards ---------------------------------------------------------------- Minimum image heights, so a stacked card on a phone still shows its picture rather than collapsing to a sliver. */ --mtfs-case-media-h: 280px; /* Slider arrows. The chevron only fills the middle half of the icon set's square viewBox, so the box is roughly twice the mark it draws: 34 renders the design's 9x17 chevron. */ --mtfs-slider-btn: 40px; --mtfs-slider-icon: 24px; /* The caption band under an image card, at one line of text. */ --mtfs-icard-caption-h: 58px; /* How many lines of a post excerpt a blog card shows before it trails off. */ --mtfs-bcard-lines: 2; /* Floor under every column of a table held to its container: enough for a two-word heading to sit on two lines. Without it the browser hands a column of short codes one word's width and stacks its heading four deep, and the band comes out 135 short of the frame instead of 25. */ --mtfs-table-col-min: 160px; /* The customer gallery's wall of photographs. Four columns of the 1280 container on the theme's usual gutter put a tile at 302 wide, and the frame crops every one of them to 302x254. */ /* The picture standing beside the copy on a deep-processing process card. */ --mtfs-card-aside-w: 220px; --mtfs-card-aside-h: 180px; --mtfs-gallery-gap: var(--mtfs-space-5); --mtfs-gallery-tile: 302 / 254; /* Split band: how wide the picture column runs beside the copy. */ --mtfs-split-media: 190px; /* The centred measure under a statement heading. */ /* Centred statement copy. The contact opener wraps at 810, so 860 is the reading measure; a band that wants the full container says so with the section's "Description width" control. */ --mtfs-media-measure: 820px; /* A left-aligned section heading wraps well before its column does — both About us headings break at ~585 inside a 646 column. */ --mtfs-heading-measure: 590px; /* Air above a closing note panel. */ --mtfs-note-space: 40px; /* How much of a note panel the copy claims before the button beside it drops to its own line. */ --mtfs-note-measure: 520px; /* Floor for a text-and-image band's picture, so a short column of copy still leaves the photograph something to be. */ --mtfs-text-media-min: 280px; /* An inset card holds its picture 40 clear of every edge; the quote card pads its two halves the same and splits 600 / 680 of its 1280. */ --mtfs-inset-pad: 40px; --mtfs-quote-intro-w: 46.875%; --mtfs-chip-pad: 18px; /* The About us card splits its 1280 into 720 of copy and 560 of picture, which is not one of Bootstrap's twelfths. */ --mtfs-bleed-text-w: 56.25%; --mtfs-bleed-media-w: 43.75%; /* The outlined pills on the resources page: 42 tall. */ --mtfs-chip-y: 8px; /* The thumbnail column beside a product picture, and the picture itself — measured off the product frame at 100 wide and 498x420. */ /* The ring round a product thumbnail — the frame draws it at 2, so the accent one reads as a selection rather than a hairline. */ --mtfs-thumb-border: 2px; --mtfs-thumb-w: 100px; --mtfs-thumb-gap: 14px; --mtfs-stage-ratio: 83 / 70; /* An inset card picture, where the frame gives every picture in the row the same height rather than the same proportions. */ --mtfs-card-media-h: 280px; --mtfs-lightbox-nav: 48px; /* How far a one-sided slider is allowed to paint past its container. Only has to reach the window edge; the section clips whatever is left over. */ --mtfs-slider-bleed: 100vw; /* The country flag beside a reviewer's name. */ --mtfs-flag-h: 14px; --mtfs-rule-w: 100px; --mtfs-rule-h: 4px; --mtfs-rule-dash: 11px; /* length of one dash */ --mtfs-rule-gap: 5px; /* space between dashes */ /* ---------------------------------------------------------------------- 7. Shape, depth, motion ---------------------------------------------------------------------- */ --mtfs-radius: 8px; --mtfs-radius-sm: 4px; --mtfs-radius-pill: 999px; /* Card image shapes. The section's "Image shape" control picks one of these, so a grid of portrait certificate scans and a grid of landscape product photos use the same card without either being cropped. */ --mtfs-ratio-landscape: 3 / 2; --mtfs-ratio-photo: 4 / 3; --mtfs-ratio-square: 1 / 1; --mtfs-ratio-portrait: 3 / 4; --mtfs-shadow-sm: 0 1px 3px rgba(var(--mtfs-black-2-rgb), 0.08); --mtfs-shadow: 0 4px 12px rgba(var(--mtfs-black-2-rgb), 0.08); --mtfs-shadow-lg: 0 12px 32px rgba(var(--mtfs-black-2-rgb), 0.12); --mtfs-transition: 0.2s ease; /* ---------------------------------------------------------------------- 8. Stacking ---------------------------------------------------------------------- */ --mtfs-z-header: 100; --mtfs-z-sticky-tabs: 90; --mtfs-z-to-top: 80; } /* ========================================================================== 9. Responsive tokens -------------------------------------------------------------------------- The Figma frames are drawn at 1920 only, so the section rhythm above is a desktop measurement. On a phone 80px of padding between every band is most of a screen; stepping the two tokens down here carries through everything that reads them — section padding, the gap under a heading block, the carousel heading row and the trailing button — from one place. ========================================================================== */ @media (max-width: 767.98px) { :root { --mtfs-section-space: 56px; --mtfs-heading-space: 40px; } }