/* ========================================================================== site.css — sportspodiatristsydney.com.au Load order, one link in : which pulls, in order: foundation.css (imported by components.css) components.css (the 12 zero-JS components) this file (Sydney accent tokens + four small layout helpers) No @font-face, no CDN font, no url() of any kind. Zero external requests. WHY THE TOKENS CHANGE --------------------- This file arrived as the Sydney sub-brand's token sheet and was rotated on 2026-09-10 onto the parent Align Health Collective palette Marc supplied: navy #010845, baby blue #EEF5FA, orange CTA #F8B542. Every colour moved on LIGHTNESS ONLY within its own hue family, which is what carries the measured contrast ratios across unchanged, and the dark band is pinned to #010845. The volt lime and the burnt sienna are gone: the sub-brand now has one accent, the orange, and it means "book". Three of foundation's rules hardcode a hex instead of reading a token, so they are restated below. ========================================================================== */ /* foundation.css and components.css are byte-identical copies of work/site-rebuild/foundation/*.css, copied here because the deploy rsyncs only this site directory to the web root, so a ../../../ import would 404. foundation.css md5 d80ba21a8bcd49fe00568ae630e267cd components.css md5 b34c496ca3d155af5f7b5dc2e5042972 */ @import url("components.css"); /* ---------- 1. Sydney accent tokens ------------------------------------- */ .ahc { /* ink */ --ink: #010845; --ink-soft: #2C3480; --navy: #010845; /* mobile band, mobile primary button */ --blue: #0A1259; /* second palette: hero, offer card, clinic bar, footer */ --ahc2-navy: #010845; /* primary CTA fill, dark card, footer band */ --ahc2-ink: #01062F; /* card headline */ --ahc2-body: #161F6E; /* card body copy */ --ahc2-muted: #4A5192; /* card kicker */ --ahc2-accent: #2A34A8; /* the price number, the tick */ --ahc2-amber: #F8B542; /* CTA icon plate */ --ahc2-star: #F8B542; /* Google stars stay gold */ --ahc2-tang: #A8660A; /* offer ribbon, offer border, tile hover */ /* White, where Brisbane's is navy. This tang is dark enough that the two sites need opposite ink: navy on #A8660A is 2.66:1 and white is 5.99:1. Measured, both ways, before choosing. */ --rib-ink: #fff; --ahc2-hair: #DBE6F0; --ahc2-pale: #EEF5FA; --ahc2-cream: #FEF4E2; /* surfaces */ --orange: #A8660A; /* focus ring, active pill border, bar accent */ --gold: #F8B542; --mist: #EEF5FA; --bar: #F6FAFD; /* the tinted section band */ --line: #DBE6F0; --pill: #EEF5FA; --link: #2A34A8; /* components.css semantic extras */ --ok: #2A34A8; --tick-on-dark: #F8B542; --interactive: #161F6E; /* The desktop layer's dark surfaces. Every one of these is a LITERAL, never an alias of another custom property: an alias is substituted where it is declared, so it would keep foundation's own navy here rather than this site's. Measured on the band #010845: body 9.76:1, volt numeral 9.82:1, white 14.34:1. */ --dark-body: #DDE0EE; /* the .ahc-cond check glyph. foundation's #A8660A measures 3.95:1 on this site's --bar and fails there; the site's own burnt sienna measures 5.52:1 on #F6FAFD, so it carries the glyph instead. Written as a literal, not var(--ahc2-tang), for the alias reason above. */ --check: #A8660A; } /* ---------- 2. the four foundation rules that hardcode a hex ------------- */ /* Each is restated with a token so the page has no stray foundation-navy islands. */ /* foundation.css hardcodes #010845 on the two display headings and #2A34A8 on the eyebrow, neither of which is this site's ink. */ .ahc-h1, .ahc-title { color: #01062F; } .ahc-eyebrow { color: var(--interactive); } /* .ahc-btn--primary, .ahc-cta and .ahc-cta__ico used to be repainted here in this site's navy. Removed 2026-08-11: the primary action is --cta on both sites now, and a private override is exactly what "one consistent colour" was asked to end. Anything below that still names a colour is a SURFACE or a text tint, not an action. */ .ahc-card--tap:hover .ahc-plate { background: var(--interactive); color: #fff; } .ahc-plate--pale { color: #2A34A8; } .ahc-plate--cream { color: var(--ahc2-tang); } .ahc-card:hover { border-color: var(--interactive); } .ahc-card--accent { border-color: var(--interactive); } .ahc-areas a:hover { color: var(--ahc2-navy); } .ahc-duo__btn--call { background: var(--ahc2-navy); } .ahc-duo__btn--call:hover { background: #0A1259; } /* The sticky bar keeps this site's darker band, and nothing else. The volt lime Book button, the lime-edged Call button and the lime focus ring were deleted 2026-08-11: Book is the orange CTA here exactly as it is on Brisbane and in the header above it, so it inherits foundation.css untouched. The volt lime survives on this site everywhere it is a MARK rather than an action: the stat numerals, the section rails, the tick glyphs. */ .ahc-actionbar { background: #000524; border-top-color: rgba(248, 181, 66, .26); } .ahc-abtn--call { background: linear-gradient(180deg, #161F6E 0%, #01062F 55%, #000524 100%); } .ahc-abtn--call:active { background: linear-gradient(180deg, #0A1259 0%, #01062F 55%, #000524 100%); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .45), 0 0 0 #000524, 0 2px 5px rgba(0, 0, 0, .30); } /* the footer and the dark outcome card inherit --ahc2-navy, so only the cool-blue text tints inside them need restating */ .ahc-footer { color: #DDE0EE; } .ahc-footer .ahc-nap { color: #EEF5FA; } .ahc-footer .ahc-hours dt { color: #C3C7DE; } .ahc-footer .ahc-hours dd { color: #EEF5FA; } .ahc-footer__legal a { color: #EEF5FA; } /* .ahc-fine is --ink-soft #2C3480, which measures 1.57:1 on the footer's own navy band: the "Weekend hours are not published here" line was effectively invisible. Repainted to the same tint the hours labels use, 7.97:1. */ .ahc-footer .ahc-fine { color: #C3C7DE; } .ahc-leave__kick { color: #C3C7DE; } .ahc-leave .ahc-check__t { color: #EEF5FA; } .ahc-leave .ahc-check__n { color: #C3C7DE; } .ahc-leave__foot { color: #F8B542; } .ahc-clinicbar__label { color: #DDE0EE; } /* the brand block is one link, not two, so it clears the 44px real-pixel floor (as two lines of text alone it measured 41px at both viewports) */ a.ahc-header__brand { min-height: var(--tap); justify-content: center; } /* the hero proof line carries a credential and a tick, not a rating, so it needs the tick sized. The rating lives once per page, inside the PROOF BLOCK. */ .ahc-hero__proof svg { width: calc(20 * var(--u)); height: auto; color: var(--ok); } /* the proof line is a flex row, so its text has to be one flex item that wraps internally. Without this the whole credential dropped below the tick. */ .ahc-hero__proof { align-items: flex-start; gap: calc(9 * var(--u)); } .ahc-hero__proof > span { flex: 1 1 0; min-width: 0; } /* the library's hero opens with the proof line. This site puts an eyebrow above it, so the pair needs the gap the library never had to define. */ .ahc-hero .ahc-eyebrow + .ahc-hero__proof { margin-top: calc(12 * var(--u)); } /* One clinic, so the top strip is a single address-and-hours line linked to the Maps listing, not a pill scroller. No .ahc-scroller means no fade, which is what was clipping the first pill mid-number at 390px. */ a.syd-barlink { min-height: var(--tap); font-size: calc(15 * var(--u)); color: #EEF5FA; border-radius: var(--r-btn); } /* .ahc-clinicbar__label is an inline-flex row, so a bare text node becomes an anonymous flex item with flex-shrink 1 and wraps at 210px. The text needs its own non-shrinking span to stay on one line. */ a.syd-barlink > svg { flex: none; } a.syd-barlink > span { flex: none; white-space: nowrap; } a.syd-barlink:hover { text-decoration: underline; } /* the rating, above the fold, one line, never wrapping at 390px. It sits inside the swappable proof markers so a compliance edit is still one grep. */ .syd-rating { margin-top: calc(6 * var(--u)); font-size: calc(16 * var(--u)); line-height: calc(22 * var(--u)); font-weight: 500; color: var(--ink-soft); white-space: nowrap; } .syd-rating a { color: var(--interactive); text-decoration: underline; text-underline-offset: 2px; } .syd-rating b { font-weight: 700; color: var(--ahc2-ink); } /* The date stamp that used to close this line is gone (see RATING_LINE in the generator for why). What replaces it has to be visibly tappable, so it is a second link with its own chevron, bolder than the figure beside it. It carries .ahc-taplink too, which pads the hit area to 46px through negative margins, so the affordance costs 0px of layout height. */ .syd-gcheck { margin-left: calc(9 * var(--u)); font-weight: 700; white-space: nowrap; } .syd-gcheck::after { content: ""; display: inline-block; width: .42em; height: .42em; margin-left: .42em; border: 2px solid currentColor; border-width: 2px 2px 0 0; transform: translateY(-1px) rotate(45deg); } /* the AHPRA number is the link, so the register is one tap from the number itself rather than from a sentence further down the page */ .syd-ahpra { color: inherit; text-decoration-color: rgba(18, 86, 74, .5); } .syd-ahpra:hover { color: var(--interactive); } /* "$0 gap with eligible cover" is conditional, so the card says what eligible means, directly under the fee. Fine print by design, and it wraps to two lines at 390px: the eight fold cuts below pay for those pixels. */ .syd-elig { display: block; margin-top: calc(7 * var(--u)); font-size: calc(15 * var(--u)); line-height: calc(20 * var(--u)); font-weight: 500; color: var(--ink-soft); } /* the rating card prints the linked figure under the number */ .ahc-proof__col .ahc-check__n { display: block; } /* LIBRARY BUG. .ahc-tile is a two-column grid whose first column is the 34u icon slot, and .ahc-tile__ico spans both rows. A tile with no icon therefore puts its name in the 34u column and its example line beside it, so the two overlap. Every .ahc-tile--flat in components.html has this shape, so the bug is in the library, not in this site. One column fixes it. */ .ahc-tile--flat { grid-template-columns: minmax(0, 1fr); align-items: start; row-gap: calc(4 * var(--u)); } /* two photos side by side, equal width, unlike .syd-split's 1.15/.85 text split */ .syd-figpair { display: grid; grid-template-columns: 1fr 1fr; gap: calc(20 * var(--u)); margin-top: calc(22 * var(--u)); } /* a long CTA label has to wrap on a 390px phone. foundation sets white-space: nowrap on .ahc-btn, which overflows the viewport at "Book the 30 minute new patient appointment". */ .ahc-btn { white-space: normal; text-align: center; } /* ---------- 3. four Sydney layout helpers ------------------------------- */ /* Everything else on the site is a component. These four exist because the library has no image slot and no section-footer CTA row. */ /* a photo, always WebP, always with width/height in the markup */ .syd-media { overflow: hidden; border: 1.5px solid var(--line); border-radius: var(--r-card); box-shadow: var(--sh-card); background: var(--mist); } .syd-media img { width: 100%; height: auto; } .syd-media figcaption { padding: calc(10 * var(--u)) calc(14 * var(--u)); font-size: calc(15 * var(--u)); line-height: calc(21 * var(--u)); color: var(--ink-soft); background: #fff; border-top: 1px solid var(--ahc2-hair); } /* the hero's right column: the photo, then the same credentials checklist the library's .ahc-hero__aside carries */ .syd-herofig { margin-bottom: calc(16 * var(--u)); } /* every section ends with an action. Button plus its microcopy, one row. */ .syd-cta { display: flex; flex-wrap: wrap; align-items: center; gap: calc(10 * var(--u)) calc(16 * var(--u)); margin-top: calc(24 * var(--u)); } .syd-cta .ahc-fine { max-width: calc(430 * var(--u)); } /* a plain prose block inside a section, and the anchored answer bodies */ .syd-prose { max-width: calc(760 * var(--u)); margin-top: calc(18 * var(--u)); } .syd-prose p { margin-top: calc(12 * var(--u)); font-size: calc(17.5 * var(--u)); line-height: calc(27 * var(--u)); color: var(--ahc2-body); } .syd-prose p:first-child { margin-top: 0; } .syd-prose b { color: var(--ahc2-ink); } .syd-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: calc(34 * var(--u)); align-items: start; margin-top: calc(22 * var(--u)); } .syd-split .syd-prose { margin-top: 0; } /* ---------- 3b. the desktop design layer, Sydney-specific --------------- Added 2026-08-11 with components 13 to 22. Everything here is desktop-first and additive: the only rules that reach 390px are the ones that switch a new grid back to one column, which components.css already does for its own classes. Nothing above the mobile fold moves. */ /* The photographic hero puts the credential line, the rating line and the secondary Book link over a dark scrim. foundation coloured all three for a white band, so each is restated here for the scrim. */ .ahc-hero--photo .ahc-hero__proof svg { color: var(--ahc2-amber); } .ahc-hero--photo .ahc-hero__proof a, .ahc-hero--photo .syd-ahpra { color: var(--dark-ink); } .ahc-hero--photo .ahc-hero__phone .ahc-fine { color: var(--dark-body); } /* the rating becomes a chip on the photograph, because an underlined line of text alone disappears into a photo. Desktop only: at 390px it goes back to the one-row line that the fold budget was measured against. */ .ahc-hero--photo .syd-rating { display: inline-flex; flex-wrap: wrap; align-items: center; gap: calc(4 * var(--u)) calc(14 * var(--u)); margin-top: calc(14 * var(--u)); padding: calc(7 * var(--u)) calc(16 * var(--u)); border: 1.5px solid var(--dark-hair); border-radius: var(--r-pill); background: var(--dark-soft); color: var(--dark-body); } .ahc-hero--photo .syd-rating a, .ahc-hero--photo .syd-rating b { color: var(--dark-ink); } .ahc-hero--photo .syd-gcheck { margin-left: 0; } /* ONE practitioner and ONE clinic, so two of the new auto-fit rows would run a single item across the full 1037px measure. A 1037px-wide 343:441 portrait is 1334px tall and a 1037px 12:7 map is 605px, so each one-item row gets a shape instead of a cap: the portrait keeps its 343px column and the verifiable detail fills the rest of the row, and the map crops wider rather than taller. Neither leaves a dead column. */ .syd-team1 { grid-template-columns: minmax(0, calc(420 * var(--u))) minmax(0, 1fr); align-items: stretch; gap: calc(40 * var(--u)); } /* MEASURED: with align-items:start the portrait card ran 590px and the prose beside it 336px, so 254px of the right column was dead, over the 200px bar. Stretching the row and pushing the action row to the bottom of the text column costs nothing and lands its button on the same baseline as the card's own button. */ .syd-team1 > .syd-prose { display: flex; flex-direction: column; margin-top: 0; max-width: none; } .syd-team1 > .syd-prose > .syd-cta { margin-top: auto; padding-top: calc(20 * var(--u)); } .syd-map1 .ahc-map__img { aspect-ratio: 20 / 7; } /* one clinic means one map card at the full measure, and the address, hours and directions button stacked in a 1037px box leave ~600px of nothing beside them. Three auto-fit tracks inside the card body instead. */ .syd-mapcols { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(250 * var(--u)), 1fr)); gap: calc(14 * var(--u)) calc(30 * var(--u)); align-items: start; } .syd-mapcols > div { display: grid; gap: calc(10 * var(--u)); align-content: start; } .syd-mapcols .ahc-btn { justify-self: start; } /* .ahc-grid--quiet is capped at 600u because it is the library's deliberately quieter escape hatch under the tap grid. On /book/ the same four tiles ARE the section, and 486px inside a 1037px measure measured as 47% of the page, under the brief's 60% floor. Released there only. */ .syd-quiet--full { max-width: none; } /* .ahc-btn--ghost is a 2px --ink outline with --ink text, which is invisible on a scrim. On a photographic hero the secondary action takes the accent plate. */ .ahc-hero--photo .ahc-btn--ghost { border-color: var(--dark-ink); color: var(--dark-ink); } .ahc-hero--photo .ahc-btn--ghost:hover { background: var(--dark-ink); color: var(--ahc2-navy); } /* ---------- 4. the 390 canvas ------------------------------------------- */ @media (max-width: 860px) { /* components.css line 1054 restates .ahc-hero { padding } inside this same breakpoint, at the same specificity and later in the file than .ahc-hero--photo { padding: 0 }, so a photo hero would get the section padding AND the inner's own padding, doubling the 14m gutter. */ .ahc-hero--photo { padding: 0; } /* MEASURED: the photo hero's own inner padding is 18m/14m/24m against the plain hero's 14m/14m/22m, and those 4 extra top pixels came straight off the fold. Every page lost exactly 4.00px of headroom against the round-4 table in BUILD_NOTES.md. Restated to the plain hero's numbers, which puts all six pages back on their previous measurement. */ .ahc-hero--photo .ahc-hero__inner { padding: calc(14 * var(--m)) calc(14 * var(--m)) calc(22 * var(--m)); } /* the trust chip row is a desktop addition. Every chip it carries is already said above the fold on a phone (the credential line, the offer card's included-in-the-price row) and 40m of chips would push the address and hours below the fixed bar, which is the one measurement that must not regress. */ .ahc-hero .ahc-trust { display: none; } /* back to the measured one-row rating line */ .ahc-hero--photo .syd-rating { display: block; margin-top: calc(5 * var(--m)); padding: 0; border: 0; background: none; } .ahc-hero--photo .syd-gcheck { margin-left: calc(7 * var(--m)); } .syd-team1 { grid-template-columns: 1fr; } .syd-team1 > .syd-prose { display: block; } .syd-team1 > .syd-prose > .syd-cta { padding-top: 0; } .syd-map1 .ahc-map__img { aspect-ratio: 12 / 7; } .syd-mapcols { grid-template-columns: 1fr; gap: calc(12 * var(--m)); } .syd-mapcols > div { gap: calc(8 * var(--m)); } .syd-media figcaption { padding: calc(9 * var(--m)) calc(12 * var(--m)); font-size: max(14px, calc(14.5 * var(--m))); line-height: calc(20 * var(--m)); } .syd-herofig { margin-bottom: calc(14 * var(--m)); } .syd-cta { margin-top: calc(18 * var(--m)); gap: calc(9 * var(--m)) calc(12 * var(--m)); } .syd-cta .ahc-fine { max-width: none; } .syd-prose { margin-top: calc(14 * var(--m)); max-width: none; } .syd-prose p { margin-top: calc(10 * var(--m)); font-size: max(15px, calc(16.5 * var(--m))); line-height: calc(25 * var(--m)); } .syd-split { grid-template-columns: 1fr; gap: calc(20 * var(--m)); margin-top: calc(16 * var(--m)); } .syd-figpair { grid-template-columns: 1fr; gap: calc(14 * var(--m)); margin-top: calc(16 * var(--m)); } .ahc-hero__proof svg { width: calc(19 * var(--m)); } .ahc-hero .ahc-eyebrow + .ahc-hero__proof { margin-top: calc(9 * var(--m)); } /* 57 characters on one 390px line. Measured, not guessed: at 13 design px the line is 366px against a 362px column, so it is set at 12.5. */ /* 57 characters, one line, no overflow: measured 350px of text in a 346px column at 12.5 design px, so it is set at 11.8. Fine print by design. */ /* Round 3: the date stamp left and the "Check it on Google" link arrived. The line is now 35 characters of figure plus an 18 character link plus its chevron, and the two together measure 330px of inline content in the 346px column at 11.8 design px: one row, 16px spare. The stamp it replaced was longer, which is why the type size did not have to move. */ /* 11.8px was the smallest text on either site, on the one line in the hero that carries the rating and the link to check it. */ .syd-rating { margin-top: calc(5 * var(--m)); font-size: max(14px, calc(13.5 * var(--m))); line-height: calc(19 * var(--m)); } .syd-gcheck { margin-left: calc(7 * var(--m)); } a.syd-barlink { font-size: max(13.5px, calc(13 * var(--m))); } /* ---- the 390x844 fold budget ------------------------------------------- Measured: the hero's own content is 822px tall against 656px of usable space (781px bar top minus the 125px sticky header). Four cuts, in order of how little they cost, bring the address and the weekday hours above the fold. Nothing unique to this viewport is lost. 1. The hero eyebrow goes. "Redfern, Sydney - Sports podiatry" is already said by the clinic bar above it and by the h1 below it. -30px 2. The hero's secondary Book link goes. The fixed bar's right button is the identical Cliniko link and it is on screen from the first pixel, which is the same argument the brief used to delete the hero's inline Call/Book duo. -110px 3. The positioning line sets at 16 design px, two lines not three. It is still published in full, twice more per page. -30px 4. The h1 sets at 31/34 rather than 34/37. -12px */ .ahc-hero .ahc-eyebrow { display: none; } .ahc-hero .ahc-eyebrow + .ahc-hero__proof { margin-top: 0; } .ahc-hero__phone { display: none; } .ahc-hero__sub { margin-top: calc(8 * var(--m)); } /* round 3 cut 11 */ .ahc-hero .ahc-h1 { font-size: calc(31 * var(--m)); line-height: calc(34 * var(--m)); } /* 5. the offer card loses 24px of vertical padding. The ribbon still clears the kicker; verified in the 390px screenshot. -24px 6. the hero subhead sets at 15/21. -13 to -26px */ .ahc-hero .ahc-offer__body { padding-top: calc(19 * var(--m)); } /* round 3 cut 13 */ .ahc-hero .ahc-offer__inc { margin-top: calc(6 * var(--m)); margin-bottom: calc(7 * var(--m)); padding-top: calc(7 * var(--m)); } /* round 3 cut 17 */ .ahc-hero__sub { font-size: max(15px, calc(15 * var(--m))); line-height: calc(21 * var(--m)); } /* 7. the call card's microcopy really is one rendered line now: 35 characters at 13.5 design px is 236px in a 250px column. It was two. -19px 8. the two gaps below the offer card give back 5px each. -10px */ .ahc-hero .ahc-cta__hint { font-size: max(13px, calc(13.5 * var(--m))); line-height: calc(18 * var(--m)); } .ahc-hero .ahc-cta { margin-top: calc(8 * var(--m)); } .ahc-hero__meta { margin-top: calc(8 * var(--m)); } /* round 3 cut 18 */ /* ---- round 3, the eligibility line has to be paid for ------------------ "Eligible means your cover includes podiatry and you have extras available." is 74 characters and sets on two rows in the offer card's 263px text column, so the hero grew by 37px on every page that has an offer card. /running-podiatry-sydney/ had 1px of headroom, so it had to be paid for exactly. Nine trims, measured one at a time. Eight are leading, padding and margin; the ninth is the only content change, and it is on the one page that needed 18px more than the others. 9. h1 leading 34 to 33, four rendered lines -4px 10. h1 gap above it, 9 to 7 -2px 11. positioning line gap above it, 10 to 8 -2px 12. offer card gap above it, 14 to 11 -3px 13. offer card top padding, 22 to 19; the ribbon still clears it -3px 14. "$0 gap ..." leading 27 to 25, two rendered lines -4px 15. "$99 ..." gap above it, 8 to 6 -2px 16. the eligibility line itself: gap 5 to 4, leading 16 to 15 -3px 17. the included-in-the-price row's three gaps, 9/10/9 to 6/7/7 -8px 18. address and hours gap above them, 11 to 8 -3px Sitewide that is -34px against +37px, so /running-podiatry-sydney/ also drops "We will book you in" from its Call card hint, which the fixed bar's own Book button and the button below it both already promise. That hint is one rendered line on every page now. -18px */ .ahc-hero .syd-elig { margin-top: calc(4 * var(--m)); font-size: max(14px, calc(13.5 * var(--m))); line-height: calc(18 * var(--m)); } .ahc-hero .ahc-h1 { margin-top: calc(7 * var(--m)); line-height: calc(33 * var(--m)); } .ahc-hero .ahc-offer { margin-top: calc(11 * var(--m)); } .ahc-hero .ahc-offer__lead { line-height: calc(25 * var(--m)); } .ahc-hero .ahc-offer__alt { margin-top: calc(6 * var(--m)); } /* On a phone the header pill shows "Call" rather than the number, which is the one place the digits are hidden. They are still on screen twice above the fold (the hero CTA and the offer card's phone row), the fixed bottom bar carries the tap, and the pill keeps the number in its aria-label. Everything else that used to live in this block went with the brand subtext on 2026-08-11; the brand is now a logo image, so the wrapping this comment used to describe cannot happen. The two .ahc-call rules that used to sit here moved into components.css on 2026-08-11: Brisbane needed the identical fix once its brand became a logo lockup, and one copy in the shared layer beats two private ones. */ /* components.css line 779 already collapses .ahc-hero__inner--split to one column at this breakpoint, so nothing is restated for it here. */ } /* The proof block's figure is a LANDSCAPE frame and this site's only portrait is David Wassef's square studio frame, so object-fit: cover at the default 50% 50% clipped the top of his head. Sitting the window higher keeps the whole head and the reception sign behind it. Sydney only: Brisbane's proof figure is a landscape clinic photo that centres correctly. */ .ahc-reviews__fig > img { object-position: 50% 22%; } /* =========================================================================== HERO v2 — built to redesign-v1.png, the mockup Marc approved 2026-08-23. Geometry measured off the image with sharp, not estimated, and recorded in scratchpad/gauntlet-ssp/hero.geom.json. The mockup canvas is 1536 wide and the content column runs x=88..1448, so 1360 centred. Every number below is a mockup pixel expressed in --u, which is why the layout holds at 1280 and at 2400 instead of only at the width it was drawn for. The one deliberate departure from the picture: the offer card and the call panel are links that open the where-it-hurts dialog, because Marc asked for that flow in the same breath as the design. Geometry is unchanged. =========================================================================== */ /* one mockup pixel. The design frame is 1536 wide, centred, and it stops growing past that: at 1920 the spec expects the same 1360 container with bigger side gutters, not a wider one. */ .ahc { --su: calc(min(100vw, 1536px) / 1536); } .syd-band { --syd-bandh: calc(618 * var(--su)); } .syd-band.ahc-hero--photo { min-height: var(--syd-bandh); } .syd-band .ahc-hero__inner { padding-top: calc(48 * var(--su)); padding-bottom: calc(120 * var(--su)); } .syd-band .ahc-hero__inner, .syd-band .ahc-hold { width: calc(1360 * var(--su)); max-width: none; margin-inline: auto; padding-inline: 0; } .syd-band .syd-hero__eyebrow { margin: 0; font-size: calc(15 * var(--su)); line-height: calc(18 * var(--su)); letter-spacing: .1em; } .syd-band .syd-hero__h1 { max-width: calc(600 * var(--su)); margin-top: calc(21 * var(--su)); font-size: calc(54 * var(--su)); line-height: calc(61 * var(--su)); letter-spacing: -.02em; } .syd-band .syd-hero__sub { max-width: calc(470 * var(--su)); margin-top: calc(22 * var(--su)); font-size: calc(19 * var(--su)); line-height: calc(26 * var(--su)); } /* three circled trust items, mockup y=505..571 */ .syd-hero__trust { display: flex; gap: calc(46 * var(--su)); margin: calc(21 * var(--su)) 0 0; padding: 0; list-style: none; } .syd-tr { display: flex; align-items: center; gap: calc(12 * var(--su)); } .syd-tr__i { display: grid; place-items: center; flex: none; width: calc(44 * var(--su)); height: calc(44 * var(--su)); border: 1.5px solid rgba(255,255,255,.42); border-radius: 50%; color: #fff; } .syd-tr__i svg { width: calc(21 * var(--su)); height: auto; } .syd-tr__t { font-size: calc(16 * var(--su)); line-height: calc(21 * var(--su)); font-weight: 500; color: var(--dark-ink, #fff); } /* ---- the strip that straddles the band edge ---------------------------- */ .syd-strip { position: relative; z-index: 2; background: var(--syd-light, #F6FAFD); } .syd-strip__hold { display: flex; align-items: stretch; gap: calc(2 * var(--su)); width: calc(1360 * var(--su)); margin: 0 auto; /* the strip's top sits 109 design px above the band's bottom edge */ transform: translateY(calc(-108 * var(--su))); margin-bottom: calc(-108 * var(--su)); } .syd-offer, .syd-callpanel { display: flex; color: inherit; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } .syd-offer { flex: 1 1 calc(994 * var(--su)); align-items: center; gap: calc(40 * var(--su)); min-height: calc(210 * var(--su)); padding: calc(18 * var(--su)) calc(34 * var(--su)); background: #fff; border-radius: calc(14 * var(--su)) 0 0 calc(14 * var(--su)); box-shadow: 0 calc(10 * var(--su)) calc(30 * var(--su)) rgba(2,16,42,.16); transition: box-shadow var(--t-fast), filter var(--t-fast); } .syd-offer:hover, .syd-offer:focus-visible { box-shadow: 0 calc(16 * var(--su)) calc(38 * var(--su)) rgba(2,16,42,.24); } .syd-offer__main { display: flex; align-items: center; gap: calc(24 * var(--su)); flex: 0 0 auto; } .syd-offer__plate { display: grid; place-items: center; flex: none; width: calc(112 * var(--su)); height: calc(112 * var(--su)); border-radius: 50%; background: #EEF5FA; color: var(--ahc2-navy, #010845); } .syd-offer__plate svg { width: calc(52 * var(--su)); height: auto; } .syd-offer__txt { display: block; } .syd-offer__pill { display: inline-block; padding: calc(4 * var(--su)) calc(13 * var(--su)); border-radius: var(--r-pill); background: var(--syd-lime, #E9A22B); font-size: calc(13 * var(--su)); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #010845; } .syd-offer__kick { display: block; margin-top: calc(9 * var(--su)); font-size: calc(19 * var(--su)); font-weight: 500; color: var(--ahc2-muted); } .syd-offer__lead { display: block; font-size: calc(46 * var(--su)); line-height: calc(52 * var(--su)); font-weight: 700; letter-spacing: -.02em; color: var(--ahc2-ink); } .syd-offer__lead sup { font-size: .5em; top: -.6em; } .syd-offer__cover { display: block; font-size: calc(19 * var(--su)); line-height: calc(25 * var(--su)); font-weight: 500; color: var(--ahc2-body); } .syd-offer__alt { display: block; margin-top: calc(7 * var(--su)); font-size: calc(17 * var(--su)); color: var(--ahc2-body); } .syd-offer__alt b { font-weight: 700; color: var(--ahc2-accent); } .syd-offer__list { display: flex; flex-direction: column; gap: calc(13 * var(--su)); padding-left: calc(40 * var(--su)); border-left: 1px solid var(--ahc2-hair); } .syd-offer__li { display: flex; align-items: center; gap: calc(11 * var(--su)); font-size: calc(17 * var(--su)); line-height: calc(23 * var(--su)); color: var(--ahc2-body); } .syd-offer__li svg { width: calc(19 * var(--su)); flex: none; color: var(--interactive); } .syd-offer__go { display: inline-flex; align-items: center; gap: calc(9 * var(--su)); margin-top: calc(6 * var(--su)); font-size: calc(17 * var(--su)); font-weight: 700; color: var(--ahc2-ink); text-decoration: underline; text-underline-offset: calc(4 * var(--su)); } .syd-offer__go svg { width: calc(15 * var(--su)); } .syd-callpanel { flex: 0 0 calc(366 * var(--su)); align-items: center; gap: calc(18 * var(--su)); padding: calc(18 * var(--su)) calc(28 * var(--su)); background: var(--syd-panel, #010845); border-radius: 0 calc(14 * var(--su)) calc(14 * var(--su)) 0; transition: filter var(--t-fast); } .syd-callpanel:hover, .syd-callpanel:focus-visible { filter: brightness(1.12); } .syd-callpanel__i { display: grid; place-items: center; flex: none; width: calc(74 * var(--su)); height: calc(74 * var(--su)); border-radius: 50%; background: var(--syd-lime, #E9A22B); color: #010845; } .syd-callpanel__i svg { width: calc(34 * var(--su)); height: auto; } .syd-callpanel__t { display: block; flex: 1 1 auto; } .syd-callpanel__k { display: block; font-size: calc(18 * var(--su)); color: #C9D8E8; } .syd-callpanel__n { display: block; font-size: calc(31 * var(--su)); line-height: calc(38 * var(--su)); font-weight: 700; letter-spacing: -.01em; color: #fff; } .syd-callpanel__s { display: block; margin-top: calc(5 * var(--su)); font-size: calc(17 * var(--su)); line-height: calc(23 * var(--su)); color: #C9D8E8; } .syd-callpanel__go { flex: none; color: #fff; } .syd-callpanel__go svg { width: calc(17 * var(--su)); } /* ---- four services, mockup y=918..994 ---------------------------------- */ .syd-servicewrap { padding: calc(48 * var(--su)) 0 calc(52 * var(--su)); background: var(--syd-light, #F6FAFD); } .syd-services { display: grid; grid-template-columns: repeat(4, 1fr); width: calc(1360 * var(--su)); margin: 0 auto; padding: 0; list-style: none; } .syd-sv { display: flex; align-items: flex-start; gap: calc(16 * var(--su)); padding: 0 calc(28 * var(--su)); border-left: 1px solid #DBE6F0; } .syd-sv:first-child { padding-left: 0; border-left: 0; } .syd-sv__i { flex: none; color: var(--ahc2-navy, #010845); } .syd-sv__i svg { width: calc(46 * var(--su)); height: auto; } .syd-sv__t { font-size: calc(16 * var(--su)); line-height: calc(22 * var(--su)); color: var(--ahc2-body); } .syd-sv__t b { display: block; margin-bottom: calc(5 * var(--su)); font-size: calc(19 * var(--su)); font-weight: 700; color: var(--ahc2-ink); } @media (max-width: 860px) { .syd-hero__trust { flex-wrap: wrap; gap: calc(18 * var(--m)) calc(24 * var(--m)); } .syd-tr__i { width: calc(38 * var(--m)); height: calc(38 * var(--m)); } .syd-tr__i svg { width: calc(18 * var(--m)); } .syd-tr__t { font-size: max(13px, calc(14 * var(--m))); line-height: calc(18 * var(--m)); } .syd-strip__hold { flex-direction: column; gap: 0; transform: none; margin-bottom: 0; padding-block: calc(18 * var(--m)); } .syd-offer { flex-direction: column; align-items: flex-start; gap: calc(18 * var(--m)); min-height: 0; padding: calc(20 * var(--m)); border-radius: calc(14 * var(--m)) calc(14 * var(--m)) 0 0; } .syd-offer__plate { width: calc(66 * var(--m)); height: calc(66 * var(--m)); } .syd-offer__plate svg { width: calc(32 * var(--m)); } .syd-offer__lead { font-size: calc(38 * var(--m)); line-height: calc(44 * var(--m)); } .syd-offer__kick, .syd-offer__cover { font-size: max(14px, calc(16 * var(--m))); } .syd-offer__list { padding-left: 0; padding-top: calc(16 * var(--m)); border-left: 0; border-top: 1px solid var(--ahc2-hair); } .syd-offer__li, .syd-offer__go { font-size: max(14px, calc(15 * var(--m))); } .syd-callpanel { flex: 1 1 auto; border-radius: 0 0 calc(14 * var(--m)) calc(14 * var(--m)); padding: calc(18 * var(--m)) calc(20 * var(--m)); } .syd-callpanel__i { width: calc(52 * var(--m)); height: calc(52 * var(--m)); } .syd-callpanel__i svg { width: calc(24 * var(--m)); } .syd-callpanel__n { font-size: calc(26 * var(--m)); line-height: calc(32 * var(--m)); } .syd-services { grid-template-columns: repeat(2, 1fr); gap: calc(20 * var(--m)); padding-block: calc(24 * var(--m)); } .syd-sv { padding: 0; border-left: 0; } .syd-sv__i svg { width: calc(34 * var(--m)); } .syd-sv__t { font-size: max(13px, calc(14 * var(--m))); line-height: calc(19 * var(--m)); } } /* palette sampled off redesign-v1.png with sharp (see hero.geom.json) */ .ahc { --syd-light: #F6FAFD; --syd-lime: #E9A22B; --syd-panel: #010845; } /* the mockup's white nav band is 107 design px tall against the build's 80 */ .syd-nav { min-height: calc(107 * var(--su)); } /* the mockup's utility bar is 51 design px; the build's was 62 */ .syd-util { padding-block: 0; } .syd-util .ahc-clinicbar__inner { min-height: calc(51 * var(--su)); } /* the mockup keeps the number on one line; the built face wrapped it at 1536 */ .syd-callpanel__n { white-space: nowrap; font-size: calc(29 * var(--su)); } /* nowrap raised the panel's min-content width, which squeezed the offer card by 16px because a flex item will not shrink past min-content by default */ .syd-callpanel { min-width: 0; } .syd-callpanel__t { min-width: 0; } .syd-callpanel__n { font-size: calc(27 * var(--su)); } /* ---- offer card, round 5 (2026-08-23) ---------------------------------- Marc pasted Align's "First appointment free" card and asked for that copy plus a card that is obviously clickable. The lead line is now the offer itself rather than the price mechanic, and the right column ends in a real button instead of a text link. Geometry stays inside the measured 994x210, re-verified by geomcheck at five widths. */ .syd-offer__lead { font-size: calc(38 * var(--su)); line-height: calc(45 * var(--su)); } .syd-offer__cover { margin-top: calc(4 * var(--su)); max-width: calc(430 * var(--su)); } .syd-offer__cover b { font-weight: 700; color: var(--interactive); } .syd-offer__list { gap: calc(10 * var(--su)); justify-content: center; } .syd-offer__btn { display: inline-flex; align-items: center; justify-content: center; gap: calc(10 * var(--su)); align-self: flex-start; margin-top: calc(4 * var(--su)); min-height: calc(52 * var(--su)); padding: 0 calc(24 * var(--su)); border-radius: var(--r-pill); background: var(--cta); color: var(--cta-ink); font-size: calc(18 * var(--su)); font-weight: 700; box-shadow: 0 calc(4 * var(--su)) calc(12 * var(--su)) rgba(247,135,33,.38); transition: filter var(--t-fast), transform var(--t-fast); } .syd-offer__btn svg { width: calc(16 * var(--su)); } .syd-offer:hover .syd-offer__btn, .syd-offer:focus-visible .syd-offer__btn { filter: brightness(1.07); transform: translateX(calc(2 * var(--su))); } .syd-offer__go { margin-top: 0; font-size: calc(15 * var(--su)); font-weight: 500; color: var(--ahc2-muted); } /* the whole card lifts, so the pointer is not the only clue that it is a control */ .syd-offer:hover, .syd-offer:focus-visible { transform: translateY(calc(-3 * var(--su))); } .syd-offer { transition: box-shadow var(--t-fast), transform var(--t-fast); } .syd-offer:focus-visible { outline: 3px solid var(--cta); outline-offset: 3px; } @media (max-width: 860px) { .syd-offer__lead { font-size: calc(30 * var(--m)); line-height: calc(36 * var(--m)); } .syd-offer__btn { width: 100%; min-height: max(var(--tap), calc(52 * var(--m))); font-size: max(15px, calc(16 * var(--m))); } } /* the CTA button added 24px of height; taken back out of the card padding and the button's own box so the strip holds the measured 994x210 / 366x212 */ .syd-offer { padding-block: calc(8 * var(--su)); } .syd-callpanel { padding-block: calc(8 * var(--su)); } .syd-offer__btn { min-height: calc(48 * var(--su)); } .syd-offer__list { gap: calc(8 * var(--su)); } /* short label, so it can carry the uppercase treatment without wrapping */ .syd-offer__btn { text-transform: uppercase; letter-spacing: .04em; font-size: calc(16 * var(--su)); } /* ---- occlusion fix (2026-08-23) ---------------------------------------- The strip was pulled up with transform + margin-bottom:-108. The transform moved it visually but the negative margin dragged the service row up WITH it, so the icons and the four headings rendered underneath the cards. Every element still measured in tolerance, because a box check compares an element to its spec and never to its neighbour. The block now moves as a whole with margin-top, so it still occupies its own height and nothing slides under it. The strip's own background has to fade in at the band edge, otherwise the light fill would paint over the last 108px of the dark hero. */ .syd-strip { margin-top: calc(-108 * var(--su)); background: linear-gradient(to bottom, transparent 0 calc(108 * var(--su)), var(--syd-light, #F6FAFD) calc(108 * var(--su))); } .syd-strip__hold { transform: none; margin-bottom: 0; } .syd-servicewrap { padding-top: calc(39 * var(--su)); } @media (max-width: 860px) { .syd-strip { margin-top: 0; background: var(--syd-light, #F6FAFD); } .syd-servicewrap { padding-top: calc(6 * var(--m)); } } /* ---- components the content pack needs that the Sydney template had no use for ---- */ .ep-prose { max-width: 74ch; } .ep-prose .ahc-prose__p { margin: 0 0 1em; font-size: 17px; line-height: 1.65; color: var(--ink-soft, #4A5192); } .ep-prose .ahc-prose__p b { color: var(--ink, #010845); } .ep-list { margin: 0 0 1.2em; padding-left: 1.15em; } .ep-list li { margin: 0 0 .6em; font-size: 17px; line-height: 1.65; color: var(--ink-soft, #4A5192); } .ep-list li b { color: var(--ink, #010845); } .ep-tablewrap { overflow-x: auto; margin: 0 0 1.4em; } .ep-table { border-collapse: collapse; width: 100%; min-width: 30rem; font-size: 16px; } .ep-table th, .ep-table td { padding: .7em .9em; text-align: left; border-bottom: 1px solid var(--line, #DBE6F0); } .ep-table thead th { background: var(--bar, #F6FAFD); color: var(--ink, #010845); font-weight: 600; } .ep-table th[scope="row"] { font-weight: 600; color: var(--ink, #010845); } .ep-ctarow { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 0 0 1em; } .ep-ctarow--hero { margin-top: 22px; } .ep-crumb { font-size: 14px; margin: 0 0 10px; color: #C9D8E8; } .ep-crumb a { color: #FFFFFF; } .ep-crumb__sep { opacity: .5; padding: 0 .3em; } .ahc-hero--photo .ep-crumb a { color: #FFFFFF; } .ep-bloglist { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); } .ep-blogcard { display: block; padding: 20px; border: 1px solid var(--line, #DBE6F0); border-radius: 14px; background: #fff; text-decoration: none; } .ep-blogcard b { display: block; color: var(--ink, #010845); font-size: 18px; margin-bottom: .4em; } .ep-blogcard span { color: var(--ink-soft, #4A5192); font-size: 15px; line-height: 1.55; } .ep-praccols { display: grid; gap: 26px; grid-template-columns: minmax(0, 1fr); } .ep-praccols:has(.ep-prac) { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); align-items: start; } .ep-prac { margin: 0; border: 1px solid var(--line, #DBE6F0); border-radius: 16px; overflow: hidden; background: #fff; } .ep-prac img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center top; } .ep-prac figcaption { display: block; padding: 16px 18px; } .ep-prac figcaption b { display: block; font-size: 19px; color: var(--ink, #010845); } .ep-prac figcaption span { display: block; font-size: 14px; line-height: 1.5; color: var(--ink-soft, #4A5192); margin-top: .3em; } @media (max-width: 860px) { .ep-praccols:has(.ep-prac) { grid-template-columns: minmax(0, 1fr); } .ep-prac { max-width: 22rem; } .ep-prose .ahc-prose__p, .ep-list li { font-size: 16px; } .ep-ctarow .ahc-btn { width: 100%; justify-content: center; } }