/* ========================================================================== Suttons Central Built from the Figma artboard "MacBook Pro 16" — 1728 x 7223. Every measurement below is the raw Figma pixel value multiplied by --u, so the layout scales proportionally with the viewport and the numbers stay readable against the design. --vw is set by site.js from documentElement.clientWidth so the scrollbar doesn't skew the scale. ========================================================================== */ :root { --vw: 100vw; --u: calc(var(--vw) / 1728); --ink: #002833; /* section base */ --panel: #0C3B48; /* demographic panel */ --mint: #D1F9CA; /* accent / body copy */ --off-white: #EFF1EF; --lilac: #C4B4ED; --rule: #0F4756; --table-head: #B5A9D3; /* header row text + the rule beneath it */ --table-rule: #E7E3F1; /* every other row separator */ --font: "halyard-display", "halyard-text", sans-serif; } /* Cap the scale so type stops growing on very wide monitors. */ @media (min-width: 1920px) { :root { --u: calc(1920px / 1728); } } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--ink); color: #fff; font-family: var(--font); font-weight: 300; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg { display: block; max-width: 100%; } ul { margin: 0; padding: 0; list-style: none; } p { margin: 0; } a { color: inherit; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 12px 20px; background: var(--mint); color: var(--ink); font-size: 16px; text-decoration: none; } .skip-link:focus { left: 0; } :focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; } /* --------------------------------------------------------------- shared -- */ /* Small capitalised section label preceded by the "S" sygnet. */ .marker { display: flex; /* An img's baseline is its bottom edge, so this seats the sygnet on the text baseline. flex-end drops it to the line box bottom instead, which sits a descender's depth lower. */ align-items: baseline; gap: calc(14 * var(--u)); font-size: calc(15 * var(--u)); line-height: calc(21 * var(--u)); font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: #fff; } .marker__icon { width: calc(13 * var(--u)); height: auto; } /* --------------------------------------------------------------- reveal -- */ /* Elements rise and fade as they reach the viewport, staggered by the data-delay in the markup. The hidden state is scoped to .js-reveal, which an inline script in sets, so with no JS the page renders fully rather than staying blank. */ .js-reveal [data-reveal] { opacity: 0; transform: translateY(calc(26 * var(--u))); transition: opacity 0.75s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1); transition-delay: var(--reveal-delay, 0ms); } /* The two aerial layers are pixel-registered to one another, so they fade in place — translating them on different delays would pull the pins off the photo mid-animation. */ .js-reveal [data-reveal="fade"] { transform: none; } .js-reveal [data-reveal].is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js-reveal [data-reveal] { opacity: 1; transform: none; transition: none; } } /* The artboard switches colour part-way through several blocks, sometimes mid-sentence, so these mark the runs that break from their block's colour. Body copy uses pure #FFFFFF for its white runs; headings use #EFF1EF. */ .t-mint { color: var(--mint); } .t-white { color: #fff; } .t-off { color: var(--off-white); } /* Mint body copy used in three sections. */ .lede { font-size: calc(28 * var(--u)); line-height: calc(39 * var(--u)); font-weight: 300; color: var(--mint); } .btn-row { display: flex; gap: calc(19 * var(--u)); } .btn { display: inline-flex; align-items: center; justify-content: center; height: calc(43.93 * var(--u)); padding: 0 calc(24 * var(--u)); border-radius: calc(40 * var(--u)); font-size: calc(17.5 * var(--u)); line-height: 1; font-weight: 300; color: #fff; text-decoration: none; white-space: nowrap; transition: background-color 0.25s ease, color 0.25s ease; } .btn--lilac { min-width: calc(217.27 * var(--u)); background: rgba(249, 249, 249, 0.09); border: 1px solid var(--lilac); } .btn--lilac:hover { background: rgba(196, 180, 237, 0.28); } .btn--mint { min-width: calc(156.86 * var(--u)); background: rgba(209, 249, 202, 0.15); border: 1px solid var(--mint); } .btn--mint:hover { background: rgba(209, 249, 202, 0.32); } /* --------------------------------------------------------------- header -- */ .site-header { position: absolute; z-index: 20; top: calc(33 * var(--u)); left: calc(27 * var(--u)); right: calc(27 * var(--u)); display: flex; align-items: center; justify-content: space-between; } .site-header__logo img { width: calc(221 * var(--u)); height: auto; } .nav-toggle { display: flex; align-items: center; gap: calc(16 * var(--u)); padding: calc(8 * var(--u)) 0; background: none; border: 0; color: #E7E9E6; cursor: pointer; } .nav-toggle__label { font-family: var(--font); font-size: calc(15 * var(--u)); letter-spacing: 0.2em; text-transform: uppercase; opacity: 0; transition: opacity 0.25s ease; } .nav-toggle:hover .nav-toggle__label, .nav-toggle:focus-visible .nav-toggle__label { opacity: 1; } .nav-toggle__bars { display: block; width: calc(62 * var(--u)); height: calc(17.59 * var(--u)); position: relative; } .nav-toggle__bars span { position: absolute; left: 0; width: 100%; height: calc(2.51 * var(--u)); background: #E7E9E6; transition: transform 0.3s ease, opacity 0.2s ease; } .nav-toggle__bars span:first-child { top: 0; } .nav-toggle__bars span:last-child { top: calc(15.08 * var(--u)); } .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:first-child { transform: translateY(calc(7.5 * var(--u))) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:last-child { transform: translateY(calc(-7.5 * var(--u))) rotate(-45deg); } .site-nav { position: fixed; inset: 0; z-index: 19; display: flex; align-items: center; justify-content: center; background: rgba(0, 40, 51, 0.97); } .site-nav[hidden] { display: none; } .site-nav ul { display: grid; gap: calc(28 * var(--u)); text-align: center; } .site-nav a { font-size: calc(40 * var(--u)); line-height: 1.2; font-weight: 300; color: #fff; text-decoration: none; transition: color 0.2s ease; } .site-nav a:hover { color: var(--mint); } /* ----------------------------------------------------------------- hero -- */ /* Figma: frame 1728 x 1220. Render sits in a 1730 x 1786 box at y -566. */ .hero { position: relative; height: calc(1220 * var(--u)); overflow: hidden; background: var(--ink); } .hero__media { position: absolute; inset: 0; } .hero__media img { position: absolute; left: calc(-2 * var(--u)); top: calc(-566 * var(--u)); width: calc(1730 * var(--u)); height: calc(1786 * var(--u)); object-fit: cover; /* Anchor to the foot of the frame: the crop comes off the sky, which the scrim covers anyway, and the yard stays whole. */ object-position: center bottom; max-width: none; } /* Solid band behind the logo, then the long fade over the sky. */ .hero__cap { position: absolute; left: 0; right: 0; top: 0; height: calc(117 * var(--u)); background: var(--ink); } .hero__scrim { position: absolute; left: 0; right: 0; top: calc(-13 * var(--u)); height: calc(1135 * var(--u)); background: linear-gradient(180deg, #002833 16%, rgba(0, 40, 51, 0.894) 37.92%, rgba(0, 40, 51, 0.770) 49.55%, rgba(0, 40, 51, 0.5) 64.54%, rgba(0, 40, 51, 0) 98.08%); } .hero__body { position: absolute; left: calc(96 * var(--u)); top: calc(129 * var(--u)); } .hero__title { margin: 0; width: calc(1038 * var(--u)); font-size: calc(53 * var(--u)); line-height: calc(70 * var(--u)); font-weight: 200; color: #fff; } .hero__body .btn-row { margin-top: calc(33 * var(--u)); } /* Four glass cards straddling the roofline. */ .usp { position: absolute; left: calc(23 * var(--u)); top: calc(433 * var(--u)); width: calc(1683 * var(--u)); display: flex; gap: calc(14.33 * var(--u)); } .usp__card { position: relative; flex: 1 1 0; height: calc(252 * var(--u)); padding: calc(40 * var(--u)); display: flex; align-items: flex-end; border: 1px solid rgba(196, 180, 237, 0.425); border-radius: calc(30 * var(--u)); } /* Each card carries its own tint in the artboard. */ .usp__card--a { background: rgba(53, 102, 123, 0.34); } .usp__card--b { background: rgba(64, 111, 132, 0.34); } .usp__card--c { background: rgba(55, 98, 116, 0.255); } .usp__card--d { background: rgba(56, 104, 124, 0.34); } .usp__icon { position: absolute; top: calc(20 * var(--u)); right: calc(20 * var(--u)); width: calc(71 * var(--u)); height: calc(71 * var(--u)); display: grid; place-items: center; background: rgba(0, 40, 51, 0.8); border-radius: calc(18 * var(--u)); } .usp__icon img { width: calc(30 * var(--u)); height: auto; } .usp__text { font-size: calc(27 * var(--u)); line-height: calc(35 * var(--u)); color: #fff; } .usp__text strong { display: block; font-weight: 500; } .usp__text span { display: block; font-weight: 300; } /* ----------------------------------------------------------- local area -- */ /* Figma: frame 1728 x 1677. Aerial + pin overlay are the same 4096 x 3033 source, so identical object-fit keeps the pins registered to the photo. */ .local { position: relative; height: calc(1677 * var(--u)); background: var(--ink); } .local__media { position: absolute; left: 0; right: 0; top: 0; height: calc(1465 * var(--u)); } .local__layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .local__layer--pins { z-index: 2; } .local__fade { position: absolute; left: 0; right: 0; z-index: 1; } .local__fade--top { top: calc(91 * var(--u)); height: calc(580 * var(--u)); background: linear-gradient(180deg, #002833 16%, rgba(0, 40, 51, 0.894) 37.92%, rgba(0, 40, 51, 0.770) 49.55%, rgba(0, 40, 51, 0.5) 64.54%, rgba(0, 40, 51, 0) 98.08%); } .local__fade--bottom { top: calc(1081 * var(--u)); height: calc(491 * var(--u)); background: linear-gradient(0deg, #002833 16%, rgba(0, 40, 51, 0.894) 37.92%, rgba(0, 40, 51, 0.770) 49.55%, rgba(0, 40, 51, 0.5) 64.54%, rgba(0, 40, 51, 0) 98.08%); } .local__cap { position: absolute; left: 0; right: 0; top: 0; z-index: 3; height: calc(96 * var(--u)); background: var(--ink); } .local__intro { position: absolute; z-index: 4; left: calc(96 * var(--u)); top: calc(86 * var(--u)); right: calc(96 * var(--u)); } .local__intro .marker { position: absolute; left: 0; top: calc(6 * var(--u)); } .local__intro .lede { width: calc(888 * var(--u)); margin-left: calc(423 * var(--u)); } .feature-cards { position: absolute; z-index: 4; left: calc(25 * var(--u)); right: calc(24 * var(--u)); top: calc(1371 * var(--u)); display: flex; gap: calc(16 * var(--u)); } .feature-card { flex: 1 1 0; height: calc(259 * var(--u)); padding: calc(15 * var(--u)); display: flex; align-items: center; gap: calc(26 * var(--u)); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: calc(30 * var(--u)); } .feature-card--lilac { background: rgba(196, 180, 237, 0.289); } .feature-card--mint { background: rgba(209, 249, 202, 0.136); } .feature-card__img { flex: none; width: calc(236 * var(--u)); height: calc(229 * var(--u)); object-fit: cover; border-radius: calc(30 * var(--u)); } /* Subject sits on the right in both photos — the lorry cab and the Aldi/Costa totem — and a centred crop clips each of them. */ .feature-card__img--hgv, .feature-card__img--aldi { object-position: 85% center; } .feature-card__text { font-size: calc(23 * var(--u)); line-height: calc(32 * var(--u)); font-weight: 300; color: #fff; } /* ------------------------------------------------------------- the site -- */ /* Figma: 1728 x 1466, rounded off at the bottom over the demographic panel. */ .site { position: relative; z-index: 2; height: calc(1466 * var(--u)); background: var(--ink); border-radius: 0 0 calc(30 * var(--u)) calc(30 * var(--u)); } .site__head { position: absolute; left: calc(96 * var(--u)); right: calc(72 * var(--u)); top: calc(44 * var(--u)); display: flex; justify-content: space-between; gap: calc(60 * var(--u)); } .site__intro .lede { width: calc(669 * var(--u)); margin-top: calc(39 * var(--u)); } .schedule { width: calc(588 * var(--u)); margin-top: calc(44 * var(--u)); border-collapse: collapse; font-size: calc(16 * var(--u)); line-height: calc(22 * var(--u)); font-weight: 400; color: #fff; text-align: right; } .schedule th, .schedule td { padding: calc(9 * var(--u)) 0; border-bottom: 1px solid var(--table-rule); font-weight: 400; } .schedule th:first-child { text-align: left; } .schedule td { width: calc(110 * var(--u)); } /* Header row and the rule under it are the lilac tint. */ .schedule thead th { color: var(--table-head); border-bottom-color: var(--table-head); font-weight: 700; } .schedule__total th, .schedule__total td, .schedule__area th, .schedule__area td { font-weight: 700; } .siteplan { position: absolute; left: calc(25 * var(--u)); top: calc(347 * var(--u)); width: calc(1678 * var(--u)); height: calc(807 * var(--u)); margin: 0; background: rgba(209, 249, 202, 0.06); border: 2px solid var(--rule); border-radius: calc(30 * var(--u)); overflow: hidden; } .siteplan__stage { position: absolute; left: calc(254 * var(--u)); top: calc(42 * var(--u)); width: calc(1170 * var(--u)); height: calc(739 * var(--u)); touch-action: none; cursor: default; /* only offer the grab cursor once zoomed */ -webkit-user-select: none; user-select: none; } .siteplan__stage.is-zoomed { cursor: grab; } .siteplan__stage.is-dragging { cursor: grabbing; } .siteplan__img { width: 100%; height: 100%; object-fit: contain; transform-origin: center center; transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1); will-change: transform; backface-visibility: hidden; /* Stops the browser's native image drag-and-drop hijacking the pan. */ -webkit-user-drag: none; pointer-events: none; } .siteplan__zoom { position: absolute; left: calc(35 * var(--u)); top: calc(365 * var(--u)); display: grid; gap: calc(7.1 * var(--u)); } .zoom { width: calc(35.45 * var(--u)); height: calc(35.45 * var(--u)); display: grid; place-items: center; padding: 0; background: rgba(0, 40, 51, 0.8); border: 1px solid var(--rule); border-radius: 50%; cursor: pointer; transition: background-color 0.2s ease, opacity 0.2s ease; } .zoom:hover:not(:disabled) { background: rgba(15, 71, 86, 0.9); } .zoom:disabled { opacity: 0.4; cursor: default; } .zoom img { width: calc(14.18 * var(--u)); height: auto; } .specs { position: absolute; left: calc(89 * var(--u)); right: calc(89 * var(--u)); top: calc(1234 * var(--u)); display: flex; justify-content: space-between; } .spec { width: calc(200 * var(--u)); text-align: center; } .spec img { width: calc(48 * var(--u)); height: calc(48 * var(--u)); margin: 0 auto calc(32 * var(--u)); } .spec p { font-size: calc(22 * var(--u)); line-height: calc(29 * var(--u)); font-weight: 300; color: var(--off-white); } /* ---------------------------------------------------------- demographic -- */ /* Sits 30px under the site panel so its rounded corners read against it. The artboard runs this panel to y5396 but the location section is painted over its last 155px, so the visible band is 4333 -> 5241. */ .demographic { position: relative; z-index: 1; margin-top: calc(-30 * var(--u)); height: calc(938 * var(--u)); /* last 30px sits under .location's corners */ background: var(--panel); overflow: hidden; } .demographic__scrim { position: absolute; left: 0; right: 0; top: calc(115 * var(--u)); height: calc(948 * var(--u)); background: linear-gradient(0deg, rgba(0, 40, 51, 0.6) 16%, rgba(0, 40, 51, 0.536) 37.92%, rgba(0, 40, 51, 0.462) 49.55%, rgba(0, 40, 51, 0.3) 64.54%, rgba(0, 40, 51, 0) 98.08%); pointer-events: none; } .demographic__col { position: absolute; left: calc(95 * var(--u)); top: calc(115 * var(--u)); } .demographic__title { width: calc(605 * var(--u)); margin: calc(43 * var(--u)) 0 0; font-size: calc(33 * var(--u)); line-height: calc(43 * var(--u)); font-weight: 300; color: var(--mint); } .demographic__figure { width: calc(796 * var(--u)); height: calc(433 * var(--u)); margin: calc(74 * var(--u)) 0 0; border-radius: calc(30 * var(--u)); overflow: hidden; } .demographic__figure img { width: 100%; height: 100%; object-fit: cover; } /* The three stats are spaced unevenly in the artboard, so they are pinned rather than distributed. */ .stats { position: absolute; left: calc(1141 * var(--u)); top: 0; width: calc(500 * var(--u)); } /* Artboard "Vector 7": 1px rule, 633 tall at x1083, stroked with a gradient that runs from transparent through solid mint and back out. */ .stats::before { content: ""; position: absolute; left: calc(-58 * var(--u)); top: calc(156 * var(--u)); width: 1px; height: calc(633 * var(--u)); background: linear-gradient(180deg, rgba(209, 249, 202, 0) 0%, rgba(209, 249, 202, 0.20) 25%, rgba(209, 249, 202, 0.60) 50%, rgba(169, 201, 163, 0.32) 75%, rgba(123, 147, 119, 0) 100%); } .stats li { position: absolute; left: 0; width: 100%; } .stats li:nth-child(1) { top: calc(156 * var(--u)); } .stats li:nth-child(2) { top: calc(363 * var(--u)); } .stats li:nth-child(3) { top: calc(596 * var(--u)); } .stats__num { display: block; font-size: calc(98 * var(--u)); line-height: calc(138 * var(--u)); font-weight: 200; letter-spacing: 0.03em; color: var(--mint); } .stats__label { display: block; font-size: calc(25 * var(--u)); line-height: calc(35 * var(--u)); font-weight: 300; color: var(--off-white); } /* ------------------------------------------------------------- location -- */ /* Artboard 5241 -> 6637 (the footer picks up from there). */ /* Overlaps the demographic panel by 30px so the rounded top corners have the lighter panel behind them to read against — the mirror of .site's base. */ .location { position: relative; z-index: 2; margin-top: calc(-30 * var(--u)); height: calc(1396 * var(--u)); background: var(--ink); border-radius: calc(30 * var(--u)) calc(30 * var(--u)) 0 0; } .location__title { position: absolute; left: calc(96 * var(--u)); top: calc(53 * var(--u)); width: calc(1038 * var(--u)); margin: 0; font-size: calc(55 * var(--u)); line-height: calc(73 * var(--u)); font-weight: 200; color: #fff; } .location__title span { color: var(--mint); } .map { position: absolute; left: calc(31 * var(--u)); top: calc(256 * var(--u)); width: calc(1669 * var(--u)); height: calc(712 * var(--u)); border-radius: calc(30 * var(--u)); overflow: hidden; background: #0a2f3b; } .map__canvas { position: absolute; inset: 0; } /* Shown until the API key is filled in; site.js hides it once the map loads. */ .map__fallback { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: calc(12 * var(--u)); padding: calc(40 * var(--u)); text-align: center; background: rgba(0, 40, 51, 0.6); } .map__fallback[hidden] { display: none; } .map__fallback-title { font-size: calc(28 * var(--u)); font-weight: 300; color: var(--mint); } .map__fallback-note { font-size: calc(18 * var(--u)); font-weight: 300; color: rgba(255, 255, 255, 0.7); } .map__fallback code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; } .location__foot { position: static; } .location__foot .lede { position: absolute; left: calc(96 * var(--u)); top: calc(1032 * var(--u)); width: calc(719 * var(--u)); } .distances { position: absolute; left: calc(1083 * var(--u)); top: calc(1027 * var(--u)); width: calc(441 * var(--u)); border-collapse: collapse; font-size: calc(16 * var(--u)); line-height: calc(22 * var(--u)); font-weight: 300; color: #fff; } .distances th, .distances td { padding: calc(8 * var(--u)) 0; border-bottom: 1px solid var(--table-rule); font-weight: 400; text-align: right; } .distances th { text-align: left; } .distances td { width: calc(110 * var(--u)); } /* No rule under the final row (Birmingham). */ .distances tr:last-child th, .distances tr:last-child td { border-bottom: 0; } /* --------------------------------------------------------------- footer -- */ /* Artboard 6637 -> 7188, then 35px of tail. Offsets below are relative to the rule at the top of the footer. */ .footer { position: relative; height: calc(551 * var(--u)); margin: 0 calc(24 * var(--u)) calc(35 * var(--u)) calc(26 * var(--u)); border-top: 1px solid rgba(209, 249, 202, 0.5); background: var(--ink); } .footer__title { position: absolute; left: calc(70 * var(--u)); top: calc(42 * var(--u)); font-size: calc(33 * var(--u)); line-height: calc(43 * var(--u)); font-weight: 300; color: var(--mint); } .footer__actions { position: absolute; left: calc(1057 * var(--u)); top: calc(51 * var(--u)); } .agents { position: absolute; left: calc(70 * var(--u)); top: calc(307 * var(--u)); display: flex; } .agent { display: flex; gap: calc(17 * var(--u)); width: calc(468 * var(--u)); } .agent__logo { height: auto; flex: none; margin-top: calc(5 * var(--u)); } .agent--haslams .agent__logo { width: calc(165 * var(--u)); } .agent--dtre .agent__logo { width: calc(159 * var(--u)); } .agent__people { display: grid; gap: calc(7 * var(--u)); } .agent__people li { display: grid; } .agent__people span, .agent__people a { font-size: calc(19 * var(--u)); line-height: calc(23 * var(--u)); font-weight: 300; text-decoration: none; } .agent__people span { color: var(--mint); } /* name */ .agent__people a { color: var(--off-white); } /* email */ .agent__people a:hover { text-decoration: underline; } .footer__marks { position: absolute; left: calc(1061 * var(--u)); top: calc(349 * var(--u)); display: flex; align-items: center; gap: calc(37 * var(--u)); } .footer__mark--central { width: calc(122 * var(--u)); } .footer__mark--park { width: calc(258 * var(--u)); } .legal { position: absolute; left: calc(70 * var(--u)); top: calc(468 * var(--u)); width: calc(1402 * var(--u)); font-size: calc(12 * var(--u)); line-height: calc(17 * var(--u)); font-weight: 300; color: #fff; } /* ========================================================================== */ /* Below 900px the artboard scale would make type unreadable, so the layout drops out of absolute positioning and reflows in a single column. */ /* ========================================================================== */ @media (max-width: 900px) { :root { --u: 1px; } .marker { font-size: 12px; line-height: 16px; gap: 10px; } .marker__icon { width: 11px; } .lede { font-size: 17px; line-height: 26px; } .btn { height: 44px; font-size: 15px; padding: 0 22px; } .btn--lilac, .btn--mint { min-width: 0; } .btn-row { flex-wrap: wrap; gap: 12px; } /* header */ .site-header { top: 22px; left: 20px; right: 20px; } .site-header__logo img { width: 150px; } .nav-toggle__label { display: none; } .nav-toggle__bars { width: 36px; height: 11px; } .nav-toggle__bars span { height: 2px; } .nav-toggle__bars span:last-child { top: 9px; } .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:first-child { transform: translateY(4.5px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:last-child { transform: translateY(-4.5px) rotate(-45deg); } .site-nav a { font-size: 26px; } .site-nav ul { gap: 20px; } /* hero */ .hero { height: auto; padding: 120px 0 0; } /* Show only the building band; the sky would leave the cards unreadable. The mask dissolves the photo's top edge into the section colour, so the band has no hard cut across it. It fades from the image's own top rather than a share of the hero, so it holds however the copy reflows. */ /* Zoomed back out to full width. At 150% the 1199px source was being magnified past 1:1 and going soft; at 100% it is drawn below its native size, so the render stays sharp. */ .hero__media img { left: 0; top: auto; bottom: 0; width: 100%; height: 450px; object-position: center bottom; -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.25) 16%, rgba(0, 0, 0, 0.7) 32%, #000 48%); mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.25) 16%, rgba(0, 0, 0, 0.7) 32%, #000 48%); } /* The mask now does the blending, and everything above the photo is already the section colour, so the desktop scrim would only double-darken. */ .hero__scrim { display: none; } .hero__cap { height: 90px; } /* z-index keeps these above the scrim, which is positioned and would otherwise paint over static content. */ .hero__body { position: relative; z-index: 2; left: auto; top: auto; padding: 0 20px; } .hero__title { width: auto; font-size: 28px; line-height: 38px; } .hero__body .btn-row { margin-top: 24px; } .usp { position: relative; z-index: 2; left: auto; top: auto; width: auto; margin-top: 40px; padding: 0 20px 360px; /* clears the taller render below the cards */ flex-wrap: wrap; gap: 12px; } .usp__card { flex: 1 1 calc(50% - 6px); min-width: 150px; height: auto; min-height: 170px; padding: 16px; border-radius: 20px; } .usp__icon { width: 46px; height: 46px; border-radius: 12px; top: 14px; right: 14px; } .usp__icon img { width: 20px; } .usp__text { font-size: 16px; line-height: 21px; padding-top: 46px; } /* local area */ .local { height: auto; padding: 70px 0 0; } .local__media { height: 460px; top: 250px; } /* Recentre the crop on the site itself so the nearest brands stay in frame. */ .local__layer { object-position: 53% 62%; } .local__fade--top { top: 0; height: 170px; } .local__fade--bottom { top: 300px; height: 160px; } .local__cap { display: none; } .local__intro { position: relative; z-index: 4; left: auto; top: auto; right: auto; display: block; padding: 0 20px; } .local__intro .marker { position: static; } .local__intro .lede { width: auto; margin: 16px 0 0; } .feature-cards { position: relative; z-index: 4; left: auto; right: auto; top: auto; display: grid; gap: 12px; margin-top: 500px; padding: 0 20px 70px; } .feature-card { height: auto; gap: 16px; border-radius: 20px; } .feature-card__img { width: 120px; height: 130px; border-radius: 16px; } .feature-card__text { font-size: 16px; line-height: 23px; } /* the site */ .site { height: auto; padding: 60px 0 70px; border-radius: 0 0 20px 20px; } .site__head { position: static; display: block; padding: 0 20px; } .site__intro .lede { width: auto; margin-top: 16px; } .schedule { width: 100%; margin-top: 32px; font-size: 13px; line-height: 18px; } .schedule td { width: auto; } .siteplan { position: relative; /* stays the containing block for the stage + zoom */ left: auto; top: auto; width: auto; height: 300px; margin: 32px 20px 0; border-radius: 20px; } .siteplan__stage { position: absolute; inset: 30px 20px; width: auto; height: auto; } .siteplan__zoom { left: 14px; top: 14px; gap: 8px; } .zoom { width: 32px; height: 32px; } .zoom img { width: 12px; } .specs { position: static; display: grid; grid-template-columns: repeat(2, 1fr); gap: 34px 12px; margin-top: 48px; padding: 0 20px; } .spec { width: auto; } .spec img { width: 38px; height: 38px; margin-bottom: 16px; } .spec p { font-size: 15px; line-height: 21px; } /* demographic */ .demographic { height: auto; margin-top: -20px; padding: 70px 20px 70px; } .demographic__scrim { display: none; } .demographic__col { position: static; } .demographic__title { width: auto; margin-top: 18px; font-size: 22px; line-height: 30px; } .demographic__figure { width: auto; height: 230px; margin-top: 28px; border-radius: 20px; } .stats { position: static; width: auto; margin-top: 44px; display: grid; gap: 30px; } .stats::before { display: none; } /* single column — nothing to divide */ .stats li { position: static; width: auto; } .stats__num { font-size: 54px; line-height: 62px; } .stats__label { font-size: 16px; line-height: 22px; margin-top: 4px; } /* location */ .location { height: auto; margin-top: -20px; padding: 70px 0 0; border-radius: 20px 20px 0 0; } .location__title { position: static; width: auto; margin: 0 20px; font-size: 26px; line-height: 36px; } .map { position: relative; /* stays the containing block for the canvas */ left: auto; top: auto; width: auto; height: 320px; margin: 28px 20px 0; border-radius: 20px; } .map__fallback-title { font-size: 18px; } .map__fallback-note { font-size: 13px; } .location__foot .lede { position: static; width: auto; margin: 34px 20px 0; } .distances { position: static; width: calc(100% - 40px); margin: 28px 20px 0; font-size: 13px; line-height: 18px; } .distances td { width: auto; } /* footer */ .footer { position: relative; height: auto; margin: 50px 20px 0; padding: 30px 0 40px; } .footer__title { position: static; font-size: 20px; line-height: 28px; } .footer__actions { position: static; padding-top: 20px; } .agents { position: static; display: grid; gap: 28px; margin-top: 44px; } .agent { width: auto; gap: 14px; } .agent--haslams .agent__logo, .agent--dtre .agent__logo { width: 120px; } .agent__people span, .agent__people a { font-size: 14px; line-height: 19px; } .footer__marks { position: static; gap: 22px; margin-top: 36px; } .footer__mark--central { width: 88px; } .footer__mark--park { width: 180px; } .legal { position: static; width: auto; margin: 34px 0 0; font-size: 10px; line-height: 14px; } }