/** * HPT Main Stylesheet * Design system loaded site-wide regardless of theme/builder * --hpt-navy:#0E1318 --hpt-red:#e8241e --hpt-gold:#f5be00 (navy re-pointed v3.7.14; #001e3c retired) */ :root { /* v3.280.0 — THE ENQUIRY FORM WAS BLUE (owner). Two palettes existed: site-styles.php swept the brand to charcoal and redefined the HYPHENATED names (--hpt-navy-2), while this file kept the pre-sweep navy ramp under the UNHYPHENATED names (--hpt-navy2). Nothing else defines those, so the express enquiry modal — .hpt-modal-wrap uses var(--hpt-navy2) — kept painting legacy blue under a charcoal header, two-tone. The names differ by a single hyphen, which is why the sweep missed them. Same values as the charcoal ruling now, so there is one palette however it is spelled. */ --hpt-navy: #0E1318; --hpt-navy2: #0A0E12; --hpt-navy3: #06090C; --hpt-red: #e8241e; --hpt-red2: #c0180e; --hpt-gold: #f5be00; --hpt-white: #ffffff; --hpt-muted: #94a3b4; --hpt-line: rgba(255,255,255,.08); --hpt-text: #ede8e0; --font-display: 'Barlow Condensed', sans-serif; --font-body: 'Barlow', sans-serif; /* ═══════════════════════════════════════════════════════════════════════════ HPT TYPE SYSTEM v1 — "The Hero Standard" added v3.271.45 (P0) Derived from the three flagship event pages the owner named as the standard (boxing-day-test.php / sailgp-perth.php / motogp-adelaide.php, which are byte-identical apart from the accent colour). Line refs are boxing-day-test. WHY THIS BLOCK IS HERE AND NOT IN site-styles.php. site-styles.php is emitted by hpt_site_styles(), which has 33 call sites across only 24 files. SIX files that carry type never call it and have no :root of their own — client-portal.php (29 font-sizes), package-template.php (29), interest-register.php (10), social-feed.php (4), latest-updates.php (3), shortcodes.php (2). A var() that resolves nowhere is invalid-at-computed- value-time, and font-size then INHERITS — so 26 conversions would have silently handed those files to the theme's default. This file is wp_enqueue_style'd unconditionally on wp_enqueue_scripts (hpt-functionality.php:4572) so it reaches every front-end page. TWELVE RUNGS, TWO RAMPS — because there are two typefaces. Barlow Condensed 900 at 22px carries the visual weight of Barlow 400 at 19px, so one ladder across both faces is what produced the inversions the audit found (a 17px eyebrow above 14px prose; an 11px heading above 15.68px list items). The ramps overlap numerically at 19px and 22px. That is correct, not a collision. DO NOT USE THESE IN THE PDF/PRINT PATH. dompdf 3.1.6 supports var() and clamp() but has NO vw unit, and a single unresolvable operand voids the WHOLE declaration rather than degrading (Css/Style.php:1380-1383). The clamp rungs below all carry vw. Print keeps its own pt ladder. DO NOT ADD html{font-size}. There is none in the plugin; 147 legacy rem declarations resolve off the browser's 16px root while the site declares 17px, and moving the root rescales all of them at once on pages nobody intended to touch. Convert call sites instead. ═══════════════════════════════════════════════════════════════════════════ */ /* ---- READING RAMP · Barlow ---------------------------------------- v3.272.0 — THE SMALL RUNGS NOW STEP WITH THE VIEWPORT. Owner, on iPad: "The page looks and feels very small and hard to read straight off the bat." Measured live, the same page rendered 301 elements at 12px on a 375px phone, 310 at 768px and 311 at 1366px — the reading type was IDENTICAL from a phone in the hand to an iPad in landscape at arm's length. A 12px floor that is right at 30cm is not right at 60cm. Three rungs, and they step TOGETHER at the same two breakpoints. Stepping one without the others is what produces a 14px label beside a 13px one inside the same card — the owner's "formatting doesn't match" complaint, manufactured. Stepped px, NOT clamp+vw, deliberately: dompdf 3.1.6 has no vw unit and one unresolvable operand voids the whole declaration, so a vw-free ladder is safe by construction rather than by remembering. Two discrete states are also checkable at two widths; a continuous drift is not, and .hpt-site is overflow-x:clip, so anything that bursts does it silently with no scrollbar. */ --hpt-fs-micro: 12px; /* tracked uppercase micro-label, ≤4 words, no fact */ --hpt-fs-meta: 13px; /* dates, prices-from, card meta — reads, not chrome */ --hpt-fs-label: 14px; /* control labels, inside a 44px hit box */ --hpt-fs-body: 17px; /* THE SENTENCE FLOOR. == .hpt-site{font-size} */ --hpt-fs-body-lg: 19px; --hpt-fs-lede: clamp(19px, calc(17.89px + 0.286vw), 22px); /* ---- CHROME · NEVER STEPS ----------------------------------------- Type inside a box whose size is fixed in px: circular badges, count wells, nowrap cells in an `auto` grid track. This rung is the reason the reading rungs are allowed to move at all — without somewhere to put these, every step-up is a burst risk and the ladder stays frozen at the phone value. */ --hpt-fs-chrome: 12px; /* v3.273.1 — NAV NEVER STEPS. The nav is a fixed-height bar holding a fixed number of items in a nowrap flex row: it has no slack to absorb a type step. v3.272.0 converted .hpt-nav-link's 14px literal onto --hpt-fs-label, which at desktop is 19px — measured live at 1512px the nav content became 2072px, overflowing by 560px, which is why "LEGAL & TRUST" wrapped to three lines and "PLAN YOUR TRIP" was cut off the right edge. Chrome in a rigid box belongs on a rung that does not move. */ --hpt-fs-nav: 14px; --hpt-fs-stat: 36px; /* NEW · hero credential numeral, was a literal 40px */ --hpt-fs-cardhead: 21px; /* NEW · card/panel headings. Consumed at T2+ ONLY, because flagship-arc.php:177 sets a card h4 at a literal 16px above a body already on --hpt-fs-label: raise label without this and the heading renders SMALLER than its own paragraph. */ /* ---- DISPLAY RAMP · Barlow Condensed 900 --------------------------- */ --hpt-fs-d6: 19px; --hpt-fs-d5: clamp(22px, calc(20.51px + 0.381vw), 26px); --hpt-fs-d4: clamp(28px, calc(22.06px + 1.524vw), 44px); --hpt-fs-d3: clamp(30px, calc(21.83px + 2.095vw), 52px); /* canonical section title */ --hpt-fs-d2: clamp(34px, calc(22.86px + 2.857vw), 64px); --hpt-fs-d1: clamp(40px, calc(22.91px + 4.381vw), 86px); /* ---- NON-READABLE · ghost numerals, watermarks. aria-hidden REQUIRED ---- */ --hpt-fs-ornament: clamp(64px, calc(23.89px + 10.286vw), 172px); /* ---- LEADING, BOUND TO THE RUNGS ----------------------------------- */ --hpt-lh-micro: 1.2; --hpt-lh-label: 1.3; --hpt-lh-body: 1.6; --hpt-lh-body-lg: 1.65; --hpt-lh-lede: 1.5; --hpt-lh-display: 1.04; --hpt-lh-hero: 0.94; /* ---- TRACKING · steps DOWN as size steps UP ------------------------ Raising a 9px label at .28em to 12px while keeping .28em makes it ~40% wider in absolute terms and bursts every fixed-padding chip, pill and inline-flex meta row on the site. Always move size and tracking together. */ --hpt-ls-micro: .16em; --hpt-ls-label: .10em; --hpt-ls-body: 0; --hpt-ls-display: -.01em; } /* ═══════════════════════════════════════════════════════════════════════════ FOUR LAYOUT TIERS, THREE TYPE RUNGS. v3.273.0 Owner, on an iPad in portrait, after v3.272.1: "the fonts are tiny and unreadable... clearly these are all different layouts that require different display languages." THE BUG WAS THE GATE, NOT THE VALUES. The desktop rung started at 1025px. iPad LANDSCAPE is 1133 / 1180 / 1366 — all above it — while iPad PORTRAIT is 834 / 1024, both below. So the same device got desktop type in one hand and tablet type in the other, and no amount of retuning the 641-1024 band could ever reach a portrait iPad. The desktop gate moves to 1367: wider than the largest iPad in landscape. T2 AND T3 SHARE A TYPE RUNG DELIBERATELY. Rotating an iPad now changes columns, gutters and panel posture but NEVER reading size. Only --hpt-fs-stat and --hpt-pad-x differ between them. The steps are large on purpose. 1px per rung was the v3.272.0 mistake: it was measurable but not legible. 17 -> 22px body is ~11.97pt at 450mm, which is a well-set printed page held at arm's length. It only sounds large in px habit. Stepped px, no vw — constraint (b). Note the audit established the print path never loads this file at all, so the dompdf hazard is moot here; the rule is kept because it costs nothing and the next person will not re-derive it. ═══════════════════════════════════════════════════════════════════════════ */ /* ═══ T2 · SLATE PORTRAIT · 641-1024 — iPad mini 744, iPad 11" 834, iPad 13" 1024. ~450mm, held. THIS IS THE TIER THE OWNER PHOTOGRAPHED. ═══ */ @media (min-width: 641px) { :root { --hpt-fs-micro: 15px; --hpt-fs-meta: 17px; --hpt-fs-label: 18px; --hpt-fs-body: 22px; --hpt-fs-body-lg: 24px; --hpt-fs-lede: 24px; --hpt-fs-cardhead: 24px; --hpt-ls-micro: .14em; /* tracking steps DOWN as size steps UP: 12x.16=1.92px, 15x.14=2.10px */ } } /* ═══ T3 · SLATE LANDSCAPE · 1025-1366 — iPad 1133 / 1180 / 1366. Type identical to T2 by design. ═══ */ @media (min-width: 1025px) { :root { --hpt-fs-stat: 40px; } } /* ═══ T4 · DESKTOP · >=1367 — wider than any iPad in landscape. ~600mm, mouse. ═══ */ @media (min-width: 1367px) { :root { --hpt-fs-micro: 16px; --hpt-fs-meta: 18px; --hpt-fs-label: 19px; --hpt-fs-body: 24px; --hpt-fs-body-lg: 26px; --hpt-fs-lede: 26px; --hpt-fs-stat: 44px; --hpt-fs-cardhead: 26px; --hpt-ls-micro: .13em; } } /* ── Brand button styles ── */ .hpt-btn-red { font-family: var(--font-body); font-size: var(--hpt-fs-micro) /* was 11px */; font-weight: 700; letter-spacing: var(--hpt-ls-micro); text-transform: uppercase; background: var(--hpt-red); color: var(--hpt-white) !important; border: none; padding: 14px 30px; cursor: pointer; clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%); transition: all .25s; text-decoration: none; display: inline-block; } .hpt-btn-red:hover { background: var(--hpt-red2); transform: translateY(-1px); } .hpt-btn-outline { font-family: var(--font-body); font-size: var(--hpt-fs-micro) /* was 11px */; font-weight: 700; letter-spacing: var(--hpt-ls-micro); text-transform: uppercase; background: transparent; color: rgba(255,255,255,.75) !important; border: 1px solid rgba(255,255,255,.25); padding: 13px 28px; cursor: pointer; transition: all .25s; text-decoration: none; display: inline-block; } .hpt-btn-outline:hover { border-color: rgba(255,255,255,.6); color: var(--hpt-white) !important; } /* ── Enquiry modal ── */ .hpt-modal-overlay { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(0,5,15,.88); backdrop-filter: blur(14px); align-items: center; justify-content: center; } .hpt-modal-overlay.open { display: flex; } .hpt-modal-wrap { background: var(--hpt-navy2); border: 1px solid rgba(255,255,255,.1); border-top: 3px solid var(--hpt-red); width: 100%; max-width: 680px; max-height: 92vh; overflow-y: auto; margin: 20px; position: relative; } .hpt-modal-header { background: var(--hpt-navy); padding: 28px 40px 20px; border-bottom: 1px solid rgba(255,255,255,.07); } .hpt-modal-title { font-family: var(--font-display); font-size: 26px; font-weight: 900; text-transform: uppercase; color: var(--hpt-white); line-height: .95; margin: 0 0 4px; } .hpt-modal-sub { font-size: var(--hpt-fs-meta) /* was 13px */; color: rgba(148,163,180,.8); margin: 0; } .hpt-modal-close { position: absolute; top: 14px; right: 18px; background: none; border: none; color: rgba(255,255,255,.4); font-size: 24px; cursor: pointer; line-height: 1; z-index: 2; } .hpt-modal-body { padding: 28px 40px; } .hpt-modal-body label { display: block; font-size: var(--hpt-fs-micro) /* was 12px */; /* v3.212.0 — was 10px, too small to read */ font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(148,163,180,.9); margin-bottom: 6px; } .hpt-modal-body input, .hpt-modal-body select, .hpt-modal-body textarea { width: 100%; padding: 13px 15px; /* v3.212.0 — a touch roomier */ background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); color: var(--hpt-white); font-family: var(--font-body); font-size: 16px; /* v3.212.0 — was 14px; 16px also stops mobile zoom-on-focus */ outline: none; transition: border-color .2s; border-radius: 0; } .hpt-modal-body select { background: var(--hpt-navy); cursor: pointer; } .hpt-modal-body input:focus, .hpt-modal-body select:focus, .hpt-modal-body textarea:focus { border-color: rgba(232,36,30,.5); } /* ── Mobile responsive ── */ @media (max-width: 768px) { .hpt-modal-wrap { margin: 12px; } .hpt-modal-body { padding: 22px 24px; } .hpt-modal-header { padding: 22px 24px 16px; } } /* ── Utility ── */ .hpt-text-red { color: var(--hpt-red) !important; } .hpt-text-gold { color: var(--hpt-gold) !important; } .hpt-bg-navy { background: var(--hpt-navy) !important; } .hpt-bg-navy3 { background: var(--hpt-navy3) !important; } /* ── Accessibility ── */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ── Print styles ── */ @media print { .hpt-modal-overlay, .hpt-btn-red, .hpt-btn-outline { display: none !important; } }