.logo, .serif {
font-family: 'Playfair Display', serif;
font-weight: 400;
}
.container {
max-width: 1400px;
margin: 0 auto;
padding: 0 24px;
}
/* --------------------------------------------------------------------------
Homepage overlay header
The shared header partial renders .auralis-header — a solid cream bar that
auralis.css paints on the wrapper AND on .header-top, .header-logo-wrap and
.nav-bar. On the homepage it instead floats over the full-height hero:
transparent, white text, filling in to cream on hover or once you have
scrolled past the hero.
Colours run through --header-fg / --header-bg so the filled-in state is one
override instead of a repeat of every child selector.
`header-overlay` on and `solid` on the header are both set by
auralis.js. With JS off the header keeps its normal cream styling rather
than becoming white text on a cream bar.
-------------------------------------------------------------------------- */
/* The homepage is the only page with a genuinely fixed header, so it is the
only one that needs the header's own height as an anchor offset. */
.page-index.header-overlay { --sticky-base: 150px; }
.page-index.header-overlay .auralis-header {
--header-fg: var(--white);
--header-bg: transparent;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background: var(--header-bg);
transition: background 0.4s ease, box-shadow 0.4s ease;
}
.page-index.header-overlay .header-top,
.page-index.header-overlay .header-logo-wrap,
.page-index.header-overlay .nav-bar {
background: var(--header-bg);
transition: background 0.4s ease;
}
/* Scrim — keeps white text legible over a pale patch of the hero image. */
.page-index.header-overlay .auralis-header::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(0,0,0,0.38), transparent);
opacity: 1;
transition: opacity 0.4s ease;
pointer-events: none;
z-index: -1;
}
.page-index.header-overlay .header-link,
.page-index.header-overlay .header-logo,
.page-index.header-overlay .nav-item,
.page-index.header-overlay .mobile-menu-btn {
color: var(--header-fg);
transition: color 0.4s ease;
}
.page-index.header-overlay .nav-item:hover,
.page-index.header-overlay .nav-item.active {
border-bottom-color: var(--header-fg);
}
/* Badges invert so the count stays readable against the dark hero. */
.page-index.header-overlay .cart-badge,
.page-index.header-overlay .wish-badge {
background: var(--header-fg);
color: var(--header-bg);
}
/* Filled-in state: pointer hover, keyboard focus, or scrolled past the hero. */
.page-index.header-overlay .auralis-header:hover,
.page-index.header-overlay .auralis-header:focus-within,
.page-index.header-overlay .auralis-header.solid {
--header-fg: var(--black);
--header-bg: var(--cream);
box-shadow: 0 2px 18px rgba(0,0,0,0.06);
}
.page-index.header-overlay .auralis-header:hover .header-wordmark.logo-dark,
.page-index.header-overlay .auralis-header:focus-within .header-wordmark.logo-dark,
.page-index.header-overlay .auralis-header.solid .header-wordmark.logo-dark {
display: block;
}
.page-index.header-overlay .auralis-header:hover .header-wordmark.logo-light,
.page-index.header-overlay .auralis-header:focus-within .header-wordmark.logo-light,
.page-index.header-overlay .auralis-header.solid .header-wordmark.logo-light {
display: none;
}
.page-index.header-overlay .auralis-header:hover::after,
.page-index.header-overlay .auralis-header:focus-within::after,
.page-index.header-overlay .auralis-header.solid::after {
opacity: 0;
}
/* The mega menu is already opaque white, so it needs dark text even while the
bar behind it is still transparent. These selectors outrank the base ones in
auralis.css, so they mirror the same :not(.mega-image) shape — otherwise the
featured photo tile gets link colouring it should not have. */
.page-index.header-overlay .mega-menu .mega-col a:not(.mega-image) {
color: var(--gray);
}
.page-index.header-overlay .mega-menu h4,
.page-index.header-overlay .mega-menu .mega-col a:not(.mega-image):hover,
.page-index.header-overlay .mega-menu .mega-col a:not(.mega-image):focus-visible {
color: var(--black);
}
/* Once scrolled, shrink the image to preserve the original compact header. */
.page-index.header-overlay .header-logo {
transition: color 0.4s ease;
}
.page-index.header-overlay .auralis-header.solid .header-logo {
line-height: 1;
}
.page-index.header-overlay .auralis-header.solid .header-wordmark {
height: 34px;
}
@media (prefers-reduced-motion: reduce) {
.page-index.header-overlay .auralis-header,
.page-index.header-overlay .auralis-header::after,
.page-index.header-overlay .header-top,
.page-index.header-overlay .header-logo-wrap,
.page-index.header-overlay .nav-bar,
.page-index.header-overlay .header-link,
.page-index.header-overlay .header-logo,
.page-index.header-overlay .nav-item,
.page-index.header-overlay .mobile-menu-btn {
transition: none;
}
}
.icon {
width: 18px;
height: 18px;
display: inline-block;
vertical-align: middle;
}
/* The .logo / .logo-layer / .logo-light / .logo-dark / .logo-mark rules that used
to live here were removed: they described a two-layer light/dark logo crossfade
that no page ever rendered. The shared header uses a single plain text link
(.header-logo), whose colour is animated in the overlay block above. */
.hero {
position: relative;
height: 100vh;
min-height: 620px;
overflow: hidden;
display: flex;
align-items: flex-end;
padding-bottom: 80px;
}
.hero-bg {
position: absolute;
inset: 0;
background: linear-gradient(160deg, #1b4d2e 0%, #2d6a4f 40%, #1b4d2e 100%);
z-index: 1;
}
.hero-bg::before {
content: '';
position: absolute;
inset: 0;
background: url('https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?w=1920&q=80') center 20% / cover no-repeat;
opacity: 0.35;
mix-blend-mode: luminosity;
}
.hero-bg::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 70% 30%, transparent 0%, rgba(0,0,0,0.3) 100%);
}
.hero-content {
position: relative;
z-index: 2;
max-width: 1400px;
margin: 0 auto;
padding: 0 48px;
width: 100%;
color: var(--white);
}
.hero h1 {
font-size: clamp(42px, 7vw, 84px);
line-height: 1.05;
margin-bottom: 12px;
letter-spacing: -0.5px;
}
.hero p {
font-size: 18px;
margin-bottom: 28px;
font-weight: 300;
letter-spacing: 0.5px;
opacity: 0.95;
}
.btn {
display: inline-block;
padding: 14px 36px;
background: var(--white);
color: var(--black);
text-decoration: none;
font-size: 13px;
letter-spacing: 0.5px;
transition: all 0.35s ease;
border: 1px solid var(--white);
cursor: pointer;
font-family: 'Inter', sans-serif;
}
.btn:hover {
background: transparent;
color: var(--white);
}
.btn-dark {
background: var(--black);
color: var(--white);
border-color: var(--black);
padding: 16px 40px;
}
.btn-dark:hover {
background: transparent;
color: var(--black);
}
.btn-outline {
background: transparent;
color: var(--black);
border: 1px solid var(--black);
}
.btn-outline:hover {
background: var(--black);
color: var(--white);
}
.brand-intro {
background: var(--cream);
padding: 64px 24px;
text-align: center;
}
.brand-intro h2 {
font-size: clamp(24px, 3vw, 32px);
margin-bottom: 16px;
color: var(--black);
}
.brand-intro p {
max-width: 780px;
margin: 0 auto;
font-size: 14.5px;
line-height: 1.8;
color: var(--muted);
}
.section-header {
text-align: center;
margin-bottom: 48px;
}
.section-title {
font-size: clamp(26px, 3.5vw, 38px);
color: var(--black);
margin-bottom: 12px;
}
.section-subtitle {
font-size: 14px;
color: var(--muted);
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}
.categories {
padding: 80px 24px;
max-width: 1400px;
margin: 0 auto;
}
.category-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.category-card {
position: relative;
aspect-ratio: 1;
overflow: hidden;
cursor: pointer;
background: var(--light-gray);
}
.category-card img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.7s ease;
}
.category-card:hover img {
transform: scale(1.06);
}
.category-card span {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 20px;
color: var(--black);
font-size: 14px;
font-weight: 500;
background: linear-gradient(to top, rgba(255,255,255,0.95), transparent);
}
.promo-section {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 520px;
align-items: center;
background: var(--white);
}
.promo-section.reverse {
direction: rtl;
}
.promo-section.reverse > * {
direction: ltr;
}
.promo-media {
height: 100%;
min-height: 520px;
background: var(--light-gray);
overflow: hidden;
position: relative;
}
.promo-media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.8s ease;
}
.promo-section:hover .promo-media img {
transform: scale(1.03);
}
.promo-text {
padding: 60px 64px;
max-width: 640px;
margin: 0 auto;
}
.promo-label {
text-transform: uppercase;
letter-spacing: 1.5px;
font-size: 11px;
margin-bottom: 16px;
color: var(--muted);
font-weight: 500;
}
.promo-text h2 {
font-size: clamp(24px, 3vw, 34px);
margin-bottom: 20px;
line-height: 1.2;
}
.promo-text p {
font-size: 14.5px;
line-height: 1.75;
margin-bottom: 28px;
color: var(--muted);
}
.promo-links {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.promo-links a {
color: var(--black);
text-decoration: underline;
text-underline-offset: 4px;
font-size: 13.5px;
transition: opacity 0.3s;
}
.promo-links a:hover {
opacity: 0.5;
}
.product-section {
padding: 80px 24px;
background: var(--cream);
}
.carousel-wrapper {
max-width: 1400px;
margin: 0 auto;
position: relative;
}
.product-carousel {
display: flex;
gap: 16px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-ms-overflow-style: none;
padding: 8px 4px 24px;
}
.product-carousel::-webkit-scrollbar {
display: none;
}
.product-card {
flex: 0 0 280px;
scroll-snap-align: start;
background: var(--white);
padding: 16px;
text-align: left;
transition: transform 0.35s ease, box-shadow 0.35s ease;
cursor: pointer;
}
.product-card:hover {
transform: translateY(-6px);
box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}
.product-card .img-wrap {
width: 100%;
aspect-ratio: 1;
overflow: hidden;
margin-bottom: 16px;
background: var(--light-gray);
}
.product-card img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.product-card:hover img {
transform: scale(1.05);
}
.product-card h4 {
font-family: 'Inter', sans-serif;
font-size: 13.5px;
margin-bottom: 4px;
font-weight: 600;
color: var(--black);
}
.product-card .desc {
font-size: 12px;
color: var(--muted);
margin-bottom: 8px;
line-height: 1.4;
}
.product-card .price {
font-size: 13.5px;
font-weight: 500;
color: var(--black);
}
.carousel-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 48px;
height: 48px;
background: var(--white);
border: 1px solid var(--border-gray);
cursor: pointer;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
font-size: 14px;
color: var(--black);
}
.carousel-btn:hover {
background: var(--black);
color: var(--white);
border-color: var(--black);
}
.carousel-btn.prev {
left: -60px;
}
.carousel-btn.next {
right: -60px;
}
.world-section {
padding: 80px 24px;
max-width: 1400px;
margin: 0 auto;
}
.world-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.world-card {
cursor: pointer;
}
.world-card .img-wrap {
overflow: hidden;
margin-bottom: 16px;
position: relative;
}
.world-card img {
width: 100%;
aspect-ratio: 3/4;
object-fit: cover;
transition: transform 0.7s ease;
}
.world-card:hover img {
transform: scale(1.04);
}
.world-card h3 {
font-size: 17px;
margin-bottom: 8px;
font-weight: 500;
}
.world-card p {
font-size: 13px;
line-height: 1.6;
color: var(--muted);
margin-bottom: 12px;
}
.world-card a {
font-size: 13px;
color: var(--black);
text-decoration: underline;
text-underline-offset: 3px;
transition: opacity 0.3s;
}
.world-card a:hover {
opacity: 0.5;
}
.services {
padding: 64px 24px;
background: var(--white);
border-top: 1px solid var(--border-gray);
}
.services-grid {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px;
text-align: center;
}
.service-item i {
font-size: 28px;
margin-bottom: 16px;
color: var(--black);
display: inline-block;
}
.service-item h4 {
font-family: 'Inter', sans-serif;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 8px;
font-weight: 600;
}
.service-item p {
font-size: 13px;
color: var(--muted);
line-height: 1.5;
}
footer {
background: var(--black);
color: var(--white);
padding: 64px 24px 32px;
}
.footer-meta {
display: flex;
align-items: center;
gap: 24px;
font-size: 12px;
color: rgba(255,255,255,0.5);
}
.socials {
display: flex;
gap: 18px;
}
.socials a {
color: rgba(255,255,255,0.6);
font-size: 16px;
transition: color 0.3s;
}
.socials a:hover {
color: var(--white);
}
/* Scroll-in reveal. The hidden state is scoped to .js-reveal, which auralis.js
adds to only once it knows it can reveal things again — so with JS off
or broken these sections render as plain visible content instead of staying
invisible forever. */
.js-reveal .fade-up {
opacity: 0;
transform: translateY(40px);
transition: opacity 0.9s ease, transform 0.9s ease;
}
.js-reveal .fade-up.visible {
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.js-reveal .fade-up { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 1200px) {
.carousel-btn.prev {
left: 0;
}
.carousel-btn.next {
right: 0;
}
}
@media (max-width: 1024px) {
.category-grid {
grid-template-columns: repeat(2, 1fr);
}
.world-grid {
grid-template-columns: repeat(2, 1fr);
}
.services-grid {
grid-template-columns: repeat(2, 1fr);
gap: 32px;
}
.promo-section {
grid-template-columns: 1fr;
}
.promo-section.reverse {
direction: ltr;
}
.promo-media {
min-height: 360px;
}
.promo-text {
padding: 48px 24px;
}
}
@media (max-width: 640px) {
.hero {
height: 88vh;
min-height: 520px;
padding-bottom: 48px;
}
.hero-content {
padding: 0 24px;
}
.category-grid {
grid-template-columns: 1fr;
}
.world-grid {
grid-template-columns: 1fr;
}
.services-grid {
grid-template-columns: 1fr;
}
}
/* ============================================================ MEDIA SLOTS
Admin-set pictures and clips (includes/media.php). Each slot renders either
an ![]()
or a