/* ============================================================================ Rank Forge Marketing — Brand Unification Layer (2026) ---------------------------------------------------------------------------- Loads LAST. Its job is to collapse the two competing design systems (homepage `rf3-*` editorial vs. interior `ax-*` inline-style template) into a single visual language without rewriting ~9,000 inline declarations. Phase 1 — token unification: · One accent orange (was #F26522 x9163 and #E4531E x49) · Three corner radii (was twelve distinct values) · One cream surface (was eight near-identical creams) · One shadow, one hairline Phase 2 — typographic identity: · Archivo display face on headlines, Source Sans 3 for text ========================================================================== */ @font-face{ font-family:"Archivo"; src:url("/assets/fonts/archivo-latin-variable.woff2") format("woff2-variations"); font-style:normal; font-weight:400 900; font-display:swap; } :root{ /* --- accent ------------------------------------------------------------ */ --rfb-orange:#e4531e; /* fills, rules, borders */ --rfb-orange-dark:#bd3f16; /* accent text on light (AA at small sizes) */ --rfb-orange-light:#f79a6e; /* accent text on dark (AA at small sizes) */ --rfb-orange-rgb:228,83,30; /* Resolved per-context by the dark-surface block below. */ --rfb-accent-text:var(--rfb-orange-dark); /* --- surfaces ---------------------------------------------------------- */ --rfb-ink:#17181a; --rfb-navy:#1e2a3a; --rfb-paper:#fcfbf9; --rfb-cream:#f2eee6; --rfb-copy:#4a5058; --rfb-muted:#6d737b; --rfb-line:#ddd6c9; /* --- geometry ---------------------------------------------------------- */ --rfb-r-control:4px; /* buttons, inputs, chips */ --rfb-r-card:8px; /* cards, panels, media */ --rfb-r-flat:0; /* editorial blocks */ --rfb-shadow:0 18px 44px rgba(23,24,26,.09); --rfb-shadow-lift:0 26px 60px rgba(23,24,26,.13); /* --- type -------------------------------------------------------------- */ --rfb-display:"Archivo","Source Sans 3",Arial,sans-serif; --rfb-text:"Source Sans 3",Arial,sans-serif; } /* Dark surfaces flip the accent-text token so orange copy keeps AA contrast without every call site knowing what it sits on. Custom properties inherit, so one declaration per dark container covers all descendants. */ footer, .rf-tone-ink, .rf3-proofbar, .rf3-workboard, .rf3-final, .rf3-project:first-child, .rfn-top,.rfnav-top, .rfn-mobbar, [style*="background:#1E2A3A" i], [style*="background:#243244" i], [style*="background:#202225" i], [style*="background:#17181A" i], [style*="background:#0F1620" i], [style*="background:#0D2748" i], [style*="background:#0B2A1D" i], [style*="background:#192533" i]{ --rfb-accent-text:var(--rfb-orange-light); } /* ========================================================================== 0. Baseline ---------------------------------------------------------------------------- `box-sizing:border-box` is already set in assets/css/shared/ — not repeated here. This block only covers what no existing sheet does. ========================================================================== */ img,svg,video,iframe,table{max-width:100%;} /* Default link colour still resolves to the retired orange in shared-78926f920a52.css. */ a{color:var(--rfb-accent-text);} a:hover{color:var(--rfb-orange);} /* ========================================================================== 1. Accent colour — collapse #F26522 into the brand orange ========================================================================== */ [style*="color:#F26522" i]{color:var(--rfb-accent-text) !important;} [style*="background:#F26522" i]{background:var(--rfb-orange) !important;} [style*="border-color:#F26522" i]{border-color:var(--rfb-orange) !important;} [style*="background:#ff7d3c" i], [style*="background:#e2571a" i]{background:var(--rfb-orange) !important;} /* Orange fills carry white text, never near-black — the #0F1620-on-orange pairing in the legacy template reads as an unfinished button. */ a[style*="background:#F26522" i], button[style*="background:#F26522" i], a[style*="background:#E4531E" i], button[style*="background:#E4531E" i]{color:#fff !important;} /* Legacy radial glow used the old orange. */ [style*="rgba(242,101,34"]{ background-image:radial-gradient(ellipse 45% 100% at 30% 100%,rgba(var(--rfb-orange-rgb),.16),transparent 68%) !important; } /* ========================================================================== 2. Surfaces — eight creams become one ========================================================================== */ [style*="background:#F5F1EA" i], [style*="background:#F6F2EA" i], [style*="background:#EFEAE0" i], [style*="background:#F4F1EC" i], [style*="background:#EFE9DE" i], [style*="background:#FAF7F1" i], [style*="background:#F3EFE7" i], [style*="background:#F6F2EC" i], [style*="background:#F5F4F0" i]{background:var(--rfb-cream) !important;} /* Hairlines: three warm greys become one. */ [style*="border:1px solid #E4DED2" i], [style*="border:1px solid #D9D2C4" i], [style*="border:1px solid #CFC6B6" i], [style*="border:1px solid #E8E2D8" i], [style*="border:1px solid #CBC5B9" i]{border-color:var(--rfb-line) !important;} /* ========================================================================== 3. Geometry — twelve radii become three ========================================================================== */ /* Controls. */ input,select,textarea, button, .rfn-cta,.rfnav-cta, .rf3-button, a.rfh0,a.rfh1, a[style*="border-radius:100px"], a[style*="border-radius:30px"], button[style*="border-radius:30px"], [style*="border-radius:100px"], [style*="border-radius:30px"]{border-radius:var(--rfb-r-control) !important;} /* Cards, panels, media. */ [style*="border-radius:8px"], [style*="border-radius:9px"], [style*="border-radius:10px"], [style*="border-radius:11px"], [style*="border-radius:12px"], [style*="border-radius:14px"], [style*="border-radius:16px"], [style*="border-radius:18px"], [style*="border-radius:20px"], .rf-leadbox{border-radius:var(--rfb-r-card) !important;} /* Controls win over the card rule regardless of source order. */ input[style*="border-radius"], select[style*="border-radius"], textarea[style*="border-radius"], button[style*="border-radius"]{border-radius:var(--rfb-r-control) !important;} /* Decorative accent rules stay as flat bars, not lozenges. */ [style*="height:3px"][style*="border-radius"], [style*="height:2px"][style*="border-radius"], [style*="height:4px"][style*="border-radius"]{border-radius:0 !important;} /* One shadow language. */ [style*="box-shadow:0 30px 60px"], [style*="box-shadow:0 24px 60px"], [style*="box-shadow:0 22px 52px"], [style*="box-shadow:0 20px 50px"], .rf-leadbox{box-shadow:var(--rfb-shadow-lift) !important;} /* ========================================================================== 4. Typography — Archivo display, Source Sans 3 text ========================================================================== */ h1,h2,h3, h1[style],h2[style],h3[style], .rf3-title,.rf-title, .rf3-hero h1, .rf3-project-copy h3, .rf3-service-row h3, .rf3-ledger strong, .rf3-proofbar strong, .rf-result-table dd{ font-family:var(--rfb-display) !important; font-weight:700 !important; letter-spacing:-.032em !important; text-transform:none !important; text-wrap:balance; } /* Hero headlines carry the tighter optical tracking large sizes need. */ h1,h1[style],.rf3-hero h1{ font-weight:700 !important; letter-spacing:-.042em !important; line-height:.96 !important; } h2,h2[style]{line-height:1.02 !important;} h3,h3[style]{letter-spacing:-.022em !important;line-height:1.14 !important;} /* Numerics read as data, not as headlines. */ .rf3-ledger strong, .rf3-proofbar strong, .rf-result-table dd{font-variant-numeric:tabular-nums;letter-spacing:-.03em !important;} /* Kickers and eyebrow labels: one treatment everywhere. */ .rf3-kicker,.rf-kicker, [style*="letter-spacing:4px"][style*="text-transform:uppercase"], [style*="letter-spacing:3px"][style*="text-transform:uppercase"]{ font-family:var(--rfb-text) !important; font-size:12px !important; font-weight:700 !important; letter-spacing:.13em !important; color:var(--rfb-accent-text) !important; } /* Body copy stays in the text face at a comfortable measure. */ p,li,dd,dt,label,figcaption,small{font-family:var(--rfb-text) !important;} p{line-height:1.62;} /* ========================================================================== 5. Controls — one button language ========================================================================== */ .rf3-button, .rfn-cta,.rfnav-cta, a.rfh0, button[type="submit"]{ font-family:var(--rfb-text) !important; font-weight:700 !important; letter-spacing:.005em; transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease; } .rf3-button:hover, .rfn-cta:hover,.rfnav-cta:hover, a.rfh0:hover, button[type="submit"]:hover{transform:translateY(-1px);} a.rfh1, .rf3-button--ghost{ background:transparent !important; color:var(--rfb-ink) !important; border:1px solid rgba(23,24,26,.24) !important; } a.rfh1:hover, .rf3-button--ghost:hover{border-color:var(--rfb-ink) !important;background:#fff !important;} /* Form fields: one fill, one hairline, one focus ring. */ input:not([type="hidden"]),select,textarea{ background:var(--rfb-cream) !important; border:1px solid var(--rfb-line) !important; min-height:50px; } input:focus,select:focus,textarea:focus{ border-color:var(--rfb-orange) !important; box-shadow:0 0 0 3px rgba(var(--rfb-orange-rgb),.16) !important; } /* ========================================================================== 6. Interior hero — retire the CSS-drawn skyline ---------------------------------------------------------------------------- The div-built skyline is the single most template-looking element on the service pages. Replaced with the vertical rule texture the homepage hero already uses, so interior and home read as one site. ========================================================================== */ [style*="--sky-front"]{display:none !important;} .ax-hero{position:relative;background:linear-gradient(180deg,var(--rfb-paper),var(--rfb-cream)) !important;} .ax-hero::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:repeating-linear-gradient(90deg,transparent 0,transparent calc(25% - 1px),rgba(23,24,26,.035) calc(25% - 1px),rgba(23,24,26,.035) 25%); } .ax-hero>*{position:relative;z-index:1;} /* Breadcrumbs sit quietly. */ .ax-hero [style*="font-size:12px"][style*="letter-spacing:1px"]{color:var(--rfb-muted) !important;} /* ========================================================================== 7. Navigation and footer alignment ========================================================================== */ .rfn,.rfnav{border-bottom:1px solid var(--rfb-line) !important;} .rfn-link:hover,.rfnav-menu>a:not(.rfnav-cta):hover{color:var(--rfb-orange-dark) !important;} .rfn-cta,.rfnav-cta{background:var(--rfb-orange) !important;color:#fff !important;} .rfn-cta:hover,.rfnav-cta:hover{background:var(--rfb-orange-dark) !important;} /* ========================================================================== 8. Motion and focus ========================================================================== */ a,button,summary,.rf3-project img{transition-timing-function:cubic-bezier(.2,.7,.2,1);} :focus-visible{outline:3px solid rgba(var(--rfb-orange-rgb),.34) !important;outline-offset:3px;} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important;} .rf3-button:hover,.rfn-cta:hover,a.rfh0:hover,button[type="submit"]:hover{transform:none;} } /* ========================================================================== 9. Mobile ========================================================================== */ @media (max-width:760px){ h1,h1[style],.rf3-hero h1{letter-spacing:-.032em !important;line-height:1.0 !important;} .rf3-button,a.rfh0,a.rfh1,.rfn-cta{width:100%;justify-content:center;} .ax-hero::after{background-size:50% 100%;} } /* ========================================================================== 10. Refinements from render testing ========================================================================== */ /* The tighter display tracking fits more per line, so the hero measure that was tuned for Source Sans 3 now orphans a word. Widen it slightly. */ .rf3-hero h1{max-width:13ch !important;} /* Project cards sit over live site screenshots, which are visually busy. Deepen and raise the scrim so the headline holds regardless of the image underneath it — the previous 28% start left titles competing with body text in the screenshot behind them. */ .rf3-project-media::after{ background:linear-gradient(180deg,rgba(14,20,28,0) 0%,rgba(14,20,28,.28) 38%,rgba(14,20,28,.82) 72%,rgba(14,20,28,.95) 100%) !important; } .rf3-project-copy{ padding:30px 28px 28px !important; text-shadow:0 1px 18px rgba(10,14,20,.5); } .rf3-project-copy p{color:rgba(255,255,255,.86) !important;} .rf3-project-copy span{color:var(--rfb-orange-light) !important;} /* Section labels in the sticky sub-nav truncate mid-word; let them ellipsize cleanly instead of cutting a character in half. */ .rf-jump a,.rf-subnav a,.ax-subnav a{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* ========================================================================== 11. Class-based residue ---------------------------------------------------------------------------- Sections 1–3 override inline styles by matching on the style attribute, which cannot reach rules defined against classes. These are the remaining call sites, found by auditing computed styles in a headless browser rather than by reading the source. ========================================================================== */ /* Retired orange surviving in assets/css/shared/*.css */ .rfnav-stars,.rfn-stars{color:var(--rfb-orange) !important;} .rfnav-bottombar .rf-audit, .rfn-mobbar .rf-audit{background:var(--rfb-orange) !important;color:#fff !important;} /* Radii surviving in shared/, rf-theme.css and rf-design-system.css */ .rfnav-cta,.rfnav-burger,.rfnav-ddp a, .rf-page-blog [data-blog-grid]>a{border-radius:var(--rfb-r-control) !important;} .rfnav-ddp,.rfn-ddmenu{border-radius:var(--rfb-r-card) !important;} .rfnav-burger span,.rfn-burger span{border-radius:0 !important;} main [style*="background:#ffffff"][style*="border:1px"][style*="border-radius"], main [style*="background:#FCFBF9"][style*="border:1px"][style*="border-radius"]{ border-radius:var(--rfb-r-card) !important; } /* `Hanken Grotesk` is named in rf-theme.css and shared/ but has no @font-face and no webfont link anywhere in the project, so every one of those elements silently falls back to a system sans. Point them at the display face they were reaching for. */ .ax-grotesk, .rfnav-logo b,.rfn-logo b, .rfnav-cta,.rfn-cta{font-family:var(--rfb-display) !important;} .rfnav-logo b small,.rfn-logo b small{font-family:var(--rfb-text) !important;} /* Circular elements stay circular. */ [style*="border-radius:50%"], .rf3-browser-bar i{border-radius:50% !important;} /* ========================================================================== 12. Legacy token re-pointing ---------------------------------------------------------------------------- rf-design-system.css and rf-art-direction.css apply their radii through `main [style*="…"]` selectors, which outrank the bare attribute selectors in section 3 no matter which sheet loads last. Rather than escalate specificity across the board, re-point the tokens those rules already read from — one declaration fixes every call site that references them. ========================================================================== */ :root{ --rf-card-radius:8px; /* was 12px */ --rf-control-radius:4px; /* was 8px */ --rf3-radius:4px; /* was 6px */ --rf-orange:#e4531e; --rf-orange-dark:#bd3f16; } /* The remaining literal-value rules in those sheets are matched at equal specificity here, so source order decides and this sheet loads last. */ html body [style*="border-radius:10px"], html body [style*="border-radius:11px"], html body [style*="border-radius:12px"], html body [style*="border-radius:14px"], html body [style*="border-radius:16px"], html body [style*="border-radius:18px"], html body [style*="border-radius:20px"]{border-radius:var(--rfb-r-card) !important;} html body [style*="border-radius:30px"], html body [style*="border-radius:100px"], html body input, html body select, html body textarea, html body button{border-radius:var(--rfb-r-control) !important;} html body [style*="border-radius:3px"], html body .rf3-audit-form input, html body .rf3-audit-form select, html body .rf3-audit-form textarea{border-radius:var(--rfb-r-control) !important;} html body [style*="border-radius:50%"]{border-radius:50% !important;} /* Per-page