/* Travel More RV — site styles */ /* ============ Fonts ============ */ /* Barlow Condensed is self-hosted, not fetched from Google Fonts. It sets the above-the-fold heading on every page (.tmrv-hero-copy h1, .tmrv-page-hero h1, .tmrv-youtube-intro h2), and as a render-blocking third-party request it arrived well after first paint -- measured at ~500ms for the stylesheet alone. Headings painted in the Impact fallback and then swapped. That swap is visible because the fallbacks are not the same size. Measured in Chrome at 700 weight, against Barlow Condensed = 100%: Impact 110.5% <- what actually paints first Arial Narrow 121.2% So a heading appears ~10% too wide and much heavier, then shrinks when the real face lands. Measured on /services before this change: the H1's rendered text went 315.6px -> 286.2px, a 9.3% jump, on every cold load. font-display is "optional", and that is the part that fixes it. "swap" has a ZERO block period by specification: the browser always paints the fallback first and swaps whenever the face turns up. Self-hosting and preloading alone only moved that swap earlier -- measured 356ms -> 104ms -- and a 104ms flash is still a flash. "optional" gives a ~100ms block period and then commits for the lifetime of that page load: either the face is ready and is used from the very first paint, or it is not and the fallback is kept. Nothing swaps mid-render either way. Preloading is what makes the first branch the normal one; a cold load that loses the race renders that one page view in Impact and every later view uses the cached face. Latin subset only; covers the em dashes, curly quotes and bullets the copy uses. 700 = interior hero H1 (h1's default bold). 800 = homepage hero H1, which asks for 900 and gets 800 as the heaviest face loaded -- longstanding, and noted in tmrv_head(). */ @font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:optional;src:url(../fonts/barlow-condensed-700.woff2) format("woff2");} @font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:800;font-display:optional;src:url(../fonts/barlow-condensed-800.woff2) format("woff2");} /* ============ Tokens ============ */:root{--tmrv-navy:#062958;--tmrv-deep:#021b3b;--tmrv-orange:#f26522;--tmrv-orange-ink:#c5470c;--tmrv-gold:#f7a91e;--tmrv-light:#f5f8fc;--tmrv-dark:#111d33;--tmrv-muted:#586579;--tmrv-line:#dbe4ef;--tmrv-white:#fff;--tmrv-form-col:820px;} /* --tmrv-form-col is the width of a form column: .tmrv-contact-card and, on the request page, the status card stacked above it. Those two have to stay equal or the stack looks misaligned, which is the whole reason it is a token. Note the other 820px values in this file are text measure on paragraphs -- same number, unrelated purpose, deliberately not folded in here. */ /* ============ Base ============ */*{box-sizing:border-box;} html{scroll-behavior:smooth;} body.tmrv-home{margin:0;font-family:Inter,Arial,sans-serif;color:var(--tmrv-dark);background:#fff;} body.tmrv-home a{text-decoration:none;color:inherit;} .tmrv-container{width:min(1190px,92vw);margin:auto;} .tmrv-btn-orange{background:var(--tmrv-orange-ink);color:#fff;} .tmrv-btn-navy{background:#062653;color:#fff;} .tmrv-btn-youtube{background:#e62117;color:#fff;} .tmrv-btn:hover{filter:brightness(.94);color:#fff;} /* Buttons are elements, so `body.tmrv-home a{color:inherit}` at (0,1,2) outranks a bare `.tmrv-btn-orange` at (0,1,0) and the label inherited the surrounding text colour instead of white. The header CTA only looked correct because the header sets color:#fff; the status-card CTA rendered dark navy. The giveaway was that every button turned white on hover, because `.tmrv-btn:hover` is (0,2,0) and does win. body always carries .tmrv-plain, which puts these at (0,2,0). Supersedes the per-section patches that were added for .tmrv-about and .tmrv-final-cta. */ .tmrv-plain .tmrv-btn-orange, .tmrv-plain .tmrv-btn-navy, .tmrv-plain .tmrv-btn-youtube{color:#fff;} .tmrv-plain .tmrv-btn-orange:visited, .tmrv-plain .tmrv-btn-navy:visited, .tmrv-plain .tmrv-btn-youtube:visited{color:#fff;} .tmrv-section{padding:42px 0;} .tmrv-center{text-align:center;} /* Visually hidden but announced by screen readers. */ .tmrv-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;} .tmrv-section h2{font-size:clamp(30px,3vw,42px);line-height:1.02;text-transform:uppercase;color:#061f48;margin:0 0 14px;font-weight:900;} .tmrv-kicker{color:var(--tmrv-orange-ink);text-transform:uppercase;font-weight:900;font-size:14px;margin:0 0 8px;} .tmrv-checklist{list-style:none;padding:0;margin:0;} .tmrv-checklist li{margin:13px 0;font-weight:800;} .tmrv-checklist li:before{content:"✓";color:var(--tmrv-orange-ink);font-weight:900;margin-right:9px;} .tmrv-btn{display:inline-flex;align-items:center;justify-content:center;border-radius:5px;padding:14px 22px;font-weight:900;text-transform:uppercase;font-size:14px;letter-spacing:.015em;line-height:1;gap:0;white-space:nowrap;} body.tmrv-interior{margin:0;font-family:Inter,Arial,sans-serif;color:var(--tmrv-dark);background:#fff;} body.tmrv-interior a{text-decoration:none;color:inherit;} .tmrv-script{font-family:Inter,Arial,sans-serif;color:var(--tmrv-orange-ink);font-size:15px;line-height:1.2 !important;font-weight:900;letter-spacing:.04em;text-transform:none;margin:0 0 10px;} /*