/* --- tokens/fonts.css --- */ /* Written by fetch-fonts.py -- do not edit by hand. Self-hosted so the browser never has to reach fonts.googleapis.com and fonts.gstatic.com before it can draw text. font-display:swap means the copy is readable in the fallback face immediately and reflows once, rather than sitting invisible while a font loads. */ @font-face{ font-family:'Bebas Neue'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/bebas-neue-400.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:'Work Sans'; font-style:normal; font-weight:400 700; font-display:swap; src:url('/assets/fonts/work-sans-400-700.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; } /* --- tokens/colors.css --- */ :root{ --jrm-orange-300:#ffb066; --jrm-orange-400:#ff9433; --jrm-orange-500:#f5780a; --jrm-orange-600:#d4650a; --jrm-orange-700:#a84f08; --jrm-steel-050:#f4f5f5; --jrm-steel-100:#e4e1dc; --jrm-steel-200:#c7cbcb; --jrm-steel-300:#9ca3a3; --jrm-steel-400:#767d7d; --jrm-steel-500:#575e5e; --jrm-steel-600:#3c4141; --jrm-charcoal-700:#262626; --jrm-charcoal-800:#1a1a1a; --jrm-charcoal-900:#0d0d0d; --jrm-black:#090909; --jrm-white:#ffffff; --jrm-success:#3f8f4f; --jrm-warning:#e0a521; --jrm-error:#c73e2e; --text-primary:var(--jrm-charcoal-900); --text-secondary:var(--jrm-steel-500); --text-inverse:var(--jrm-steel-100); --text-on-orange:var(--jrm-black); --surface-page:var(--jrm-white); --surface-muted:var(--jrm-steel-050); --surface-dark:var(--jrm-charcoal-900); --surface-dark-raised:var(--jrm-charcoal-800); --surface-card:var(--jrm-white); --border-subtle:var(--jrm-steel-200); --border-strong:var(--jrm-steel-500); --accent-primary:var(--jrm-orange-500); --accent-primary-hover:var(--jrm-orange-600); --accent-primary-active:var(--jrm-orange-700); } /* --- tokens/typography.css --- */ /* The Google Fonts stylesheet is linked from the with a preconnect, not @import-ed here. An @import would make the browser fetch styles.css, parse it, and only then discover the font stylesheet -- two serial round trips standing between the visitor and the first paint. */ :root{ --font-display:'Bebas Neue',Impact,'Arial Narrow',sans-serif; --font-body:'Work Sans',Arial,Helvetica,sans-serif; --fs-display-xl:88px; --fs-display-lg:64px; --fs-display-md:48px; --fs-display-sm:36px; --fs-heading-lg:28px; --fs-heading-md:22px; --fs-body-lg:19px; --fs-body-md:16px; --fs-body-sm:14px; --fs-label:13px; --lh-display:0.98; /* @kind other */ --lh-heading:1.15; /* @kind other */ --lh-body:1.6; /* @kind other */ --ls-display:0.02em; --ls-heading:0.01em; --ls-label:0.08em; --fw-regular:400; /* @kind other */ --fw-medium:500; /* @kind other */ --fw-semibold:600; /* @kind other */ --fw-bold:700; /* @kind other */ --fw-extrabold:800; /* @kind other */ } /* --- tokens/spacing.css --- */ :root{ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px; --container-max:1200px; --container-pad:24px; } /* --- tokens/effects.css --- */ :root{ --radius-sm:2px; --radius-md:3px; --radius-none:0px; --shadow-card:0 1px 2px rgba(0,0,0,.08),0 1px 0 rgba(0,0,0,.04); --shadow-raised:0 4px 12px rgba(0,0,0,.16); --border-hairline:1px solid var(--border-subtle); --border-accent:3px solid var(--accent-primary); --divider-bar-height:4px; --transition-fast:120ms ease-out; /* @kind other */ --transition-base:180ms ease-out; /* @kind other */ } /* --------------------------------------------------------------------------- JR Metal Solutions — layout and components. Concatenated after tokens/*.css into one styles.css by build.py, so the browser makes a single stylesheet request with no @import chain. The old build styled everything with inline style={{}} objects. That put the same few hundred declarations into every page's HTML, four times over, and none of it could be cached or given a media query. Everything visual lives here now; the components only carry class names. --------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } body { margin: 0; background: var(--surface-page); color: var(--text-primary); font-family: var(--font-body); font-size: var(--fs-body-md); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, picture, svg, video { max-width: 100%; } img { height: auto; border-style: none; } /* The browser's own [hidden] rule is a bare element default, so ANY class that sets display beats it. `.button{display:inline-block}` did exactly that: the booking fallback link had hidden=true set on it and carried on rendering next to Google's widget, giving that page two Book buttons. */ [hidden] { display: none !important; } a { color: inherit; } h1, h2, h3 { font-family: var(--font-display); font-weight: 400; } /* Every interactive thing gets the same visible ring, and only for keyboard users -- a mouse click should not leave an outline behind. */ :where(a, button, input, textarea, summary):focus-visible { outline: 3px solid var(--accent-primary); outline-offset: 2px; border-radius: var(--radius-sm); } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--accent-primary); color: var(--jrm-black); padding: var(--space-3) var(--space-4); font-weight: 700; text-decoration: none; } .skip-link:focus { left: var(--space-4); top: var(--space-4); } .nowrap { white-space: nowrap; } /* --- Shared rhythm ------------------------------------------------------ */ /* Full-bleed and left-aligned, as the original build was. An earlier pass gave this a centred max-width container, which on a 1900px screen left 580px of dead margin down each side and made the whole site read as a narrow panel floating in the middle. The design starts hard against the left edge. */ .section { padding: clamp(var(--space-6), 5vw, var(--space-8)) var(--container-pad); } @media (min-width: 900px) { .section { padding: var(--space-8) var(--space-7); } } .section--muted { background: var(--surface-muted); } /* A measure for reading, still anchored left -- not centred. */ .section--prose { max-width: 820px; } /* :not(.eyebrow) matters. `.section--prose p` is (0,1,1) and outranks `.eyebrow--accent` at (0,1,0), so without it every eyebrow on About, Consulting and Core Offerings lost its orange and rendered steel grey. */ .section--prose p:not(.eyebrow) { color: var(--text-secondary); } /* Both :not()s are load-bearing, for the same reason: these descendant selectors outrank the single-class accent rules they sit above. Without them `.eyebrow--accent` (0,1,0) loses to `.section--prose p` (0,1,1), and `.run-in` (0,1,0) loses to `.section--prose p strong` (0,1,2) -- which is how the orange went missing from the eyebrows and the F1554 / STEEL SOLUTIONS / PRECISION MANUFACTURING labels. */ .section--prose p strong:not(.run-in) { color: var(--text-primary); } .eyebrow { /* Stated outright because the About page's eyebrow IS the

, and the `h1,h2,h3` rule above would otherwise set it in Bebas at weight 400. */ font-family: var(--font-body); font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-secondary); margin: 0 0 var(--space-2); } .eyebrow--accent { color: var(--accent-primary); } .section__title { font-size: clamp(28px, 5vw, var(--fs-display-sm)); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); text-transform: uppercase; margin: 0 0 var(--space-6); color: var(--text-primary); } .lede { font-size: clamp(var(--fs-body-md), 2.2vw, var(--fs-body-lg)); line-height: var(--lh-body); color: var(--text-secondary); margin: 0 0 var(--space-4); } .stack { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-5); } .stack p { margin: 0; font-size: var(--fs-body-lg); line-height: var(--lh-body); } .run-in { color: var(--accent-primary); text-transform: uppercase; } .list { padding-left: var(--space-5); margin: 0 0 var(--space-6); line-height: 2; } .list li { color: var(--text-primary); } .contact-line { font-size: var(--fs-body-md); color: var(--text-primary); } .contact-line a { color: inherit; text-decoration-color: var(--accent-primary); text-underline-offset: 3px; } .contact-line a:hover { color: var(--accent-primary); } /* --- Header ------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: var(--space-5); padding: 0 var(--container-pad); min-height: 72px; background: var(--jrm-charcoal-900); border-bottom: 1px solid var(--jrm-charcoal-700); } @media (min-width: 900px) { .site-header { padding-inline: var(--space-7); min-height: 88px; } } .site-header__logo { display: flex; align-items: center; flex: 0 0 auto; } /* Sized by height, not width. The lockup is 2:1, so giving it a width lets it set the height of a sticky bar that is supposed to stay out of the way -- at 208px wide it made the header 105px tall on every scroll. */ .site-header__logo img { height: 46px; width: auto; display: block; } @media (min-width: 900px) { .site-header__logo img { height: 58px; } } /* The nav sits hard right, beside the phone number -- not tucked against the logo on the left. `margin-left:auto` on the nav pushes the nav and the phone together as a group. */ .site-nav { margin-left: auto; } .site-header__phone { margin-left: var(--space-6); font-weight: 700; font-size: 15px; letter-spacing: 0.02em; color: var(--accent-primary); text-decoration: none; white-space: nowrap; } .site-header__phone:hover { color: var(--jrm-orange-400); } .site-nav { display: flex; gap: var(--space-6); } .site-nav__link { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; color: var(--jrm-steel-200); border-bottom: 3px solid transparent; padding: 6px 2px; transition: color var(--transition-fast), border-color var(--transition-fast); } .site-nav__link:hover { color: var(--jrm-white); } .site-nav__link.is-current { color: var(--accent-primary); border-bottom-color: var(--accent-primary); } .site-header__burger { display: none; } /* Under 900px the links move into a panel that drops out of the header. Without JavaScript [data-nav-open] is never set, so the rule below keeps the nav visible and wrapped rather than hiding it behind a button that does nothing. */ @media (max-width: 899px) { .site-header { flex-wrap: wrap; padding-block: var(--space-3); } .site-header__burger { display: flex; flex-direction: column; justify-content: center; gap: 5px; margin-left: auto; order: 2; width: 44px; height: 44px; padding: 10px; background: none; border: 1px solid var(--jrm-steel-600); border-radius: var(--radius-sm); cursor: pointer; } .site-header__burger span { display: block; height: 2px; background: var(--jrm-steel-100); transition: transform var(--transition-base), opacity var(--transition-fast); } [data-nav-open] .site-header__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } [data-nav-open] .site-header__burger span:nth-child(2) { opacity: 0; } [data-nav-open] .site-header__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .site-header__phone { order: 3; margin-left: var(--space-4); } .site-nav { order: 4; margin-left: 0; flex-basis: 100%; flex-direction: column; gap: 0; padding-top: var(--space-2); } .site-nav__link { padding: var(--space-3) 0; border-bottom: 1px solid var(--jrm-charcoal-700); border-left: 3px solid transparent; padding-left: var(--space-3); } .site-nav__link.is-current { border-bottom-color: var(--jrm-charcoal-700); border-left-color: var(--accent-primary); } /* JS present: collapsed until the button says otherwise. */ html.has-js .site-nav { display: none; } html.has-js[data-nav-open] .site-nav { display: flex; } } /* --- Hero --------------------------------------------------------------- */ .hero { display: grid; grid-template-columns: 1fr; background: var(--jrm-charcoal-900); color: var(--jrm-white); } @media (min-width: 900px) { .hero { grid-template-columns: 1.2fr 1fr; align-items: stretch; } } .hero__copy { padding: clamp(var(--space-6), 6vw, var(--space-9)) var(--container-pad); display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; justify-content: center; min-width: 0; } @media (min-width: 900px) { .hero__copy { padding-inline: var(--space-7); } } .hero__title { font-size: clamp(40px, 7.5vw, 72px); line-height: var(--lh-display); letter-spacing: var(--ls-display); text-transform: uppercase; margin: 0; max-width: 640px; /* as the original; 15ch wrapped it onto four lines */ } .hero .lede { color: var(--jrm-steel-200); max-width: 560px; } .hero .lede strong { color: var(--jrm-white); } .hero__media { position: relative; min-height: 260px; } .hero__media picture, .hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (max-width: 899px) { .hero__media { aspect-ratio: 4 / 3; } } .hero__caption { position: absolute; left: var(--space-4); bottom: var(--space-4); max-width: calc(100% - var(--space-7)); margin: 0; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--jrm-white); background: rgba(0, 0, 0, 0.62); padding: 4px 10px; border-radius: var(--radius-sm); } /* --- Buttons ------------------------------------------------------------ */ .button-row { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-2); } .button { display: inline-block; font-family: var(--font-body); font-weight: 600; font-size: 15px; line-height: 1.2; padding: 14px 28px; letter-spacing: 0.02em; text-transform: uppercase; text-decoration: none; border: 2px solid transparent; border-radius: var(--radius-sm); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); } .button--primary { background: var(--accent-primary); color: var(--jrm-black); } .button--primary:hover { background: var(--accent-primary-hover); } .button--ghost { background: transparent; color: var(--jrm-white); border-color: var(--jrm-steel-400); /* The address is long; let it break rather than push the row wider than the phone it is being read on. */ overflow-wrap: anywhere; } .button--ghost:hover { border-color: var(--accent-primary); color: var(--accent-primary); } /* On a light section the ghost button needs dark text to stay readable. */ .section .button--ghost { color: var(--text-primary); border-color: var(--border-strong); } .section .button--ghost:hover { color: var(--accent-primary); border-color: var(--accent-primary); } .section__more { margin: var(--space-6) 0 var(--space-5); } /* --- Grids, pillars, cards ---------------------------------------------- */ .grid { display: grid; gap: var(--space-5); } .grid--3 { grid-template-columns: 1fr; } @media (min-width: 640px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .grid--3 { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } } .pillar { border-top: var(--border-accent); padding-top: var(--space-4); } .pillar__title { font-size: clamp(22px, 3vw, 28px); text-transform: uppercase; margin: 0 0 var(--space-2); line-height: var(--lh-heading); } .pillar p { margin: 0; font-size: 15px; color: var(--text-secondary); } .card { background: var(--surface-card); border: var(--border-hairline); box-shadow: var(--shadow-card); padding: var(--space-5); } .card__title { font-size: clamp(20px, 2.6vw, 24px); text-transform: uppercase; color: var(--accent-primary); margin: 0 0 var(--space-2); line-height: var(--lh-heading); } .card p { margin: 0; font-size: 15px; color: var(--text-secondary); } /* --- Figures ------------------------------------------------------------ */ .figure { margin: 0 0 var(--space-6); } .figure img { width: 100%; display: block; aspect-ratio: 4 / 3; object-fit: cover; background: var(--surface-muted); } .figure figcaption { font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-secondary); padding-top: var(--space-2); } /* --- Pull quote --------------------------------------------------------- */ .pullquote { border-left: var(--border-accent); padding-left: var(--space-5); margin: var(--space-6) 0; } .pullquote__text { font-family: var(--font-display); font-size: clamp(26px, 4.5vw, 32px); text-transform: uppercase; line-height: 1.1; margin: 0; color: var(--text-primary); } /* --- Booking ------------------------------------------------------------ */ .booking { margin-top: var(--space-7); } /* --- Footer ------------------------------------------------------------- */ .site-footer { background: var(--jrm-charcoal-900); color: var(--jrm-steel-300); padding: var(--space-6) var(--container-pad); font-size: 14px; margin-top: var(--space-8); } @media (min-width: 900px) { .site-footer { padding-inline: var(--space-7); } } .site-footer__inner, .site-footer__credit { max-width: var(--container-max); margin-inline: auto; display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); align-items: center; justify-content: space-between; } .site-footer__nav { display: flex; flex-wrap: wrap; gap: var(--space-5); } .site-footer a { color: var(--jrm-steel-200); text-decoration: none; } .site-footer a:hover { color: var(--accent-primary); } .site-footer__contact { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; } .site-footer__credit { border-top: 1px solid var(--jrm-charcoal-700); margin-top: var(--space-5); padding-top: var(--space-5); color: var(--jrm-steel-400); font-size: 13px; } /* --- Client-side route transition --------------------------------------- */ /* app.js fades
out, swaps it, fades it back. Only opacity moves, so the browser can do it on the compositor and nothing reflows mid-transition. */ #main { transition: opacity 140ms ease-out; } html.is-navigating #main { opacity: 0.35; } /* A hairline that fills while the next page is being fetched. On a fast connection the swap finishes before it is ever noticeable. */ .route-progress { position: fixed; inset: 0 auto auto 0; width: 100%; height: 2px; transform: scaleX(0); transform-origin: 0 50%; background: var(--accent-primary); z-index: 60; opacity: 0; pointer-events: none; } html.is-navigating .route-progress { opacity: 1; transform: scaleX(0.75); transition: transform 900ms cubic-bezier(0.1, 0.6, 0.2, 1), opacity 120ms; }