/* Rust Brothers Handrail & Construction — landing page stylesheet Plain CSS for WordPress. Fonts are loaded via tags in the HTML (NOT @import here — @import is render-blocking and delays the download). Structure: tokens (colors/type/spacing) → base utilities → page sections. PORTABILITY: every section is self-contained. Grounds come from an explicit class (rb-dark / light default), never from source order; sections own their vertical space with padding (no margins between them, so nothing collapses when each section is wrapped in its own Elementor container). No cross-section sibling/parent selectors are used. */ /* ============ TOKENS ============ */ /* ── Rust Brothers · Color tokens ────────────────────────────────────── The page is predominantly LIGHT. Bone is the default ground. Graphite is punctuation only. Oxide appears on rules, labels, numbers, and active states — never as a filled button. */ :root { /* Base palette (raw values) */ --graphite: #17191A; /* dark ground, header, punctuation sections */ --ash: #24282A; /* raised surface on dark */ --steel: #3A4043; /* borders / muted surface on dark */ --concrete: #8C9095; /* muted text, hairlines */ --bone: #EFEDE9; /* DEFAULT PAGE GROUND */ --oxide: #A9481F; /* accent — sparing */ --oxide-hi: #C4633A; /* accent hover */ /* Derived neutrals */ --bone-2: #E4E1DB; /* light hairline / recessed light surface */ --bone-3: #D8D4CC; /* light border, stronger */ --ink: #17191A; /* body text on light (== graphite) */ --ink-2: #4A4F52; /* secondary text on light */ /* ── Semantic aliases ── */ --page-bg: var(--bone); --surface-dark: var(--graphite); --surface-dark-raised:var(--ash); --text-primary: var(--ink); /* on light ground */ --text-secondary: var(--ink-2); --text-muted: var(--concrete); --text-on-dark: var(--bone); --text-on-dark-muted: var(--concrete); --accent: var(--oxide); --accent-hover: var(--oxide-hi); --rule-light: var(--bone-3); /* hairline on bone */ --rule-dark: #333a3d; /* hairline on graphite */ --rule-accent: var(--oxide); /* datum ticks, numbers */ --field-line: var(--concrete); /* input underlines */ } /* ── Rust Brothers · Typography tokens ───────────────────────────────── Display — Instrument Serif 400 (headlines only, large, tight tracking). Body — Inter 300/400/500. Labels & specs — IBM Plex Mono, uppercase, letter-spacing ~0.2em. */ :root { --font-display: "Instrument Serif", Georgia, "Times New Roman", serif; --font-body: "Inter", system-ui, -apple-system, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace; /* Fluid display sizes (headlines only) */ --fs-display-1: clamp(3.25rem, 6.5vw, 6rem); /* @kind font */ --fs-display-2: clamp(2.5rem, 4.4vw, 4rem); /* @kind font */ --fs-h2: clamp(1.9rem, 3vw, 3rem); /* @kind font */ --fs-h3: clamp(1.4rem, 1.8vw, 1.9rem); /* @kind font */ --fs-numeral: clamp(2.75rem, 5vw, 4.75rem); /* @kind font */ /* Body sizes (Inter) */ --fs-body-lg: 1.25rem; /* @kind font */ --fs-body: 1.0625rem; /* @kind font */ --fs-small: 0.9375rem; /* @kind font */ /* Mono label */ --fs-label: 0.75rem; /* @kind font */ --fs-label-sm:0.6875rem; /* @kind font */ /* Line heights */ --lh-display: 1.02; /* @kind other */ --lh-heading: 1.08; /* @kind other */ --lh-body: 1.6; /* @kind other */ --lh-tight: 1.3; /* @kind other */ /* Tracking */ --ls-display: -0.02em; /* @kind other */ --ls-body: 0; /* @kind other */ --ls-label: 0.2em; /* @kind other */ --weight-light: 300; --weight-normal: 400; --weight-medium: 500; } /* ── Rust Brothers · Spacing & layout tokens ─────────────────────────── 4px base grid. "Premium restraint" = tight, considered spacing. Section rhythm is deliberately compact — voids read as broken. */ :root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* Section vertical padding — compact by intent */ --section-y: clamp(56px, 7vw, 104px); /* @kind spacing */ --section-y-tight:clamp(40px, 4.5vw, 64px); /* @kind spacing */ /* Page gutters + max content width */ --gutter: clamp(20px, 5vw, 88px); /* @kind spacing */ --maxw: 1320px; --maxw-text:66ch; /* Hairline weights */ --hair: 1px; --tick: 10px; /* datum-line tick length */ --radius: 0; /* the system is square — no rounded corners */ } /* ============ BASE ============ */ /* ── Rust Brothers · Base elements & signature utilities ─────────────── Element defaults + the datum-line system borrowed from architectural elevation drawings. One easing curve throughout. */ :root { --ease: cubic-bezier(.2,.75,.3,1); /* @kind other */ } *,*::before,*::after { box-sizing: border-box; } body { margin: 0; background: var(--page-bg); color: var(--text-primary); font-family: var(--font-body); font-weight: var(--weight-light); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1,h2,h3 { font-family: var(--font-display); font-weight: var(--weight-normal); line-height: var(--lh-heading); letter-spacing: var(--ls-display); margin: 0; text-wrap: balance; } p { margin: 0; text-wrap: pretty; } a { color: var(--accent); text-decoration: none; transition: color .25s var(--ease); } a:hover { color: var(--accent-hover); } /* ── Mono label / eyebrow ── */ .rb-label { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: var(--weight-normal); text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--accent); } .rb-label--muted { color: var(--text-muted); } /* ── The datum line ── tick · hairline rule · mono annotation · tick Use as section label or divider. Compose with .rb-datum__tick / __rule / __text */ .rb-datum { display: flex; align-items: center; gap: var(--space-3); font-family: var(--font-mono); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--text-muted); } .rb-datum__tick { width: var(--hair); height: var(--tick); background: var(--accent); flex: none; } .rb-datum__rule { height: var(--hair); background: var(--rule-light); flex: 1 1 auto; } .rb-datum--on-dark .rb-datum__rule { background: var(--rule-dark); } .rb-datum__num { color: var(--accent); } /* ── Hairline CTA — outline that inverts on hover, never a filled color ── */ .rb-cta { display: inline-flex; align-items: center; gap: var(--space-3); font-family: var(--font-mono); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: var(--ls-label); padding: 14px 26px; border: var(--hair) solid currentColor; color: var(--text-primary); background: transparent; cursor: pointer; transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); } .rb-cta:hover { background: var(--text-primary); color: var(--page-bg); } .rb-cta--accent { color: var(--accent); } .rb-cta--accent:hover { background: var(--accent); color: var(--bone); border-color: var(--accent); } .rb-cta--on-dark { color: var(--text-on-dark); } .rb-cta--on-dark:hover { background: var(--bone); color: var(--graphite); } .rb-cta--fill { background: var(--accent); color: var(--bone); border-color: var(--accent); } .rb-cta--fill:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--bone); } /* ── Imagery treatment — hold the mixed-light jobsite set at ~40% desaturation ── */ .rb-photo { filter: saturate(.6) contrast(1.02); transition: filter .5s var(--ease); } .rb-photo--reveal:hover { filter: saturate(1) contrast(1.02); } /* ============ COMPONENT PIECES (were inline styles in the React build) ============ */ /* Wordmark */ .rb-wm{line-height:1;display:inline-block} .rb-wm__name{font-family:var(--font-display);font-weight:400;letter-spacing:-.02em;color:var(--ink);display:block} .rb-wm__name em{font-style:normal;color:var(--oxide)} .rb-wm--dark .rb-wm__name{color:var(--bone)} .rb-wm--dark .rb-wm__name em{color:var(--oxide-hi)} .rb-wm__sub{font-family:var(--font-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--concrete);display:block} /* Eyebrow (uses .rb-label from base) */ .rb-eyebrow{display:inline-flex;gap:8px;align-items:baseline} .rb-eyebrow__num{color:var(--oxide)} /* Stat block */ .rb-stat{display:flex;flex-direction:column;gap:12px;align-items:flex-start} .rb-stat__tick{width:34px;height:2px;background:var(--oxide);display:block} .rb-stat__value{font-family:var(--font-display);font-weight:400;font-size:clamp(1.9rem,2.6vw,2.5rem);line-height:1;letter-spacing:-.02em;color:var(--ink);white-space:nowrap} .rb-stat__suffix{color:var(--oxide)} .rb-dark .rb-stat__value{color:var(--bone)} .rb-stat__label{font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.2em;text-transform:uppercase;color:var(--concrete)} /* Service photo card */ .rb-svc-card{position:relative;display:block;overflow:hidden;border:1px solid var(--rule-light);color:var(--bone)} .rb-svc-card--wide{grid-column:span 2} .rb-svc-card img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.55) contrast(1.02);transition:filter .5s var(--ease),transform .6s var(--ease)} .rb-svc-card:hover img{filter:saturate(1) contrast(1.03);transform:scale(1.03)} .rb-svc-card__scrim{position:absolute;inset:auto 0 0 0;height:55%;background:linear-gradient(to top,rgba(23,25,26,.82),rgba(23,25,26,0))} .rb-svc-card__foot{position:absolute;left:18px;bottom:16px;right:18px;display:flex;align-items:flex-end;justify-content:space-between} .rb-svc-card__name{font-family:var(--font-display);font-size:1.6rem;letter-spacing:-.02em;line-height:1.05} .rb-svc-card--wide .rb-svc-card__name{font-size:clamp(1.9rem,3vw,2.6rem)} .rb-svc-card__idx{font-family:var(--font-mono);font-size:12px;letter-spacing:.2em;color:var(--oxide-hi)} .rb-svc-card__flag{position:absolute;top:12px;left:12px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--bone);background:var(--oxide);padding:4px 8px} /* Form fields */ .rb-field{display:flex;flex-direction:column;gap:4px} .rb-field__label{font-family:var(--font-mono);font-size:var(--fs-label-sm);letter-spacing:.2em;text-transform:uppercase;color:var(--concrete)} .rb-field input,.rb-field textarea,.rb-field select{width:100%;background:transparent;border:none;border-bottom:1px solid var(--field-line);padding:10px 0;font-family:var(--font-body);font-weight:300;font-size:var(--fs-body);color:var(--ink);outline:none;transition:border-color .3s var(--ease);resize:vertical} .rb-field--dark input,.rb-field--dark textarea,.rb-field--dark select{border-bottom-color:var(--steel);color:var(--bone)} .rb-field input:focus,.rb-field textarea:focus,.rb-field select:focus{border-bottom-color:var(--oxide)} .rb-field select{appearance:none;-webkit-appearance:none;padding-right:24px;cursor:pointer} .rb-field option{color:#17191A} .rb-field--select{position:relative} .rb-field__chev{position:absolute;right:0;bottom:12px;color:var(--concrete);pointer-events:none} /* Accordion */ .rb-acc__item{border-bottom:1px solid var(--rule-light)} .rb-acc__item:first-child{border-top:1px solid var(--rule-light)} .rb-dark .rb-acc__item,.rb-dark .rb-acc__item:first-child{border-color:var(--rule-dark)} .rb-acc__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;background:transparent;border:none;cursor:pointer;text-align:left;padding:22px 0;color:var(--ink);font-family:var(--font-display);font-size:clamp(1.25rem,1.7vw,1.6rem);letter-spacing:-.01em;line-height:1.15} .rb-dark .rb-acc__q{color:var(--bone)} .rb-acc__icon{color:var(--oxide);flex:none;display:inline-flex} .rb-acc__icon .rb-acc__minus{display:none} .rb-acc__item[data-open="true"] .rb-acc__plus{display:none} .rb-acc__item[data-open="true"] .rb-acc__minus{display:inline} .rb-acc__panel{overflow:hidden;max-height:0;opacity:0;transition:max-height .45s var(--ease),opacity .35s var(--ease)} .rb-acc__item[data-open="true"] .rb-acc__panel{max-height:320px;opacity:1} .rb-acc__panel p{padding:0 0 24px;max-width:62ch;color:var(--ink-2);font-weight:300;font-size:var(--fs-body);line-height:1.6} .rb-dark .rb-acc__panel p{color:var(--concrete)} /* ============ PAGE ============ */ /* ── Layout primitives ─────────────────────────────────────────── */ html{scroll-behavior:smooth} .rb-container{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter);width:100%} .rb-section{padding-block:var(--section-y)} .rb-section--tight{padding-block:var(--section-y-tight)} .rb-dark{background:var(--graphite);color:var(--text-on-dark)} /* Each section spans the full width of whatever theme wrapper contains it */ .rb-section,.rb-hero,.rb-contact,.rb-credentials,.rb-quoteband{width:100%;max-width:none} .rb-statement{font-family:var(--font-display);font-weight:400;font-size:var(--fs-display-2);color:var(--ink);letter-spacing:-.02em;line-height:1.02;margin:0} .rb-statement--light{color:var(--bone)} .rb-heading{font-family:var(--font-display);font-weight:400;font-size:var(--fs-h2);line-height:1.08;letter-spacing:-.02em;margin:0} .rb-dark .rb-heading{color:var(--bone)} .rb-ink-muted{color:var(--concrete)} .rb-note{font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;color:var(--concrete);margin:0} .rb-section > .rb-container > .rb-datum,.rb-contact > .rb-container > .rb-datum{margin-bottom:clamp(28px,3.5vw,52px)} .rb-form__row3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} /* ── Header ────────────────────────────────────────────────────── */ .rb-header{position:sticky;top:0;z-index:50;background:var(--graphite);border-bottom:1px solid transparent;transition:border-color .3s var(--ease),background .3s var(--ease)} .rb-header[data-scrolled="true"]{border-bottom-color:var(--rule-dark)} .rb-header__bar{display:flex;align-items:center;justify-content:space-between;gap:32px;height:76px} .rb-nav{display:flex;gap:30px} .rb-nav__link{font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;color:var(--concrete);transition:color .25s var(--ease)} .rb-nav__link:hover{color:var(--bone)} .rb-header__actions{display:flex;align-items:center;gap:22px} .rb-header__phone{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.1em;color:var(--bone)} .rb-header__phone:hover{color:var(--oxide-hi)} .rb-burger{display:none;background:none;border:none;color:var(--bone);cursor:pointer;padding:4px} /* drawer */ .rb-drawer{position:fixed;inset:0;background:var(--graphite);z-index:200;transform:translateY(-100%);opacity:0;visibility:hidden;pointer-events:none;transition:transform .5s var(--ease),opacity .3s var(--ease),visibility 0s linear .5s;display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch} .rb-drawer[data-open="true"]{transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto;transition:transform .5s var(--ease),opacity .3s var(--ease),visibility 0s} .rb-drawer__top{display:flex;align-items:center;justify-content:space-between;height:76px} .rb-drawer__nav{display:flex;flex-direction:column;gap:2px;padding-top:16px} .rb-drawer__link{display:flex;align-items:baseline;gap:16px;font-family:var(--font-display);font-size:clamp(1.25rem,5.6vw,1.375rem);color:var(--bone);padding:11px 0;border-bottom:1px solid var(--rule-dark)} .rb-drawer__link:hover{color:var(--oxide-hi)} .rb-drawer__num{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.2em;color:var(--oxide)} /* ── Hero ──────────────────────────────────────────────────────── */ .rb-hero{position:relative;background:var(--graphite);color:var(--bone);overflow:hidden;min-height:min(88vh,860px);display:flex;flex-direction:column;justify-content:flex-end} .rb-hero__media{position:absolute;inset:0;overflow:hidden} .rb-hero__media img{width:100%;height:100%;object-fit:cover;will-change:transform} /* localized gradient behind the text block only — never a full-image darken */ .rb-hero__scrim{position:absolute;inset:0;background:linear-gradient(105deg,rgba(23,25,26,.92) 0%,rgba(23,25,26,.72) 34%,rgba(23,25,26,.12) 62%,rgba(23,25,26,0) 100%),linear-gradient(to top,rgba(23,25,26,.6),rgba(23,25,26,0) 40%)} .rb-hero__inner{position:relative;padding-block:clamp(80px,12vh,150px) clamp(24px,4vh,44px)} .rb-hero__block{max-width:min(640px,90%);display:flex;flex-direction:column;gap:22px} .rb-hero__h1{font-family:var(--font-display);font-weight:400;font-size:var(--fs-display-1);line-height:1.0;letter-spacing:-.025em;color:var(--bone);margin:0} .rb-hero__sub{font-size:var(--fs-body-lg);font-weight:300;line-height:1.5;color:#d8d7d3;max-width:48ch} .rb-hero__cta{display:flex;gap:16px;flex-wrap:wrap;margin-top:6px} .rb-hero__foot{position:relative;padding-bottom:clamp(20px,4vh,40px)} /* ── Trust strip ───────────────────────────────────────────────── */ .rb-trust{border-bottom:1px solid var(--rule-light)} .rb-trust__grid{display:grid;grid-template-columns:repeat(4,1fr)} .rb-trust__cell{padding:24px 28px 6px;border-top:1px solid var(--rule-light)} .rb-trust__cell + .rb-trust__cell{border-left:1px solid var(--rule-light)} .rb-trust__cell:first-child{padding-left:0} /* ── Positioning ───────────────────────────────────────────────── */ .rb-positioning__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,6vw,90px);align-items:end} .rb-positioning__body{font-size:var(--fs-body-lg);font-weight:300;line-height:1.55;color:var(--ink-2);max-width:46ch} .rb-positioning__body strong{font-weight:500;color:var(--ink)} /* ── Services ──────────────────────────────────────────────────── */ .rb-services__head{max-width:40ch;margin-bottom:clamp(28px,3.5vw,48px)} .rb-services__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} /* ── Why one crew (dark) ───────────────────────────────────────── */ .rb-why{position:relative;overflow:hidden} .rb-why__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,88px);align-items:start} .rb-why__body{font-size:var(--fs-body-lg);font-weight:300;line-height:1.6;color:var(--concrete);max-width:44ch;margin-top:22px} .rb-why__proof{display:flex;flex-direction:column;gap:0;padding-top:6px} .rb-why__row{padding:20px 0;border-bottom:1px solid var(--rule-dark)} .rb-why__row:first-child{border-top:1px solid var(--rule-dark)} .rb-why__band{margin-top:clamp(40px,6vw,80px);height:clamp(220px,32vw,420px);overflow:hidden} .rb-why__band img{width:100%;height:100%;object-fit:cover} /* ── Process ───────────────────────────────────────────────────── */ .rb-process__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px)} .rb-step{position:relative;padding-top:24px} .rb-step__tick{position:absolute;top:0;left:0;width:40px;height:2px;background:var(--oxide)} .rb-step__num{font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.2em;color:var(--oxide)} .rb-step__title{font-family:var(--font-display);font-weight:400;font-size:var(--fs-h3);margin:12px 0 10px;letter-spacing:-.01em} .rb-step__body{font-size:var(--fs-body);font-weight:300;line-height:1.55;color:var(--ink-2)} /* ── Selected work mosaic ──────────────────────────────────────── */ .rb-work__intro{max-width:40ch;margin-bottom:clamp(26px,3vw,44px)} .rb-work__mosaic{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(150px,17vw,230px);gap:12px} .rb-work__tile{position:relative;overflow:hidden;display:block;border:1px solid var(--rule-light)} .rb-work__tile img{width:100%;height:100%;object-fit:cover;transition:filter .5s var(--ease),transform .7s var(--ease)} .rb-work__tile:hover img{filter:saturate(1) contrast(1.03);transform:scale(1.04)} .rb-work__cap{position:absolute;left:0;bottom:0;font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--bone);background:rgba(23,25,26,.78);padding:7px 11px;opacity:0;transform:translateY(6px);transition:opacity .35s var(--ease),transform .35s var(--ease)} .rb-work__tile:hover .rb-work__cap{opacity:1;transform:none} /* ── Spotlight ─────────────────────────────────────────────────── */ .rb-spotlight__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,72px);align-items:center} .rb-spotlight__body{font-size:var(--fs-body-lg);font-weight:300;line-height:1.6;color:var(--ink-2);margin:20px 0 18px;max-width:42ch} .rb-spotlight__hero{margin:0;height:clamp(260px,34vw,440px);overflow:hidden;border:1px solid var(--rule-light)} .rb-spotlight__hero img{width:100%;height:100%;object-fit:cover} .rb-spotlight__strip{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px} .rb-spotlight__thumb{margin:0;position:relative} .rb-spotlight__thumb img{width:100%;height:clamp(120px,15vw,190px);object-fit:cover;display:block;border:1px solid var(--rule-light)} .rb-spotlight__thumb figcaption{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--concrete);margin-top:8px} /* ── Who we work with ──────────────────────────────────────────── */ .rb-who__grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--rule-light)} .rb-who__col{padding:clamp(28px,3.5vw,52px)} .rb-who__col--alt{border-left:1px solid var(--rule-light);background:#fff} .rb-who__body{font-size:var(--fs-body-lg);font-weight:300;line-height:1.55;color:var(--ink-2);margin:18px 0 22px;max-width:40ch} .rb-who__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px} .rb-who__list li{position:relative;padding-left:22px;font-size:var(--fs-body);color:var(--ink);font-weight:300} .rb-who__list li::before{content:"";position:absolute;left:0;top:.62em;width:12px;height:1px;background:var(--oxide)} /* ── Team ──────────────────────────────────────────────────────── */ .rb-team__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,5vw,72px);align-items:center} .rb-team__photo{margin:0;height:clamp(300px,40vw,520px);overflow:hidden;border:1px solid var(--rule-light)} .rb-team__photo img{width:100%;height:100%;object-fit:cover} .rb-team__body{font-size:var(--fs-body-lg);font-weight:300;line-height:1.6;color:var(--ink-2);margin:22px 0 28px;max-width:46ch} .rb-team__names{display:flex;gap:44px;flex-wrap:wrap;border-top:1px solid var(--rule-light);padding-top:22px} .rb-team__name{display:flex;flex-direction:column;gap:3px} .rb-team__name strong{font-family:var(--font-display);font-weight:400;font-size:1.4rem;color:var(--ink)} .rb-team__name span{font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.18em;text-transform:uppercase;color:var(--oxide)} /* ── Credentials band (dark, narrow) ───────────────────────────── */ .rb-credentials{padding-block:clamp(22px,3vw,34px);border-top:1px solid var(--rule-dark);border-bottom:1px solid var(--rule-dark)} .rb-credentials__row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:22px} .rb-credentials__item{font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.2em;text-transform:uppercase;color:var(--concrete)} .rb-credentials__sep{width:6px;height:6px;background:var(--oxide);flex:none;transform:rotate(45deg)} /* ── Service areas ─────────────────────────────────────────────── */ .rb-areas__grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,72px);align-items:center} .rb-areas__head{max-width:28ch} .rb-areas__sub{font-size:var(--fs-body);font-weight:300;line-height:1.6;color:var(--ink-2);margin-top:20px;max-width:36ch} .rb-areas__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:0} .rb-areas__item{display:flex;align-items:baseline;gap:16px;padding:18px 0;border-bottom:1px solid var(--rule-light)} .rb-areas__num{font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.2em;color:var(--oxide)} .rb-areas__name{font-family:var(--font-display);font-size:clamp(1.5rem,2.3vw,2.1rem);color:var(--ink);letter-spacing:-.01em} .rb-areas__name--muted{color:var(--concrete);font-size:clamp(1.15rem,1.7vw,1.5rem)} .rb-areas__item--wide{grid-column:1 / -1} /* ── Testimonials (placeholder) ────────────────────────────────── */ .rb-testimonials__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .rb-quote{margin:0;border:1px solid var(--rule-light);padding:28px 26px 24px;display:flex;flex-direction:column;gap:18px;min-height:230px;background:repeating-linear-gradient(135deg,transparent,transparent 9px,rgba(140,144,149,.05) 9px,rgba(140,144,149,.05) 10px)} .rb-quote__mark{font-family:var(--font-display);font-size:3.4rem;line-height:.5;color:var(--oxide);opacity:.5} .rb-quote__lines{display:flex;flex-direction:column;gap:12px;flex:1} .rb-quote__lines span{height:8px;background:var(--bone-3);width:100%;display:block} .rb-quote__cap{font-family:var(--font-mono);font-size:var(--fs-label-sm);letter-spacing:.16em;text-transform:uppercase;color:var(--concrete)} .rb-testimonials__note{margin-top:18px} /* ── Quote band (dark CTA) ─────────────────────────────────────── */ .rb-quoteband{padding-block:clamp(52px,7vw,96px)} .rb-quoteband__inner{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap} .rb-quoteband__sub{font-size:var(--fs-body-lg);font-weight:300;color:var(--concrete);margin-top:16px} .rb-quoteband__actions{display:flex;align-items:center;gap:26px;flex-wrap:wrap} .rb-quoteband__phone{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:1rem;letter-spacing:.08em;color:var(--bone)} .rb-quoteband__phone:hover{color:var(--oxide-hi)} /* ── FAQ ───────────────────────────────────────────────────────── */ .rb-faq__grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:clamp(28px,5vw,72px);align-items:start} .rb-faq__head{max-width:26ch} .rb-faq__sub{font-size:var(--fs-body);font-weight:300;line-height:1.6;color:var(--ink-2);margin-top:20px;max-width:34ch} /* ── Contact (dark) ────────────────────────────────────────────── */ .rb-contact{padding-block:var(--section-y)} .rb-contact__grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(36px,6vw,90px);align-items:start} .rb-contact__dl{margin:28px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:26px 24px} .rb-contact__dl dt{font-family:var(--font-mono);font-size:var(--fs-label-sm);letter-spacing:.2em;text-transform:uppercase;color:var(--oxide);margin-bottom:8px} .rb-contact__dl dd{margin:0;font-size:var(--fs-body);font-weight:300;color:var(--bone);line-height:1.5} .rb-contact__dl a{color:var(--bone)} .rb-contact__dl a:hover{color:var(--oxide-hi)} .rb-contact__form{display:flex;flex-direction:column;gap:14px} .rb-form__row2{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px} .rb-form__submit{margin-top:4px} /* ── Footer (dark) ─────────────────────────────────────────────── */ .rb-footer{padding-top:clamp(48px,6vw,80px)} .rb-footer__cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:clamp(36px,5vw,64px)} .rb-footer__brand{max-width:38ch} .rb-footer__blurb{margin-top:18px;font-size:var(--fs-body);font-weight:300;line-height:1.6;color:var(--concrete)} .rb-footer__col{display:flex;flex-direction:column;gap:11px} .rb-footer__col a,.rb-footer__col span:not(.rb-footer__h){font-size:var(--fs-body);font-weight:300;color:var(--concrete)} .rb-footer__col a:hover{color:var(--oxide-hi)} .rb-footer__h{font-family:var(--font-mono);font-size:var(--fs-label-sm);letter-spacing:.2em;text-transform:uppercase;color:var(--bone);margin-bottom:6px} .rb-footer__bar{border-top:1px solid var(--rule-dark);padding-block:22px} .rb-footer__barrow{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--font-mono);font-size:var(--fs-label-sm);letter-spacing:.14em;text-transform:uppercase;color:var(--concrete)} /* ── Responsive ────────────────────────────────────────────────── */ @media (max-width:1000px){ .rb-positioning__grid,.rb-why__grid,.rb-spotlight__grid,.rb-team__grid,.rb-areas__grid,.rb-faq__grid,.rb-contact__grid{grid-template-columns:1fr} .rb-team__grid{grid-template-columns:1fr} .rb-services__grid{grid-template-columns:repeat(2,1fr)} .rb-process__grid{grid-template-columns:repeat(2,1fr);gap:36px 28px} .rb-footer__cols{grid-template-columns:1fr 1fr} .rb-team__photo{order:-1} } /* ── Mid-range: tablets & landscape phones (721–1000px) ── */ @media (min-width:721px) and (max-width:1000px){ /* Work mosaic: drop the 4-col elevation layout — reset the inline spans to a 2-col flow */ .rb-work__mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(180px,26vw,240px)} .rb-work__mosaic > a{grid-column:auto !important;grid-row:auto !important} /* Trust strip: 4 across is too tight on tablets — go 2×2 */ .rb-trust__grid{grid-template-columns:repeat(2,1fr)} .rb-trust__cell{padding:16px 24px} .rb-trust__cell:nth-child(2n+1){padding-left:0;border-left:none} .rb-trust__cell:nth-child(n+3){border-top:1px solid var(--rule-light)} /* Wide service feature no longer needs to span 2 of only-2 columns */ .rb-svc-card--wide{grid-column:span 2} /* Who-we-work-with & spotlight strip breathe better stacked at the low end */ .rb-spotlight__strip{gap:10px} } /* Header switches to the drawer at 850px. The desktop bar needs 824px of CONTENT width, and media queries match the viewport INCLUDING the ~15px classic scrollbar, so the breakpoint must clear 824+15=839 to guarantee the bar always fits; 850 leaves a margin. (721-823px used to overflow outright, and a 830px breakpoint still left 831-847px cramped enough to wrap the nav.) Layout breakpoints below stay at 720/721 so tablet grids do not regress. */ @media (max-width:850px){ .rb-nav,.rb-header__phone,.rb-header__actions .rb-cta{display:none} .rb-burger{display:inline-flex} } @media (max-width:720px){ .rb-trust__grid{grid-template-columns:1fr 1fr} .rb-trust__cell{padding:16px 20px} .rb-trust__cell:nth-child(odd){padding-left:0} .rb-trust__cell:nth-child(3),.rb-trust__cell:nth-child(4){border-top:1px solid var(--rule-light)} .rb-trust__cell:nth-child(2n+1){border-left:none} .rb-services__grid{grid-template-columns:1fr} .rb-services__grid > a{grid-column:auto !important} .rb-work__mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px} .rb-work__mosaic > a{grid-column:auto !important;grid-row:auto !important} .rb-testimonials__grid{grid-template-columns:1fr} .rb-areas__list{grid-template-columns:1fr} .rb-who__grid{grid-template-columns:1fr} .rb-who__col--alt{border-left:none;border-top:1px solid var(--rule-light)} .rb-form__row2,.rb-form__row3{grid-template-columns:1fr} .rb-footer__cols{grid-template-columns:1fr} .rb-quoteband__inner{flex-direction:column;align-items:flex-start;gap:28px} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .rb-hero__media img{transform:none !important} } /* ============ REDESIGN UPGRADE PASS ============ Accessibility (focus + skip link), pressed feedback, surface texture, scroll-reveal motion, form error states, footer legal. Additive only. */ /* ── Logo (client PNG; height-constrained so the large source scales down cleanly) ── */ .rb-logo{display:inline-flex;align-items:center;flex:0 0 auto} .rb-logo__img{display:block;height:44px;width:auto;max-width:210px;object-fit:contain} .rb-logo__img--sm{height:38px;max-width:180px} .rb-logo__img--footer{height:56px;max-width:240px;margin-bottom:20px} @media (max-width:720px){ .rb-logo__img{height:36px;max-width:160px} .rb-logo__img--footer{height:48px} } /* ── Burger: comfortable 44px touch target ── */ .rb-burger{min-width:44px;min-height:44px;align-items:center;justify-content:center} /* ── Skip link (keyboard users) ── */ .rb-skip{position:fixed;top:0;left:0;z-index:100;transform:translateY(-120%);background:var(--oxide);color:var(--bone);font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;padding:12px 20px;transition:transform .25s var(--ease)} .rb-skip:focus{transform:translateY(0);color:var(--bone)} /* ── Focus-visible rings (keyboard only; mouse clicks stay clean) ── */ a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--oxide-hi);outline-offset:3px} .rb-dark a:focus-visible,.rb-hero a:focus-visible,.rb-header a:focus-visible,.rb-header button:focus-visible,.rb-drawer a:focus-visible,.rb-contact :focus-visible{outline-color:var(--oxide-hi)} .rb-svc-card:focus-visible,.rb-work__tile:focus-visible{outline-offset:-2px} /* ── Pressed / active feedback (physical click) ── */ .rb-cta:active{transform:translateY(1px) scale(.985)} .rb-nav__link:active,.rb-drawer__link:active,.rb-header__phone:active,.rb-quoteband__phone:active{transform:translateY(1px)} .rb-acc__q:active{transform:scale(.997)} .rb-cta,.rb-nav__link,.rb-drawer__link,.rb-header__phone,.rb-quoteband__phone,.rb-acc__q{transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .12s var(--ease)} /* ── Surface texture: fixed grain overlay breaks digital flatness ── */ .rb-grain{position:fixed;inset:0;z-index:40;pointer-events:none;opacity:.045;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} /* ── Elevated cards: hover lift with an oxide-tinted shadow (not pure black) ── */ .rb-svc-card,.rb-work__tile{transition:transform .5s var(--ease),box-shadow .5s var(--ease)} .rb-svc-card:hover,.rb-work__tile:hover{transform:translateY(-3px);box-shadow:0 18px 40px -18px rgba(169,72,31,.35),0 6px 14px -10px rgba(23,25,26,.4)} /* ── Scroll-reveal: staggered Y-translate + fade (GPU transform/opacity) ── */ .rb-reveal{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease),transform .8s var(--ease);will-change:opacity,transform} .rb-reveal.is-visible{opacity:1;transform:none} /* ── Form error states (inline, never alert()) ── */ .rb-field__error{font-family:var(--font-mono);font-size:var(--fs-label-sm);letter-spacing:.1em;text-transform:uppercase;color:var(--oxide-hi);margin-top:2px} .rb-field--invalid input{border-bottom-color:var(--oxide-hi)} /* ── Footer legal links ── */ .rb-footer__legal{display:flex;gap:22px;flex-wrap:wrap} .rb-footer__legal a{font-family:var(--font-mono);font-size:var(--fs-label-sm);letter-spacing:.14em;text-transform:uppercase;color:var(--concrete)} .rb-footer__legal a:hover{color:var(--oxide-hi)} @media (prefers-reduced-motion:reduce){ .rb-reveal{opacity:1;transform:none;transition:none} .rb-svc-card:hover,.rb-work__tile:hover{transform:none} } /* ========================================================================== ELEMENTOR / HELLO-THEME ENVIRONMENT COMPATIBILITY Added during the WordPress port. Not part of the standalone stylesheet in _project/ — this file is built as: _project/rust-brothers.css + this block. Load order is rust-brothers.css (#4) then hello reset.css (#5) then Elementor frontend.min.css (#8). Both later sheets carry selectors that tie or beat the authored ones, so the authored intent is re-asserted here at a higher specificity via an `.elementor` prefix. No !important is used. ========================================================================== */ /* ── Images ─────────────────────────────────────────────────────────────── Elementor ships `.elementor img{height:auto;max-width:100%}` (0,1,1), which beats `.rb-logo__img` (0,1,0) outright and wins every (0,1,1) tie on order. Without this the 991x326 logo renders at full size and pushes the header 261px past the viewport. Values copied verbatim from the authored rules. */ .elementor .rb-logo__img{display:block;height:44px;width:auto;max-width:210px;object-fit:contain} .elementor .rb-logo__img--sm{height:38px;max-width:180px} .elementor .rb-logo__img--footer{height:56px;max-width:240px} .elementor .rb-hero__media img{width:100%;height:100%;object-fit:cover} .elementor .rb-svc-card img{width:100%;height:100%;object-fit:cover;display:block} .elementor .rb-why__band img{width:100%;height:100%;object-fit:cover} .elementor .rb-work__tile img{width:100%;height:100%;object-fit:cover} .elementor .rb-spotlight__hero img{width:100%;height:100%;object-fit:cover} .elementor .rb-spotlight__thumb img{width:100%;height:clamp(120px,15vw,190px);object-fit:cover;display:block;border:1px solid var(--rule-light)} .elementor .rb-team__photo img{width:100%;height:100%;object-fit:cover} @media (max-width:850px){ .elementor .rb-logo__img{height:36px;max-width:160px} .elementor .rb-logo__img--footer{height:48px} } /* ── Hello theme chrome ─────────────────────────────────────────────────── The page supplies its own .rb-header / .rb-footer in containers 01 and 15C, so the Hello Elementor header/footer must stay hidden. Moved out of the Customizer's Additional CSS so the rule travels with the theme. */ header#site-header, footer#site-footer{display:none} /* ── Form controls ──────────────────────────────────────────────────────── hello reset.css sets input[type="text"],…,select,textarea{border:1px solid #666;border-radius:3px; padding:.5rem 1rem;width:100%} at (0,1,1) — the same specificity as `.rb-field input`, and it loads later, so text inputs rendered as 44px outlined boxes while the selects kept the authored underline. Re-assert the underline treatment for every control so they match, and pin one height so input and select agree exactly. */ .elementor .rb-field input, .elementor .rb-field textarea, .elementor .rb-field select{ width:100%; background-color:transparent; border:none; border-bottom:1px solid var(--field-line); border-radius:0; padding:8px 0; font-family:var(--font-body); font-weight:300; font-size:var(--fs-body); color:var(--ink); outline:none; transition:border-color .3s var(--ease); } .elementor .rb-field input, .elementor .rb-field select{height:40px} .elementor .rb-field textarea{min-height:84px;resize:vertical;display:block} .elementor .rb-field--dark input, .elementor .rb-field--dark textarea, .elementor .rb-field--dark select{border-bottom-color:var(--steel);color:var(--bone)} .elementor .rb-field input:focus, .elementor .rb-field textarea:focus, .elementor .rb-field select:focus{border-bottom-color:var(--oxide)} .elementor .rb-field select{appearance:none;-webkit-appearance:none;padding-right:22px;cursor:pointer} .elementor .rb-field option{color:#17191A} /* Dropdown affordance. Drawn as a pseudo-element rather than a background image because Elementor's lazy-load CSS applies `background-image:none !important` to descendants of not-yet-loaded containers, which would erase an arrow set that way. */ .elementor .rb-field--select{position:relative} .elementor .rb-field--select::after{ content:""; position:absolute; right:3px; bottom:16px; width:7px; height:7px; border-right:1.5px solid var(--oxide); border-bottom:1.5px solid var(--oxide); transform:rotate(45deg); pointer-events:none; } /* ── Button baseline: neutralise hello reset.css, once, for every rb- button ── THIRD occurrence of this bug (submit button, back-to-top, now the FAQ accordion), so fix the class of problem rather than the instance. reset.css loads after this file and declares: [type=button],[type=submit],button { border:1px solid #c36; color:#c36 } (0,1,0)/(0,0,1) [type=button]:focus,[type=button]:hover, [type=submit]:focus,[type=submit]:hover, button:focus,button:hover { background-color:#c36; color:#fff } (0,2,0)/(0,1,1) The base rule is already beaten by any component class, which is why resting states always looked right. The hover/focus rule is the one that bites: at (0,2,0)/(0,1,1) it outranks a plain `.rb-thing:hover` (0,2,0 tie, later wins) and any component that simply forgets to declare a hover — as .rb-acc__q did. What reads as a crimson "open" state is really :focus persisting after click. One selector at (0,2,1) covers every current and future rb- button, in or out of .elementor. Component styling below is written at (0,2,1) or higher and placed after this block, so intentional hovers still win. */ button[class*="rb-"]:hover, button[class*="rb-"]:focus, input[class*="rb-"]:hover, input[class*="rb-"]:focus{ background-color:transparent; color:inherit; text-decoration:none; } /* ── Submit button ──────────────────────────────────────────────────────── hello reset.css sets `[type="submit"],button{border:1px solid #c36; color:#c36;border-radius:3px}` at (0,1,0) — the same specificity as `.rb-cta`, loading later, which is where the crimson came from. Restores the hairline CTA so the button matches the anchor CTAs elsewhere on the page. */ .elementor button.rb-cta, .elementor input.rb-cta, .elementor .rb-form__submit .rb-cta{ background-color:transparent; border:var(--hair) solid currentColor; border-radius:0; padding:14px 26px; color:var(--text-primary); } .elementor button.rb-cta--on-dark, .elementor .rb-form__submit .rb-cta--on-dark{color:var(--text-on-dark)} .elementor button.rb-cta--on-dark:hover, .elementor .rb-form__submit .rb-cta--on-dark:hover{background-color:var(--bone);color:var(--graphite);border-color:var(--bone)} /* ── CF7 wpautop ────────────────────────────────────────────────────────── Contact Form 7 runs wpautop over the form template, wrapping each .rb-form__row2's two