/* Minification failed. Returning unminified contents. (14,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (15,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (16,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (17,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (18,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (21,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (22,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (23,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (26,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (27,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (28,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (29,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (32,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (33,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (34,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (37,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (40,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (41,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (47,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (48,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (49,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (52,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (53,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (54,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (55,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (58,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (61,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (62,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (63,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (64,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (65,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (66,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (67,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (68,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (69,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (70,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (71,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (74,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (75,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (76,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (77,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (78,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (81,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (82,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (83,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (84,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (85,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (90,31): run-time error CSS1039: Token not allowed after unary operator: '-color-dark' (92,30): run-time error CSS1039: Token not allowed after unary operator: '-font-degular' (94,30): run-time error CSS1039: Token not allowed after unary operator: '-font-archivo' (121,82): run-time error CSS1039: Token not allowed after unary operator: '-font-degular' (122,82): run-time error CSS1039: Token not allowed after unary operator: '-font-degular' (132,45): run-time error CSS1039: Token not allowed after unary operator: '-font-geom' (138,159): run-time error CSS1038: Expected hex color, found '#0009' (144,33): run-time error CSS1039: Token not allowed after unary operator: '-color-dark' (146,162): run-time error CSS1039: Token not allowed after unary operator: '-font-geom' (196,68): run-time error CSS1039: Token not allowed after unary operator: '-color-dark' (212,23): run-time error CSS1039: Token not allowed after unary operator: '-font-montserrat' (214,17): run-time error CSS1039: Token not allowed after unary operator: '-text-on-dark-soft' (221,28): run-time error CSS1039: Token not allowed after unary operator: '-color-accent' (230,28): run-time error CSS1039: Token not allowed after unary operator: '-color-dark' (240,23): run-time error CSS1039: Token not allowed after unary operator: '-font-montserrat' (241,68): run-time error CSS1039: Token not allowed after unary operator: '-text-on-dark-soft' (249,23): run-time error CSS1039: Token not allowed after unary operator: '-font-avant' (255,52): run-time error CSS1039: Token not allowed after unary operator: '-btn-border-strong' (273,28): run-time error CSS1039: Token not allowed after unary operator: '-btn-border' (325,32): run-time error CSS1039: Token not allowed after unary operator: '-color-dark' (430,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (460,23): run-time error CSS1039: Token not allowed after unary operator: '-font-avant' (461,23): run-time error CSS1039: Token not allowed after unary operator: '-fw-bold' (470,49): run-time error CSS1039: Token not allowed after unary operator: '-ftr-line' (472,50): run-time error CSS1039: Token not allowed after unary operator: '-ftr-line' (484,79): run-time error CSS1039: Token not allowed after unary operator: '-ftr-line' (504,32): run-time error CSS1039: Token not allowed after unary operator: '-ftr-line' (511,23): run-time error CSS1039: Token not allowed after unary operator: '-font-avant' (512,23): run-time error CSS1039: Token not allowed after unary operator: '-fw-light' (514,17): run-time error CSS1039: Token not allowed after unary operator: '-text-muted-strong' (517,34): run-time error CSS1039: Token not allowed after unary operator: '-text-muted-strong' (533,36): run-time error CSS1039: Token not allowed after unary operator: '-ftr-line' (562,28): run-time error CSS1039: Token not allowed after unary operator: '-color-dark' (563,17): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (604,23): run-time error CSS1039: Token not allowed after unary operator: '-fw-bold' (605,21): run-time error CSS1039: Token not allowed after unary operator: '-fs-display' (612,32): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (621,21): run-time error CSS1039: Token not allowed after unary operator: '-fs-20' (622,23): run-time error CSS1039: Token not allowed after unary operator: '-fw-light' (626,33): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (657,22): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (658,17): run-time error CSS1039: Token not allowed after unary operator: '-color-black' (697,23): run-time error CSS1039: Token not allowed after unary operator: '-fw-bold' (698,21): run-time error CSS1039: Token not allowed after unary operator: '-fs-heading' (712,23): run-time error CSS1039: Token not allowed after unary operator: '-fw-medium' (713,21): run-time error CSS1039: Token not allowed after unary operator: '-fs-base' (719,23): run-time error CSS1039: Token not allowed after unary operator: '-fw-light' (720,21): run-time error CSS1039: Token not allowed after unary operator: '-fs-base' (730,40): run-time error CSS1039: Token not allowed after unary operator: '-fw-bold' (738,32): run-time error CSS1039: Token not allowed after unary operator: '-line-on-light' (776,23): run-time error CSS1039: Token not allowed after unary operator: '-fw-bold' (777,21): run-time error CSS1039: Token not allowed after unary operator: '-fs-eyebrow' (780,17): run-time error CSS1039: Token not allowed after unary operator: '-text-faint' (784,23): run-time error CSS1039: Token not allowed after unary operator: '-fw-bold' (785,21): run-time error CSS1039: Token not allowed after unary operator: '-fs-attr' (791,23): run-time error CSS1039: Token not allowed after unary operator: '-fw-light' (792,21): run-time error CSS1039: Token not allowed after unary operator: '-fs-base' (852,101): run-time error CSS1039: Token not allowed after unary operator: '-btn-bg' (861,23): run-time error CSS1039: Token not allowed after unary operator: '-font-avant' (862,23): run-time error CSS1039: Token not allowed after unary operator: '-fw-bold' (867,17): run-time error CSS1039: Token not allowed after unary operator: '-color-black' (869,68): run-time error CSS1039: Token not allowed after unary operator: '-line-on-light' (872,29): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (890,73): run-time error CSS1039: Token not allowed after unary operator: '-line-on-light' (935,22): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (936,17): run-time error CSS1039: Token not allowed after unary operator: '-color-black' (959,23): run-time error CSS1039: Token not allowed after unary operator: '-font-avant' (960,23): run-time error CSS1039: Token not allowed after unary operator: '-fw-bold' (961,21): run-time error CSS1039: Token not allowed after unary operator: '-fs-24' (965,17): run-time error CSS1039: Token not allowed after unary operator: '-color-black' (976,7): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (985,38): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (985,58): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (986,22): run-time error CSS1039: Token not allowed after unary operator: '-field-stroke' (988,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm' (989,17): run-time error CSS1039: Token not allowed after unary operator: '-color-black' (990,23): run-time error CSS1039: Token not allowed after unary operator: '-font-avant' (991,23): run-time error CSS1039: Token not allowed after unary operator: '-fw-medium' (996,35): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (997,39): run-time error CSS1039: Token not allowed after unary operator: '-text-muted' (1010,38): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (1010,58): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (1011,22): run-time error CSS1039: Token not allowed after unary operator: '-field-stroke' (1012,28): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (1014,23): run-time error CSS1039: Token not allowed after unary operator: '-fw-bold' (1015,21): run-time error CSS1039: Token not allowed after unary operator: '-fs-24' (1052,38): run-time error CSS1039: Token not allowed after unary operator: '-btn-border' (1052,57): run-time error CSS1039: Token not allowed after unary operator: '-btn-border' (1053,22): run-time error CSS1039: Token not allowed after unary operator: '-field-stroke' (1055,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm' (1059,23): run-time error CSS1039: Token not allowed after unary operator: '-font-avant' (1060,23): run-time error CSS1039: Token not allowed after unary operator: '-fw-bold' (1061,21): run-time error CSS1039: Token not allowed after unary operator: '-fs-24' (1072,23): run-time error CSS1039: Token not allowed after unary operator: '-font-avant' (1074,17): run-time error CSS1039: Token not allowed after unary operator: '-text-muted' (1087,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm' (1088,38): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (1088,58): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (1089,22): run-time error CSS1039: Token not allowed after unary operator: '-field-stroke' (1092,17): run-time error CSS1039: Token not allowed after unary operator: '-color-black' (1120,23): run-time error CSS1039: Token not allowed after unary operator: '-font-avant' (1121,23): run-time error CSS1039: Token not allowed after unary operator: '-fw-medium' (1189,38): run-time error CSS1039: Token not allowed after unary operator: '-btn-border' (1189,57): run-time error CSS1039: Token not allowed after unary operator: '-btn-border' (1190,22): run-time error CSS1039: Token not allowed after unary operator: '-field-stroke' (1192,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm' (1193,23): run-time error CSS1039: Token not allowed after unary operator: '-font-avant' (1194,23): run-time error CSS1039: Token not allowed after unary operator: '-fw-medium' (1195,21): run-time error CSS1039: Token not allowed after unary operator: '-fs-base' (1198,17): run-time error CSS1039: Token not allowed after unary operator: '-color-black' (1206,49): run-time error CSS1039: Token not allowed after unary operator: '-btn-border-strong' (1212,31): run-time error CSS1039: Token not allowed after unary operator: '-color-black' (1212,64): run-time error CSS1039: Token not allowed after unary operator: '-fw-bold' (1251,22): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (1252,17): run-time error CSS1039: Token not allowed after unary operator: '-color-black' (1267,36): run-time error CSS1039: Token not allowed after unary operator: '-fw-bold' (1277,23): run-time error CSS1039: Token not allowed after unary operator: '-font-avant' (1278,23): run-time error CSS1039: Token not allowed after unary operator: '-fw-bold' (1279,21): run-time error CSS1039: Token not allowed after unary operator: '-fs-heading' (1289,23): run-time error CSS1039: Token not allowed after unary operator: '-font-avant' (1290,23): run-time error CSS1039: Token not allowed after unary operator: '-fw-medium' (1291,21): run-time error CSS1039: Token not allowed after unary operator: '-fs-base' (1307,32): run-time error CSS1039: Token not allowed after unary operator: '-line-on-light-strong' (1313,23): run-time error CSS1039: Token not allowed after unary operator: '-font-avant' (1314,23): run-time error CSS1039: Token not allowed after unary operator: '-fw-bold' (1315,21): run-time error CSS1039: Token not allowed after unary operator: '-fs-24' (1322,23): run-time error CSS1039: Token not allowed after unary operator: '-font-avant' (1323,23): run-time error CSS1039: Token not allowed after unary operator: '-fw-medium' (1324,21): run-time error CSS1039: Token not allowed after unary operator: '-fs-base' (1338,32): run-time error CSS1039: Token not allowed after unary operator: '-line-on-light-strong' (1356,23): run-time error CSS1039: Token not allowed after unary operator: '-font-avant' (1357,23): run-time error CSS1039: Token not allowed after unary operator: '-fw-medium' (1358,21): run-time error CSS1039: Token not allowed after unary operator: '-fs-base' (1403,23): run-time error CSS1039: Token not allowed after unary operator: '-font-avant' (1404,23): run-time error CSS1039: Token not allowed after unary operator: '-fw-bold' (1405,21): run-time error CSS1039: Token not allowed after unary operator: '-fs-eyebrow' (1409,17): run-time error CSS1039: Token not allowed after unary operator: '-text-faint' (1437,22): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (1438,17): run-time error CSS1039: Token not allowed after unary operator: '-color-black' (1464,32): run-time error CSS1039: Token not allowed after unary operator: '-line-on-light-strong' (1467,23): run-time error CSS1039: Token not allowed after unary operator: '-font-avant' (1471,23): run-time error CSS1039: Token not allowed after unary operator: '-fw-bold' (1472,21): run-time error CSS1039: Token not allowed after unary operator: '-fs-24' (1477,17): run-time error CSS1039: Token not allowed after unary operator: '-color-black' (1518,28): run-time error CSS1039: Token not allowed after unary operator: '-font-avant' (1522,32): run-time error CSS1039: Token not allowed after unary operator: '-font-avant' (1532,61): run-time error CSS1039: Token not allowed after unary operator: '-line-on-light-strong' (1535,33): run-time error CSS1039: Token not allowed after unary operator: '-font-avant' (1547,11): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1547,127): run-time error CSS1039: Token not allowed after unary operator: '-font-avant' (1547,288): run-time error CSS1039: Token not allowed after unary operator: '-hp-btn-fill' (1547,308): run-time error CSS1039: Token not allowed after unary operator: '-hp-btn-fill' (1547,508): run-time error CSS1039: Token not allowed after unary operator: '-hp-btn-fill' (1554,25): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1559,120): run-time error CSS1039: Token not allowed after unary operator: '-color-dark' (1596,70): run-time error CSS1039: Token not allowed after unary operator: '-line-on-dark' (1631,37): run-time error CSS1039: Token not allowed after unary operator: '-font-avant' (1632,37): run-time error CSS1039: Token not allowed after unary operator: '-font-avant' (1650,38): run-time error CSS1039: Token not allowed after unary operator: '-font-avant' (1652,53): run-time error CSS1039: Token not allowed after unary operator: '-font-avant' (1652,228): run-time error CSS1039: Token not allowed after unary operator: '-text-muted' (1662,33): run-time error CSS1039: Token not allowed after unary operator: '-text-muted' (1664,64): run-time error CSS1039: Token not allowed after unary operator: '-line-on-light' (1699,42): run-time error CSS1039: Token not allowed after unary operator: '-font-avant' (1699,187): run-time error CSS1039: Token not allowed after unary operator: '-text-faint' (1700,40): run-time error CSS1039: Token not allowed after unary operator: '-font-avant' (1701,39): run-time error CSS1039: Token not allowed after unary operator: '-font-avant' (1710,92): run-time error CSS1039: Token not allowed after unary operator: '-color-dark' (1716,39): run-time error CSS1039: Token not allowed after unary operator: '-font-avant' (1719,38): run-time error CSS1039: Token not allowed after unary operator: '-font-avant' (1726,39): run-time error CSS1039: Token not allowed after unary operator: '-font-avant' (1728,38): run-time error CSS1039: Token not allowed after unary operator: '-font-avant' (1729,38): run-time error CSS1039: Token not allowed after unary operator: '-font-avant' (1729,117): run-time error CSS1039: Token not allowed after unary operator: '-text-muted-strong' */ /* ========================================================================== DESIGN TOKENS Derived from the ABC Designs Figma (file ErIWbDeYMNP1lwG5zCA6YJ). The Figma has no formal variables, so these are curated from the design's values. Loaded first in the ~/content/home bundle (BundleConfig.cs), so every stylesheet can reference them with var(). Add new shared values here rather than hard-coding them in multiple places. Note: CSS custom properties can't be used inside @media conditions, so the breakpoints below are documentation only — keep the px in the media queries. ========================================================================== */ :root { /* ----- Type families ----- */ --font-avant: "itc-avant-garde-gothic-pro", sans-serif; /* primary redesign font */ --font-degular: "degular", sans-serif; --font-geom: "geom-graphic", sans-serif; --font-archivo: "Archivo", sans-serif; --font-montserrat: "Montserrat", sans-serif; /* main nav links (per Figma) */ /* ----- Font weights (Avant Garde ships 300/500/700; Figma "Demi" -> 700) ----- */ --fw-light: 300; --fw-medium: 500; --fw-bold: 700; /* ----- Brand / surfaces ----- */ --color-white: #fff; --color-black: #000; --color-dark: #232323; /* site background + dark section bg */ --color-accent: #6ec8ff; /* nav underline / highlight */ /* ----- Text on light sections ----- */ --text-dark: #000; --text-muted: rgba(0, 0, 0, 0.52); --text-muted-strong: rgba(0, 0, 0, 0.6); /* 0.42 rendered as #949494 on white — only 3.0:1, failing WCAG AA (4.5:1) for the 12px eyebrow labels. 0.55 gives ~#757575 ≈ 4.6:1 and passes. */ --text-faint: rgba(0, 0, 0, 0.55); /* ----- Text on dark sections ----- */ --text-on-dark: #fff; --text-on-dark-soft: rgba(255, 255, 255, 0.84); /* ----- Lines / dividers ----- */ /* Three distinct stroke opacities in the Figma, read from the exported SVGs: the full-width section rules are the strongest, the services-link rules lighter, and the hero divider is white @ 0.46. */ --line-on-light: rgba(0, 0, 0, 0.49); /* services-link rules (Figma Line 4) */ --line-on-light-strong: rgba(0, 0, 0, 0.64); /* full-width section rules (Figma Line 3) */ --line-on-dark: rgba(255, 255, 255, 0.46); /* hero divider over the image (Figma Line 1) */ /* ----- Buttons ----- */ --btn-bg: #cdcaca; --btn-border: #e9e9e9; --btn-border-strong: #1d1d1d; --social-border: #ceecff; /* outline on the dark social buttons (footer + interior pages) */ /* ----- Forms ----- */ --field-border: #bfbaba; /* input / select / textarea / upload border */ /* ----- Type scale (Figma px) ----- */ --fs-hero: 4rem; /* 64px hero H1 */ --fs-display: 3rem; /* 48px dark banner heading / review quote */ --fs-heading: 2.375rem;/* 38px section headings */ --fs-project: 2.5rem; /* 40px project card title */ --fs-links: 2.25rem; /* 36px service links */ --fs-attr: 2rem; /* 32px review attribution */ --fs-24: 1.5rem; /* 24px form fields/labels, legal-page H2, sitemap links */ --fs-20: 1.25rem; /* 20px hero slide label / breadcrumb */ --fs-18: 1.125rem; /* 18px nav items / buttons */ --fs-base: 1rem; /* 16px body copy */ --fs-eyebrow: 0.75rem; /* 12px project eyebrow */ /* ----- Layout ----- */ --container-max: 1470px; /* the site .container max-width (= Figma 1440 content + 2×15 gutter) */ --content-max: 1920px; /* 1920 cap used by the full-bleed services section */ --gutter: 15px; /* .container side padding */ --radius: 8px; /* buttons / dropdown */ --radius-sm: 4px; /* form fields */ /* ----- Breakpoints (documentation only — not usable in @media) ----- */ --bp-xs: 500px; --bp-sm: 768px; --bp-md: 992px; --bp-lg: 1230px; --bp-xl: 1671px; } html { margin: 0; padding: 0; scroll-behavior: smooth; } body { background-color: var(--color-dark); color: #fff; margin: 0; padding: 0; position: relative; font-size: 1rem; overflow-x: hidden; } .degular { font-family: var(--font-degular); font-style: normal; font-display: swap; } .archivo { font-family: var(--font-archivo); font-style: normal; font-display: swap; } /* ----- Inline SVG icons (replaces the Font Awesome kit) ----- The sprite itself must stay in the DOM for to resolve, but must not take up space. display:none would work in modern browsers, but the zero-size/absolute approach is the safer, more widely-supported way to hide a sprite. .icon sizes by height and inherits colour, so it behaves like the font icons it replaces - drop it anywhere text is styled and it matches. width:auto matters because the icons have three different aspect ratios (viewBoxes of 320, 448 and 512 wide). */ .icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .icon { height: 1em; width: auto; fill: currentColor; display: inline-block; vertical-align: -0.125em; /* matches the optical baseline FA used */ } /* Breakpoint-gated line break. `
` forces the design's wrap from the md breakpoint (992px) up, and collapses below it so narrow headings use the full width and wrap naturally. `md` matches the dw-responsive breakpoint scale (xs 500 / sm 768 / md 992 / lg 1230 / xl 1671). */ .br-md { display: none; } @media screen and (min-width: 992px) { .br-md { display: inline; } } h1 { margin: 0; padding: 0; line-height: 1; font-size: 5.3rem; font-family: var(--font-degular); font-style: normal; font-weight: 300; } h2 { margin: 0; padding: 0; line-height: 1; font-size: 2.4rem; font-family: var(--font-degular); font-style: normal; font-weight: 300; } .banner { background-size: cover; background-repeat: no-repeat; background-attachment: fixed; background-position: top center; } /* JS (dwjquery.js) swaps data-src in and removes .lazy, so this rule is only ever applied before load - it will not match in a finished DOM. Do not delete. */ .lazy { max-height: 1px; } /* Rendered by MVC only when a field fails validation, so it also will not match a freshly loaded page. Do not delete. */ .field-validation-error { font-family: var(--font-geom); font-weight: 300; font-style: normal; font-display: swap; color: #ff0000; padding-bottom: 5px; padding-top: 5px; font-size: 0.9rem; } .upper { text-transform: uppercase } a { color: #fff; text-decoration: none; } .img-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-color: #0009; color: #fff; } a:hover .img-overlay { display: none; } /*FORM*/ select { background-color: var(--color-dark) !important; } ::placeholder { color: #fff; font-weight: 300; } input, textarea, select, .upload-btn { border: none; outline: none; height: 50px; background-color: transparent; color: #fff; font-size: 1rem; font-family: var(--font-geom); font-weight: 500; font-style: normal; font-display: swap; border-bottom: 2px solid #fff; width: 100%; } /* file upload button */ input[type="file"] { border: none; max-height: min-content; height: initial; } input[type="file"]::file-selector-button { display: none; } .dw-theme .dw-nav { position: absolute; left: 0; top: 0; margin-top: 0 !important; } .dw-dots { position: absolute; left: 150px; top: 45px; } .hov-und:hover { text-decoration: underline; cursor: pointer; } .support-container { margin-top: 60px; font-size: 1.2rem; } .support-container h1 { font-size: 3.5rem; } @media screen and (max-width:1230px) { .dw-dots { position: absolute; left: 0; top: 76px; } } @media screen and (max-width: 992px) { #footer { text-align: center; } .dw-theme .dw-nav { width: 100%; display: flex; justify-content: space-between; } .dw-dots { position: absolute; left: 50%; transform: translateX(-50%); top: 45px; } .dw-prev, .dw-next { display: flex; align-items: center; justify-content: center; height: 40px; width: 40px; background-color: #7a7a7a !important; } } @media screen and (max-width: 767px) { h1 { font-size: 4rem; } } @media screen and (max-width: 500px) { h1 { font-size: 3rem; } .mt-60 { margin-top: 30px!important; } h1 { margin-bottom: 60px!important; } } /* ========================================================================== SITE HEADER / NAV (2026 redesign) Global header (SiteHead.cshtml). Transparent over the hero on pages that set ViewBag.TransparentHeader (homepage); solid dark bar elsewhere. Desktop: horizontal nav with a Services dropdown. Mobile (<992px): hamburger that folds a panel down; Services becomes an accordion. Logic: site-header.js. ========================================================================== */ .site-header { position: absolute; top: 0; left: 0; width: 100%; z-index: 100; } .site-header.is-solid { position: relative; background-color: var(--color-dark); } .site-header__bar { display: flex; align-items: center; justify-content: space-between; padding: 36px 0; } /* Figma: menu frame py-36 */ .site-header__logo { display: inline-flex; align-items: center; } .site-header__logo img { width: 114px; height: auto; display: block; transition: transform .2s ease; } .site-header__logo:hover img { transform: scale(1.05); } /* ----- Desktop nav ----- */ .site-nav { display: flex; align-items: center; gap: 60px; } .site-nav__list { display: flex; align-items: center; gap: 54px; list-style: none; margin: 0; padding: 0; } .site-nav__item { position: relative; } .site-nav__link { display: inline-flex; align-items: center; gap: 10px; /* Figma: Montserrat Medium 18px / 18.851px / +0.36px, uppercase. The nav is the only place the site uses Montserrat — everything else is Avant Garde. */ font-family: var(--font-montserrat); font-weight: 500; font-size: 1.125rem; line-height: 1.047; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-on-dark-soft); background: none; border: 0; cursor: pointer; padding: 6px 0; position: relative; white-space: nowrap; } .site-nav__link:hover { color: #fff; } /* Blue underline accent on hover (matches Figma) */ .site-nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background-color: var(--color-accent); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; } .site-nav__item:hover > .site-nav__link::after { transform: scaleX(1); } .site-nav__chev { font-size: 0.7rem; transition: transform .2s ease; } .site-nav__item.has-dropdown:hover .site-nav__chev { transform: rotate(180deg); } /* Services dropdown */ .site-nav__dropdown { position: absolute; top: 100%; left: 0; min-width: 270px; background-color: var(--color-dark); border: 1px solid #3a3a3a; border-radius: 8px; padding: 8px; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease; z-index: 10; } .site-nav__item.has-dropdown:hover .site-nav__dropdown, .site-nav__item.has-dropdown.is-open .site-nav__dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .site-nav__dropdown-link { /* Not in the Figma (the dropdown is never shown open) — matched to the parent nav links so the whole menu reads as one family. */ font-family: var(--font-montserrat); font-weight: 500; font-size: 1rem; letter-spacing: 0.01em; text-transform: uppercase; color: var(--text-on-dark-soft); padding: 11px 12px; border-radius: 6px; white-space: nowrap; transition: background-color .15s ease, color .15s ease; } .site-nav__dropdown-link:hover { background-color: #333; color: #fff; } /* CTA button */ .site-nav__cta { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-avant); font-weight: 700; font-size: 1.125rem; letter-spacing: 0.02em; text-transform: uppercase; color: #000 !important; /* Figma: 47px tall = 1px border + 13px padding + 19px content, each side. Set as an explicit height (rather than vertical padding) so the hover state below can thicken the border to 2px without changing the button's size. */ box-sizing: border-box; height: 47px; background-color: #fff; border: 1px solid var(--btn-border-strong); border-radius: 8px; padding: 0 16px; line-height: 19px; transition: background-color .2s ease, color .2s ease, border-color .2s ease; } /* Hover — Figma component 410:50 ("Property 1=Variant2"). The solid white pill empties out into a ghost button: transparent fill so the dark header/hero shows through, white label, and a 2px light outline. The outline is flat rather than the gradient .hp-btn uses. Sampled off the variant render it does ramp, but only rgb(222) -> rgb(248) across a 2px line — imperceptible, and reproducing it would need a mask-composite pseudo-element because a gradient can only be confined to the border with a second padding-box layer, which a transparent-centred button cannot have. #e9e9e9 sits mid-ramp and is the same token Figma reports for the sibling button component. The 1px -> 2px border is absorbed by the fixed height and the 1px-tighter horizontal padding, so the header layout does not shift on hover. */ .site-nav__cta:hover, .site-nav__cta:focus-visible { color: #fff !important; background-color: transparent; border: 2px solid var(--btn-border); padding: 0 15px; } /* ----- Desktop: no hamburger, and no menu logo (the bar has one) ----- */ .site-header__burger { display: none; } .site-nav__brand { display: none; } /* ========================================================================== MOBILE (<992px): full-screen overlay menu The panel covers the viewport, with the logo centred on the same line as the close (X) and the links stacked beneath it. Logic: site-header.js. ========================================================================== */ /* Page scroll is locked while the overlay is open, so the content behind it can't be dragged around under the menu. The panel does its own scrolling if the links overflow a short viewport (see overflow-y below). Set on by site-header.js rather than in a media query, because the class is only ever added on mobile. */ html.nav-open, html.nav-open body { overflow: hidden; } @media screen and (max-width: 991px) { .site-header__bar { padding: 18px 0; } .site-header__logo img { width: 92px; } /* ----- Hamburger / close ----- */ /* z-index keeps it above the overlay (both are children of .site-header, which is the stacking context) so the same button that opens the menu also closes it. */ .site-header__burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0; background: none; border: 0; cursor: pointer; position: relative; z-index: 2; } .site-header__burger span { display: block; height: 3px; width: 26px; background-color: #fff; border-radius: 2px; transition: transform .3s ease, opacity .2s ease; } .site-header.is-open .site-header__burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .site-header.is-open .site-header__burger span:nth-child(2) { opacity: 0; } .site-header.is-open .site-header__burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* The panel's own centred logo replaces this one while the menu is open, so hide it rather than leaving it stacked behind the overlay - it would otherwise still be announced by a screen reader as a second identical link. */ .site-header.is-open .site-header__logo { visibility: hidden; } /* ----- The overlay ----- */ .site-nav { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; flex-direction: column; align-items: center; gap: 0; /* Fully opaque: the panel sits over the hero photo on the homepage. */ background-color: var(--color-dark); padding: 0 15px 40px; overflow-y: auto; /* Stop a scroll that reaches the end of the panel from chaining to the page. */ overscroll-behavior: contain; /* Closed. visibility (not display) so it can transition, and so nothing inside is focusable or announced while hidden - which display:none would also give, but without the fade. The 0s .25s delay holds visibility until the fade has finished; the open state below drops that delay so it appears immediately. */ opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s; } .site-header.is-open .site-nav { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .25s ease, visibility 0s; } /* ----- Centred logo ----- */ .site-nav__brand { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; /* Same construction as .site-header__bar - 18px of padding around a 92px-wide logo - so this logo lands on exactly the same line as the X without hard-coding a height. (A fixed height has to be 88.5px here: the bar is sized by the logo, which is 52.5px tall at 92px wide, not by the 44px burger.) */ padding: 18px 0; margin-bottom: 36px; } .site-nav__brand img { display: block; width: 92px; height: auto; } /* ----- Links ----- */ /* Capped and centred so the rules don't run the full width of a tablet. Anchored under the logo rather than floated to the middle of the panel: auto margins centred the group but pushed it ~250px clear of the logo on a tall phone, which read as two disconnected halves. The empty space below is left as-is. */ .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; width: 100%; max-width: 420px; } .site-nav__item { border-bottom: 1px solid #333; } .site-nav__item:first-child { border-top: 1px solid #333; } .site-nav__link { width: 100%; /* Centred, with the chevron tucked against the label rather than pushed out to the far edge as it was in the old full-width fold-down panel. */ justify-content: center; gap: 10px; padding: 18px 4px; color: #fff; font-size: 1.375rem; } .site-nav__link::after { display: none; } /* no hover underline on a touch panel */ /* ----- Services accordion ----- */ .site-nav__dropdown { position: static; min-width: 0; background: none; border: 0; border-radius: 0; padding: 0; opacity: 1; transform: none; align-items: center; /* Collapsed: visibility (not just max-height:0) so the links inside are not focusable while the accordion is shut - otherwise Tab lands on invisible items, and they count towards the overlay's focus cycle. */ max-height: 0; visibility: hidden; overflow: hidden; transition: max-height .3s ease, visibility 0s linear .3s; } /* Kill the desktop hover rule here: a tap can leave :hover stuck on a touch device, which would reveal the dropdown's links without opening the accordion. Declared before the .is-open rule so that one still wins when both match. */ .site-nav__item.has-dropdown:hover .site-nav__dropdown { visibility: hidden; } .site-nav__item.has-dropdown.is-open .site-nav__dropdown { max-height: 420px; visibility: visible; transition: max-height .3s ease, visibility 0s; } .site-nav__item.has-dropdown.is-open .site-nav__chev { transform: rotate(180deg); } .site-nav__dropdown-link { font-size: 1.05rem; padding: 12px 8px; text-align: center; } /* ----- CTA ----- */ /* flex-shrink:0 because .site-nav__cta has a fixed 47px height that a flex column would otherwise squash when the panel runs short. */ .site-nav__cta { width: 100%; max-width: 420px; flex: 0 0 auto; margin-top: 28px; } /* Short viewports (landscape phones): tighten so the CTA stays reachable without the panel needing to scroll. */ @media screen and (max-height: 560px) { .site-nav__brand { padding: 10px 0; margin-bottom: 16px; } .site-nav__brand img { width: 78px; } .site-nav__link { padding: 12px 4px; font-size: 1.125rem; } .site-nav__cta { margin-top: 18px; } } @media (prefers-reduced-motion: reduce) { .site-nav { transform: none; transition: opacity .01s linear, visibility 0s linear .01s; } .site-header.is-open .site-nav { transition: opacity .01s linear, visibility 0s; } .site-header__burger span { transition: none; } } } /* ========================================================================== SITE FOOTER (2026 redesign) Light footer used site-wide. Matches the Figma (file ErIWbDeYMNP1lwG5zCA6YJ, node 262:155): a bordered 2×2 grid — email / phone on top, address / social icons below — with a full-width horizontal rule, a full-height vertical rule splitting the two columns, and three short rules dividing the four socials. Loaded in the ~/content/home bundle (BundleConfig.cs), which is on every page. ========================================================================== */ .site-ftr { /* Figma strokes these at black @ 0.5 (Line 5 / Line 6 / Line 9 all export as stroke="black" stroke-opacity="0.5"); 0.15 was far too faint. */ --ftr-line: rgba(0, 0, 0, 0.5); background-color: #fff; color: #000; padding: 80px 0 45px; /* The page content above ends on a fractional pixel (e.g. y=5919.46875). On a fractional devicePixelRatio (Windows display scaling at 125% -> DPR 1.25) neither this block nor the one above fully covers that device-pixel row, so the dark behind shows through as a grey hairline right across the viewport. Overlap by 1px to close the seam; both sides are white, so nothing is hidden. Negative margin (not a white box-shadow) so it stays invisible on pages whose last section is dark. */ margin-top: -1px; } /* Site.css sets `a { color:#fff }` globally — restate for the light footer. */ .site-ftr a { color: #000; } /* ...but the social buttons are black with a white glyph — the `a` rule above (class+type) outranks the `.site-ftr__social` class, so restate white here at higher specificity or the icons render black-on-black (invisible). */ .site-ftr a.site-ftr__social { color: #fff; } /* ----- Contact grid ----- */ .site-ftr__grid { display: grid; grid-template-columns: 890fr 552fr; /* Figma 890 / 552 within the 1440 content */ grid-template-rows: minmax(138px, auto) minmax(135px, auto); } .site-ftr__cell { box-sizing: border-box; display: flex; align-items: center; font-family: var(--font-avant); font-weight: var(--fw-bold); font-size: 1.125rem; /* 18px */ letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.2; } /* The middle cross: horizontal rule above the bottom row, vertical rule left of the right column. Together they form the full-width + full-height dividers. */ .site-ftr__cell--address, .site-ftr__socials { border-top: 1px solid var(--ftr-line); } .site-ftr__cell--phone, .site-ftr__socials { border-left: 1px solid var(--ftr-line); } .site-ftr__cell--phone { justify-content: center; } /* phone is centred in the right column */ /* ----- Social row (right column, bottom cell) ----- */ .site-ftr__socials { padding: 0; align-items: stretch; } .site-ftr__social-cell { flex: 1; display: flex; align-items: center; justify-content: center; } .site-ftr__social-cell + .site-ftr__social-cell { border-left: 1px solid var(--ftr-line); } .site-ftr__social { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 57px; background-color: #000; color: #fff; border: 1px solid #ceecff; /* subtle light-blue outline from the Figma */ border-radius: 8px; font-size: 1.5rem; /* ~24px glyph */ transition: transform .2s ease; } .site-ftr__social:hover { transform: scale(1.08); } /* ----- Legal / copyright bar (kept from the old footer, restyled light) ----- */ .site-ftr__legal { margin-top: 45px; padding-top: 22px; border-top: 1px solid var(--ftr-line); } .site-ftr__legal-inner { display: flex; flex-direction: column; align-items: center; gap: 10px; font-family: var(--font-avant); font-weight: var(--fw-light); font-size: 0.8rem; color: var(--text-muted-strong); text-align: center; } .site-ftr__legal a { color: var(--text-muted-strong); } .site-ftr__legal-links { display: flex; gap: 15px; } @media screen and (min-width: 1230px) { .site-ftr__legal-inner { flex-direction: row; justify-content: space-between; text-align: left; } .site-ftr__legal-inner > div { flex: 1 1 0; } .site-ftr__legal-links { justify-content: center; } .site-ftr__legal-inner > #footnoteright { text-align: right; } } /* ----- Stack below the desktop grid ----- */ @media screen and (max-width: 991px) { .site-ftr { padding: 50px 0 35px; } .site-ftr__grid { grid-template-columns: 1fr; grid-template-rows: none; } .site-ftr__cell { border-left: 0; border-top: 1px solid var(--ftr-line); justify-content: center; text-align: center; padding: 22px 0; } .site-ftr__cell--email { border-top: 0; padding-top: 0; } /* Socials become a centred row of buttons */ .site-ftr__socials { align-items: center; justify-content: center; gap: 15px; } .site-ftr__social-cell { flex: 0 0 auto; } .site-ftr__social-cell + .site-ftr__social-cell { border-left: 0; } /* Drop the desktop 45px gap so the space below the icons matches the 22px above */ .site-ftr__legal { margin-top: 0; } } /* ========================================================================== PAGE HERO + BREADCRUMB (2026 redesign) Shared interior-page banner (Figma file ErIWbDeYMNP1lwG5zCA6YJ). Two variants: - default: full-bleed background photo + dark gradient (the 4 category pages). - .page-hero--flat: flat dark banner, no photo (About, get-a-quote, terms, cookies, sitemap). Layout on both: large uppercase H1, a full-width white rule, then a breadcrumb trail (chevron-separated). Rendered by Views/Shared/_PageHero.cshtml. Loaded in the ~/content/home bundle (BundleConfig.cs), which is on every page. ========================================================================== */ .page-hero { position: relative; display: flex; align-items: flex-end; min-height: 632px; /* Figma category-page banner height */ background-color: var(--color-dark); color: var(--color-white); overflow: hidden; } .page-hero--flat { min-height: 380px; } /* Figma legal/utility banner height */ /* ----- Background photo (image variant only) ----- */ .page-hero__bg { position: absolute; inset: 0; z-index: 0; } .page-hero__img { width: 100%; height: 100%; object-fit: cover; display: block; } /* NO CSS darkening overlay here. The banner exports already carry the Figma gradient baked in — same as the homepage hero (banner-home.webp), which is why that one applies no overlay either. A CSS gradient on top double-darkens the photo: the old rgba(0,0,0,.7) left the nav area at ~17% brightness. Evidence: the top 3% of external/exhibition/vehicle peaks at 97-123 per channel, above the 76 ceiling a baked 0.7 overlay would impose, and in the same range as the known-baked banner-home.webp (105). White nav/title text stays legible unaided — the brightest of the four banners averages 71 luminance across its top band, ~9:1 against white. If a future banner IS supplied undarkened, bake the gradient into that export rather than reintroducing a global overlay. */ /* ----- Content ----- */ /* NB: `.page-hero__inner` is also `.container`, and dw-responsive.css's `.container { padding: 0 15px }` loads AFTER this file — at equal specificity its shorthand would zero our padding-top/bottom. Scope with `.page-hero` to out-specify it (the 15px side gutters still come from .container). */ .page-hero .page-hero__inner { position: relative; z-index: 1; width: 100%; padding-top: 160px; /* clear the transparent header sitting over the banner */ padding-bottom: 34px; /* Figma: breadcrumb baseline sits 34px above the banner bottom */ } /* Flat (legal) banner sits the breadcrumb 36px off the bottom in Figma. */ .page-hero--flat .page-hero__inner { padding-bottom: 36px; } .page-hero__title { margin: 0; font-weight: var(--fw-bold); font-size: var(--fs-display); /* 48px */ line-height: 1; text-transform: uppercase; letter-spacing: -0.03em; } .page-hero__rule { border: 0; border-top: 1px solid var(--color-white); margin: 6px 0 19px; /* Figma: 6px below title, 19px above breadcrumb */ } /* ----- Breadcrumb ----- */ .page-hero__crumbs { display: flex; align-items: center; gap: 9px; font-size: var(--fs-20); /* 20px */ font-weight: var(--fw-light); /* Figma "Book" */ text-transform: uppercase; letter-spacing: -0.02em; } .page-hero__crumb { color: var(--color-white); text-decoration: none; } .page-hero__crumb:hover { text-decoration: underline; } .page-hero__crumb--current { cursor: default; } .page-hero__crumb-sep { font-size: 0.7em; opacity: 0.85; } /* ----- Responsive ----- */ @media screen and (max-width: 991px) { .page-hero { min-height: 55vh; } .page-hero--flat { min-height: 280px; } .page-hero .page-hero__inner { padding-top: 120px; padding-bottom: 30px; } .page-hero__title { font-size: 2.25rem; } .page-hero__rule { margin: 18px 0 12px; } .page-hero__crumbs { font-size: 1rem; } } @media screen and (max-width: 500px) { .page-hero--flat { min-height: 240px; } .page-hero .page-hero__inner { padding-bottom: 26px; } .page-hero__title { font-size: 1.75rem; } .page-hero__crumbs { flex-wrap: wrap; gap: 7px; } } /* ========================================================================== CATEGORY PAGE BODY (2026 redesign) Light body for the four category pages (Figma ErIWbDeYMNP1lwG5zCA6YJ): an intro block (heading + copy + rule) then alternating image/text service rows. The imagery is a SIZED, RESPONSIVE PLACEHOLDER for now — swap `.cat-row__placeholder` for a real once the photos are ready; the 827:526 aspect ratio and layout stay the same. Loaded in the ~/content/home bundle (BundleConfig.cs). ========================================================================== */ .cat-body { background: var(--color-white); color: var(--color-black); padding: 112px 0 88px; /* Figma: 112px below hero, 88px above footer */ } /* ----- Per-page intro padding ----- The category Figma frames do NOT share one intro rhythm — External sits at ~112/78 (confirmed: its heading-to-rule measures 130 here vs 134 in Figma) while Indoor's frame is much tighter. Values below are the design's ink-to-ink gaps converted to box values (the first copy line's box sits ~8px above its cap height, the last ~9px below its baseline), so they are what CSS padding needs to be to land the text where Figma puts it. NB the copy block itself still runs a line taller than the design's: Avant Garde lays out ~3-4% narrower in Figma than in Chrome, so the same paragraph wraps to 9 lines there and 10 here. That difference is not reachable from padding. */ .cat-body--indoor-signage { padding-top: 59px; } /* Figma ink gap 67px */ .cat-body--indoor-signage .cat-rule { margin-top: 52px; } /* Figma ink gap 61px */ .cat-body--vehicle-graphics { padding-top: 54px; } /* Figma ink gap 62px */ .cat-body--vehicle-graphics .cat-rule { margin-top: 55px; } /* Figma ink gap 64px */ .cat-body--exhibition-signage { padding-top: 52px; } /* Figma ink gap 60px */ .cat-body--exhibition-signage .cat-rule { margin-top: 52px; } /* Figma ink gap 61px */ /* Site.css sets a global `a { color:#fff }` — restate for the light body. */ .cat-body a { color: inherit; } /* ----- Intro ----- */ .cat-intro { display: flex; justify-content: space-between; /* Heading is vertically centred against the copy column, not top-aligned — same as the homepage intro (.hp-intro__grid). Top-aligning it left the heading ~41px too high: the hero->rule height was right, but the gap under the heading measured 179px against the Figma's 134px. */ align-items: center; gap: 60px; } .cat-intro__heading { flex: 0 0 auto; margin: 0; font-weight: var(--fw-bold); font-size: var(--fs-heading); /* 38px */ line-height: 1; text-transform: uppercase; letter-spacing: -0.03em; /* Figma -1.14px @ 38px */ } .cat-intro__text { display: flex; flex-direction: column; gap: 16px; /* Figma gap between lead and body */ flex: 0 1 683px; /* Figma copy column = 683px */ max-width: 683px; } .cat-intro__lead { margin: 0; font-weight: var(--fw-medium); font-size: var(--fs-base); line-height: 1.625; /* 26/16 */ letter-spacing: -0.02em; /* Figma -0.32px @ 16px */ } .cat-intro__body { margin: 0; font-weight: var(--fw-light); font-size: var(--fs-base); line-height: 1.625; letter-spacing: -0.02em; } /* Inline text links in the intro copy get the site's text-link treatment: bold and underlined, losing the underline on hover (see the note by .sitemap a:hover in legal.css). Scoped to the copy paragraphs rather than `.cat-body a`, because that would also catch the service rows and about cards - which are whole-block links, not text links. */ .cat-intro__lead a, .cat-intro__body a { font-weight: var(--fw-bold); text-decoration: underline; } .cat-intro__lead a:hover, .cat-intro__lead a:focus-visible, .cat-intro__body a:hover, .cat-intro__body a:focus-visible { text-decoration: none; } .cat-rule { border: 0; border-top: 1px solid var(--line-on-light); margin: 78px 0 88px; /* Figma: 78px under intro, 88px above first row */ } /* ----- Service rows ----- */ .cat-rows { display: flex; flex-direction: column; gap: 88px; /* Figma row gap */ } .cat-row { display: flex; align-items: center; gap: 127px; /* Figma column gap */ } .cat-row--reverse { flex-direction: row-reverse; } .cat-row__media { flex: 0 0 57.43%; /* 827 / 1440 */ display: block; } /* Images are the design's 827×526; width/height attrs reserve the ratio (no CLS), and width:100%/height:auto keep them fully responsive as the column scales. */ .cat-row__img { display: block; width: 100%; height: auto; } .cat-row__text { display: flex; flex-direction: column; gap: 22px; /* Figma gap between eyebrow / title / body (and between body paragraphs) */ flex: 1 1 auto; max-width: 486px; /* Figma text column */ } .cat-row__eyebrow { margin: 0; font-weight: var(--fw-bold); /* Figma: eyebrow is Bold, muted via colour */ font-size: var(--fs-eyebrow); /* 12px */ text-transform: uppercase; letter-spacing: 0.06em; /* Figma 0.72px @ 12px */ color: var(--text-faint); /* Figma says rgba(0,0,0,.42); the token is .55 on purpose — see variables.css */ } .cat-row__title { margin: 0; font-weight: var(--fw-bold); font-size: var(--fs-attr); /* 32px */ line-height: 0.9; /* Figma 28.8px @ 32px */ text-transform: uppercase; } .cat-row__body { margin: 0; font-weight: var(--fw-light); font-size: var(--fs-base); line-height: 1.625; letter-spacing: -0.02em; /* Figma -0.32px @ 16px */ } /* ----- Responsive ----- */ @media screen and (max-width: 1229px) { .cat-row { gap: 60px; } } @media screen and (max-width: 991px) { .cat-body { padding: 64px 0 56px; } .cat-intro { flex-direction: column; gap: 20px; } .cat-intro__heading, .cat-intro__text { flex: 1 1 auto; max-width: none; } .cat-rule { margin: 48px 0 56px; } .cat-rows { gap: 56px; } /* Stack every row image-over-text (ignore the desktop alternation) */ .cat-row, .cat-row--reverse { flex-direction: column; align-items: stretch; gap: 22px; } .cat-row__media, .cat-row__text { flex: 1 1 auto; max-width: none; } } /* ========================================================================== ABOUT US (2026 redesign) Figma file ErIWbDeYMNP1lwG5zCA6YJ, node 346:3255. Deliberately thin — most of the page is existing furniture: - flat dark banner -> .page-hero--flat (page-hero.css) - "Who We Are" intro -> .cat-intro* (category.css) - divider under the intro -> .cat-rule (category.css) - "Learn more" buttons -> .hp-btn (home.css) - "Our Customers" heading -> .hp-heading (home.css) - reviews carousel -> .hp-review* (home.css) Only the 2x2 service card grid and the customers row are new. Design geometry (1920 frame, 1440 content): banner ends 380, intro 441, divider 831, cards 865 / 1463.04, customers 2128, footer 3118. ========================================================================== */ /* Reuses .cat-body for the white surface; only the vertical rhythm differs. Figma: 61px banner -> intro, 113px below the last block to the footer. */ .cat-body--about { padding-top: 61px; padding-bottom: 113px; } /* Figma: copy ends 775 -> divider 831, divider 831 -> first card 865. */ .cat-body--about .cat-rule { margin-top: 56px; margin-bottom: 34px; } /* ========================================================================== SERVICE CARDS (2x2) ========================================================================== */ /* Figma: two 710px columns inside the 1440 content = a 20px column gap; the first card's rule sits 46px above the second row's image. */ .about-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; row-gap: 46px; } .about-card { display: flex; flex-direction: column; text-decoration: none; } /* Fixed ratio (Figma 710 x 451.584) so the differently-sized source photos all crop identically and the box reserves its height before the image loads. */ .about-card__media { width: 100%; aspect-ratio: 710 / 452; overflow: hidden; background-color: var(--btn-bg); } .about-card__img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Figma: 16px image -> caption row, the row is 75px tall, then 9px to the rule. */ .about-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 75px; margin-top: 16px; } .about-card__title { margin: 0; font-family: var(--font-avant); font-weight: var(--fw-bold); font-size: 2rem; /* 32px */ line-height: 1.025; /* Figma 32.8px @ 32px */ letter-spacing: 0.02em; /* Figma 0.64px @ 32px */ text-transform: uppercase; color: var(--color-black); } .about-card__rule { border: 0; height: 1px; background-color: var(--line-on-light); margin: 9px 0 0; } /* The whole card is the link, so give the button its hover state when the card is hovered anywhere - same treatment as .hp-btn:hover in home.css. */ .about-card:hover .hp-btn { --hp-btn-fill: #1b1b1b; color: #fff; } /* ========================================================================== OUR CUSTOMERS ========================================================================== */ /* Figma: 113px from the last card rule down to this block. */ .about-customers { margin-top: 113px; } .about-customers__row { display: flex; align-items: center; justify-content: space-between; gap: 60px; } /* Figma: five logos spaced across a 1072px track, each at its own natural size (they are deliberately NOT height-normalised - Cardiff Airport is 32px of ink, the Vale crest 94px). The supplied files carry differing amounts of internal padding, so the width/height attributes in the markup are set from each file's measured ink box, not its canvas, to make the visible marks match the design. The track is pinned to the Figma's 94px row height; tidy.webp's transparent padding overflows it harmlessly rather than inflating the section. */ .about-customers__logos { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex: 0 1 1072px; height: 94px; } .about-customers__logos img { display: block; flex: 0 0 auto; max-width: 100%; } /* Figma: 46px below the logo row. */ .about-customers__rule { border: 0; height: 1px; background-color: var(--line-on-light); margin: 46px 0 0; } /* ========================================================================== REVIEWS Same carousel as the homepage (shared partial); only the surrounding spacing differs, so .hp-reviews' own padding is not reused here. Figma: 98px from the customers rule to the quote. ========================================================================== */ .about-reviews { margin-top: 98px; } /* ========================================================================== RESPONSIVE ========================================================================== */ @media screen and (max-width: 1229px) { .about-card__title { font-size: 1.7rem; } .about-customers__logos { gap: 30px; } } @media screen and (max-width: 991px) { .cat-body--about { padding-top: 50px; padding-bottom: 70px; } .cat-body--about .cat-rule { margin-top: 40px; margin-bottom: 30px; } /* One card per row once the columns get too narrow for a 32px title plus a button. */ .about-cards { grid-template-columns: minmax(0, 1fr); row-gap: 40px; } .about-customers { margin-top: 60px; } .about-customers__row { flex-direction: column; align-items: flex-start; gap: 24px; } /* height:auto so wrapped rows aren't clipped by the desktop 94px track. */ .about-customers__logos { flex: 0 1 auto; width: 100%; height: auto; flex-wrap: wrap; gap: 30px 40px; justify-content: flex-start; } .about-customers__rule { margin-top: 30px; } .about-reviews { margin-top: 60px; } } @media screen and (max-width: 767px) { /* Stack the title above the button so neither is squeezed on a phone. */ .about-card__foot { flex-direction: column; align-items: flex-start; gap: 14px; min-height: 0; } .about-card__title { font-size: 1.5rem; } } /* ========================================================================== GET A QUOTE FORM (2026 redesign) Figma ErIWbDeYMNP1lwG5zCA6YJ (node 350:3616). A light, bordered form with labels above each field. Overrides Site.css's global dark input styling (which was built for the old form). Rendered by Views/Home/ContactUsForm.cshtml inside the get-quote page's .qf-section. Loaded in the ~/content/home bundle. ========================================================================== */ .qf-section { background: var(--color-white); color: var(--color-black); /* Figma (1920 frame): hero ends 380 -> form starts 448 = 68px. Form ends 1225 and the footer grid starts 1359 = 134px, of which .site-ftr already supplies 80px of padding-top, so only 54px belongs to this section. */ padding: 68px 0 54px; } /* Figma spans the form 483 -> 1438 inside the 240 -> 1680 content column: its midpoint is 960.5, i.e. dead centre of the 1920 frame. So it is centred, not left-aligned in the container. */ .qf { max-width: 955px; margin: 0 auto; } /* Vertical rhythm mirrors the Figma frame gaps */ .qf__form { display: flex; flex-direction: column; gap: 29px; } .qf__body { display: flex; flex-direction: column; gap: 51px; } .qf__top { display: flex; flex-direction: column; gap: 47px; } .qf__rows { display: flex; flex-direction: column; gap: 45px; } .qf__grid { display: flex; gap: 21px; } .qf__grid > * { flex: 1 1 0; min-width: 0; } .qf__field { display: flex; flex-direction: column; } .qf__label { margin: 0 0 1px; /* Figma: 1px between label and field */ font-family: var(--font-avant); font-weight: var(--fw-bold); font-size: var(--fs-24); /* 24px */ line-height: 1.583; /* Figma 38px @ 24px */ letter-spacing: -0.03em; /* -0.72px */ text-transform: uppercase; color: var(--color-black); } /* Every bordered control in this design is stroked with the SAME top-to-bottom gradient, not the flat #bfbaba that get_design_context reports (codegen flattens gradient strokes to their first stop). Measured off the design render, the stroke runs rgb(156,151,151) at the top edge to rgb(47,46,46) at the bottom on every control regardless of its height — i.e. #bfbaba -> #000 with the ramp extended past both ends of the box, which is the same construction Figma uses for the upload icon's stroke. Applied via the padding-box/border-box two-layer trick (as .hp-btn does) since a border can't take a gradient directly. */ .qf { --field-stroke: linear-gradient(180deg, var(--field-border) -32%, #000 143%); } /* Fields — override Site.css's global `input, textarea, select {…}` dark rules */ .qf__input { box-sizing: border-box; width: 100%; height: 60px; /* 15px + the 1px border = the Figma's 16px inset from the outer edge. */ padding: 0 15px; background: linear-gradient(var(--color-white), var(--color-white)) padding-box, var(--field-stroke) border-box; border: 1px solid transparent; border-radius: var(--radius-sm); /* 4px */ color: var(--color-black); font-family: var(--font-avant); font-weight: var(--fw-medium); font-size: 1.125rem; /* 18px */ } /* Swapping the custom property re-resolves the border-box layer above, so focus works for the select's three-layer background too without restating it. */ .qf__input:focus { outline: none; --field-stroke: linear-gradient(#000, #000); } .qf__input::placeholder { color: var(--text-muted); } .qf__select { -webkit-appearance: none; -moz-appearance: none; appearance: none; /* Three layers: the chevron on top, then the white fill, then the gradient stroke. Restated (rather than inherited from .qf__input) because the chevron layer has to sit above the fill. NOTE: the Figma has a chevron drawn for this control but the layer is toggled off, so the design render shows none. Kept, because a