/* ========================================================================= og / pages / home Page-scoped composition for the Home page. Loaded via _OgLayout's "styles" section, NOT from og-design-system.css - page CSS never enters the shared bundle. Layout and spacing here are carried over from the previous implementation so the page reads as the same website; the legacy sources are noted against each block. TYPOGRAPHY IS NOT. The type values were originally reproduced from the 2014 theme (30px/800 headings, 15px uppercase card labels, a 40px band title) and sat off the design system's scale, which left the Home page using different heading sizes and weights from all 26 other pages. They now come from the type scale and the weight/line-height/tracking tokens. The distinctive treatments - the uppercase card label, the large statement band - are retained; only the arbitrary values behind them are gone. ========================================================================= */ /* ------------------------------------------------------------------------- About / service highlights Legacy: #about .service-item — img float:left, 46x46, margin-right 15px; h4 17px / weight 500 / letter-spacing 0.25px .section-heading h2 30px / weight 800 / letter-spacing 1px #about a.main-button-icon margin-top 60px ------------------------------------------------------------------------- */ /* Grid children need an explicit min-width:0, otherwise long unbreakable content can force the column wider than its track and introduce horizontal overflow. */ .og-page-home .og-home-about__main { min-width: 0; } .og-page-home .og-home-about__title .og-section-title__heading { /* Was 1.875rem / bold / letter-spacing 1px, reproducing the 2014 theme's "h2 30px / weight 800 / letter-spacing 1px". That weight was already an approximation - the type scale has no 800 - which is what marks this as migration fidelity rather than a brand rule. Now on the scale: the 3xl step is the system's h1 size and is what the

on every other page already uses, so the site's main headings finally match. Weight and line height come from the base heading rule; the arbitrary 1px tracking is dropped. */ font-size: var(--og-font-size-3xl); font-weight: var(--og-font-weight-semibold); } .og-page-home .og-home-highlights { --og-grid-gap: var(--og-space-6); margin-top: var(--og-space-6); } /* 46x46 icon, matching the legacy .service-item img. */ .og-page-home .og-home-highlights .og-feature__image { width: 46px; height: 46px; } .og-page-home .og-home-highlights .og-feature__title { /* Was 17px / weight 500. Now the lg step - the size .og-feature__title itself declares - and semibold, the system's heading weight. 500 is not a heading weight anywhere else in this system. The explicit font-size is REQUIRED and must not be removed. These titles are

elements, and base/og-typography.css styles heading sizes as `.og-root h2`, which scores (0,1,1) and outranks the single class `.og-feature__title` at (0,1,0). Deleting this line does not fall back to the component's 18px - it falls through to the generic h2 size of 28px, which is larger than the section heading above it. (Same trap as the hero title; see the note in components/og-hero.css.) */ font-size: var(--og-font-size-lg); font-weight: var(--og-font-weight-semibold); line-height: var(--og-line-height-snug); } /* The aside is a standfirst, not a sidebar widget. Aligning its optical top with the highlight grid keeps the two columns visually related. */ .og-page-home .og-home-about__aside { padding-top: var(--og-space-2); } .og-page-home .og-home-about__aside .og-text-lead { margin: 0; padding-left: var(--og-space-5); border-left: 3px solid var(--og-color-primary-subtle); } /* ------------------------------------------------------------------------- Service areas Legacy: #features .features-item — icon float:left, 60px wide, .features-content margin-left 75px; h4 15px / weight 700 / uppercase / letter-spacing 0.25px ------------------------------------------------------------------------- */ .og-page-home .og-home-features { --og-grid-gap: var(--og-space-5); } .og-page-home .og-home-features__item { height: 100%; transition: border-color var(--og-duration-base) var(--og-easing-standard), box-shadow var(--og-duration-base) var(--og-easing-standard); } .og-page-home .og-home-features__item:hover { border-color: var(--og-color-primary); box-shadow: var(--og-shadow-md); } .og-page-home .og-home-features .og-feature__image { width: 60px; height: 60px; } /* Card CTA alignment. .og-feature__link already carries margin-top:auto, but it had nothing to push against: .og-feature is a flex item of .og-card__body and was sizing to its own content (128px) inside a 176px card, so "Read More" sat directly under the title. With three titles wrapping to two lines and "IT Services" to one, the link in the fourth card floated 23px above the other three - visible straight across the row. The feature now fills the card body, and the text column stretches with it, so every "Read More" lands on the same baseline whatever the title does. align-self is used rather than align-items:stretch on the row so the 60px icon keeps its top alignment instead of being centred in a taller box. */ .og-page-home .og-home-features .og-feature--horizontal { flex: 1 1 auto; } .og-page-home .og-home-features .og-feature__body { align-self: stretch; } /* Around 1024px the four-column grid leaves a 230px card, and "Read More" broke across two lines with the arrow stranded beside it, which reads as a rendering fault. A two-word call to action should never wrap. */ .og-page-home .og-home-features .og-feature__link { white-space: nowrap; } .og-page-home .og-home-features .og-feature__title { /* These four are the headings of the service cards - "Diagnostic Services", "Healthcare Services", "Laboratory Services", "IT Services" - and they are how a visitor gets to those pages from the home page. They are ordinary navigation labels, not eyebrows or category tags, so they are no longer forced into capitals. The uppercase treatment is retained where it IS a tag device: .og-badge and .og-section-title__eyebrow. The source text already reads "Diagnostic Services" / "IT Services", so removing the transform is all that is needed - no content was edited, and the IT initialism keeps its capitals because it is capitalised at source. letter-spacing-wide went with it: wide tracking exists to keep all-caps legible and works against mixed-case text. size-sm -> size-md: at 14px these read as small labels, which was right for a tracked, all-caps device and is too quiet for a mixed-case card heading. One token step up restores the hierarchy against the card's "Read More" link without touching the type scale. */ font-size: var(--og-font-size-md); font-weight: var(--og-font-weight-semibold); line-height: var(--og-line-height-snug); } /* ------------------------------------------------------------------------- Partner With Us band Legacy: #subscribe — background-image partner.webp, min-height 400px, padding 80px 0, and a green-to-blue scrim: linear-gradient(107deg, rgba(34,163,89,0.65) 23%, rgba(51,124,187,0.63) 100%) .section-heading h3 40px / weight 700 / #fff .subscribe-content p 28px / weight 600 / #fff .subscribe-content flex, space-between, gap 30px The gradient below is copied verbatim - these are existing brand colours. ------------------------------------------------------------------------- */ .og-page-home .og-cta--image { --og-cta-overlay: linear-gradient(107deg, rgba(34, 163, 89, 0.65) 23%, rgba(51, 124, 187, 0.63) 100%); /* Measured before changing anything: at 1440px the band was 400px tall around 108px of content. 160px of that was padding and a further 132px was slack forced by min-height - 73% of the band was empty, and the CTA sat far below the fold of the section. Both numbers come down, neither to zero: min-height 400px -> 16rem (256px) keeps the photograph a band rather than a strip, and still exceeds the natural height so the proportion is deliberate. padding space-10 -> space-9 80px -> 64px, still generous, and an existing step on the spacing scale. Result: 256px around 108px of content - compact, not cramped. */ min-height: 16rem; display: flex; align-items: center; padding-block: var(--og-space-9); } .og-page-home .og-cta__inner { width: 100%; gap: var(--og-space-6); /* 30px-ish, as before */ } .og-page-home .og-cta__title { /* 2.5rem (40px) sat between the 3xl and 4xl steps. Snapped up to 4xl rather than down, so the band keeps the presence it was given, and to semibold to match every other heading. */ font-size: var(--og-font-size-4xl); font-weight: var(--og-font-weight-semibold); } .og-page-home .og-cta__text { /* Tokenised only: 1.75rem is exactly the 2xl step and 1.4 is exactly --og-line-height-snug, so this renders identically. */ font-size: var(--og-font-size-2xl); font-weight: var(--og-font-weight-semibold); line-height: var(--og-line-height-snug); } /* ------------------------------------------------------------------------- Responsive Breakpoints match responsive/og-responsive.css: 991 / 767 / 479. ------------------------------------------------------------------------- */ @media (max-width: 991px) { /* The aside reads as an introduction once it sits above the grid, so the accent rule moves to the top edge. */ .og-page-home .og-home-about__aside { padding-top: 0; order: -1; } .og-page-home .og-home-about__aside .og-text-lead { padding: var(--og-space-4) 0 0; border-left: 0; border-top: 3px solid var(--og-color-primary-subtle); } .og-page-home .og-home-about__title .og-section-title__heading { font-size: var(--og-font-size-2xl); } .og-page-home .og-cta__title { font-size: var(--og-font-size-3xl); } .og-page-home .og-cta__text { font-size: var(--og-font-size-xl); } } @media (max-width: 767px) { /* Legacy dropped .subscribe-content to display:block at this width; the flex column below is the equivalent, with the CTA full width. */ .og-page-home .og-cta--image { min-height: 0; padding-block: var(--og-space-8); } .og-page-home .og-cta__actions, .og-page-home .og-cta__actions .og-btn { width: 100%; } .og-page-home .og-home-highlights { --og-grid-gap: var(--og-space-5); } } @media (max-width: 479px) { .og-page-home .og-home-about__title .og-section-title__heading { font-size: var(--og-font-size-xl); } .og-page-home .og-cta__title { font-size: var(--og-font-size-2xl); } .og-page-home .og-cta__text { font-size: var(--og-font-size-lg); } /* Stack the icon above the text on the narrowest screens so long service titles are not squeezed into a narrow column beside a 60px icon. */ .og-page-home .og-home-features .og-feature--horizontal, .og-page-home .og-home-highlights .og-feature--horizontal { flex-direction: column; } } /* Landscape phones need no hero override any more. The banner's height is a fixed length at every breakpoint and never references the viewport, so a short screen cannot squeeze the copy or push the following section off the fold - which is exactly what the previous 100vh hero did. */