/* ==========================================================================
HEALZA — Blue & Ivory experiment (homepage + shared header + shared footer)
--------------------------------------------------------------------------
The editorial stylesheet is driven by design tokens (--hzh-*). This file only
re-points those tokens inside three containers, plus a few rules for parts the
brief asks to recolour specifically. Shop and Product Details are covered by the
block at the end of this file, and Cart, Checkout, the account
pages, the sign-in pages and the remaining public pages (About, Consultations,
Contact, Privacy, error pages) share its tokens. The admin area is untouched.
TO REVERT: remove the to this file in Views/Shared/_Layout.cshtml.
========================================================================== */
.hz-header,
.hz-footer,
body.hz-home-page .hz-main {
--hzb-blue: #007dbd; /* Brand Blue */
--hzb-deep: #07527a; /* Deep Blue */
--hzb-deeper: #053f5e; /* gradient end for the deep sections */
--hzb-text: #172f3b; /* Dark Text */
--hzb-leaf: #6eaf31; /* Leaf Green (accent on light grounds) */
--hzh-pine: var(--hzb-deep);
--hzh-pine-deep: var(--hzb-deeper);
--hzh-ink: var(--hzb-text);
--hzh-ink-soft: #4b6170;
--hzh-line: rgba(23, 47, 59, .14);
--hzh-cyan: var(--hzb-blue);
--hzh-cyan-deep: var(--hzb-deep);
--hzh-mist: #e8f0f4; /* pale blue-ivory: product shelf, consultation card */
--hzh-on-pine: #f7f5ef;
--hzh-on-pine-soft: rgba(247, 245, 239, .76);
}
/* ---- Header: ivory ground, deep-blue navigation, brand-blue interaction ---- */
.hz-header {
--hzh-ink: var(--hzb-deep);
}
@media (min-width: 981px) {
.hz-commerce-nav .hz-nav-links > a.is-active {
color: var(--hzb-blue);
}
.hz-commerce-nav .hz-nav-links > a:hover {
color: var(--hzb-deep);
}
.hz-commerce-nav .hz-nav-links > a::after {
background: var(--hzb-blue);
}
}
.hz-commerce-nav .hz-lang-switch:hover,
.hz-commerce-nav .hz-login-button:hover,
.hz-commerce-nav .hz-login-button:focus,
.hz-commerce-nav .hz-login-button[aria-expanded="true"],
.hz-commerce-nav .hz-cart-link:hover,
.hz-commerce-nav .hz-lang-switch:focus-visible,
.hz-commerce-nav .hz-login-button:focus-visible,
.hz-commerce-nav .hz-cart-link:focus-visible {
background: rgba(0, 125, 189, .08);
}
.hz-commerce-nav .hz-cart-link:hover,
.hz-commerce-nav .hz-cart-link[aria-current="page"] {
border-color: var(--hzb-blue);
}
.hz-commerce-nav .hz-cart-link span {
background: var(--hzb-blue);
}
/* ---- Homepage: headings on light grounds are deep blue ---------------------- */
.hz-home-page .hzx-hero h1,
.hz-home-page .hzx-range-head h2,
.hz-home-page .hzh-head h2,
.hz-home-page .hzh-consult h2,
.hz-home-page .hzh-about h2,
.hz-home-page .hzh-goal h3,
.hz-home-page .hzh-product h3 a,
.hz-shop-page .hzh-product h3 a {
color: var(--hzb-deep);
}
.hz-home-page .hzh-product h3 a:hover,
.hz-shop-page .hzh-product h3 a:hover {
color: var(--hzb-blue);
}
/* Small accents: kickers and rules in leaf green. */
.hz-home-page .hzx-hero-kicker,
.hz-home-page .hzh-consult-kicker {
color: #4b8420; /* Leaf Green, one step darker so small text stays readable on ivory */
}
/* Hover shadows were tinted pine; on this page they follow the blue. */
.hz-home-page .hz-main .hzh-btn:hover:not(:disabled) {
box-shadow: 0 12px 22px -14px rgba(7, 82, 122, .7);
}
.hz-home-page .hzh-product:hover,
.hz-home-page .hzh-product:focus-within,
.hz-shop-page .hzh-product:hover,
.hz-shop-page .hzh-product:focus-within {
border-color: rgba(7, 82, 122, .32);
box-shadow: 0 10px 24px -18px rgba(7, 82, 122, .4);
}
/* Buttons: brand blue for every primary action on the page (add to cart included); the shop
uses the same product card, so it follows. */
.hz-home-page .hz-main .hzh-btn-ink:not(:disabled),
.hz-shop-page .hz-main .hzh-btn-ink:not(:disabled),
.hz-home-page .hz-main .hzh-btn-ink.is-submitting:disabled,
.hz-shop-page .hz-main .hzh-btn-ink.is-submitting:disabled {
background: var(--hzb-blue);
}
.hz-home-page .hz-main .hzh-btn-ink:hover:not(:disabled),
.hz-home-page .hz-main .hzh-btn-ink:focus-visible:not(:disabled),
.hz-shop-page .hz-main .hzh-btn-ink:hover:not(:disabled),
.hz-shop-page .hz-main .hzh-btn-ink:focus-visible:not(:disabled) {
background: var(--hzb-deep);
}
/* Hero secondary action: an outlined blue button instead of an underlined link. */
.hz-home-page .hzx-hero-actions .hzh-link {
min-height: 56px;
padding: 0 26px;
border: 1.5px solid var(--hzb-blue);
border-radius: 999px;
color: var(--hzb-deep);
}
.hz-home-page .hzx-hero-actions .hzh-link:hover,
.hz-home-page .hzx-hero-actions .hzh-link:focus-visible {
background: rgba(0, 125, 189, .08);
color: var(--hzb-deep);
}
/* Text links on light grounds. */
.hz-home-page .hz-main .hzh-link:not(.hzh-link-light) {
color: var(--hzb-deep);
}
.hz-home-page .hz-main .hzh-link:not(.hzh-link-light):hover {
color: var(--hzb-blue);
}
/* Photograph hero (when configured): the wash and heading follow the theme. */
.hz-home-page .hzx-hero.is-image h1 {
color: var(--hzb-deep);
}
/* ---- Footer: a light, pale-blue ground so the logo shows in its own colours
(Logo_Wns-flat.svg, the same file as the header). Text in Dark Text, links answer in Brand Blue. */
.hz-footer,
.hz-footer.is-after-pine {
--hzh-on-pine: var(--hzb-text);
--hzh-on-pine-soft: #4b6170;
--hzh-leaf: var(--hzb-blue);
border-top: 1px solid var(--hzh-line);
background: #eaf1f5;
color: var(--hzb-text);
}
.hz-footer .hzf-group h2 {
color: var(--hzb-deep);
font-weight: 700;
}
.hz-footer .hzf-group a:hover {
color: var(--hzb-blue);
}
.hz-footer .hzf-group a i {
color: var(--hzb-deep);
}
.hz-footer .hzf-bottom,
.hz-footer .hzf-social a {
border-color: var(--hzh-line);
}
.hz-footer .hzf-social a:hover,
.hz-footer .hzf-social a:focus-visible {
border-color: var(--hzb-blue);
background: rgba(0, 125, 189, .08);
color: var(--hzb-deep);
}
/* ==========================================================================
Shop + Product Details — the same Blue & Ivory tokens as the homepage.
Set on the body so the add-to-cart confirmation and the mobile purchase bar
(both outside ) follow too. The header keeps its own block above.
========================================================================== */
body.hz-shop-page,
body.hz-product-details-page,
body.hz-cart-page,
body.hz-checkout-page,
body.hz-account-page,
body.hz-entry-page,
body.hz-public-page {
--hzb-blue: #007dbd;
--hzb-deep: #07527a;
--hzb-deeper: #053f5e;
--hzb-text: #172f3b;
--hzh-pine: var(--hzb-deep);
--hzh-pine-deep: var(--hzb-deeper);
--hzh-ink: var(--hzb-text);
--hzh-ink-soft: #4b6170;
--hzh-line: rgba(23, 47, 59, .14);
--hzh-cyan: var(--hzb-blue);
--hzh-cyan-deep: var(--hzb-deep);
--hzh-mist: #e8f0f4;
--hzh-on-pine: #f7f5ef;
--hzh-on-pine-soft: rgba(247, 245, 239, .76);
}
/* Headings on ivory: deep blue, as on the homepage. */
.hz-shop-page .hzs-intro-head h1,
.hz-shop-page .hzs-empty h2,
.hz-product-details-page .hzp-info h1,
.hz-product-details-page .hzp-story-grid > h2 {
color: var(--hzb-deep);
}
.hz-shop-page .hz-main .hzh-link:not(.hzh-link-light),
.hz-product-details-page .hz-main .hzh-link:not(.hzh-link-light) {
color: var(--hzb-deep);
}
.hz-shop-page .hz-main .hzh-link:not(.hzh-link-light):hover,
.hz-product-details-page .hz-main .hzh-link:not(.hzh-link-light):hover {
color: var(--hzb-blue);
}
/* Image stages: one pale-blue surface on every card (the beige alternate is dropped),
and the fixed pine tints in shadows and the helix thread follow the blue. */
.hz-shop-page .hzc-shot img,
.hz-product-details-page .hzc-shot img {
filter: drop-shadow(0 22px 26px rgba(7, 82, 122, .18));
}
.hz-shop-page .hzc-shot img.is-packshot,
.hz-product-details-page .hzc-shot img.is-packshot {
filter: drop-shadow(0 16px 16px rgba(7, 82, 122, .16));
}
.hz-shop-page .hzc-stage::after,
.hz-product-details-page .hzc-stage::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 200' preserveAspectRatio='none'%3E%3Cpath d='M8,0 C8,50 36,50 36,100 S8,150 8,200 M36,0 C36,50 8,50 8,100 S36,150 36,200' fill='none' stroke='%2307527a' stroke-opacity='.16' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}
.hz-shop-page .hz-main .hzh-btn:hover:not(:disabled),
.hz-product-details-page .hz-main .hzh-btn:hover:not(:disabled) {
box-shadow: 0 12px 22px -14px rgba(7, 82, 122, .7);
}
@media (max-width: 760px) {
.hz-product-details-page .hzp-sticky:not([hidden]) {
box-shadow: 0 -8px 24px rgba(7, 82, 122, .12);
}
}
/* Cart + Checkout: tokens come from the block above; these are the fixed pine tints. */
.hz-cart-page .hz-main .hzh-btn:hover:not(:disabled),
.hz-checkout-page .hz-main .hzh-btn:hover:not(:disabled) {
box-shadow: 0 12px 22px -14px rgba(7, 82, 122, .7);
}
.hz-cart-page .hz-main .hzh-link:not(.hzh-link-light),
.hz-checkout-page .hz-main .hzh-link:not(.hzh-link-light) {
color: var(--hzb-deep);
}
.hz-cart-page .hz-main .hzh-link:not(.hzh-link-light):hover,
.hz-checkout-page .hz-main .hzh-link:not(.hzh-link-light):hover {
color: var(--hzb-blue);
}
.hz-cart-page .hzk-thumb .hzc-shot img,
.hz-checkout-page .hzk-thumb .hzc-shot img {
filter: drop-shadow(0 6px 8px rgba(7, 82, 122, .16));
}
/* Account + sign-in pages: tokens come from the block above; fixed pine tints follow. */
.hz-account-page .hz-main .hzh-btn:hover:not(:disabled),
.hz-entry-page .hz-main .hzh-btn:hover:not(:disabled) {
box-shadow: 0 12px 22px -14px rgba(7, 82, 122, .7);
}
.hz-account-page .hz-main .hzh-link:not(.hzh-link-light),
.hz-entry-page .hz-main .hzh-link:not(.hzh-link-light) {
color: var(--hzb-deep);
}
.hz-account-page .hz-main .hzh-link:not(.hzh-link-light):hover,
.hz-entry-page .hz-main .hzh-link:not(.hzh-link-light):hover {
color: var(--hzb-blue);
}
.hz-account-page .hza-progress li.is-current .hza-progress-dot {
box-shadow: 0 0 0 4px rgba(7, 82, 122, .14);
}
.hz-account-page .hzk-thumb .hzc-shot img {
filter: drop-shadow(0 6px 8px rgba(7, 82, 122, .16));
}
/* Public pages (About, Consultations, Contact, Privacy, errors): fixed pine tints follow. */
.hz-public-page .hz-main .hzh-btn:hover:not(:disabled) {
box-shadow: 0 12px 22px -14px rgba(7, 82, 122, .7);
}
.hz-public-page .hz-main .hzh-link:not(.hzh-link-light) {
color: var(--hzb-deep);
}
.hz-public-page .hz-main .hzh-link:not(.hzh-link-light):hover {
color: var(--hzb-blue);
}
.hz-public-page .hzw-package:hover,
.hz-public-page .hzw-package:focus-within {
box-shadow: 0 20px 40px -30px rgba(7, 82, 122, .55);
}