/* ========================================================================== Cassia Resorts palette override — loaded after main.css. All colors are driven by CSS variables so the admin (Site settings → Colors) can override them at runtime via an injected :root block in the page . --cassia-blue -> header, footer & dark sections (setting: color_primary) --cassia-text -> default body / heading text on light bg (setting: color_text) --cassia-gold -> buttons + all hover / interactive accents (setting: color_accent) ========================================================================== */ :root { /* Defaults — overridden by the admin colour settings when set. */ --cassia-blue: #020381; /* primary deep blue */ --cassia-text: #020381; /* body text on light surfaces */ --cassia-gold: #e9b10d; /* accent / buttons / hover */ --cassia-green: #1e6b3a; /* static eyebrow labels */ /* Derived (auto-darkened hover shade of the accent). */ --cassia-gold-dark: color-mix(in srgb, var(--cassia-gold) 82%, #000); /* Remap the theme's core tokens onto the brand colours. */ --color-accent-1: var(--cassia-blue); /* dark sections, header, footer */ --color-accent-2: #eef2fd; /* soft blue tint — light feature panels */ --color-dark-1: var(--cassia-blue); --color-dark-2: #05066e; --color-dark-3: #020259; --color-light-1: #f4f6fd; --color-light-2: #eef2fd; } /* ---- Default text colour on light surfaces ---- */ body { color: var(--cassia-text); } /* ---- Dark surfaces use the primary colour ---- */ .bg-accent-1, .footer.bg-accent-1, section.bg-accent-1, .header.-is-menu-opened, .header.bg-accent-1 { background-color: var(--cassia-blue) !important; background-image: none !important; } /* ---- Primary / filled buttons -> accent with primary-coloured text ---- */ .button.bg-accent-1, .button.-dark-1, .button.-type-2 { background-color: var(--cassia-gold) !important; border-color: var(--cassia-gold) !important; color: var(--cassia-blue) !important; } .button.bg-accent-1:hover, .button.-dark-1:hover, .button.-type-2:hover { background-color: var(--cassia-gold-dark) !important; border-color: var(--cassia-gold-dark) !important; color: var(--cassia-blue) !important; } /* Ghost/underline "-type-1" buttons: keep text dark, accent arrow on hover */ .button.-type-1:hover { color: var(--cassia-gold-dark) !important; } /* ---- Accents that should read as the accent colour ---- */ .roomCard__price, .hero__subtitle, .pageHero__subtitle { color: var(--cassia-gold) !important; } /* Small uppercase eyebrows on light sections -> green label */ section:not(.bg-accent-1):not(.hero):not(.pageHero) .text-15.uppercase { color: var(--cassia-green); } /* ---- Links / nav / interactive hover -> accent colour ---- */ .menuFullScreen-links__item > a:hover, .menuFullScreen-links-subnav__item a:hover, .footer a:hover, .footer__grid a:hover, .hoverTitle:hover { color: var(--cassia-gold) !important; } /* Newsletter + form focus rings -> accent */ .footer__newsletter button { color: var(--cassia-gold) !important; } /* Selection niceties */ ::selection { background: var(--cassia-gold); color: var(--cassia-blue); } /* ============================================================ Cassia custom overrides (header logo, footer, meeting images) ============================================================ */ /* Footer: 3-column layout — About Us | Links (centre) | Contact (right) */ .footer.-type-1.-cassia-3col .footer__grid { grid-template-columns: 1.6fr 1fr 1.2fr; gap: 60px; } @media (max-width: 991px) { .footer.-type-1.-cassia-3col .footer__grid { grid-template-columns: 1fr 1fr; gap: 50px 40px; } } @media (max-width: 575px) { .footer.-type-1.-cassia-3col .footer__grid { grid-template-columns: 1fr; gap: 40px; } } /* Meeting & Events: keep the two side images constrained + ~half height on desktop so they frame the centred text instead of overlapping it. */ @media (min-width: 992px) { .sideImages.-type-1 > * { width: 24vw; height: 56%; top: 50%; bottom: auto; transform: translateY(-50%); border-radius: 12px; overflow: hidden; } .sideImages.-type-1 > * img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; } } /* Experiences hover-images: remove ALL offset frame lines on the main image (the theme's solid-black ::before frame and the earlier decorative ::after) */ .hoverTitleInteraction .imageGrid.-type-1 > *:nth-child(2)::before, .hoverTitleInteraction .imageGrid.-type-1 .expImage.-has-frame::after { display: none !important; } /* Custom parallax banners (hero, page hero) — clip the scaled/scrolling image */ .js-cparallax { overflow: hidden; } .js-cparallax > img { will-change: transform; } /* Inner-page hero banner: was 960px (near full-screen) — halve it on all pages */ .pageHero.-type-2 { height: 480px; } @media (max-width: 991px) { .pageHero.-type-2 { height: 420px; } } @media (max-width: 767px) { .pageHero.-type-2 { height: auto; padding-top: 160px; padding-bottom: 60px; } } /* Remove the decorative white inset line/frame on room card images (all rooms, everywhere) */ .-image-border__item { display: none !important; } .roomCard.-type-2 .roomCard__image::after { display: none !important; } /* Image cards (baseCard -type-1): keep white captions readable over bright photos — theme assumes dark images, so add a bottom gradient scrim + text shadow */ .baseCard.-type-1 .baseCard__image { position: relative; } .baseCard.-type-1 .baseCard__image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.22) 34%, rgba(0,0,0,0) 60%); pointer-events: none; } .baseCard.-type-1 .baseCard__content { text-shadow: 0 1px 8px rgba(0,0,0,0.55); } /* Inner-page hero banner: dark scrim over the image so the white title/subtitle stay readable on any photo (bright skies, snow, etc.) — applies to every page */ .pageHero.-type-2 .pageHero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.42), rgba(0,0,0,0.38) 45%, rgba(0,0,0,0.55)); pointer-events: none; } .pageHero.-type-2 .pageHero__content { text-shadow: 0 2px 14px rgba(0,0,0,0.45); } /* Fullscreen menu: theme only scales nav text down to 42px (≤1199px) and no further, so it overflows on tablets/phones. Make it fluid + tighter on small screens. */ .menuFullScreen-links__item > a { font-size: clamp(28px, 5.2vw, 52px); } @media (max-width: 767px) { .menuFullScreen-links__item > a { font-size: clamp(24px, 7vw, 34px); } .menuFullScreen-links a { padding-top: 6px; padding-bottom: 6px; } } @media (max-height: 720px) { .menuFullScreen-links__item > a { font-size: clamp(22px, 4.2vw, 34px); } }