@charset "UTF-8"; /* ========================================================================= Dam Lasers - main stylesheet ========================================================================= Ported from the site's Squarespace build. Every colour, font weight, size and breakpoint below was READ OUT of the exported site.css and the Fluid Engine grid definitions - none of it is eyeballed. Source of record: _source/extracted/design-tokens.json A note on modern CSS, since your CSS predates most of it: - CUSTOM PROPERTIES --name: value; used as var(--name) Real variables, resolved by the browser at runtime (not compiled away like Sass). They cascade and inherit, which is what makes the section themes below work: a section sets --bg/--fg once and everything inside it picks them up automatically. - FLEXBOX (display:flex) one-dimensional layout - a row or a column. - GRID (display:grid) two-dimensional layout - rows AND columns. Both replace the float/clearfix and inline-block hacks of the pre-2015 era. Nothing here needs a clearfix. - clamp(MIN, PREFERRED, MAX) picks a value that scales with the viewport but never leaves the bounds. It replaces most of what media queries used to do for type sizing, which is why there are far fewer breakpoints than you might expect. - Logical properties (padding-block, margin-inline) are the writing-mode- aware equivalents of top/bottom and left/right. Used where it reads better. Structure: 1 Fonts 2 Design tokens 3 Reset and base 4 Utilities 5 Layout primitives 6 Section themes 7 Header and navigation 8 Hero 9 Intro 10 Services 11 Team 12 Newsletter 13 Footer 14 Buttons 15 Forms 16 Contact page 17 Generic page / 404 18 Reduced motion and print ========================================================================= */ /* ========================================================================= 1. Fonts ------------------------------------------------------------------------- Self-hosted Poppins. Squarespace loaded this from Adobe Typekit; Poppins is SIL OFL 1.1 so it is served from our own origin instead - one less third-party dependency and no GDPR question about hotlinking a font CDN. Weights are exactly the four the site uses (300 body / 400 meta / 500 headings / 700 ). No italics: the site contains none. font-display: swap renders text immediately in a fallback and swaps when Poppins arrives, rather than leaving invisible text (FOIT). unicode-range splits latin from latin-ext so a visitor whose page contains no extended characters never downloads that file. ========================================================================= */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/poppins-300-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/poppins-300-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/poppins-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/poppins-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/poppins-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/poppins-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/poppins-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/poppins-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ========================================================================= 2. Design tokens ========================================================================= */ :root { /* --- Colour. Squarespace theme palette, converted from HSL. ------------ */ --c-black: #000000; /* theme "black" */ --c-dark: hsl(0 0% 20.78%); /* theme "dark" = #353535 */ --c-dark-bold: hsl(0 0% 11.37%); /* theme "dark-bold" = #1D1D1D */ --c-white: #ffffff; --c-light-accent: hsl(45 11.76% 86.67%); /* #E1DFD9 warm off-white */ --c-accent: hsl(241.8 64.88% 40.2%); /* #2824A9 deep indigo */ /* Set per section in §6; everything inside a section reads these. */ --bg: var(--c-dark-bold); --fg: var(--c-white); /* --- Type ------------------------------------------------------------- */ --font: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif; --fw-body: 300; /* Light */ --fw-meta: 400; /* Regular */ --fw-heading: 500; /* Medium */ --fw-bold: 700; /* Bold - only */ --lh-body: 1.8; --lh-heading: 1.4; --lh-meta: 1.2; /* * Squarespace sizes are fixed rem values (h1 4rem etc). Fixed 4rem = 64px is * far too large on a 360px-wide phone, and Squarespace handled that with its * own responsive machinery. clamp() does the same job in one declaration: * never below the first value, never above the last, fluid in between. * The MAX of each clamp is the exact Squarespace value. */ --fs-h1: clamp(2.5rem, 1.30rem + 5.2vw, 4rem); --fs-h2: clamp(1.9rem, 1.34rem + 2.4vw, 2.8rem); --fs-h3: clamp(1.6rem, 1.25rem + 1.5vw, 2.2rem); --fs-h4: 1.2rem; --fs-large: clamp(1.1rem, 0.98rem + 0.5vw, 1.4rem); --fs-body: 1rem; --fs-small: 0.9rem; /* --- Layout ----------------------------------------------------------- */ --max-width: 1500px; /* Squarespace maxPageWidth */ --gutter: 6vw; /* Squarespace mobile site gutter, used throughout */ /* * Logo height. Squarespace's tweak is a flat 200px; the clamp keeps that as * the desktop value while scaling down on narrow screens. * At 1440px wide, 14vw = 201.6px, so the 200px ceiling applies - matching the * live site exactly. * * WHY THE min(..., 23vh) WAS ADDED * The logo scales with viewport WIDTH but consumes viewport HEIGHT, and * those are independent. A wide-but-short window therefore got the LARGEST * logo and had the LEAST room for it. Since the header is fixed, that space * never scrolls away. Measured before this change: * 1366x768 laptop 219px header = 28.5% of the screen * 844x390 phone landscape 135px header = 34.6% * At 844x390 the entire viewport was header + hero title, with no body * content visible at all. * * 23vh is chosen so the cap is INERT on normal displays: at 1440x900 it * evaluates to 207px, above the 200px ceiling, so the live-site value is * preserved exactly. It only starts to bite as the viewport gets shorter. * min() inside clamp() keeps this continuous - no jump on resize. * * TRADE-OFF, ACCEPTED DELIBERATELY: on a short viewport this no longer * matches Squarespace pixel-for-pixel (at 1440x800 the live site shows * 200px, this shows 184px). That divergence is the point of the fix. */ --logo-h: clamp(40px, min(14vw, 23vh), 140px); /* * DERIVED, not guessed. The header is the logo plus its vertical padding, * and since 2026-08-17 that padding is itself a fraction of the logo (see * .site-header below), so one multiplication describes the whole thing: * * header = logo + 2 x (logo x 0.08) = logo x 1.16 * * Written as logo + max(12px, logo x 0.16) so it tracks the same 6px floor * the padding has. Computing it means the value used for scroll-padding and * for the hero's top offset can never drift out of sync with the actual * rendered header - which it did while this was a hand-tuned clamp. * * THIS IS NOW THE ONLY --header-h IN THE FILE. The mobile and short-viewport * blocks used to redefine it (and the padding) as well; they no longer need * to, because both branches change only --logo-h and everything else follows. */ --header-h: calc(var(--logo-h) + max(12px, calc(var(--logo-h) * 0.16))); /* --- Rhythm ----------------------------------------------------------- */ --space-section: clamp(3.5rem, 2rem + 6vw, 7rem); --space-lg: 2.5rem; --space-md: 1.5rem; --space-sm: 0.75rem; --radius: 0px; /* Squarespace used square corners throughout */ --transition: 200ms ease; } /* ========================================================================= 3. Reset and base ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } html { /* Squarespace base font size. Never set this in px without a good reason - it overrides the user's browser font-size preference. 100% respects it. */ font-size: 100%; -webkit-text-size-adjust: 100%; /* Anchor links must not land underneath the fixed header. */ scroll-padding-top: var(--header-h); scroll-behavior: smooth; } body { margin: 0; font-family: var(--font); font-weight: var(--fw-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg); background-color: var(--c-dark-bold); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Belt and braces against a stray wide element causing sideways scroll. */ overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--space-md); font-weight: var(--fw-heading); line-height: var(--lh-heading); letter-spacing: 0; } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } h4 { font-size: var(--fs-h4); } p { margin: 0 0 var(--space-md); } p:last-child { margin-bottom: 0; } strong, b { font-weight: var(--fw-bold); } a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; } a:hover { text-decoration-thickness: 2px; } img, picture, video, svg { display: block; max-width: 100%; height: auto; } /* The browser's default is `margin: 1em 40px`, which indents every figure away * from the text beside it - and doubles up on a gallery, whose images are * figures inside a figure. Element selector, so core's block stylesheet (which * targets .wp-block-image and friends) still wins where it has an opinion. */ figure { margin: 0 0 var(--space-md); } ul, ol { margin: 0; padding: 0; } li { list-style: none; } /* * Visible focus for keyboard users, on everything, always. * :focus-visible fires for keyboard navigation but NOT for mouse clicks, so * this does not produce the outline-on-click that people used to remove * with `outline: none` - which broke keyboard accessibility entirely. */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--c-light-accent); outline-offset: 3px; } /* ========================================================================= 4. Utilities ========================================================================= */ /* * Visually hidden but still read by screen readers. Do NOT use * display:none or visibility:hidden for this - both remove the element from * the accessibility tree as well as the screen. */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Keyboard users get a skip link as the first focusable thing on the page. */ .skip-link { position: absolute; top: -100%; left: var(--space-md); z-index: 999; padding: var(--space-sm) var(--space-md); background: var(--c-light-accent); color: var(--c-black); text-decoration: none; } .skip-link:focus { top: var(--space-md); } /* * Honeypot. Hidden from people, present in the DOM for bots. * Positioned off-screen rather than display:none because some bots skip * display:none fields specifically to dodge this trick. */ .honeypot { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ========================================================================= 5. Layout primitives ========================================================================= */ .site-main { display: block; } /* A full-bleed band of colour. Squarespace: "full-bleed-section". */ .section { position: relative; padding-block: var(--space-section); padding-inline: var(--gutter); background-color: var(--bg); color: var(--fg); } /* The content column inside a band, capped at the Squarespace max width. */ .section__inner { width: 100%; max-width: var(--max-width); margin-inline: auto; } .section__inner--narrow { max-width: 46rem; } /* ========================================================================= 6. Section themes ------------------------------------------------------------------------- Each theme sets --bg and --fg; everything nested inherits them. This is the custom-property equivalent of Squarespace's [data-section-theme] blocks, and the values are taken from that CSS verbatim. ========================================================================= */ .section--dark-bold { --bg: var(--c-dark-bold); --fg: var(--c-white); } .section--dark { --bg: var(--c-dark); --fg: var(--c-white); } .section--black { --bg: var(--c-black); --fg: var(--c-white); } /* ========================================================================= 7. Header and navigation ------------------------------------------------------------------------- Squarespace config, read from the live page: desktop layout : brandingCenter mobile layout : logoLeftNavRight, doubleLineHamburger, fade overlay theme : "dark" (#353535), NOT transparent fixed : true ON THE LOGO HEIGHT Squarespace's tweak is header-logo-height: 200px (mobile max 70px). Taken literally that is a fixed header over 220px tall, which eats a third of a laptop viewport. The old "FLAG FOR LAYOUT REVIEW: worth deciding whether to keep 200px at all" was ANSWERED on 2026-08-17: the owner chose to lower the ceiling to 140px. So this is now a deliberate departure from the live site on wide screens - measured, 1440x900 goes 216px -> 162px of fixed header. Mobile (70px) and short-viewport (80px) ceilings are unchanged. ON THE VERTICAL PADDING Squarespace's header-vert-padding is 1vw desktop / 6vw mobile. The mobile figure was reproduced faithfully and turned out to be a bug in disguise: 6vw doubled is 12vw, and the mobile logo is ALSO 12vw, so the mobile header was exactly 50% padding at every width - and 57% at 767px, where the logo hits its 70px ceiling but the padding keeps growing. Worse, the header got TALLER as the viewport narrowed: 123px at 768px, 162px at 767px, because collapsing to the hamburger dropped 38px of logo and added 77px of padding. Replaced with a padding that is a fraction of the logo, so the proportion is fixed everywhere instead of being three unrelated width-based numbers. 0.08 was chosen because it is what the DESKTOP ratio already was (14.4px against a 187px logo at 1440), so wide screens barely moved. ========================================================================= */ .site-header { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100; --bg: var(--c-dark); --fg: var(--c-white); background-color: var(--bg); color: var(--fg); /* A fraction of the logo, not of the viewport width - see "ON THE VERTICAL * PADDING" above. max() picks the LARGER of the two, so 6px is a floor for * the smallest phones, not a cap. This single declaration replaces the old * 1vw desktop / 6vw mobile / 2vh short-viewport trio. */ padding-block: max(6px, calc(var(--logo-h) * 0.08)); padding-inline: var(--gutter); } /* * brandingCenter, as Squarespace actually renders it: * NAV (left) | LOGO (centre) | ACTIONS (right) * all on ONE row, vertically centred. * * An earlier revision read "brandingCenter" as "logo centred on its own row * with the nav beneath it", which is a different layout and did not match the * live site. * * Three equal columns rather than flex space-between: with 1fr auto 1fr the * logo stays optically centred in the viewport regardless of how wide the nav * or the social icons happen to be. space-between would drift the logo left or * right as those change. */ .site-header__inner { max-width: var(--max-width); margin-inline: auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-md); } /* * Explicit column placement so source order (branding first, for a sensible * reading and focus order) does not dictate visual order. * * `grid-row: 1` ON ALL THREE IS LOAD-BEARING, not decoration. * A grid item given an explicit COLUMN but no explicit ROW is still placed by * the auto-placement algorithm, which walks forward and never goes back. So * with branding (column 2) first in source and nav (column 1) second, the nav * cannot be placed in row 1 - the cursor is already past column 2 - and grid * silently pushes it to row 2. The result is a two-row header with the nav * dropped underneath the logo, which is exactly the layout this was meant to * replace. Pinning every item to row 1 removes the ambiguity. */ .site-header__branding { grid-row: 1; grid-column: 2; display: flex; justify-content: center; } .site-nav { grid-row: 1; grid-column: 1; justify-self: start; } .site-header__actions { grid-row: 1; grid-column: 3; justify-self: end; } .site-header__logo-link { display: block; line-height: 0; } .site-header__logo { height: var(--logo-h); /* 200px ceiling = the Squarespace value */ width: auto; } /* Hamburger: hidden on desktop, shown under the breakpoint (§7 media query). */ .site-header__toggle { display: none; position: absolute; inset-inline-end: 0; inset-block-start: 50%; transform: translateY(-50%); width: 44px; /* 44px is the minimum comfortable touch target */ height: 44px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; } .site-header__toggle-bar { display: block; width: 26px; height: 1px; margin: 5px auto; background: currentColor; transition: transform var(--transition), opacity var(--transition); } /* Hamburger morphs into a close (X) when the menu is open. */ .site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:first-child { transform: translateY(3px) rotate(45deg); } .site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:last-child { transform: translateY(-3px) rotate(-45deg); } .site-nav { display: flex; align-items: center; gap: var(--space-lg); } .site-nav__list { display: flex; align-items: center; gap: var(--space-lg); } /* Nav links. * * Matched by DESCENDANT (.site-nav__list a), not by class. wp_nav_menu() only * accepts a class for the