/* ========================================================================== skin-vitalcare.css - Burnham's Vital Care *** ALL Vital Care theming lives in THIS file. *** Porto's theme.css / theme-elements.css are PRECOMPILED VENDOR FILES. Never edit them. Porto exposes its palette as CSS custom properties, so redefining those properties here re-themes every button, link, hover, badge and icon box on the site. There is NO Sass build. Porto v13's SCSS does not compile under modern Dart Sass - see PORTO-NOTES.md. Do not add Node, Sass, or a package.json. MUST be the last stylesheet loaded. Palette sampled from the real logo (burnhams-vital-care-dark.png): navy #002E5D + sky blue #36B4E5. Clinical calm - NOT Burnham Drugs burgundy. ========================================================================== */ /* -------------------------------------------------------------------------- /!\ CONTRAST CONTRACT - read before changing any color below. Measured against white (#FFF): navy #002E5D -> 13.56:1 PASS - AA/AAA for text sky #36B4E5 -> 2.38:1 FAIL - unusable for text at any size Therefore, without exception: - Navy is the TEXT color: body copy, links, headings, small elements. - Sky blue is a FILL ONLY: button backgrounds, bands, icon accents. It is never used for text on a white background. - On a sky fill, text is NAVY (5.69:1 PASS), never white (2.38:1 FAIL). - On a navy fill, text is WHITE (13.56:1 PASS). This audience skews older and unwell. Contrast is a functional requirement here, not polish. -------------------------------------------------------------------------- */ /* General ========================================================================== */ :root { --border-radius: 4px; --border-radius2x: 8px; --default: #4a5a6a; } /* Skin Colors ========================================================================== */ :root { /* --- PRIMARY: navy. The readable workhorse - text, links, headers, and the Refer a Patient CTA. ------------------------------------ */ --primary: #002E5D; --primary-100: #002243; --primary-200: #001B37; --primary-300: #001529; --primary--100: #003B76; --primary--200: #004183; --primary--300: #004890; --primary-rgba-0: rgba(0, 46, 93, 0); --primary-rgba-10: rgba(0, 46, 93, 0.1); --primary-rgba-20: rgba(0, 46, 93, 0.2); --primary-rgba-30: rgba(0, 46, 93, 0.3); --primary-rgba-40: rgba(0, 46, 93, 0.4); --primary-rgba-50: rgba(0, 46, 93, 0.5); --primary-rgba-60: rgba(0, 46, 93, 0.6); --primary-rgba-70: rgba(0, 46, 93, 0.7); --primary-rgba-80: rgba(0, 46, 93, 0.8); --primary-rgba-90: rgba(0, 46, 93, 0.9); /* --- SECONDARY: sky blue. The brand pop. FILL ONLY - never text. ----- */ --secondary: #36B4E5; --secondary-100: #1FACE2; --secondary-200: #1CA4D9; --secondary-300: #1B9BCD; --secondary--100: #4DBCE8; --secondary--200: #58C1E9; --secondary--300: #63C5EB; --secondary-rgba-0: rgba(54, 180, 229, 0); --secondary-rgba-10: rgba(54, 180, 229, 0.1); --secondary-rgba-20: rgba(54, 180, 229, 0.2); --secondary-rgba-30: rgba(54, 180, 229, 0.3); --secondary-rgba-40: rgba(54, 180, 229, 0.4); --secondary-rgba-50: rgba(54, 180, 229, 0.5); --secondary-rgba-60: rgba(54, 180, 229, 0.6); --secondary-rgba-70: rgba(54, 180, 229, 0.7); --secondary-rgba-80: rgba(54, 180, 229, 0.8); --secondary-rgba-90: rgba(54, 180, 229, 0.9); /* --- TERTIARY: deep sky. Hover / active states. --------------------- */ --tertiary: #1B9BCD; --tertiary-100: #188AB7; --tertiary-200: #1782AB; --tertiary-300: #1579A0; --tertiary--100: #20ABE2; --tertiary--200: #2BB0E3; --tertiary--300: #36B4E5; --tertiary-rgba-0: rgba(27, 155, 205, 0); --tertiary-rgba-10: rgba(27, 155, 205, 0.1); --tertiary-rgba-20: rgba(27, 155, 205, 0.2); --tertiary-rgba-30: rgba(27, 155, 205, 0.3); --tertiary-rgba-40: rgba(27, 155, 205, 0.4); --tertiary-rgba-50: rgba(27, 155, 205, 0.5); --tertiary-rgba-60: rgba(27, 155, 205, 0.6); --tertiary-rgba-70: rgba(27, 155, 205, 0.7); --tertiary-rgba-80: rgba(27, 155, 205, 0.8); --tertiary-rgba-90: rgba(27, 155, 205, 0.9); /* --- QUATERNARY: navy. Dark sections and the footer. ----------------- */ --quaternary: #002E5D; --quaternary-100: #002243; --quaternary-200: #001B37; --quaternary-300: #001529; --quaternary--100: #003B76; --quaternary--200: #004183; --quaternary--300: #004890; --quaternary-rgba-0: rgba(0, 46, 93, 0); --quaternary-rgba-10: rgba(0, 46, 93, 0.1); --quaternary-rgba-20: rgba(0, 46, 93, 0.2); --quaternary-rgba-30: rgba(0, 46, 93, 0.3); --quaternary-rgba-40: rgba(0, 46, 93, 0.4); --quaternary-rgba-50: rgba(0, 46, 93, 0.5); --quaternary-rgba-60: rgba(0, 46, 93, 0.6); --quaternary-rgba-70: rgba(0, 46, 93, 0.7); --quaternary-rgba-80: rgba(0, 46, 93, 0.8); --quaternary-rgba-90: rgba(0, 46, 93, 0.9); /* --- DARK: navy-black. Body text. ----------------------------------- */ --dark: #002143; --dark-100: #001529; --dark-200: #000E1D; --dark-300: #000810; --dark--100: #002E5C; --dark--200: #003469; --dark--300: #003B76; --dark-rgba-0: rgba(0, 33, 67, 0); --dark-rgba-10: rgba(0, 33, 67, 0.1); --dark-rgba-20: rgba(0, 33, 67, 0.2); --dark-rgba-30: rgba(0, 33, 67, 0.3); --dark-rgba-40: rgba(0, 33, 67, 0.4); --dark-rgba-50: rgba(0, 33, 67, 0.5); --dark-rgba-60: rgba(0, 33, 67, 0.6); --dark-rgba-70: rgba(0, 33, 67, 0.7); --dark-rgba-80: rgba(0, 33, 67, 0.8); --dark-rgba-90: rgba(0, 33, 67, 0.9); /* --- LIGHT ---------------------------------------------------------- */ --light: #FFF; --light-100: #f2f2f2; --light-200: #ececec; --light-300: #e6e6e6; --light--100: #ffffff; --light--200: #ffffff; --light--300: #ffffff; --light-rgba-0: rgba(255, 255, 255, 0); --light-rgba-10: rgba(255, 255, 255, 0.1); --light-rgba-20: rgba(255, 255, 255, 0.2); --light-rgba-30: rgba(255, 255, 255, 0.3); --light-rgba-40: rgba(255, 255, 255, 0.4); --light-rgba-50: rgba(255, 255, 255, 0.5); --light-rgba-60: rgba(255, 255, 255, 0.6); --light-rgba-70: rgba(255, 255, 255, 0.7); --light-rgba-80: rgba(255, 255, 255, 0.8); --light-rgba-90: rgba(255, 255, 255, 0.9); } /* Skin Colors - Inverse (the text color placed ON TOP of each fill) ========================================================================== */ :root { --primary-inverse: #FFF; /* white on navy -> 13.56:1 PASS */ --secondary-inverse: #002E5D; /* navy on sky blue -> 5.69:1 PASS */ --tertiary-inverse: #002E5D; /* navy on deep sky -> 4.27:1 (large/UI text) */ --quaternary-inverse: #FFF; /* white on navy -> 13.56:1 PASS */ --dark-inverse: #FFF; --light-inverse: #002143; } /* Grey Colors - cooled very slightly toward the navy so they sit calmly alongside the brand blues. ========================================================================== */ :root { --grey: #8a949e; --grey-100: #f4f6f8; --grey-200: #e9edf1; --grey-300: #e3e8ed; --grey-400: #dde3e9; --grey-500: #d7dee5; --grey-600: #c9d2db; --grey-700: #bcc6d1; --grey-800: #a3aeba; --grey-900: #8b95a1; --grey-1000: #717b86; } /* Vital Care additions - tokens Porto does not define ========================================================================== */ :root { --vc-mist: #F0F7FB; /* calm pale-sky section background */ --vc-navy: #002E5D; --vc-sky: #36B4E5; --vc-rule: #dbe6ef; /* hairline dividers */ } /* Base typography - calm, generous, readable ========================================================================== */ /* ========================================================================== TYPE SCALE Porto ships body { font-size: 14px } and its .text-2 … .text-8 helpers are all em-based off it, so every size on the site derives from this one number. Raising it lifts the whole scale proportionally -- far better than pinning dozens of individual classes -- and it steps up again on large monitors, where 14px reads as tiny. This audience skews older; comfortable defaults matter more than density. ========================================================================== */ body { color: var(--dark); font-size: 16px; line-height: 1.75; } @media (min-width: 1400px) { body { font-size: 17px; } } @media (min-width: 1920px) { body { font-size: 18px; } } /* Links are navy, never sky, on light backgrounds. */ a { color: var(--primary); } a:hover, a:focus { color: var(--tertiary-100); } h1, h2, h3, h4, h5, h6 { color: var(--primary); } /* Visible focus ring everywhere - keyboard and low-vision users both depend on it. Porto's default focus styling is too subtle. */ a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--secondary); outline-offset: 2px; } /* Utilities ========================================================================== */ .bg-vc-mist { background-color: var(--vc-mist) !important; } .text-color-vc-navy { color: var(--vc-navy) !important; } /* Readable line length, decoupled from the grid. ========================================================================== Section headings must span the full 12 columns so they line up with the card grid underneath -- a heading row narrowed to col-lg-9 sits visibly inset from the content it introduces, which reads as a mistake. But the container runs to 1140px, and 1320px from xxl up, where a full-width paragraph is 150-odd characters per line. That is past the point where the eye reliably finds the start of the next line, and this audience skews older. So the CONSTRAINT MOVES OFF THE COLUMN AND ONTO THE PARAGRAPH: the row is 12 wide, the prose inside it is capped. ch units track the font, so this holds at every step of the type scale. Headings are NOT capped -- they are short, and a wrapped heading is a deliberate typographic choice, not an accident of measure. */ .vc-measure { max-width: 68ch; } /* Logos ========================================================================== Both files are 1112 x 363 -> aspect ratio 3.063:1. The previous markup declared 210x56 (3.75:1) and 200x53 (3.77:1), which squashed the wordmark horizontally by roughly 20%. Sizing is driven by HEIGHT with width:auto, so the ratio is locked no matter what dimensions the markup declares. aspect-ratio is a second belt: if a logo file is ever swapped for one of a different size, it still cannot distort. Which file goes where: burnhams-vital-care-dark.png = navy "care" -> LIGHT grounds (header) burnhams-vital-care-logo.png = white "care" -> DARK grounds (footer) -------------------------------------------------------------------------- */ .header-logo img { height: 64px; width: auto; max-width: 100%; aspect-ratio: 1112 / 363; } #footer .footer-logo { height: 64px; width: auto; max-width: 100%; aspect-ratio: 1112 / 363; } /* The header logo does NOT shrink -- not on scroll, and not on the way down to md. It holds 64px from the widest desktop through 768, and GROWS to 88px below that (see the restacked header further down). Porto's shrink effect is neutralised rather than tuned; see "Sticky" below. /!\ If you ever do add a sticky rule here: the class is on , NOT on .header-body -- theme.js does $html.addClass('sticky-header-active') and never touches the header element. A rule written against .header-body.sticky-header-active silently does nothing. */ @media (max-width: 991px) { #footer .footer-logo { height: 56px; } } /* Header ========================================================================== */ .header-body { border-top-color: var(--secondary) !important; border-bottom: 1px solid var(--vc-rule) !important; box-shadow: none; } /* Locations and hours ========================================================================== The same block renders in one of two places, never both: .header-top-contact - a navy strip across the very top of the header. Every page with a full header. Locations left, hours hard right. .header-contact-row - the header's right-hand column, beside the logo, on a REDUCED header (nav and CTA both hidden -- the referral page) at md and up. White ground, navy text. Below md that page falls back to the strip like every other, so these rules only ever apply from 768 up. The rules below are the shared shape; the two homes then override colour and alignment. Base state is the phone: centred and wrapping. -------------------------------------------------------------------------- */ .header-contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .3rem 1.75rem; } .header-contact-item { display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.3; white-space: nowrap; } .header-contact-label { font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--grey-1000); } .header-contact-value { font-size: .95rem; font-weight: 700; color: var(--primary); text-decoration: none; display: inline-flex; align-items: center; min-height: 26px; } a.header-contact-value:hover, a.header-contact-value:focus { color: var(--tertiary-100); text-decoration: underline; text-underline-offset: 3px; } /* Sky is a FILL, never text -- an icon is the one place it may carry meaning, and it is decorative here in any case. */ .header-contact-item i { color: var(--secondary); } @media (min-width: 768px) { .header-contact-item { align-items: flex-start; text-align: left; } /* Strip: locations run from the left, hours pushed hard to the right. The auto margin does it without a wrapper element -- and it is scoped to md and up so it cannot fight the centred, wrapped phone layout. */ .header-top-contact .header-contact { justify-content: flex-start; } .header-top-contact .header-contact-item:last-child { margin-left: auto; } /* Beside the logo: the whole block sits at the right of its column. */ .header-contact-row .header-contact { justify-content: flex-end; } } /* The strip ========================================================================== */ .header-top-contact { background-color: var(--quaternary); /* == the footer ground */ border-bottom: 3px solid var(--secondary); } .header-top-contact .header-contact { padding: .4rem 0; } .header-top-contact .header-contact-label { color: rgba(255, 255, 255, .78); /* ~10:1 on the navy */ } .header-top-contact .header-contact-value { color: #FFF; /* 13.56:1 on the navy */ } /* Footer convention: links stay white and the hover reads as a sky underline, never a colour change down to sky-on-navy. */ .header-top-contact a.header-contact-value:hover, .header-top-contact a.header-contact-value:focus { color: #FFF; text-decoration: underline; text-decoration-color: var(--secondary); text-decoration-thickness: 2px; text-underline-offset: 4px; } /* Beside the logo, 768-991 ========================================================================== In the wide container the three items sit across the column happily. At 768-991 the container is 720px and they crowd the logo, so the block turns vertical: the two locations stack, the hours take their own row under them, and the times drop under the days. A two-column grid does the alignment. .header-contact-item goes display:contents so its label and value become grid children directly -- that is what lines every value up in one column instead of leaving a ragged left edge. (Safe on a plain div: display:contents only causes trouble on elements that carry an implicit ARIA role.) Nothing here sets a height. The row is the only one in its column, so it grows to the column height and Porto centres it -- which is the same height the logo centres over in the column beside it. */ @media (min-width: 768px) and (max-width: 991px) { .header-contact-row .header-contact { display: grid; grid-template-columns: auto auto; align-items: baseline; justify-items: start; justify-content: end; gap: .3rem .6rem; } .header-contact-row .header-contact-item { display: contents; } /* nowrap lived on .header-contact-item, whose box display:contents removes. */ .header-contact-row .header-contact-label, .header-contact-row .header-contact-value { white-space: nowrap; } .header-contact-row .header-contact-label { font-size: .7rem; } .header-contact-row .header-contact-value { font-size: .9rem; line-height: 1.35; min-height: 0; /* the tap-target floor would inflate every row */ } /* Times under days. Only the TIME goes block -- the days must stay inline to share a line with the clock icon before them, and the block after them is what forces the break. The comma exists only to join the two on one line, so it goes. */ .header-contact-row .header-hours-sep { display: none; } .header-contact-row .header-hours-time { display: block; margin-left: 1.35em; /* clears the clock icon on the line above */ } } @media (max-width: 575px) { .header-contact-label { font-size: .68rem; } .header-contact-value { font-size: .9rem; } } /* Restacked header (below md) ========================================================================== Below 768px the single header row cannot hold logo + hamburger + CTA and still look deliberate, so the row wraps into two centred lines: the logo on the first, the hamburger and the Refer a Patient button on the second. The navy contact strip sits above both -- on every page at this width, the reduced header included, since its beside-the-logo variant is md-and-up. The logo GROWS here rather than shrinking, and keeps that size on scroll. On a phone it is the only identity cue on screen and this audience needs it legible. At 88px tall it is 270px wide, which still clears the 296px a 320px viewport leaves inside the container -- that width is the ceiling, since a fixed height plus max-width:100% would squash the wordmark rather than scale it. */ @media (max-width: 767px) { #header .header-container > .header-row { flex-wrap: wrap; row-gap: .6rem; } /* The child combinator matters: the CTA lives in a NESTED .header-column that must not be caught by this and pushed onto its own line. */ #header .header-container > .header-row > .header-column { flex: 0 0 100%; } /* !important is required -- these rows carry Bootstrap's .justify-content-end utility, which is itself !important. */ #header .header-container > .header-row > .header-column > .header-row { justify-content: center !important; } #header .header-logo img { height: 88px; } /* Porto's symmetric 1rem block margin is 32px of pure height on an already tall stacked header. Asymmetric instead: little above, where the strip's own padding already separates them, and room below before the controls. */ #header .header-logo { margin: .25rem 0 .9rem; } } /* Sticky ========================================================================== The sticky header is the resting header, pinned. Nothing shrinks, nothing moves, nothing is dropped: the strip stays, the logo keeps its size, and below md it stays large and centred on its own line. Porto works against that from THREE directions, and all three land on .header-container: 1. at init it pins an inline height to whatever the container measured (theme.js ~9143); 2. the moment sticky engages it overwrites that with the stickyHeaderContainerHeight number, plus min-height:0 (~9250); 3. its own stylesheet sets min-height:100px on the resting state (#header.header-effect-shrink .header-container). So the header is built to be a different height before and after the scroll, and matching the two numbers up by hand only holds until the content changes. Forcing content height in BOTH states makes them identical by construction -- which is why this rule is NOT scoped to html.sticky-header-active. It has to beat two inline styles, hence the !important on both. The effect is left as 'shrink' on purpose: the plugin's only other branch sets the container to two thirds of its height AND transforms .main, which is worse. */ #header .header-container { height: auto !important; min-height: 0 !important; } /* Below 992 Porto positions the open menu absolutely inside .header-container and paints its background on a z-index:-1 pseudo-element, which puts that background behind anything later in flow. Giving the panel its own stacking context keeps background and links together and above the page. */ @media (max-width: 991px) { #header .header-nav-main { z-index: 1001; } } /* NAV BREAKPOINT ========================================================================== Porto drops the main nav to a hamburger below 992px. With the raised type scale and the larger logo, eight items no longer fit beside the logo and the referral CTA until roughly 1200px: the nav wraps onto a second row and overlaps the page beneath, and forcing nowrap instead squeezes the logo to zero width. So the hamburger takes over below xl rather than below lg. Porto's own stacked-nav styling only applies under 992px, so the expanded panel is styled here for the 992-1199 band. */ /* ⚠️ Every selector below is prefixed with #header ON PURPOSE. Porto's own rules are "#header .header-nav-main nav { display: flex !important }" and "#header .header-nav-main nav > ul > li > a { white-space: normal }" -- an ID selector. Class-only overrides silently lose to it even with !important. */ #header .header-nav-main nav > ul > li > a { white-space: nowrap; } /* Above the collapse breakpoint the row must stay on one line. The container caps at 1320px no matter how wide the monitor, and the larger logo took space the nav used to have, so the item spacing is condensed rather than pinning the logo -- pinning it made the nav slide underneath instead. */ @media (min-width: 1400px) { #header .header-nav-main nav > ul > li { margin-left: 0; } #header .header-nav-main nav > ul > li > a { padding-left: .6rem; padding-right: .6rem; font-size: 13px; } } @media (max-width: 1399px) { #header .header-container { position: relative; } #header .header-nav-main nav.collapse:not(.show) { display: none !important; } #header .header-btn-collapse-nav { display: inline-flex !important; align-items: center; justify-content: center; } } @media (min-width: 992px) and (max-width: 1399px) { /* Expanded state: a panel under the header rather than an inline row. */ #header .header-nav-main nav.collapse.show { display: block !important; position: absolute; top: 100%; left: 0; right: 0; background: #FFF; border: 1px solid var(--vc-rule); border-top: 0; box-shadow: 0 12px 24px rgba(0, 46, 93, .12); padding: .5rem 1.25rem 1rem; z-index: 1000; } #header .header-nav-main nav.collapse.show > ul { flex-direction: column; align-items: stretch; } #header .header-nav-main nav.collapse.show > ul > li { height: auto; align-self: auto; margin-left: 0; } #header .header-nav-main nav.collapse.show > ul > li > a { display: block; width: 100%; padding: .7rem 0; border-bottom: 1px solid var(--vc-rule); border-radius: 0; box-shadow: none; } } /* Main nav: navy labels, sky underline on hover/active. */ .header-nav-main nav > ul > li > a { color: var(--primary); font-weight: 600; letter-spacing: .02em; } .header-nav-main nav > ul > li > a:hover, .header-nav-main nav > ul > li.active > a { background-color: transparent; color: var(--tertiary-100); box-shadow: inset 0 -3px 0 0 var(--secondary); } .header-btn-collapse-nav { background: var(--primary); color: #FFF; } .header-btn-collapse-nav:hover { background: var(--primary-100); } /* The Refer a Patient CTA - the #1 conversion action on the site. Sky fill, navy label (5.69:1). Never more than one click away, and never allowed to disappear at any breakpoint. ========================================================================== */ .btn-referral { background-color: var(--primary); /* NAVY fill */ border: 2px solid var(--primary); color: #FFF; /* white on navy -> 13.56:1 */ font-weight: 700; letter-spacing: .02em; border-radius: var(--border-radius2x); padding: .8rem 1.5rem; min-height: 48px; /* comfortable tap target */ display: inline-flex; align-items: center; justify-content: center; line-height: 1.15; white-space: nowrap; transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .15s ease, box-shadow .15s ease; } /* The CTA's own column inherits Porto's "#header .header-column { flex-grow: 1; align-items: center }". Those two together are why the button floated well short of the right edge: the column takes all the free space in the row, and then centres the button inside it. Sized to its content instead, so the row's justify-content-end can put it hard right against the container gutter. Below 768 this is harmless -- the restacked rules centre the whole line, and a content-width column centres exactly the same as a full-width one. */ #header .header-cta-column { flex-grow: 0; } /* Hover lightens the navy and rings it in sky, so the accent colour still does work without ever becoming a text background. */ .btn-referral:hover, .btn-referral:focus { background-color: var(--primary--100); /* #003B76 */ border-color: var(--secondary); color: #FFF; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 46, 93, .3); } /* Secondary action: white with a navy edge. Used where two actions sit side by side and only one should dominate. */ .btn-referral-outline { background-color: #FFF; border: 2px solid var(--primary); color: var(--primary); font-weight: 700; border-radius: var(--border-radius2x); padding: .8rem 1.5rem; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; line-height: 1.15; transition: background-color .2s ease, color .2s ease, transform .15s ease, box-shadow .15s ease; } .btn-referral-outline:hover, .btn-referral-outline:focus { background-color: var(--primary); color: #FFF; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 46, 93, .25); } /* Downloadable referral form cards: lift, tint and pick up a sky border so it is obvious they are clickable. */ .referral-form-card { border: 2px solid transparent !important; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease; } .referral-form-card:hover, .referral-form-card:focus { background-color: var(--vc-mist); border-color: var(--secondary) !important; transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0, 46, 93, .2) !important; } .referral-form-card:hover .fa-file-pdf { color: var(--tertiary-100); } /* Inverted CTA for navy / dark grounds (footer, dark bands). */ .btn-referral-inverse { background-color: #FFF; border: 2px solid #FFF; color: var(--vc-navy); font-weight: 700; border-radius: var(--border-radius2x); padding: .7rem 1.35rem; } /* Hover goes to navy + white rather than a sky fill; sky is an accent only. */ .btn-referral-inverse:hover, .btn-referral-inverse:focus { background-color: var(--primary); border-color: var(--secondary); color: #FFF; } /* Click-to-call in the header - the #2 conversion action. */ .header-call { color: var(--primary); font-weight: 700; text-decoration: none; white-space: nowrap; } .header-call:hover, .header-call:focus { color: var(--tertiary-100); } /* Buttons - enforce the contrast contract on Porto's variants ========================================================================== */ .btn-primary { color: #FFF; /* white on navy -> 13.56:1 PASS */ } /* Porto's btn-secondary fills with sky. Sky is an ACCENT here, not a text background, so this is re-pointed at navy rather than left as navy-on-sky. */ .btn-secondary, .btn-secondary:hover, .btn-secondary:focus { background-color: var(--primary); border-color: var(--primary); color: #FFF; } .btn-secondary:hover, .btn-secondary:focus { background-color: var(--primary--100); border-color: var(--secondary); } /* Footer ========================================================================== */ /* White text throughout the footer, on the navy ground (13.56:1). */ #footer { background-color: var(--quaternary); border-top: 4px solid var(--secondary); color: #FFF; margin-top: 0; } #footer p, #footer span, #footer li, #footer address, #footer strong { color: #FFF; } #footer h4, #footer h5 { color: #FFF; font-weight: 700; letter-spacing: .04em; } /* Footer links stay WHITE in both states; the hover reads as a sky underline rather than a colour change, so the text never drops to the low-contrast sky-on-navy combination. :not(.btn) matters -- "#footer a" outranks ".btn-referral" on specificity, so without it the footer CTA would be forced to white text on a sky fill (2.38:1, fails). */ /* ⚠️ The selector shape must MATCH Porto's, which is #footer a:not(.btn):not(.no-footer-css) -> specificity (1,2,1) and sets color: var(--default) -- grey. A shorter "#footer a:not(.btn)" is only (1,1,1) and quietly loses, which is why these links stayed grey. */ #footer a:not(.btn):not(.no-footer-css) { color: #FFF; text-decoration: none; } /* Porto also sets :focus/:active to --grey-500, so those are covered too. */ #footer a:not(.btn):not(.no-footer-css):hover, #footer a:not(.btn):not(.no-footer-css):focus, #footer a:not(.btn):not(.no-footer-css):active { color: #FFF; text-decoration: underline; text-decoration-color: var(--secondary); text-decoration-thickness: 2px; text-underline-offset: 4px; } /* Below sm the two locations stop sharing a row and stack, with nothing between them -- one address block runs straight into the next. A hairline plus real space separates them, the same rgba(255,255,255,.15) rule the Burnham Drugs band uses further down. /!\ It has to hang off the COLUMN, not .footer-location: each location sits in its own .col-sm-6, so the two .footer-location divs are cousins and never adjacent siblings. The "+" rule that used to live here matched nothing. */ @media (max-width: 575px) { #footer .footer-location-col + .footer-location-col { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .15); } } #footer .footer-location-name { color: #FFF; font-weight: 700; margin-bottom: .35rem; } #footer .footer-contact-label { color: #FFF; font-weight: 700; display: inline-block; min-width: 3.1rem; } #footer .footer-phone { color: #FFF; font-weight: 700; } /* Opening hours: a two-column grid so the days and times line up as a block instead of running together on one line. */ #footer .footer-hours { display: grid; grid-template-columns: auto 1fr; gap: .2rem .9rem; margin-top: .4rem; } #footer .footer-hours-day { color: #FFF; font-weight: 700; white-space: nowrap; } #footer .footer-hours-time { color: #FFF; white-space: nowrap; } /* Burnham Drugs band - visually separated so the two brands never read as one. Separate business, separate site; not described as a sister company. */ #footer .footer-affiliate { border-top: 1px solid rgba(255, 255, 255, .15); border-bottom: 1px solid rgba(255, 255, 255, .15); } /* White outline button. Needs explicit styling because the footer link rules are scoped :not(.btn), and Porto's own btn-light would render dark-on-navy. */ #footer .footer-affiliate-btn { color: #FFF; background-color: transparent; border: 2px solid #FFF; border-radius: var(--border-radius2x); font-weight: 700; padding: .6rem 1.2rem; transition: background-color .2s ease, color .2s ease; } #footer .footer-affiliate-btn:hover, #footer .footer-affiliate-btn:focus { background-color: #FFF; color: var(--primary); /* navy on white -> 13.56:1 */ border-color: #FFF; text-decoration: none; } .footer-copyright { background-color: var(--quaternary-200); border-top: 0; } #footer .footer-copyright p, #footer .footer-copyright { color: #FFF; margin: 0; } /* The divider between the utility links. Knocked back so it separates them without competing with them -- it is punctuation, not a third link. */ .footer-utility-sep { opacity: .5; } /* Skip link - first tab stop, hidden until focused ========================================================================== */ .skip-to-content { position: absolute; left: -9999px; top: 0; z-index: 10000; padding: .75rem 1.25rem; background: var(--primary); color: #FFF; font-weight: 700; text-decoration: none; } .skip-to-content:focus { left: 0; color: #FFF; } /* ========================================================================== MEDICAL-STYLE ELEMENT LAYOUT Adapted from Porto's demo-medical: content sits in a horizontal "feature box" -- icon on the left in a filled square, text on the right -- rather than a centred icon stacked above a paragraph. Porto's own .medical-schedules band is deliberately NOT copied: it hard-codes 94px box heights and angled ::after arrows, which break as soon as the text wraps. The icon/info pairing is the part worth taking. ========================================================================== */ .vc-feature { display: flex; align-items: flex-start; gap: 1.1rem; height: 100%; } .vc-feature-icon { flex: 0 0 auto; width: 4rem; height: 4rem; border-radius: var(--border-radius2x); background-color: var(--primary); color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; line-height: 1; transition: background-color .2s ease; } /* Sky as an accent on the icon BLOCK. The glyph itself stays white in both states -- only the wrapper changes colour. */ .vc-feature:hover .vc-feature-icon { background-color: var(--secondary); } .vc-feature-icon, .vc-feature:hover .vc-feature-icon, .vc-feature-icon i { color: #FFF; } .vc-feature-info { flex: 1 1 auto; min-width: 0; } .vc-feature-info h2, .vc-feature-info h3 { margin: 0 0 .5rem; } /* Referral form cards -- icon and name on ONE row ========================================================================== */ .referral-form-card { display: flex; align-items: center; gap: 1rem; width: 100%; padding: 1.1rem 1.25rem; min-height: 76px; background-color: #FFF; border: 2px solid var(--vc-rule); border-radius: var(--border-radius2x); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease; } .referral-form-card:hover, .referral-form-card:focus { background-color: var(--vc-mist); border-color: var(--secondary); transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0, 46, 93, .18); } .referral-form-card .referral-form-icon { flex: 0 0 auto; width: 3rem; height: 3rem; border-radius: var(--border-radius); background-color: var(--primary); color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; } /* Wrapper goes sky on hover; the icon stays white rather than turning blue. */ .referral-form-card:hover .referral-form-icon { background-color: var(--secondary); } .referral-form-card .referral-form-icon, .referral-form-card:hover .referral-form-icon, .referral-form-card .referral-form-icon i, .referral-form-card:hover .referral-form-icon i { color: #FFF; } .referral-form-card .referral-form-name { font-weight: 700; color: var(--primary); line-height: 1.25; /* A flex item defaults to min-width:auto, so a long unbroken label such as "Entyvio (Vedolizumab)" refuses to shrink, widens the card past its column, and drags the whole PAGE wider than the viewport -- which clips every section on a phone, not just this card. */ min-width: 0; overflow-wrap: anywhere; } /* Privacy notice: the shield sits beside two forced lines of text, sized tall enough to span both rather than hanging off the first word. */ .referral-privacy-note { display: flex; align-items: center; gap: 1rem; } .referral-privacy-note > i { flex: 0 0 auto; font-size: 2.4rem; line-height: 1; color: var(--primary); } .referral-privacy-note > p { min-width: 0; line-height: 1.5; } /* Jump navigation -- the chip row under a page's intro ========================================================================== Patient Resources is a long page of documents. This audience skews older and is frequently reading on a phone, where "scroll until you find it" is a poor experience, so the sections are addressable from the top. Chips, not a bulleted list: they read as controls, they wrap cleanly at any width, and each one is a 44px-plus tap target without extra rules. */ .vc-jumpnav { display: flex; flex-wrap: wrap; gap: .6rem; } .vc-jump-chip { display: inline-flex; align-items: center; min-height: 44px; padding: .5rem 1.1rem; background-color: #FFF; border: 2px solid var(--vc-rule); border-radius: 999px; color: var(--primary); font-size: .95rem; font-weight: 600; line-height: 1.2; text-decoration: none; transition: background-color .15s ease, border-color .15s ease, color .15s ease; } /* Sky as the border accent, never as the label colour -- sky on white is 2.38:1. See the contrast contract at the top of this file. */ .vc-jump-chip:hover, .vc-jump-chip:focus { background-color: var(--vc-mist); border-color: var(--secondary); color: var(--primary); } /* The band each chip targets is flush against the one above it, and a browser scrolls an :target to the very top of the viewport -- underneath the sticky header, which is what makes anchor links feel broken. Offset by more than the shrunk header so the section heading lands in clear space. */ /* An anchored section must clear the STICKY header, and this header has no single height to hard-code: ~155px at desktop, but past 300px below 768 where the logo grows to 88px and the row restacks onto two lines. The 7rem that was here was a desktop guess and buried the heading at every width. So the height is measured rather than guessed -- _Layout publishes --vc-header-height from the real element. That is the same reasoning as the Sticky block above: hand-matched header numbers hold only until the header content changes, and then fail silently. The fallback covers no-JS and the first paint before the script runs; it is the desktop measurement, since a too-small value on a phone merely lands where the old rule already did. */ .section[id] { scroll-margin-top: calc(var(--vc-header-height, 10rem) + 1.5rem); } /* The Burnham family timeline ========================================================================== A vertical rule with the year sitting on it. Grid rather than absolute positioning, so a long event description grows its own row instead of overlapping the next one. */ .burnham-timeline { list-style: none; margin: 0; padding: 0; } .burnham-timeline > li { display: grid; grid-template-columns: 5.5rem 1fr; gap: 0 1.5rem; padding: 0 0 2rem 0; position: relative; } /* The connecting line, drawn between the year markers rather than through them. Stops at the last item -- a line running past the final entry suggests a fifth date the page is failing to show. */ .burnham-timeline > li:not(:last-child)::before { content: ""; position: absolute; left: 2.7rem; top: 2.2rem; bottom: 0; width: 2px; background-color: var(--vc-rule); } .burnham-year { display: inline-flex; align-items: center; justify-content: center; width: 5.5rem; height: 2.2rem; border-radius: 999px; background-color: var(--primary); color: #FFF; font-weight: 700; font-size: .95rem; position: relative; z-index: 1; } /* The two dates the owner asked to emphasise: when each Burnham's Vital Care opened. Sky fill with NAVY text -- white on sky is 2.38:1 and fails. See the contrast contract at the top of this file. */ .burnham-highlight .burnham-year { background-color: var(--secondary); color: var(--primary); } .burnham-highlight .burnham-event h3 { color: var(--primary); } .burnham-event { padding-top: .1rem; } @media (max-width: 575px) { /* Below phone width the two columns stop fitting, so the year sits above its event and the connecting rule is dropped -- a 2px line threading through stacked blocks reads as an artefact rather than a timeline. */ .burnham-timeline > li { grid-template-columns: 1fr; gap: .5rem; } .burnham-timeline > li::before { display: none; } } /* About page: statistics and the mission quote ========================================================================== */ /* Large enough to read as a figure rather than as body copy, navy because sky at this size on white is 2.38:1 and unreadable. See the contrast contract. */ .about-stat { font-size: 2.75rem; font-weight: 700; line-height: 1; color: var(--primary); } /* A quotation, marked as one. The sky rule on the left does the work a pair of quote marks would, without the punctuation ending up in a screen reader. */ .about-mission { margin: 0; padding: 1.25rem 0 1.25rem 1.5rem; border-left: 4px solid var(--secondary); } .about-mission footer { color: var(--default); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; } @media (max-width: 575px) { .about-stat { font-size: 2.25rem; } } /* Numbered steps ========================================================================== A step number sits in the same filled square .vc-feature-icon uses for an icon, so a numbered sequence and an icon list line up as one visual family rather than two. Sized to match the glyphs rather than the text around it. */ .vc-step { font-size: 1.5rem; font-weight: 700; line-height: 1; color: #FFF; } @media (max-width: 991px) { .vc-step { font-size: 1.3rem; } } /* Payer lists ========================================================================== Plain lists, no bullets, generous line spacing. Nineteen plan names is a lot to scan, and a referring office reads this looking for ONE name -- so whitespace between rows matters more than density. */ .payer-list { list-style: none; padding: 0; margin: 0; } .payer-list li { padding: .3rem 0; border-bottom: 1px solid var(--vc-rule); } .payer-list li:last-child { border-bottom: 0; } /* "Mobile, AL only" beside a location-scoped plan. Small and knocked back, but never hidden: listing Sunshine Health without it would tell a Moss Point provider we take something we do not. */ .payer-scope { display: inline-block; margin-left: .4rem; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--default); white-space: nowrap; } /* Hero click-to-call row ========================================================================== Both locations' numbers sit directly in the hero, because the second most valuable action on this site is an anxious patient or family member picking up the phone, and routing them via a location page first is one step too many. A single "Call us" button cannot serve two locations without choosing one for the reader. Wraps to stacked rows on a phone, where each becomes a full-width tap target. */ .hero-call-row { display: flex; flex-wrap: wrap; gap: .75rem 2.5rem; } .hero-call { display: flex; flex-direction: column; } .hero-call-label { font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--grey-1000); } @media (max-width: 575px) { .hero-call-row { gap: 1rem; } .hero-call { flex: 0 0 100%; } } /* Opening hours on a location page ========================================================================== Same two-column grid as the footer's, so days and times line up as a block rather than running together -- but on a light ground and at body size, because here it is content a patient is looking for rather than a footer detail they are glancing at. */ .location-hours { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1.25rem; margin-top: .25rem; } .location-hours-day { font-weight: 700; color: var(--primary); } .location-hours-time { color: var(--default); } /* Closed days are stated, never omitted -- somebody scanning for Saturday has to find Saturday. Knocked back so the open days still read first. */ .location-hours-closed { opacity: .7; } /* Resource cards -- a document, its purpose, and where it goes ========================================================================== The sibling of .referral-form-card, and deliberately NOT the same class: a referral form card is one line (icon + name) because a provider already knows what "Entyvio" is. A patient does not know what "DMEPOS Supplier Standards" is, so this variant carries a second line explaining it, and the two-line body is what drives every difference below -- top-aligned icon, taller minimum, two-up columns rather than three. */ .resource-card { display: flex; align-items: flex-start; gap: 1rem; width: 100%; height: 100%; padding: 1.25rem; background-color: #FFF; border: 2px solid var(--vc-rule); border-radius: var(--border-radius2x); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease; } .resource-card:hover, .resource-card:focus { background-color: var(--vc-mist); border-color: var(--secondary); transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0, 46, 93, .18); } /* A card whose destination has not launched yet -- rendered as a
rather than an , so it still shows the therapy and its blurb but goes nowhere. See _TherapyCard.cshtml. ⚠️ THE HOVER RULES ABOVE MATCH A
TOO. :hover is not restricted to links, so without this the card would lift, glow and change colour under the cursor while doing nothing at all -- which reads as broken rather than as inert. The whole point of the variant is that it does not look clickable. */ .resource-card-static, .resource-card-static:hover, .resource-card-static:focus { background-color: #FFF; border-color: var(--vc-rule); transform: none; box-shadow: none; cursor: default; } .resource-card-icon { flex: 0 0 auto; width: 3rem; height: 3rem; border-radius: var(--border-radius); background-color: var(--primary); color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; } /* Wrapper goes sky on hover; the glyph stays white rather than turning blue -- the same rule the referral cards follow. */ .resource-card:hover .resource-card-icon { background-color: var(--secondary); } /* ...but not on a card that goes nowhere. Same reasoning as the block above. */ .resource-card-static:hover .resource-card-icon { background-color: var(--primary); } .resource-card-icon, .resource-card:hover .resource-card-icon, .resource-card-icon i, .resource-card:hover .resource-card-icon i { color: #FFF; } .resource-card-body { flex: 1 1 auto; /* A flex item defaults to min-width:auto, so a long unbroken title such as "Medicare Prescription Drug Coverage and Your Rights" refuses to shrink, widens the card past its column, and drags the whole PAGE wider than the viewport -- clipping every section on a phone, not just this card. */ min-width: 0; } .resource-card-name { display: block; font-weight: 700; color: var(--primary); line-height: 1.3; overflow-wrap: anywhere; } /* The explanatory line. Grey rather than navy so the document's own name stays the thing the eye lands on; --grey-700 against white still clears AA. */ .resource-card-note { display: block; margin-top: .3rem; color: var(--default); font-weight: 400; line-height: 1.5; overflow-wrap: anywhere; } /* The "leaves this site" marker. Sized down and pushed to the far edge: it is a signpost, not a second call to action. Aligned to the icon's optical centre rather than the card top, which is a line of text lower. */ .resource-card-go { flex: 0 0 auto; margin-top: .55rem; color: var(--primary); font-size: .9rem; opacity: .55; transition: opacity .15s ease; } .resource-card:hover .resource-card-go, .resource-card:focus .resource-card-go { opacity: 1; } /* ========================================================================== MOBILE This audience skews older and is frequently on a phone. Porto's default type scale runs small (text-2 is 0.8rem), so the ramp below RAISES sizes as the viewport narrows instead of shrinking them, and gives every control a 48px-plus tap target. ========================================================================== */ @media (max-width: 991px) { /* One number again, rather than pinning each .text-* class: those are em-based, so overriding them individually would flatten the hierarchy the scale is meant to create. */ body { font-size: 16.5px; line-height: 1.7; } h1 { line-height: 1.25; } h2 { line-height: 1.3; } /* Sections breathe less on a small screen; the default bands leave the reader scrolling through empty space. */ .section.py-5 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; } .card-body { padding: 1.5rem !important; } .vc-feature-icon { width: 3.4rem; height: 3.4rem; font-size: 1.4rem; } } @media (max-width: 767px) { /* Full-width actions: easier to hit, and they stop wrapping awkwardly. */ .btn-referral, .btn-referral-outline { width: 100%; padding: .9rem 1.25rem; font-size: 1.05rem; } /* The header CTA stays inline -- it must not swallow the header. */ #header .btn-referral { width: auto; } .referral-form-card { min-height: 72px; padding: 1rem; } .referral-form-card .referral-form-name { font-size: 1.0625rem; } .resource-card { padding: 1rem; gap: .85rem; } .resource-card-name { font-size: 1.0625rem; } /* Deliberately NOT full-width like .btn-referral above. These are jump links, not actions -- stacking five of them full-width would push the first document a screen and a half down the page. */ .vc-jump-chip { padding: .5rem .9rem; font-size: .9rem; } #footer .footer-hours { gap: .2rem .6rem; } } @media (max-width: 575px) { /* Headings only: at the raised base size the biggest display sizes would otherwise overrun a phone. Body copy keeps its full size. */ .text-7 { font-size: 1.75em !important; } .text-6 { font-size: 1.45em !important; } .vc-feature { gap: .9rem; } .vc-feature-icon { width: 3rem; height: 3rem; font-size: 1.25rem; } } /* Print - patients and referring offices do print these pages ========================================================================== */ @media print { #header, #footer, .vc-jumpnav, .btn-referral, .btn-referral-outline { display: none !important; } /* A printed resource list is only useful if the reader can get to the documents from it, and the link text alone does not say where they are. */ .resource-card[href]::after { content: " (" attr(href) ")"; display: block; font-size: .7rem; word-break: break-all; } }