/* ========================================================================= IronBond Fabrication ------------------------------------------------------------------------- One stylesheet for the whole site. Replaces the three separate copies of inline CSS that used to live in the of each page. The palette is taken from the work itself: heat-tinted stainless. When you TIG stainless the metal oxidises through straw -> gold -> violet -> blue, and that band of color is the through-line of the design. It shows up as the gradient rule under every section heading, on card hover, and along the top of the header once you scroll. Contents 01 Tokens 02 Reset + base 03 Typography 04 Layout helpers 05 Buttons 06 Header + navigation 07 Hero 08 Section furniture 09 Cards (services / features) 10 Stats band 11 Gallery grid + lightbox 12 Reviews 13 Contact + forms 14 Call-to-action band 15 Footer 16 Mobile call bar 17 Motion + reveal 18 Print ========================================================================= */ /* ------------------------------------------------------------------------- 01 Tokens ---------------------------------------------------------------------- */ :root { /* Base grays -- cool, slightly blue, like shop steel rather than pure black */ --ink-900: #0b0d10; --ink-850: #0e1116; --ink-800: #12161c; --ink-750: #171c23; --ink-700: #1c222b; --ink-600: #252c37; --ink-500: #333c4a; --ink-400: #4a5566; /* Text */ --text: #f4f6f8; --text-soft: #c3cad4; --text-muted: #8b95a3; /* Heat-tint accents, sampled from the weld beads in the photographs */ --tint-straw: #e8c14a; --tint-amber: #f59e2c; --tint-copper: #d97b4a; --tint-violet: #a970f0; --tint-blue: #4da3ff; --tint-cyan: #56d4e8; --accent: var(--tint-blue); --accent-soft: rgba(77, 163, 255, 0.14); /* The signature gradient: one pass of a heat-tinted weld */ --heat: linear-gradient(90deg, var(--tint-straw) 0%, var(--tint-amber) 18%, var(--tint-copper) 34%, var(--tint-violet) 58%, var(--tint-blue) 80%, var(--tint-cyan) 100%); /* Type */ --font-display: "Barlow Condensed", "Arial Narrow", "Segoe UI", system-ui, sans-serif; --font-body: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif; /* Spacing + shape */ --gutter: clamp(1.25rem, 4vw, 3rem); --measure: 68ch; --radius: 10px; --radius-lg: 16px; /* Paragraphs are capped separately by --measure, so a wider shell only gives the card and photo grids more room -- it does not create over-long lines of text. One value to change if it feels too wide. */ --shell: 1400px; --shell-narrow: 900px; /* Nav bar only -- no logo in it, so it can be slim, but not so slim it loses the presence the original bar had */ --header-h: 68px; /* Elevation */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.45); --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55); --ease: cubic-bezier(0.2, 0.7, 0.3, 1); } /* ------------------------------------------------------------------------- 02 Reset + base ---------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background-color: var(--ink-850); color: var(--text); font-family: var(--font-body); font-size: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem); line-height: 1.65; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* A faint vertical sheen so large dark areas are not dead flat */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; /* Kept very faint and high up. Anything stronger, or lower down the viewport, stops reading as ambient light and starts reading as a colored smudge stuck to one side of the page. */ background: radial-gradient(1300px 620px at 62% -18%, rgba(77, 163, 255, 0.055), transparent 62%), radial-gradient(1000px 520px at 22% -8%, rgba(169, 112, 240, 0.04), transparent 62%); } main { position: relative; z-index: 1; flex: 1 0 auto; } img, picture, svg, video { display: block; max-width: 100%; } img { height: auto; } a { color: var(--tint-blue); text-decoration-color: rgba(77, 163, 255, 0.4); text-underline-offset: 0.2em; transition: color 0.2s var(--ease), text-decoration-color 0.2s var(--ease); } a:hover { color: var(--tint-cyan); text-decoration-color: currentColor; } /* One consistent focus ring everywhere, and only for keyboard users */ :focus-visible { outline: 2px solid var(--tint-blue); outline-offset: 3px; border-radius: 4px; } ::selection { background: rgba(77, 163, 255, 0.3); color: #fff; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; padding: 0.85rem 1.4rem; background: var(--tint-blue); color: #05070a; font-weight: 700; border-radius: 0 0 var(--radius) 0; } .skip-link:focus { left: 0; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ------------------------------------------------------------------------- 03 Typography ---------------------------------------------------------------------- */ h1, h2, h3, h4 { margin: 0 0 0.6em; font-family: var(--font-display); font-weight: 700; line-height: 1.04; letter-spacing: 0.005em; text-wrap: balance; } h1 { font-size: clamp(2.6rem, 1.7rem + 4.4vw, 5.2rem); text-transform: uppercase; } h2 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem); text-transform: uppercase; } h3 { font-size: clamp(1.3rem, 1.15rem + 0.7vw, 1.6rem); text-transform: uppercase; letter-spacing: 0.02em; } h4 { font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.06em; } p { margin: 0 0 1.15rem; max-width: var(--measure); } .lede { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem); line-height: 1.6; color: var(--text-soft); } strong { font-weight: 600; color: #fff; } /* Small uppercase label that sits above a section heading */ .eyebrow { display: inline-flex; align-items: center; gap: 0.6rem; margin: 0 0 0.9rem; font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.19em; text-transform: uppercase; color: var(--tint-blue); } .eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--heat); border-radius: 2px; } /* The heat-tint rule that underlines section headings */ .heat-rule { width: 88px; height: 3px; margin: 0 0 1.8rem; border: 0; border-radius: 3px; background: var(--heat); } .heat-rule--center { margin-left: auto; margin-right: auto; } /* Sign-off under the owner's own words on the About page */ .signature { margin-top: 1.75rem; font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; letter-spacing: 0.03em; color: var(--text); } .text-gradient { background: var(--heat); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ------------------------------------------------------------------------- 04 Layout helpers ---------------------------------------------------------------------- */ .shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); } .shell--narrow { max-width: var(--shell-narrow); } .section { padding-block: clamp(3.5rem, 2rem + 6vw, 7rem); } .section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); } /* Alternating surface so long pages have rhythm */ .section--raised { background: var(--ink-800); border-block: 1px solid var(--ink-600); } .section--deep { background: var(--ink-900); border-block: 1px solid var(--ink-700); } .section-head { margin-bottom: clamp(2rem, 1.2rem + 2.5vw, 3.5rem); } .section-head--center { text-align: center; } .section-head--center p { margin-inline: auto; } .section-head p { color: var(--text-soft); max-width: 62ch; margin-bottom: 0; } /* Section heading with the logo set beside it. On a phone the two stack and the mark comes first, above the copy. */ .section-head--mark { display: grid; gap: clamp(1.75rem, 1rem + 2.5vw, 3.5rem); align-items: center; } .section-head__mark { display: block; order: -1; justify-self: center; } .section-head__mark img { width: clamp(240px, 62vw, 320px); height: auto; } @media (min-width: 900px) { .section-head--mark { grid-template-columns: 1fr auto; } .section-head__mark { order: 0; justify-self: end; } /* Sized so the mark stands roughly as tall as the heading block beside it. At 1.88:1 a 480px width is ~255px tall, which is about what the eyebrow + two-line h2 + rule + paragraph come to. Anything much smaller and it reads as an afterthought against that column. */ .section-head__mark img { width: clamp(320px, 34vw, 480px); } } /* Standalone mark on the thin pages (404, thank-you), which have no section heading to sit beside. */ .page-mark { display: block; margin: 0 auto clamp(1.5rem, 1rem + 2vw, 2.5rem); } .page-mark img { width: clamp(190px, 44vw, 230px); height: auto; margin-inline: auto; } .grid { display: grid; gap: clamp(1rem, 0.6rem + 1.4vw, 1.75rem); } .split { display: grid; gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; } @media (min-width: 880px) { .split { grid-template-columns: 1fr 1fr; } .split--wide-left { grid-template-columns: 1.15fr 0.85fr; } .split--wide-right { grid-template-columns: 0.85fr 1.15fr; } } /* ------------------------------------------------------------------------- 05 Buttons ---------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 0.95rem 1.7rem; border: 1px solid transparent; border-radius: var(--radius); font-family: var(--font-body); font-size: 0.98rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; line-height: 1; cursor: pointer; white-space: nowrap; transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), background-color 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease); } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn svg { width: 1.05em; height: 1.05em; flex: none; } /* Primary: the arc. Amber because a call is the hottest action on the page. */ .btn--primary { background: linear-gradient(135deg, var(--tint-amber), var(--tint-copper)); color: #14100a; box-shadow: 0 6px 20px rgba(245, 158, 44, 0.28); } .btn--primary:hover { color: #14100a; box-shadow: 0 12px 30px rgba(245, 158, 44, 0.4); } .btn--secondary { background: rgba(255, 255, 255, 0.05); border-color: var(--ink-500); color: var(--text); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .btn--secondary:hover { background: rgba(255, 255, 255, 0.09); border-color: var(--tint-blue); color: #fff; } .btn--ghost { background: transparent; border-color: var(--ink-500); color: var(--text-soft); } .btn--ghost:hover { border-color: var(--tint-blue); color: #fff; } .btn--block { width: 100%; } .btn-row { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; } .btn-row--center { justify-content: center; } /* Text link with a sliding arrow */ .link-arrow { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.9rem; text-decoration: none; } .link-arrow svg { width: 1.1em; height: 1.1em; transition: transform 0.2s var(--ease); } .link-arrow:hover svg { transform: translateX(4px); } /* ------------------------------------------------------------------------- 06 Header + navigation ---------------------------------------------------------------------- */ /* --- Brand plate ----------------------------------------------------- The logo is black outlines around light fills. On the near-black page the outlines disappear and it reads as a thin white smear; on white the fills disappear instead. Only a mid gray shows both halves at once, which is why it gets its own backing rather than sitting on the page or on a photo. Making that backing brushed steel turns the constraint into the right answer for a metal shop: the mark sits on a plate. Rendered and compared against black, flat grays and two steel tones before settling here. It deliberately does NOT stick -- it scrolls away and the slim nav below pins instead, so the logo is never shrunk into a cramped bar. */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(11, 13, 16, 0.72); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid transparent; transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease); } /* The heat-tint line only appears once you have scrolled */ .site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--heat); opacity: 0; transform: scaleX(0.3); transform-origin: left; transition: opacity 0.4s var(--ease), transform 0.5s var(--ease); } .site-header.is-stuck { background: rgba(11, 13, 16, 0.94); border-bottom-color: var(--ink-600); } .site-header.is-stuck::after { opacity: 1; transform: scaleX(1); } /* Nav only. The logo sits in its own band beneath, so nothing here has to squeeze around it. */ .header-inner { display: flex; align-items: center; justify-content: center; gap: 1.5rem; min-height: var(--header-h); } /* No logo in the nav bar, deliberately. The mark is three tiers tall and needs height no sensible header has -- it lives beside the "What we do" heading instead, where it can be seen. */ /* No margin-left:auto here. That is a leftover from when the logo sat in the bar and the nav had to be pushed away from it -- with the logo gone it fights the centring on .header-inner and shoves the nav to the right. */ .site-nav { display: flex; align-items: center; gap: 0.35rem; } /* :not(.btn) matters. Without it these rules win on specificity over .btn--primary (0-1-1 beats 0-1-0) and repaint the call button -- the text loses its near-black color, and on hover the translucent background here REPLACES the amber gradient, so the button goes dark instead of lighting up. */ .site-nav a:not(.btn) { position: relative; padding: 0.6rem 0.95rem; border-radius: 7px; color: var(--text-soft); font-size: 0.88rem; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; text-decoration: none; transition: color 0.2s var(--ease), background-color 0.2s var(--ease); } .site-nav a:not(.btn):hover { color: #fff; background: rgba(255, 255, 255, 0.05); } .site-nav a[aria-current="page"] { color: #fff; } .site-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0.95rem; right: 0.95rem; bottom: 0.3rem; height: 2px; border-radius: 2px; background: var(--heat); } .header-cta { flex: none; margin-left: 0.5rem; padding: 0.72rem 1.25rem; font-size: 0.85rem; } @media (max-width: 900px) { /* No drawer. Four links is not enough to justify hiding them behind a hamburger -- they fit inline at this size, and inline costs the visitor a tap less. The phone number is not squeezed in here either; it lives in the fixed call bar pinned to the bottom of the screen. */ .header-cta { display: none; } .site-nav { gap: 0.1rem; } .site-nav a:not(.btn) { padding: 0.55rem 0.5rem; font-size: 0.76rem; letter-spacing: 0.06em; } .site-nav a[aria-current="page"]::after { left: 0.5rem; right: 0.5rem; } } /* Smallest phones still in use (iPhone SE at 320px) */ @media (max-width: 380px) { .site-nav a:not(.btn) { padding-inline: 0.3rem; font-size: 0.72rem; letter-spacing: 0.02em; } } /* ------------------------------------------------------------------------- 07 Hero ---------------------------------------------------------------------- */ .hero { position: relative; display: flex; align-items: center; /* Shorter than a full viewport on purpose: the brand plate sits above it, and the two together should still leave the services section peeking. */ min-height: clamp(480px, 68vh, 700px); padding-block: clamp(3rem, 2.25rem + 4vw, 6rem); overflow: hidden; background: var(--ink-900); isolation: isolate; } .hero__media { position: absolute; inset: 0; z-index: -2; } .hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; /* A very slow drift keeps the macro shot from feeling like a flat backdrop */ animation: heroDrift 32s ease-in-out infinite alternate; } @keyframes heroDrift { from { transform: scale(1.04) translate3d(0, 0, 0); } to { transform: scale(1.13) translate3d(-1.5%, -1%, 0); } } /* Two overlays: a vertical scrim for text contrast, and a color wash that pulls the photo toward the site palette. */ .hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 13, 16, 0.86) 0%, rgba(11, 13, 16, 0.5) 38%, rgba(11, 13, 16, 0.92) 100%), linear-gradient(100deg, rgba(11, 13, 16, 0.94) 8%, rgba(11, 13, 16, 0.34) 55%, rgba(14, 20, 32, 0.6) 100%); } .hero__inner { position: relative; z-index: 1; width: 100%; } .hero__content { max-width: 46rem; } .hero h1 { margin-bottom: 0.35em; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.6); } .hero h1 .line { display: block; } .hero__lede { max-width: 40rem; font-size: clamp(1.08rem, 1rem + 0.55vw, 1.35rem); color: #dbe2ea; text-shadow: 0 1px 16px rgba(0, 0, 0, 0.7); } /* Location / service-area chip above the headline */ .hero__tag { display: inline-flex; align-items: center; gap: 0.55rem; margin-bottom: 1.5rem; padding: 0.45rem 1rem 0.45rem 0.75rem; background: rgba(11, 13, 16, 0.55); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 100px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: #e6ebf1; } .hero__tag svg { width: 1.05em; height: 1.05em; color: var(--tint-amber); } /* Strip of specialities pinned to the bottom of the hero */ .hero__strip { position: relative; z-index: 1; margin-top: clamp(1.75rem, 1.25rem + 2vw, 3rem); padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.12); display: flex; flex-wrap: wrap; gap: 0.75rem 2.25rem; } .hero__strip span { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #c9d2dc; } .hero__strip svg { width: 1.15em; height: 1.15em; color: var(--tint-blue); flex: none; } /* ------------------------------------------------------------------------- 08 Section furniture ---------------------------------------------------------------------- */ /* Thin full-width heat line used to separate major bands */ .heat-divider { height: 2px; border: 0; margin: 0; background: var(--heat); opacity: 0.75; } .media-frame { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--ink-700); box-shadow: var(--shadow-md); } .media-frame img { width: 100%; } /* Hairline inner edge so photos sit on the dark page cleanly */ .media-frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid rgba(255, 255, 255, 0.1); pointer-events: none; } .media-frame--tinted::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(160deg, rgba(77, 163, 255, 0.14), transparent 45%, rgba(169, 112, 240, 0.12)); pointer-events: none; } /* ------------------------------------------------------------------------- 09 Cards ---------------------------------------------------------------------- */ .card-grid { display: grid; gap: clamp(1rem, 0.6rem + 1.2vw, 1.5rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); } .card { position: relative; display: flex; flex-direction: column; padding: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); background: linear-gradient(180deg, var(--ink-750), var(--ink-800)); border: 1px solid var(--ink-600); border-radius: var(--radius-lg); overflow: hidden; transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease); } /* Heat line wipes across the top edge on hover */ .card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--heat); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease); } .card:hover { transform: translateY(-4px); border-color: var(--ink-500); box-shadow: var(--shadow-md); } .card:hover::before { transform: scaleX(1); } .card__icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 1.35rem; background: var(--accent-soft); border: 1px solid rgba(77, 163, 255, 0.28); border-radius: 12px; color: var(--tint-blue); transition: color 0.25s var(--ease), background-color 0.25s var(--ease), border-color 0.25s var(--ease); } .card__icon svg { width: 26px; height: 26px; } .card:hover .card__icon { background: rgba(245, 158, 44, 0.14); border-color: rgba(245, 158, 44, 0.35); color: var(--tint-amber); } .card h3 { margin-bottom: 0.5rem; } .card p { margin-bottom: 0; color: var(--text-soft); font-size: 0.97rem; } .card__list { margin: 1.1rem 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; } .card__list li { padding: 0.28rem 0.7rem; background: rgba(255, 255, 255, 0.045); border: 1px solid var(--ink-600); border-radius: 100px; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.04em; color: var(--text-muted); } /* Plain feature row: icon + text, no card chrome */ .feature-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 1.4rem; } .feature-list li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; } .feature-list .feature-mark { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-top: 0.15rem; background: var(--accent-soft); border: 1px solid rgba(77, 163, 255, 0.3); border-radius: 9px; color: var(--tint-blue); flex: none; } .feature-list .feature-mark svg { width: 17px; height: 17px; } .feature-list h4 { margin-bottom: 0.2rem; font-family: var(--font-body); font-size: 1rem; font-weight: 600; letter-spacing: 0.01em; text-transform: none; color: #fff; } .feature-list p { margin: 0; color: var(--text-soft); font-size: 0.95rem; } /* ------------------------------------------------------------------------- 10 Stats band ---------------------------------------------------------------------- */ .stats { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); background: var(--ink-600); border: 1px solid var(--ink-600); border-radius: var(--radius-lg); overflow: hidden; } .stat { padding: clamp(1.5rem, 1.2rem + 1vw, 2.2rem) 1.25rem; background: var(--ink-800); text-align: center; } .stat__value { display: block; font-family: var(--font-display); font-size: clamp(2.4rem, 1.8rem + 2.4vw, 3.6rem); font-weight: 700; line-height: 1; letter-spacing: -0.01em; background: var(--heat); -webkit-background-clip: text; background-clip: text; color: transparent; } .stat__label { display: block; margin-top: 0.65rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted); } /* ------------------------------------------------------------------------- 11 Gallery grid + lightbox ---------------------------------------------------------------------- */ .gallery-grid { display: grid; gap: clamp(0.6rem, 0.4rem + 0.8vw, 1rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); } .shot { position: relative; display: block; width: 100%; padding: 0; margin: 0; aspect-ratio: 3 / 4; background: var(--ink-700); border: 1px solid var(--ink-600); border-radius: var(--radius); overflow: hidden; cursor: zoom-in; appearance: none; transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease); } .shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.55s var(--ease), filter 0.35s var(--ease); } .shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(11, 13, 16, 0.75)); opacity: 0; transition: opacity 0.3s var(--ease); } .shot:hover, .shot:focus-visible { transform: translateY(-3px); border-color: rgba(77, 163, 255, 0.55); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(77, 163, 255, 0.2); } .shot:hover img, .shot:focus-visible img { transform: scale(1.07); } .shot:hover::after, .shot:focus-visible::after { opacity: 1; } /* Expand glyph revealed on hover */ .shot__zoom { position: absolute; right: 0.7rem; bottom: 0.7rem; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; background: rgba(11, 13, 16, 0.72); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 8px; color: #fff; opacity: 0; transform: translateY(6px); transition: opacity 0.28s var(--ease), transform 0.28s var(--ease); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .shot__zoom svg { width: 16px; height: 16px; } .shot:hover .shot__zoom, .shot:focus-visible .shot__zoom { opacity: 1; transform: translateY(0); } /* --- Lightbox --- */ .lightbox { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: clamp(0.75rem, 3vw, 3rem); background: rgba(6, 8, 10, 0.95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transition: opacity 0.3s var(--ease), visibility 0.3s var(--ease); } .lightbox.is-open { opacity: 1; visibility: visible; } .lightbox__figure { position: relative; margin: 0; max-width: min(100%, 1100px); max-height: 100%; display: flex; align-items: center; justify-content: center; transform: scale(0.96); transition: transform 0.32s var(--ease); } .lightbox.is-open .lightbox__figure { transform: scale(1); } .lightbox__figure img { max-width: 100%; max-height: calc(100vh - 8rem); width: auto; border-radius: var(--radius); box-shadow: var(--shadow-lg); } .lightbox__bar { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: clamp(0.75rem, 2vw, 1.4rem) clamp(0.75rem, 3vw, 2rem); } .lightbox__count { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; letter-spacing: 0.12em; color: var(--text-soft); font-variant-numeric: tabular-nums; } .lb-btn { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 50%; color: #fff; cursor: pointer; transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease); } .lb-btn:hover { background: rgba(255, 255, 255, 0.14); border-color: var(--tint-blue); transform: scale(1.06); } .lb-btn svg { width: 20px; height: 20px; } .lb-btn--prev, .lb-btn--next { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; } .lb-btn--prev:hover, .lb-btn--next:hover { transform: translateY(-50%) scale(1.06); } .lb-btn--prev { left: clamp(0.5rem, 2vw, 1.5rem); } .lb-btn--next { right: clamp(0.5rem, 2vw, 1.5rem); } @media (max-width: 700px) { .lb-btn--prev, .lb-btn--next { top: auto; bottom: 1rem; transform: none; } .lb-btn--prev:hover, .lb-btn--next:hover { transform: scale(1.06); } .lightbox__figure img { max-height: calc(100vh - 11rem); } } /* ------------------------------------------------------------------------- 12 Reviews ---------------------------------------------------------------------- */ .rating-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.65rem 1.1rem; margin-bottom: 0.5rem; } /* Google requires the overall score to carry an "as of" date, and forbids putting star icons beside its name -- so the attribution sits on its own line, clear of the stars above it. */ .rating-summary__meta { margin: 0 auto 2.5rem; text-align: center; color: var(--text-muted); font-size: 0.95rem; } .stars { display: inline-flex; gap: 0.15rem; color: var(--tint-straw); } .stars svg { width: 20px; height: 20px; } .stars--sm svg { width: 16px; height: 16px; } .rating-summary__score { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; line-height: 1; color: #fff; } .rating-summary__meta { color: var(--text-muted); font-size: 0.95rem; } .review-grid { display: grid; gap: clamp(1rem, 0.6rem + 1.2vw, 1.5rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); } .review { display: flex; flex-direction: column; padding: clamp(1.5rem, 1.2rem + 1vw, 2rem); background: linear-gradient(180deg, var(--ink-750), var(--ink-800)); border: 1px solid var(--ink-600); border-radius: var(--radius-lg); transition: transform 0.25s var(--ease), border-color 0.25s var(--ease); } .review:hover { transform: translateY(-3px); border-color: var(--ink-500); } .review__stars { margin-bottom: 1rem; } .review blockquote { flex: 1; margin: 0 0 1.35rem; font-size: 1.02rem; line-height: 1.62; color: var(--text-soft); } .review blockquote::before { content: open-quote; margin-right: 0.1em; } .review blockquote::after { content: close-quote; } .review__by { display: flex; align-items: center; gap: 0.8rem; padding-top: 1.15rem; border-top: 1px solid var(--ink-600); } /* Initial-in-a-circle avatar, colored from the heat palette */ .review__avatar { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex: none; border-radius: 50%; background: linear-gradient(135deg, var(--ink-600), var(--ink-500)); border: 1px solid var(--ink-500); font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--text); } /* Real Google avatar, when the live feed supplies one */ .review__avatar--photo { object-fit: cover; background: var(--ink-600); } .review__name { display: block; font-weight: 600; color: #fff; line-height: 1.3; } /* Ordering / verification disclosure Google requires beside live reviews */ .review-note { max-width: none; margin: 1.75rem 0 0; text-align: center; font-size: 0.82rem; color: var(--text-muted); } .review__source { display: block; font-size: 0.82rem; color: var(--text-muted); } /* ------------------------------------------------------------------------- 13 Contact + forms ---------------------------------------------------------------------- */ .contact-layout { display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem); } @media (min-width: 940px) { .contact-layout { grid-template-columns: 1fr 1.15fr; align-items: start; } } .contact-card { padding: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); background: linear-gradient(180deg, var(--ink-750), var(--ink-800)); border: 1px solid var(--ink-600); border-radius: var(--radius-lg); } .contact-card + .contact-card { margin-top: 1.25rem; } .contact-line { display: flex; align-items: flex-start; gap: 1rem; padding: 0.9rem 0; border-bottom: 1px solid var(--ink-600); } .contact-line:last-child { border-bottom: 0; padding-bottom: 0; } .contact-line:first-child { padding-top: 0; } .contact-line__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; background: var(--accent-soft); border: 1px solid rgba(77, 163, 255, 0.28); border-radius: 10px; color: var(--tint-blue); } .contact-line__icon svg { width: 19px; height: 19px; } .contact-line__label { display: block; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.15rem; } .contact-line__value { display: block; font-size: 1.05rem; font-weight: 600; color: #fff; text-decoration: none; line-height: 1.4; } a.contact-line__value:hover { color: var(--tint-cyan); } .contact-line__note { display: block; font-size: 0.87rem; color: var(--text-muted); } /* --- Form --- */ .form { display: grid; gap: 1.35rem; } .field { display: grid; gap: 0.5rem; } .field label { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-soft); } .field .req { color: var(--tint-amber); } .field input, .field textarea, .field select { width: 100%; padding: 0.92rem 1.1rem; background: var(--ink-900); border: 1px solid var(--ink-500); border-radius: var(--radius); color: var(--text); font-family: inherit; font-size: 1rem; line-height: 1.5; transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background-color 0.2s var(--ease); } .field textarea { min-height: 170px; resize: vertical; } .field input::placeholder, .field textarea::placeholder { color: #5d6874; } .field input:hover, .field textarea:hover, .field select:hover { border-color: var(--ink-400); } .field input:focus, .field textarea:focus, .field select:focus { outline: none; background: #05070a; border-color: var(--tint-blue); box-shadow: 0 0 0 3px rgba(77, 163, 255, 0.16); } .field__hint { font-size: 0.85rem; color: var(--text-muted); } .field-row { display: grid; gap: 1.35rem; } @media (min-width: 620px) { .field-row--two { grid-template-columns: 1fr 1fr; } } /* Honeypot -- kept out of the layout and out of the a11y tree */ .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* --- Anti-spam slider ------------------------------------------------ Themed as the thing the whole site is about: you run a bead along the groove and stop on the tack mark. Land it and the fill lights up with the heat-tint gradient -- the same colors as the welds in the photographs. Built on a real . That is not laziness: it gives keyboard control, screen-reader announcement and click-to-jump for free, and click-to-jump is the case that has to work. A mouse user clicking the track lands on the mark with ZERO drag time, and an earlier version of this idea on carmstudio.com scored exactly that as a bot and silently binned real enquiries. */ .gate { display: grid; gap: 0.75rem; padding: clamp(1rem, 0.85rem + 0.6vw, 1.35rem); background: rgba(255, 255, 255, 0.03); border: 1px solid var(--ink-600); border-radius: var(--radius); } .gate__label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-soft); } .gate__label svg { width: 1.05em; height: 1.05em; color: var(--tint-amber); flex: none; } .gate__lane { position: relative; height: 46px; } /* The groove */ .gate__track { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 10px; border-radius: 6px; background: var(--ink-900); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.7); overflow: hidden; } /* The bead laid so far. Heat tint, revealed left to right. */ .gate__fill { position: absolute; inset: 0; width: 0; background: var(--heat); opacity: 0.35; transition: opacity 0.25s var(--ease); } /* The tack mark to stop on */ .gate__mark { position: absolute; top: 50%; width: 4px; height: 26px; margin-left: -2px; transform: translateY(-50%); border-radius: 2px; background: var(--text-soft); box-shadow: 0 0 0 3px rgba(11, 13, 16, 0.85); transition: background-color 0.25s var(--ease); } /* Native range, made invisible but left fully functional on top */ .gate__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; appearance: none; -webkit-appearance: none; background: transparent; cursor: grab; } .gate__input:active { cursor: grabbing; } .gate__input::-webkit-slider-thumb { -webkit-appearance: none; width: 34px; height: 34px; border-radius: 50%; background: transparent; border: 0; cursor: grab; } .gate__input::-moz-range-thumb { width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; cursor: grab; } .gate__input:focus-visible { outline: 2px solid var(--tint-blue); outline-offset: 4px; border-radius: var(--radius); } /* The arc: what the visitor is actually dragging */ .gate__arc { position: absolute; top: 50%; width: 30px; height: 30px; margin-left: -15px; transform: translateY(-50%); border-radius: 50%; background: linear-gradient(160deg, #e9eef4, #9aa6b4); border: 1px solid rgba(255, 255, 255, 0.6); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.6); pointer-events: none; transition: box-shadow 0.25s var(--ease), background 0.25s var(--ease); } /* Struck arc */ .gate__arc::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 3px rgba(245, 158, 44, 0.55); } .gate__hint { font-size: 0.87rem; color: var(--text-muted); min-height: 1.3em; } /* --- Landed on the mark --- */ .gate.is-armed .gate__fill { opacity: 1; } .gate.is-armed .gate__mark { background: #fff; } .gate.is-armed .gate__arc { background: linear-gradient(160deg, #fff, var(--tint-straw)); box-shadow: 0 0 0 4px rgba(245, 158, 44, 0.22), 0 4px 14px rgba(0, 0, 0, 0.6); } .gate.is-armed .gate__hint { color: var(--tint-straw); font-weight: 500; } @media (prefers-reduced-motion: reduce) { .gate__fill, .gate__mark, .gate__arc { transition: none; } } /* --- Photo picker --- */ .shots-input { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .shots-drop { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; padding: clamp(0.9rem, 0.8rem + 0.4vw, 1.2rem); background: var(--ink-900); border: 1px dashed var(--ink-500); border-radius: var(--radius); cursor: pointer; transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease); } .shots-drop:hover, .shots-input:focus-visible + .shots-drop { border-color: var(--tint-blue); background: rgba(77, 163, 255, 0.06); } .shots-drop__icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: none; background: var(--accent-soft); border: 1px solid rgba(77, 163, 255, 0.28); border-radius: 9px; color: var(--tint-blue); } .shots-drop__icon svg { width: 18px; height: 18px; } .shots-drop__text { font-size: 0.94rem; color: var(--text-soft); } .shots-drop__text b { display: block; color: #fff; font-weight: 600; } .shots-list { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 130px), 1fr)); margin-top: 0.85rem; } .shots-list:empty { display: none; } .shot-chip { position: relative; border: 1px solid var(--ink-600); border-radius: var(--radius); overflow: hidden; background: var(--ink-800); } .shot-chip img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .shot-chip__meta { padding: 0.4rem 0.5rem; font-size: 0.72rem; line-height: 1.35; color: var(--text-muted); } .shot-chip__meta b { display: block; color: var(--tint-straw); font-weight: 600; } .shot-chip__drop { position: absolute; top: 0.3rem; right: 0.3rem; width: 26px; height: 26px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: rgba(11, 13, 16, 0.8); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 6px; color: #fff; cursor: pointer; } .shot-chip__drop svg { width: 13px; height: 13px; } .shot-chip__drop:hover { border-color: var(--tint-amber); } .form-status { display: none; padding: 0.95rem 1.15rem; border-radius: var(--radius); font-size: 0.95rem; line-height: 1.5; } .form-status.is-shown { display: block; } .form-status--error { background: rgba(220, 68, 68, 0.12); border: 1px solid rgba(220, 68, 68, 0.4); color: #ffbdbd; } .form-status--ok { background: rgba(64, 190, 130, 0.12); border: 1px solid rgba(64, 190, 130, 0.4); color: #a9f0cc; } /* Spinner shown while the form posts */ .btn.is-busy { pointer-events: none; opacity: 0.75; } .btn.is-busy .btn__spinner { display: inline-block; } .btn__spinner { display: none; width: 1em; height: 1em; border: 2px solid rgba(0, 0, 0, 0.25); border-top-color: currentColor; border-radius: 50%; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ------------------------------------------------------------------------- 14 Call-to-action band ---------------------------------------------------------------------- */ .cta-band { position: relative; overflow: hidden; background: var(--ink-900); border-block: 1px solid var(--ink-600); text-align: center; } /* Both glows are centered. The blue one used to sit at 15% and read as a stray smudge off to the left rather than as lighting. */ .cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(760px 360px at 50% 0%, rgba(245, 158, 44, 0.13), transparent 70%), radial-gradient(820px 340px at 50% 100%, rgba(77, 163, 255, 0.07), transparent 72%); pointer-events: none; } .cta-band .shell { position: relative; } .cta-band h2 { margin-bottom: 0.4em; } .cta-band p { margin-inline: auto; color: var(--text-soft); font-size: clamp(1.02rem, 0.97rem + 0.35vw, 1.2rem); } /* ------------------------------------------------------------------------- 15 Footer ---------------------------------------------------------------------- */ .site-footer { position: relative; z-index: 1; flex: none; background: var(--ink-900); border-top: 1px solid var(--ink-600); padding-top: clamp(2.5rem, 1.5rem + 4vw, 4rem); } .footer-grid { display: grid; gap: clamp(2rem, 1rem + 3vw, 3rem); padding-bottom: 2.5rem; } @media (min-width: 760px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } } /* The ORIGINAL three-tier mark, kept here on purpose -- it is the one Brendon likes and the footer is the only place with the height for it. Reverse-processed, since that artwork is drawn dark-on-light. */ .site-footer img.footer-logo { width: 180px; height: auto; margin-bottom: 1.35rem; } .site-footer p { color: var(--text-muted); font-size: 0.94rem; max-width: 34ch; } .footer-heading { margin-bottom: 1.1rem; font-family: var(--font-body); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text); } .footer-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.6rem; } .footer-list a, .footer-list span { color: var(--text-muted); font-size: 0.94rem; text-decoration: none; } .footer-list a:hover { color: var(--tint-cyan); } /* The rule sits on this outer element, which is full width, while the text inside stays in the shell. Keeping the border on the contained element made the line stop short of both edges, which read as a mistake. */ .footer-bottom { border-top: 1px solid var(--ink-700); } .footer-bottom__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; padding-block: 1.4rem; font-size: 0.87rem; color: var(--text-muted); } .footer-bottom__inner p { margin: 0; font-size: inherit; max-width: none; } /* ------------------------------------------------------------------------- 16 Mobile call bar ---------------------------------------------------------------------- */ /* On a phone the two things a customer wants are "call him" and "send a message". They stay pinned to the bottom of the viewport. */ .call-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: none; gap: 0.6rem; padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom, 0px)); background: rgba(11, 13, 16, 0.96); border-top: 1px solid var(--ink-600); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .call-bar .btn { flex: 1; padding-inline: 0.75rem; font-size: 0.86rem; } @media (max-width: 760px) { .call-bar { display: flex; } /* Keep the bar from covering the end of the page */ body { padding-bottom: 4.75rem; } } /* ------------------------------------------------------------------------- 17 Motion + reveal ---------------------------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } .reveal.is-visible { opacity: 1; transform: none; } /* Stagger children of a revealed group */ .reveal-group > * { opacity: 0; transform: translateY(22px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); } .reveal-group.is-visible > * { opacity: 1; transform: none; } .reveal-group.is-visible > *:nth-child(1) { transition-delay: 0.00s; } .reveal-group.is-visible > *:nth-child(2) { transition-delay: 0.07s; } .reveal-group.is-visible > *:nth-child(3) { transition-delay: 0.14s; } .reveal-group.is-visible > *:nth-child(4) { transition-delay: 0.21s; } .reveal-group.is-visible > *:nth-child(5) { transition-delay: 0.28s; } .reveal-group.is-visible > *:nth-child(6) { transition-delay: 0.35s; } /* Anyone who asks for less motion gets none of it */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .reveal, .reveal-group > * { opacity: 1; transform: none; } .hero__media img { animation: none; } } /* Before the reveal script runs, nothing should be stuck invisible. This class is removed by the script as soon as it initialises. */ .no-js .reveal, .no-js .reveal-group > * { opacity: 1; transform: none; } /* ------------------------------------------------------------------------- 18 Print ---------------------------------------------------------------------- */ @media print { body { background: #fff; color: #000; padding-bottom: 0; } body::before, .site-header, .call-bar, .lightbox, .cta-band, .btn-row { display: none !important; } /* On white paper the light pipe fills would vanish, so here the logo IS inverted -- the opposite of what the screen needs. */ .brand img, .site-footer img.footer-logo { filter: invert(1); } a { color: #000; } }