/* ========================================================================== Hope Harbour: reset, typography, layout primitives ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { /* overflow-x: clip rather than hidden. `hidden` would make a scroll container, which breaks position: sticky on the header. `clip` crops the off-canvas drawer and the bleeding hero ornament without that side effect. */ overflow-x: hidden; /* fallback for browsers without `clip` */ overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1.5rem); -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } body { margin: 0; background: var(--c-bg); color: var(--c-text); font-family: var(--hh-font-body); font-size: var(--t-body); line-height: var(--lh-body); font-weight: 400; overflow-x: hidden; overflow-x: clip; font-variant-numeric: proportional-nums; } /* Stop iOS auto-zoom on focus without disabling pinch-zoom */ @media (max-width: 640px) { input, select, textarea { font-size: 16px; } } h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--s-3); font-family: var(--hh-font-display); color: var(--c-heading); line-height: var(--lh-heading); font-weight: 500; letter-spacing: -0.005em; text-wrap: balance; } h1 { font-size: var(--t-display-1); font-weight: 400; line-height: var(--lh-display); letter-spacing: -0.018em; } h2 { font-size: var(--t-display-2); font-weight: 400; letter-spacing: -0.014em; } h3 { font-size: var(--t-display-3); font-weight: 500; letter-spacing: -0.008em; } h4 { font-size: var(--t-h4); font-weight: 600; } h5 { font-size: var(--t-h5); font-weight: 600; } h6 { font-size: var(--t-body); font-weight: 600; } p { margin: 0 0 1.15em; max-width: var(--measure); } p:last-child { margin-bottom: 0; } strong, b { font-weight: 600; color: var(--c-heading); } em { font-style: italic; } small { font-size: var(--t-small); } a { color: var(--c-action-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: color-mix(in srgb, var(--c-action-text) 40%, transparent); transition: color var(--dur) var(--ease-soft), text-decoration-color var(--dur) var(--ease-soft); } a:hover { color: var(--hh-orange-hover); text-decoration-color: currentColor; } /* Focus: visible, generous, never removed. */ :focus-visible { outline: 3px solid var(--c-focus); outline-offset: 3px; border-radius: 2px; } .band-navy :focus-visible, footer :focus-visible { outline-color: var(--hh-gold); } /* Only suppress the ring for pointer users who already got a visual response */ :focus:not(:focus-visible) { outline: none; } ul, ol { margin: 0 0 1.15em; padding-left: 1.35em; max-width: var(--measure); } li { margin-bottom: 0.45em; } li:last-child { margin-bottom: 0; } img, picture, svg, video { display: block; max-width: 100%; height: auto; } hr { border: 0; border-top: 1px solid var(--c-rule); margin: var(--s-6) 0; } blockquote { margin: 0; } figure { margin: 0; } figcaption { margin-top: var(--s-3); font-size: var(--t-small); color: var(--c-text-mute); line-height: 1.5; max-width: 46ch; } address { font-style: normal; } table { border-collapse: collapse; width: 100%; } ::selection { background: var(--hh-gold); color: #16233F; } /* ========================================================================== Skip link ========================================================================== */ .skip-link { position: fixed; top: 0; left: 50%; transform: translate(-50%, -120%); z-index: var(--z-toast); background: var(--c-chip); color: var(--c-on-chip); padding: 14px 26px; font-size: var(--t-small); font-weight: 600; text-decoration: none; border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--shadow-3); transition: transform var(--dur) var(--ease-out); } .skip-link:focus { transform: translate(-50%, 0); color: var(--c-on-chip); outline: 3px solid var(--hh-gold); outline-offset: 2px; } /* ========================================================================== Layout primitives ========================================================================== */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .wrap--wide { max-width: var(--wrap-wide); } .wrap--text { max-width: calc(var(--wrap-text) + var(--gutter) * 2); } .section { padding-block: var(--section-y); /* Positioned so absolutely placed decoration (the botanical ornament) is contained by its section rather than escaping to the document, which otherwise pushes the page wider than the viewport. */ position: relative; } .section--tight { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); } .section--flush-top { padding-top: 0; } /* Opt-in clipping for sections that carry the bleeding botanical ornament. Not applied to .section globally, because overflow: clip on an ancestor would break the sticky sidebars inside .with-aside. */ .section--clip { overflow: clip; } .section--flush-bottom { padding-bottom: 0; } .band-paper { background: var(--hh-paper); } .band-dim { background: var(--hh-cream-dim); } .band-sky { background: var(--hh-sky-wash); } .band-gold { background: var(--hh-gold-wash); } .band-navy { background: var(--c-band); color: var(--c-on-band-soft); } .band-navy h1, .band-navy h2, .band-navy h3, .band-navy h4, .band-navy h5, .band-navy h6 { color: var(--c-on-band); } .band-navy .kicker { color: var(--c-on-band-mute); } .band-navy .lede { color: var(--c-on-band-soft); } .band-navy a:not(.btn) { color: var(--hh-gold); } .band-navy a:not(.btn):hover { color: #F7C36F; } .band-navy hr { border-color: var(--c-band-rule); } .band-navy-deep { background: var(--c-band-deep); color: var(--c-on-band-soft); } /* Ruled edges: the primary structural device of this design */ /* An email address or URL is a single unbreakable token, so at the larger text sizes one can be wider than a phone's whole text column and take its container off-screen with it: info@hopeharbour.com.au measured a 312px floor at 360px/150%. Links break mid-token rather than overflow. Body prose is left alone: `anywhere` on ordinary text produces ugly mid-word breaks. */ a { overflow-wrap: anywhere; } .edge-top { border-top: 1px solid var(--c-rule); } .edge-bottom { border-bottom: 1px solid var(--c-rule); } .band-navy.edge-top, .band-navy.edge-bottom { border-color: var(--c-band-rule); } /* Grid Every track is minmax(0, Nfr) rather than Nfr, and .split declares an explicit single column instead of leaving an implicit auto track. A bare `1fr` track, and an implicit `auto` one, take their minimum from the content's min-content size. Anything inside that cannot shrink then sets a floor for the whole column and the grid grows wider than its container: since html carries overflow-x: clip, that content is cut off the side of the screen rather than scrolled to. A table is the usual culprit, because it will not go below the min-content of its cells. Measured on a service page at 390px with the Accessibility text size at 150%: the funding table's 335px floor plus its panel's 2x36px padding forced a 408px block through a 330px column, taking the panel, both headings and the list beside it off-screen. minmax(0, ...) lets the column shrink to whatever is available and hands the problem to the element that actually cannot fit, which is what .table-scroll in components.css is for. */ .grid { display: grid; gap: var(--s-6); } .grid--2 { grid-template-columns: minmax(0, 1fr); } .grid--3 { grid-template-columns: minmax(0, 1fr); } .grid--4 { grid-template-columns: minmax(0, 1fr); } @media (min-width: 620px) { .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 900px) { .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* Editorial split: text column + media column, deliberately asymmetric */ .split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); align-items: center; } @media (min-width: 900px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(3rem, 1rem + 5vw, 6rem); } .split--text-wide { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } .split--media-wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } .split--top { align-items: start; } .split--flip > *:first-child { order: 2; } } /* Two-column: sticky sidebar + flowing content */ .with-aside { display: grid; gap: var(--s-6); } @media (min-width: 1000px) { .with-aside { grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(3rem, 1rem + 4vw, 5rem); align-items: start; } .with-aside > aside { position: sticky; top: calc(var(--header-h) + var(--s-5)); } .with-aside--left > aside { order: -1; } } .stack > * + * { margin-top: var(--s-3); } .stack-4 > * + * { margin-top: var(--s-4); } .stack-6 > * + * { margin-top: var(--s-6); } .cluster { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; } .cluster--tight { gap: var(--s-2); } .cluster--between { justify-content: space-between; } /* ========================================================================== Type helpers ========================================================================== */ .kicker { display: block; font-family: var(--hh-font-body); font-size: var(--t-kicker); font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--c-text-mute); margin-bottom: var(--s-4); line-height: 1.4; } .kicker--rule { display: flex; align-items: center; gap: var(--s-3); } .kicker--rule::after { content: ""; flex: 1; height: 1px; background: var(--c-rule); max-width: 120px; } .lede { font-size: var(--t-lede); line-height: 1.58; color: var(--c-text-soft); max-width: var(--measure-tight); font-weight: 400; } .display { font-family: var(--hh-font-display); line-height: var(--lh-display); } .display-1 { font-size: var(--t-display-1); font-weight: 400; letter-spacing: -0.018em; } .display-2 { font-size: var(--t-display-2); font-weight: 400; letter-spacing: -0.014em; } .display-3 { font-size: var(--t-display-3); font-weight: 500; letter-spacing: -0.008em; } .numeral { font-family: var(--hh-font-display); font-size: clamp(2.5rem, 1.6rem + 3vw, 3.75rem); font-weight: 300; line-height: 1; color: var(--hh-gold-text); font-variant-numeric: tabular-nums; display: block; } .text-mute { color: var(--c-text-mute); } .text-soft { color: var(--c-text-soft); } .text-small { font-size: var(--t-small); line-height: 1.6; } .text-center { text-align: center; } .mx-auto { margin-inline: auto; } .measure { max-width: var(--measure); } .measure-tight { max-width: var(--measure-tight); } .text-center .lede, .text-center p { margin-inline: auto; } .tnum { font-variant-numeric: tabular-nums; } /* Section heading block */ .section-head { max-width: 44ch; margin-bottom: var(--s-7); } .section-head--center { max-width: 52ch; margin-inline: auto; text-align: center; } .section-head--center .kicker--rule { justify-content: center; } .section-head--center .kicker--rule::after { display: none; } .section-head--wide { max-width: 56ch; } .section-head > *:last-child { margin-bottom: 0; } /* Screen-reader only */ .visually-hidden { position: absolute !important; 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; } /* Print */ @media print { .site-header, .site-footer, .a11y-launcher, .a11y-panel, .skip-link, .to-top, .cta-band { display: none !important; } body { background: #fff; color: #000; font-size: 11pt; } .reveal { opacity: 1 !important; transform: none !important; } a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; } a[href^="#"]::after, a[href^="tel"]::after { content: ""; } .section { padding-block: 1.5rem; } }