/* ===================================================================
DESIGN TOKENS — Nouralchemyy
=================================================================== */
:root {
--ivory: #FBF5F0;
/* page background */
--white: #FFFFFF;
--rose: #C28A9B;
/* primary accent — "Beige" silk swatch */
--rose-deep: #8C5468;
/* deep rose / plum — headers, hovers */
--rose-darker: #6E3F50;
--blush: #F4DCE2;
/* soft pink section tint */
--gold: #C9A66B;
/* champagne gold accent */
--gold-soft: #E8D8B8;
--script-pink: #D9748D;
/* "Rosa" script colour */
--ink: #2B201F;
/* warm charcoal — body text */
--ink-soft: #5C4E4C;
--font-display: 'Playfair Display', Georgia, serif;
--font-script: 'Allura', cursive;
--font-body: 'Jost', Helvetica, Arial, sans-serif;
--font-brand-logo: "Anton", sans-serif;
--header-h: 92px;
--header-h-sm: 68px;
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font-body);
color: var(--ink);
background: var(--ivory);
font-weight: 300;
overflow-x: hidden;
}
body {
position: relative;
background:
radial-gradient(circle at top left, rgba(233, 214, 220, 0.30), transparent 30%),
radial-gradient(circle at bottom right, rgba(215, 191, 154, 0.14), transparent 26%),
linear-gradient(180deg, #f8f4f1 0%, #f3ece8 100%);
overflow-x: hidden;
}
body::before,
body::after {
content: "";
position: fixed;
z-index: -1;
pointer-events: none;
opacity: 0.10;
background-repeat: no-repeat;
background-size: contain;
}
body::before {
top: 0;
left: 0;
width: 320px;
height: 320px;
background-image: url('assets/img/bg-floral-top-left.png');
}
body::after {
right: 0;
bottom: 0;
width: 340px;
height: 340px;
background-image: url('assets/img/bg-floral-bottom-right.png');
}
h1,
h2,
h3,
h4,
.font-display {
font-family: var(--font-display);
font-weight: 600;
color: var(--ink);
}
.font-script {
font-family: var(--font-script);
}
.font-logo {
font-family: var(--font-brand-logo);
}
a {
text-decoration: none;
color: inherit;
}
::selection {
background: var(--rose);
color: var(--white);
}
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.001ms !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
.thm-title {
font-family: var(--font-display);
}
.eyebrow {
font-family: var(--font-body);
letter-spacing: .28em;
font-size: .72rem;
font-weight: 500;
text-transform: uppercase;
color: var(--rose-deep);
}
.eyebrowlg {
font-family: var(--font-body);
letter-spacing: .28em;
font-size: calc(1rem + .8vw);
font-weight: 500;
text-transform: uppercase;
color: var(--rose-deep);
}
.btn-outline-brand {
border: 1px solid currentColor;
color: var(--white);
background: transparent;
letter-spacing: .18em;
font-size: .74rem;
text-transform: uppercase;
padding: .5rem 1.5rem;
border-radius: 0;
transition: all .35s ease;
}
.btn-outline-brand:hover {
background: var(--white);
color: var(--rose-darker);
}
.btn-outline-brand.dark {
color: var(--ink);
}
.btn-outline-brand.dark:hover {
background: var(--ink);
color: var(--white);
}
.btn-solid-brand {
background: var(--rose-deep);
color: var(--white);
letter-spacing: .18em;
font-size: .74rem;
text-transform: uppercase;
padding: .85rem 2.1rem;
border: 1px solid var(--rose-deep);
border-radius: 0;
transition: all .35s ease;
}
.btn-solid-brand:hover {
background: transparent;
color: var(--rose-deep);
}
/* ===================================================================
PLACEHOLDER PHOTOGRAPHY PANELS
Replace each .ph block's background (or swap for a real ![]()
/)
with final photography. Comments above each instance describe the
intended shot.
=================================================================== */
.ph {
position: relative;
background-size: cover;
background-position: center;
overflow: hidden;
isolation: isolate;
}
.ph::after {
content: '';
position: absolute;
inset: 0;
background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 26px);
pointer-events: none;
}
.ph .ph-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 46px;
height: 46px;
opacity: .35;
}
.ph-rose {
background: linear-gradient(150deg, #cda3b0 0%, #b07f93 48%, #8c5468 100%);
}
.ph-rose2 {
background: linear-gradient(150deg, #b98a9b 0%, #93576b 55%, #6e3f50 100%);
}
.ph-charcoal {
background: linear-gradient(150deg, #4a3739 0%, #322426 55%, #1f1617 100%);
}
.ph-blush {
background: linear-gradient(150deg, #f6e6ea 0%, #ecd2d8 100%);
}
.ph-gold {
background: linear-gradient(150deg, #ddc899 0%, #c9a66b 60%, #a9824c 100%);
}
.ph-ivory {
background: linear-gradient(150deg, #fbf5f0 0%, #f4e3e8 100%);
}
/* recurring paisley / leaf line-motif used across every placeholder —
ties the whole site back to the draped-silk brand reference */
.motif {
stroke: var(--white);
stroke-width: 1.1;
fill: none;
opacity: .55;
}
.ph-blush .motif,
.ph-ivory .motif {
stroke: var(--rose-deep);
opacity: .45;
}
/* ===================================================================
TOP UTILITY BAR
=================================================================== */
.utility-bar {
background: var(--rose-darker);
color: var(--gold-soft);
font-size: .72rem;
letter-spacing: .14em;
text-align: center;
padding: .7rem 2.5rem;
min-height: 54px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.utility-bar a {
color: var(--white);
text-decoration: underline;
text-underline-offset: 3px;
margin-left: .4rem;
}
.utility-bar #utilityText {
display: inline-block;
line-height: 1.7;
transition: opacity .35s ease;
}
.utility-bar #utilityText.fading {
opacity: 0;
}
.utility-bar .nav-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: var(--gold-soft);
opacity: .7;
font-size: .85rem;
cursor: pointer;
}
.utility-bar .nav-arrow:hover {
opacity: 1;
}
.utility-bar .nav-arrow.prev {
left: 1rem;
}
.utility-bar .nav-arrow.next {
right: 1rem;
}
/* ===================================================================
HEADER / MAIN NAV
- transparent at scrollY 0
- solid background once scrolled
- hides on scroll-down, reappears on scroll-up
=================================================================== */
.siteHeader {
position: absolute;
top: var(--utility-h, 54px);
left: 0;
right: 0;
z-index: 1040;
background: transparent;
transition: background-color .4s ease, box-shadow .4s ease, transform .35s ease;
}
.siteHeaderSticky {
position: sticky;
background: rgba(251, 245, 240, .97);
box-shadow: 0 4px 18px rgb(43 32 31 / 4%);
}
.header-row1 {
position: relative;
display: flex;
align-items: center;
min-height: 58px;
padding: .9rem 0;
}
.brand-wrap {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
white-space: nowrap;
line-height: 1;
}
.icons-wrap {
margin-left: auto;
display: flex;
align-items: center;
}
.hamburger-btn {
background: none;
border: none;
padding: 0;
width: 34px;
line-height: 1;
color: var(--white);
transition: color .3s ease;
}
.header-row2 {
display: flex;
align-items: center;
justify-content: center;
gap: 2.3rem;
padding: 0 0 1rem;
}
.siteHeader .nav-link-main {
color: var(--white);
font-size: .78rem;
letter-spacing: .16em;
text-transform: uppercase;
font-weight: 400;
padding: 0 !important;
transition: color .3s ease, opacity .3s ease;
white-space: nowrap;
}
.siteHeaderSticky .nav-link-main {
color: var(--ink);
}
.siteHeader .nav-link-main:hover,
.siteHeaderSticky .nav-link-main:hover {
/* opacity: .72; */
color: var(--rose-deep);
}
.siteHeader .icon-link {
line-height: 1.25;
color: var(--white);
font-size: 1.05rem;
margin-left: 1.1rem;
transition: color .3s ease;
text-align: center;
display: grid;
}
.siteHeaderSticky .icon-link {
color: var(--ink);
}
.siteHeader .icon-link>.bi {
width: 1.25em;
height: 1.25em;
}
.siteHeader .brand-script {
font-family: var(--font-brand-logo);
font-size: 2rem;
color: var(--white);
line-height: 1;
text-transform: uppercase;
}
.siteHeaderSticky .brand-script {
color: var(--ink);
}
.siteHeader .brand-gold {
font-family: var(--font-body);
font-size: .85rem;
letter-spacing: .32em;
color: var(--white);
display: block;
margin-top: -2px;
}
/* fixed + solid state once user scrolls (matches the cream reference) */
.siteHeader.is-fixed {
position: fixed;
top: 0;
box-shadow: 0 4px 18px rgba(43, 32, 31, .08);
}
.siteHeader.is-scrolled {
background: rgba(251, 245, 240, .97);
backdrop-filter: saturate(160%) blur(6px);
}
.siteHeader.is-scrolled .nav-link-main,
.siteHeader.is-scrolled .icon-link,
.siteHeader.is-scrolled .hamburger-btn {
color: var(--ink);
}
.siteHeaderSticky .hamburger-btn {
color: var(--ink);
}
.siteHeaderSticky.is-scrolled .nav-link-main:hover,
.siteHeaderSticky.is-scrolled .icon-link:hover,
.siteHeaderSticky.is-scrolled .hamburger-btn:hover {
color: var(--rose-deep);
}
.siteHeader.is-scrolled .brand-script {
color: var(--rose-darker);
}
.siteHeader.is-scrolled .brand-gold {
color: var(--ink-soft);
}
/* hide-on-scroll-down */
.siteHeader.header-hidden {
transform: translateY(-110%);
}
.cart-badge {
position: absolute;
top: -6px;
right: -9px;
background: var(--rose-deep);
color: var(--white);
font-size: .62rem;
width: 16px;
height: 16px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
/* mobile nav panel (replaces row 2 below the lg breakpoint) */
#mobileNav {
background: var(--ivory);
}
#mobileNav .mobile-nav-list {
display: flex;
flex-direction: column;
padding: .4rem 1.4rem 1.3rem;
}
#mobileNav .mobile-nav-list a {
color: var(--ink);
padding: .7rem 0;
font-size: .82rem;
letter-spacing: .14em;
text-transform: uppercase;
border-bottom: 1px solid rgba(43, 32, 31, .08);
}
/* search slide-down */
#searchPanel {
max-height: 0;
overflow: hidden;
transition: max-height .4s ease;
background: rgba(251, 245, 240, .98);
}
#searchPanel.open {
max-height: 90px;
}
#searchPanel input {
border: none;
border-bottom: 1px solid var(--rose);
background: transparent;
font-family: var(--font-display);
font-size: 1.3rem;
padding: .6rem .2rem;
width: 100%;
}
#searchPanel input:focus {
outline: none;
box-shadow: none;
border-color: var(--rose-deep);
}
/* ===================================================================
HERO
=================================================================== */
#hero {
position: relative;
/* height: 100vh; */
height: calc(100vh - 54px);
min-height: 560px;
}
#hero .carousel,
#hero .carousel-inner,
#hero .carousel-item {
height: 100%;
}
#hero .hero-banner-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
#hero .carousel-item .ph {
height: 100%;
}
#hero .hero-shade {
position: absolute;
inset: 0;
background: linear-gradient(100deg, rgba(43, 32, 31, .45) 0%, rgba(43, 32, 31, .08) 45%, transparent 70%);
}
#hero .hero-copy {
position: absolute;
right: 7%;
top: 50%;
transform: translateY(-50%);
text-align: right;
max-width: 520px;
z-index: 5;
transition: opacity .35s ease;
}
#hero .hero-copy.fading {
opacity: 0;
}
#hero .hero-copy h1 {
color: var(--white);
font-size: clamp(2rem, 4.2vw, 3.4rem);
letter-spacing: .04em;
font-weight: 500;
text-shadow: 0 2px 18px rgba(0, 0, 0, .25);
}
#hero .hero-copy h1 em {
font-style: normal;
font-family: var(--font-script);
color: var(--blush);
font-size: 1.25em;
}
.rating-badge {
position: absolute;
top: 104px;
right: 4%;
z-index: 5;
background: rgba(255, 255, 255, .92);
padding: .5rem .9rem;
border-radius: 4px;
font-size: .72rem;
color: var(--ink);
box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}
.rating-badge i {
color: #E2A93B;
}
.scroll-chevron {
position: absolute;
left: 50%;
bottom: 26px;
transform: translateX(-50%);
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(255, 255, 255, .18);
border: 1px solid rgba(255, 255, 255, .55);
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
animation: bob 2.6s ease-in-out infinite;
z-index: 5;
}
@keyframes bob {
0%,
100% {
transform: translateX(-50%) translateY(0);
}
50% {
transform: translateX(-50%) translateY(8px);
}
}
#hero .carousel-indicators {
bottom: 24px;
right: 4%;
left: auto;
margin: 0;
width: auto;
gap: .4rem;
}
#hero .carousel-indicators [data-bs-target] {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--white);
opacity: .5;
border: none;
}
#hero .carousel-indicators .active {
opacity: 1;
}
/* ===================================================================
SECTION SPACING / EYEBROW LINKS
=================================================================== */
.section-pad {
padding: 2.5rem 0;
}
.chevron-link {
width: 42px;
height: 42px;
border-radius: 50%;
border: 1px solid var(--rose);
display: flex;
align-items: center;
justify-content: center;
color: var(--rose-deep);
margin: 0 auto;
}
/* ===================================================================
MOST LOVED — single panoramic strip, 5 panels
=================================================================== */
#mostLoved {
position: relative;
background: var(--ink);
}
.ml-img {
position: relative;
z-index: 1;
}
.ml-panel {
flex: 1 0 20%;
scroll-snap-align: start;
position: relative;
height: 100%;
border-left: 1px solid rgba(255, 255, 255, .08);
}
.ml-panel:first-child {
border-left: none;
}
.ml-panel .ml-label {
position: absolute;
left: 0;
right: 0;
bottom: 1.6rem;
text-align: center;
color: var(--white);
font-size: .78rem;
letter-spacing: .22em;
text-transform: uppercase;
z-index: 3;
}
.ml-panel .ml-shade,
.ml-shade {
position: absolute;
inset: 0;
background: linear-gradient(0deg, rgba(0, 0, 0, .55) 0%, transparent 38%);
}
.ml-overlay {
position: absolute;
left: 50%;
bottom: 1.1rem;
transform: translateX(-50%);
text-align: center;
z-index: 4;
color: var(--white);
width: 100%;
pointer-events: none;
}
.ml-overlay .eyebrowlg {
color: var(--gold-soft);
font-weight: 400;
}
.ml-overlay h2 {
color: var(--white);
margin: .2rem 0 .3rem;
font-weight: 400;
}
.ml-overlay .font-script {
font-size: calc(1.325rem + .9vw);
color: var(--blush);
}
@media (max-width: 767.98px) {
.ml-panel {
flex: 0 0 62%;
}
.ml-overlay {
position: static;
transform: none;
padding: 1.2rem 1rem 0;
}
}
/* ===================================================================
WOMENSWEAR — category cards
=================================================================== */
.cat-card {
display: block;
position: relative;
/* height: 360px; */
overflow: hidden;
}
.cat-card .ph {
height: 100%;
transition: transform .6s ease;
}
.cat-card:hover .ph {
transform: scale(1.06);
}
.cat-card .cat-name {
position: absolute;
left: 0;
right: 0;
bottom: 1.1rem;
text-align: center;
color: var(--white);
font-size: 1rem;
letter-spacing: .18em;
font-weight: 400;
text-transform: uppercase;
}
.cat-card .cat-name::after {
content: '';
display: block;
width: 26px;
height: 1px;
background: var(--gold-soft);
margin: .5rem auto 0;
}
.cat-card .cat-shade {
position: absolute;
inset: 0;
background: linear-gradient(0deg, rgba(0, 0, 0, .5), transparent 45%);
}
.cat-card img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
transition: transform .55s ease, opacity .35s ease;
}
.cat-card:hover img {
transform: scale(1.035);
}
.cat-card .cat-name {
font-variation-settings: "wght" 400;
transition: font-variation-settings .3s ease, letter-spacing .3s ease;
z-index: 2;
}
.cat-card:hover .cat-name {
font-variation-settings: "wght" 600;
}
/* ===================================================================
CEREMONY EDIT
=================================================================== */
.ceremony {
position: relative;
/* height: calc(100vh - 60px);
min-height: 640px; */
overflow: hidden;
background: var(--ink);
}
.ceremony .cer-photo {
/* position: absolute; */
inset: 0;
width: 100%;
/* height: 100%; */
object-fit: cover;
object-position: center top;
transition: opacity .45s ease-in-out;
/* keep in sync with CER_FADE_MS in the script below */
}
.ceremony .cer-copy {
position: absolute;
margin: 0 auto;
left: 0;
right: 0;
text-align: center;
padding: 1rem;
bottom: 1.5rem;
z-index: 4;
color: var(--white);
}
.ceremony .cer-copy h2 {
color: var(--white);
}
.ceremony .cer-shade {
position: absolute;
inset: 0;
background: linear-gradient(0deg, rgba(20, 14, 14, .55) 0%, transparent 35%);
}
.cer-tabs {
background: var(--blush);
}
.cer-tabs .nav-link {
border: none;
border-radius: 0;
background: transparent;
color: var(--ink-soft);
font-size: .9rem;
letter-spacing: .14em;
text-transform: uppercase;
padding: 1rem 1.6rem;
position: relative;
font-weight: 400;
}
.cer-tabs .nav-link.active {
color: var(--rose-darker);
background: transparent;
font-weight: 500;
}
.cer-tabs .nav-link.active::after {
content: '';
position: absolute;
left: 1.6rem;
right: 1.6rem;
bottom: 0;
height: 2px;
background: var(--rose-deep);
}
/* ===================================================================
SOCIAL PRESENCE
=================================================================== */
.script-heading {
font-family: var(--font-script);
color: var(--script-pink);
font-size: 2.4rem;
text-align: center;
}
.social-title {
font-family: var(--font-display);
color: var(--ink);
text-align: center;
}
.social-card {
position: relative;
/* height: 340px; */
overflow: hidden;
display: block;
}
.social-card .ph {
height: 100%;
transition: transform .6s ease;
}
.social-card:hover .ph {
transform: scale(1.05);
}
.social-card .soc-shade {
position: absolute;
inset: 0;
background: linear-gradient(0deg, rgba(0, 0, 0, .6), transparent 50%);
}
.social-card .soc-content {
position: absolute;
left: 0;
right: 0;
bottom: 1.2rem;
text-align: center;
color: var(--white);
z-index: 3;
font-size: 1rem;
text-transform: uppercase;
}
.social-card .soc-icon {
font-size: 1.4rem;
margin-bottom: .4rem;
}
.social-card .soc-cta {
background: var(--rose);
padding: .5rem 1.5rem;
display: inline-block;
margin-top: .5rem;
font-size: .74rem;
text-transform: uppercase;
letter-spacing: .2em;
border-radius: 0;
/* border-bottom: 1px solid rgba(255, 255, 255, .6); */
}
.social-card .soc-cta:hover {
background: var(--rose-deep);
}
.google-chip {
position: absolute;
top: 1rem;
right: 1rem;
background: var(--white);
color: var(--ink);
font-size: .75rem;
font-weight: 500;
padding: .35rem .6rem;
border-radius: 4px;
z-index: 3;
}
.google-chip i {
color: #E2A93B;
}
/* ===================================================================
DISCOVER / VIDEO SECTION
=================================================================== */
#discover {
position: relative;
height: 560px;
overflow: hidden;
}
#discover video,
#discover .ph {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
#discover .disc-shade {
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center, rgba(20, 14, 14, .25) 0%, rgba(20, 14, 14, .65) 100%);
}
#discover .disc-copy {
position: relative;
z-index: 3;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
#discover .disc-copy h2 {
color: var(--white);
}
.disc-copy .font-logo {
text-transform: uppercase;
font-weight: 400;
font-size: calc(1.325rem + .9vw);
color: var(--white);
margin-bottom: 1.6rem;
}
/* silk shimmer animation standing in for motion video */
.silk-shimmer {
position: absolute;
inset: -10%;
background: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .10), transparent 40%), radial-gradient(circle at 80% 70%, rgba(255, 255, 255, .08), transparent 45%);
animation: shimmer 14s ease-in-out infinite alternate;
}
@keyframes shimmer {
0% {
transform: translate(0, 0) scale(1);
}
100% {
transform: translate(-3%, 2%) scale(1.08);
}
}
/* ===================================================================
FOOTER
=================================================================== */
footer {
background: var(--ink);
color: #D8C9C5;
padding: 3rem 0 1.5rem;
}
footer h6 {
color: var(--gold-soft);
font-size: .75rem;
letter-spacing: .2em;
text-transform: uppercase;
margin-bottom: 1.1rem;
}
footer a {
color: #D8C9C5;
font-size: .86rem;
display: block;
margin-bottom: .55rem;
transition: color .25s ease;
}
footer a:hover {
color: var(--gold-soft);
}
footer .footer-logo {
font-family: var(--font-brand-logo);
color: var(--white);
text-transform: uppercase;
font-size: 2rem;
}
footer .social-icons a {
display: inline-flex;
margin-right: .8rem;
font-size: 1.05rem;
}
footer hr {
border-color: rgba(255, 255, 255, .12);
margin: 2.2rem 0 1.4rem;
}
footer .pay-icons i {
font-size: 1.5rem;
margin-left: .6rem;
color: #D8C9C5;
}
footer .bottom-line {
font-size: .8rem;
color: #9C8A87;
}
/* ===================================================================
FLOATING UI — WhatsApp / Back to top
=================================================================== */
.fab-stack {
position: fixed;
right: 22px;
bottom: 24px;
z-index: 1050;
display: flex;
flex-direction: column;
gap: .8rem;
align-items: flex-end;
}
.fab {
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
font-size: 1.4rem;
transition: transform .25s ease, opacity .3s ease, visibility .3s;
}
.fab:hover {
transform: translateY(-3px);
}
.fab-whatsapp {
background: #25D366;
color: var(--white);
}
.fab-top {
background: var(--rose-deep);
color: var(--white);
font-size: 1.1rem;
opacity: 0;
visibility: hidden;
}
.fab-top.show {
opacity: 1;
visibility: visible;
}
/* ===================================================================
NEWSLETTER MODAL — floating card style
=================================================================== */
.newsletterModal .modal-content {
border: none;
border-radius: 2px;
overflow: hidden;
}
.newsletterModal .nl-image {
min-height: 230px;
}
.newsletterModal .nl-body {
padding: 2.6rem 2.4rem;
}
.newsletterModal .font-script {
color: var(--ink);
font-size: 2.1rem;
}
.newsletterModal .form-control {
border-radius: 0;
border-color: #E3D2D8;
padding: .7rem .9rem;
}
.newsletterModal .form-control:focus {
box-shadow: none;
border-color: var(--rose-deep);
}
.newsletterModal .btn-close {
position: absolute;
top: 14px;
right: 14px;
z-index: 5;
}
.newsletterModal .no-thanks {
font-size: .74rem;
color: var(--ink-soft);
letter-spacing: .06em;
}
/* reveal-on-scroll */
.reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity .7s ease, transform .7s ease;
}
.reveal.in {
opacity: 1;
transform: translateY(0);
}
/* =========================================================
NOURALCHEMYY INNER PAGES - CONTACT + ABOUT
========================================================= */
.titleH1 {
font-family: var(--font-display);
font-size: clamp(2.5rem, 3.5vw, 4.5rem);
font-weight: 400;
line-height: .98;
color: var(--ink);
margin-bottom: 1.5rem;
}
.section-title {
font-family: var(--font-display);
font-size: calc(1.325rem + .9vw);
font-weight: 400;
line-height: 1.18;
color: var(--ink);
margin-bottom: 1.2rem;
}
.section-title-sm {
font-family: var(--font-display);
font-size: calc(1rem + .75vw);
font-weight: 400;
line-height: 1.18;
color: var(--ink);
margin-bottom: 1.2rem;
}
.nour-kicker {
letter-spacing: .28em;
text-transform: uppercase;
color: var(--rose-deep);
margin-bottom: .85rem;
font-weight: 400;
}
.nour-inner-hero {
background: linear-gradient(135deg, var(--ivory), var(--blush));
padding: 6.5rem 0 4.5rem;
border-bottom: 1px solid rgba(43, 32, 31, .1);
}
.nour-inner-hero-content {
max-width: 760px;
margin: 0 auto;
text-align: center;
}
/* =========================================================
CONTACT PAGE
========================================================= */
.contact-page-section {
background: var(--ivory);
}
.contact-form-card,
.contact-info-panel {
background: var(--white);
border: 1px solid rgba(43, 32, 31, .1);
padding: 3rem;
height: 100%;
}
.nour-contact-form label {
display: block;
font-size: .72rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--ink);
margin-bottom: .55rem;
}
.nour-contact-form input,
.nour-contact-form textarea {
width: 100%;
border: 1px solid rgba(43, 32, 31, .16);
background: var(--ivory);
padding: .9rem 1rem;
color: var(--ink);
font-size: .94rem;
outline: none;
border-radius: 0;
transition: border-color .25s ease, background .25s ease;
}
.nour-contact-form input:focus,
.nour-contact-form textarea:focus {
border-color: var(--rose-darker);
background: var(--white);
}
.nour-contact-form textarea {
resize: vertical;
}
.nour-submit-btn {
height: 54px;
padding: 0 2.6rem;
border-radius: 0;
background: var(--rose-darker);
color: var(--white);
border: 1px solid var(--rose-darker);
text-transform: uppercase;
letter-spacing: .22em;
font-size: .76rem;
margin-top: .6rem;
}
.nour-submit-btn:hover {
background: var(--ink);
border-color: var(--ink);
color: var(--white);
}
.contact-info-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.contact-info-item {
display: grid;
grid-template-columns: 48px 1fr;
gap: 1rem;
align-items: center;
padding: 1.15rem 0;
border-bottom: 1px solid rgba(43, 32, 31, .1);
color: var(--ink);
text-decoration: none;
}
.contact-info-item:hover {
color: var(--rose-darker);
}
.contact-info-icon {
width: 48px;
height: 48px;
border: 1px solid rgba(43, 32, 31, .14);
background: var(--blush);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--rose-darker);
font-size: 1.15rem;
}
.contact-info-item small {
display: block;
font-size: .75rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--ink-soft);
margin-bottom: .25rem;
font-weight: 500;
}
/* =========================================================
ABOUT PAGE
========================================================= */
.about-brand-hero {
background: var(--ivory);
padding: 3rem 0 3rem;
border-bottom: 1px solid rgba(43, 32, 31, .08);
}
.about-brand-wrap {
display: grid;
grid-template-columns: 42% 58%;
align-items: center;
gap: 4rem;
min-height: 650px;
}
.about-brand-copy {
padding-left: 1rem;
}
.about-brand-points {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
border-top: 1px solid rgba(43, 32, 31, .14);
padding-top: 1.5rem;
}
.about-brand-points div {
display: flex;
align-items: center;
gap: 1rem;
}
.about-brand-points span {
width: 48px;
height: 48px;
border-radius: 50%;
/* border: 1px solid rgba(43, 32, 31, .14); */
background: var(--script-pink);
color: var(--white);
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-size: 1.25rem;
}
.about-brand-points strong {
font-size: .875rem;
letter-spacing: .12em;
text-transform: uppercase;
font-weight: 500;
color: var(--ink);
}
.about-brand-visual {
position: relative;
min-height: 650px;
}
.about-brand-main-img {
position: absolute;
right: 0;
top: 0;
width: 78%;
height: 620px;
overflow: hidden;
background: var(--blush);
}
.about-brand-main-img img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
}
.about-brand-small-img {
position: absolute;
left: 0;
bottom: 45px;
width: 34%;
height: 310px;
overflow: hidden;
background: var(--blush);
border: 12px solid var(--ivory);
box-shadow: 0 20px 45px rgba(43, 32, 31, .12);
}
.about-brand-small-img img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
}
.about-brand-note {
position: absolute;
right: 8%;
bottom: 0;
/* width: 280px; */
background: var(--white);
padding: 1.4rem 1.5rem;
border: 1px solid rgba(43, 32, 31, .1);
box-shadow: 0 20px 45px rgba(43, 32, 31, .08);
}
.about-brand-note span {
display: block;
font-size: 1.7rem;
color: var(--rose-darker);
margin-bottom: .45rem;
text-transform: uppercase;
}
.about-brand-note p {
margin: 0;
letter-spacing: .18em;
text-transform: uppercase;
line-height: 1.7;
color: var(--ink-soft);
}
.about-intro-section {
background: var(--ivory);
}
.about-image-row {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
/* 1fr 1.25fr 1fr; */
gap: 1.5rem;
align-items: center;
margin-top: 4rem;
}
.about-image-card {
overflow: hidden;
background: var(--blush);
position: relative;
}
.about-image-card:before {
content: "";
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: linear-gradient(0deg, rgba(20, 14, 14, .75) 0%, transparent 35%);
}
.about-image-card img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
transition: transform .6s ease;
}
.about-image-card:hover img {
transform: scale(1.035);
}
/* .about-image-card-small {
height: 430px;
} */
/* .about-image-card-large {
height: 560px;
} */
.about-imgcard-detail {
position: absolute;
z-index: 2;
bottom: 0;
width: 100%;
text-align: center;
padding: 15px;
/* background-color: var(--blush); */
}
.about-imgcard-detail h4 {
color: var(--gold-soft);
font-family: var(--font-body);
letter-spacing: .12em;
font-weight: 400;
text-transform: uppercase;
}
.about-vision-section {
background: var(--ivory);
}
.about-values-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: rgb(244 220 226 / 80%);
margin-top: 30px;
border: 1px solid var(--blush);
}
.about-value-card {
background: var(--white);
padding: 2.3rem;
text-align: center;
}
.about-value-card span {
display: block;
font-family: var(--font-display);
font-size: calc(1.25rem + .8vw);
color: var(--rose-deep);
margin-bottom: 1.2rem;
}
.about-value-card h3 {
font-size: calc(1rem + .5vw);
letter-spacing: .1em;
text-transform: uppercase;
font-family: var(--font-body);
color: var(--rose-deep);
margin-bottom: .9rem;
font-weight: 400;
}
.about-value-card p {
color: var(--ink-soft);
line-height: 1.8;
margin: 0;
}
.about-appointment-section {
/* background: var(--white); */
padding: 5rem 0;
}
.about-appointment-box {
max-width: 860px;
margin: 0 auto;
text-align: center;
padding: 4rem 2rem;
background: linear-gradient(135deg, var(--ivory), var(--blush));
border: 1px solid rgba(43, 32, 31, .1);
}
/* .about-appointment-box h2 {
font-family: var(--font-display);
font-size: clamp(2rem, 4vw, 3.6rem);
font-weight: 400;
color: var(--ink);
margin-bottom: 1rem;
}
.about-appointment-box p {
max-width: 620px;
margin: 0 auto 2rem;
color: var(--ink-soft);
line-height: 1.9;
} */
.about-appointment-actions {
display: flex;
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
}
.about-outline-btn,
.about-solid-btn {
min-width: 180px;
height: 52px;
border-radius: 0;
display: inline-flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
letter-spacing: .2em;
font-size: .74rem;
}
.about-outline-btn {
border: 1px solid var(--rose-darker);
color: var(--rose-darker);
background: transparent;
}
.about-outline-btn:hover {
background: var(--rose-darker);
color: var(--white);
}
.about-solid-btn {
border: 1px solid var(--rose-darker);
background: var(--rose-darker);
color: var(--white);
}
.about-solid-btn:hover {
background: var(--ink);
border-color: var(--ink);
color: var(--white);
}
/* =========================================================
WISHLIST PAGE
========================================================= */
.wishlist-page-section {
background: var(--ivory);
min-height: 70vh;
}
.wishlist-page-head {
text-align: center;
max-width: 720px;
margin: 0 auto 3rem;
}
.wishlist-toolbar {
border: 1px solid rgba(217, 116, 141, 0.12);
padding: 0 1rem;
min-height: 64px;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 2.5rem;
font-size: .875rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ink-soft);
box-shadow: inset 0 0 40px rgb(255 217 226 / 35%), 0 8px 24px rgba(217, 116, 141, 0.12);
}
.wishlist-continue-link {
color: var(--ink);
text-decoration: underline;
text-underline-offset: 4px;
}
.wishlist-continue-link:hover {
color: var(--rose-darker);
}
.wishlist-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
}
.wishlist-card {
background: var(--white);
border: 1px solid rgba(43, 32, 31, .1);
position: relative;
transition: transform .28s ease, box-shadow .28s ease;
}
.wishlist-card:hover {
transform: translateY(-4px);
box-shadow: 0 18px 42px rgba(43, 32, 31, .08);
}
.wishlist-card-img {
display: block;
width: 100%;
aspect-ratio: 3 / 4.15;
object-fit: cover;
object-position: center top;
background: var(--blush);
}
.wishlist-remove-icon {
position: absolute;
top: 14px;
right: 14px;
width: 42px;
height: 42px;
border: 0;
border-radius: 50%;
background: var(--white);
color: var(--rose-darker);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.15rem;
z-index: 5;
box-shadow: 0 8px 22px rgba(43, 32, 31, .12);
}
.wishlist-remove-icon:hover {
background: var(--rose-darker);
color: var(--white);
}
.wishlist-card-body {
padding: 1.3rem 1.2rem 1.4rem;
text-align: center;
}
.wishlist-card-title {
font-size: .875rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ink);
line-height: 1.55;
margin-bottom: .45rem;
font-weight: 600;
/* min-height: 40px; */
}
.wishlist-card-price {
font-size: .875rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--rose-deep);
margin-bottom: .45rem;
font-weight: 500;
}
.wishlist-card-meta {
font-size: .875rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ink-soft);
margin-bottom: 1rem;
font-weight: 400;
}
.wishlist-size-select {
width: 100%;
height: 46px;
border: 1px solid rgba(43, 32, 31, .14);
background: var(--ivory);
color: var(--ink);
padding: 0 .85rem;
margin-bottom: .8rem;
outline: none;
border-radius: 0;
font-size: .78rem;
letter-spacing: .12em;
text-transform: uppercase;
}
.wishlist-add-cart-btn {
width: 100%;
height: 48px;
border: 1px solid var(--rose-darker);
background: var(--rose-darker);
color: var(--white);
text-transform: uppercase;
letter-spacing: .18em;
font-size: .72rem;
transition: all .25s ease;
}
.wishlist-add-cart-btn:hover {
background: var(--ink);
border-color: var(--ink);
color: var(--white);
}
.wishlist-empty {
min-height: 380px;
display: none;
align-items: center;
justify-content: center;
text-align: center;
background: var(--white);
border: 1px solid rgba(43, 32, 31, .1);
}
.wishlist-empty.show {
display: flex;
}
.wishlist-empty i {
font-size: 2.4rem;
color: var(--rose-darker);
margin-bottom: 1rem;
}
.wishlist-empty h2 {
font-family: var(--font-display);
font-size: clamp(1.8rem, 3vw, 3rem);
font-weight: 400;
color: var(--ink);
margin-bottom: .8rem;
}
.wishlist-empty p {
color: var(--ink-soft);
margin-bottom: 1.5rem;
}
.wishlist-empty-btn {
border-radius: 0;
background: var(--rose-darker);
color: var(--white);
border: 1px solid var(--rose-darker);
height: 50px;
padding: 0 2rem;
display: inline-flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
letter-spacing: .18em;
font-size: .72rem;
}
.wishlist-empty-btn:hover {
background: var(--ink);
border-color: var(--ink);
color: var(--white);
}
/* =========================================================
FAQ PAGE - NOURALCHEMYY
========================================================= */
.faq-hero-section {
background: linear-gradient(135deg, var(--ivory), var(--blush));
padding: 6.2rem 0 4.4rem;
border-bottom: 1px solid rgba(43, 32, 31, .08);
}
.faq-hero-content {
max-width: 760px;
margin: 0 auto;
text-align: center;
}
.faq-page-section {
background: var(--ivory);
}
.faq-accordion-wrap {
background: var(--white);
border: 1px solid rgba(43, 32, 31, .1);
padding: 2.4rem;
}
.faq-group-title {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.2rem;
}
.faq-group-title span {
width: 42px;
height: 42px;
background: var(--blush);
border: 1px solid rgba(43, 32, 31, .12);
color: var(--rose-darker);
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-size: 1rem;
flex: 0 0 auto;
}
.faq-group-title h2 {
font-family: var(--font-body);
font-size: .82rem;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--ink);
margin: 0;
font-weight: 500;
}
.nour-faq-accordion .accordion-item {
border: 0;
border-bottom: 1px solid rgba(43, 32, 31, .12);
background: transparent;
}
.nour-faq-accordion .accordion-button {
background: transparent;
color: var(--ink);
padding: 1.25rem 0;
box-shadow: none;
font-size: 1.15rem;
letter-spacing: .05em;
/* text-transform: uppercase; */
font-weight: 500;
line-height: 1.6;
}
.nour-faq-accordion .accordion-button:not(.collapsed) {
color: var(--rose-darker);
background: transparent;
box-shadow: none;
}
.nour-faq-accordion .accordion-button::after {
width: 1rem;
height: 1rem;
background-size: 1rem;
filter: none;
}
.nour-faq-accordion .accordion-body {
padding: 0 0 1.35rem;
color: var(--ink-soft);
line-height: 1.5;
}
/* =========================================================
LEGAL / POLICY PAGES
Privacy Policy, Terms & Condition, Return & Exchange
========================================================= */
.legal-page-section {
background: var(--ivory);
min-height: 70vh;
}
.legal-page-head {
max-width: 780px;
margin: 0 auto 3rem;
text-align: center;
}
.legal-content-card {
max-width: 980px;
margin: 0 auto;
background: var(--white);
border: 1px solid rgba(43, 32, 31, .1);
padding: 3rem;
box-shadow: 0 18px 42px rgba(43, 32, 31, .04);
}
.legal-content-block {
padding-bottom: 1.7rem;
margin-bottom: 1.7rem;
border-bottom: 1px solid rgba(43, 32, 31, .1);
}
.legal-content-block:last-child {
padding-bottom: 0;
margin-bottom: 0;
border-bottom: 0;
}
.legal-content-block h2 {
font-family: var(--font-body);
font-size: .84rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--ink);
font-weight: 500;
margin-bottom: .8rem;
}
.legal-content-block p {
color: var(--ink-soft);
line-height: 1.9;
margin-bottom: 0;
}
.legal-content-block a {
color: var(--rose-darker);
text-decoration: underline;
text-underline-offset: 4px;
}
.legal-content-block a:hover {
color: var(--ink);
}
/* =========================================================
LOGIN MODAL + ACCOUNT DASHBOARD
========================================================= */
.account-login-trigger {
background: transparent !important;
}
.login-modal .modal-dialog {
max-width: 480px;
}
.login-modal .modal-content {
border: 0;
border-radius: 0;
background: var(--white);
box-shadow: 0 24px 70px rgba(43, 32, 31, .18);
}
.login-close {
position: absolute;
top: 1.25rem;
right: 1.25rem;
z-index: 5;
box-shadow: none;
}
.login-modal-body {
padding: 3rem;
}
.login-step {
display: none;
}
.login-step.active {
display: block;
}
.login-head {
text-align: center;
margin-bottom: 2rem;
}
.google-login-btn,
.login-submit-btn,
.login-back-btn {
width: 100%;
height: 52px;
border-radius: 0;
text-transform: uppercase;
letter-spacing: .16em;
font-size: .74rem;
font-weight: 500;
transition: all .25s ease;
}
.google-login-btn {
border: 1px solid rgba(43, 32, 31, .16);
background: var(--white);
color: var(--ink);
display: inline-flex;
align-items: center;
justify-content: center;
gap: .7rem;
}
.google-login-btn:hover {
border-color: var(--rose-darker);
color: var(--rose-darker);
}
.login-divider {
text-align: center;
margin: 1.4rem 0;
position: relative;
}
.login-divider::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 1px;
background: rgba(43, 32, 31, .12);
}
.login-divider span {
position: relative;
background: var(--white);
padding: 0 1rem;
color: var(--ink-soft);
font-size: .78rem;
}
.login-form-group {
margin-bottom: 1.2rem;
}
.login-form-group label {
display: block;
font-size: .72rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--ink);
margin-bottom: .55rem;
}
.login-form-group input {
width: 100%;
height: 50px;
border: 1px solid rgba(43, 32, 31, .14);
background: var(--ivory);
padding: 0 1rem;
color: var(--ink);
outline: none;
}
.login-form-group input:focus {
border-color: var(--rose-darker);
background: var(--white);
}
.login-submit-btn {
border: 1px solid var(--rose-darker);
background: var(--rose-darker);
color: var(--white);
}
.login-submit-btn:hover {
background: var(--ink);
border-color: var(--ink);
}
.login-back-btn {
border: 0;
background: transparent;
color: var(--ink-soft);
margin-top: 1rem;
height: auto;
}
.login-back-btn:hover {
color: var(--rose-darker);
}
.login-demo-note {
font-size: .85rem;
color: var(--ink-soft);
text-align: center;
margin-bottom: 1rem;
}
/* Account Pages */
.account-page-section {
background: var(--ivory);
min-height: 70vh;
}
.account-page-head {
max-width: 760px;
margin: 0 auto 3rem;
text-align: center;
}
.account-dashboard-card,
.order-details-card {
background: var(--white);
border: 1px solid rgba(43, 32, 31, .1);
padding: 2.5rem;
box-shadow: 0 18px 42px rgba(43, 32, 31, .04);
}
.account-tabs {
display: flex;
border-bottom: 1px solid rgba(43, 32, 31, .12);
margin-bottom: 2rem;
}
.account-tabs .nav-link {
border: 0;
border-radius: 0;
background: transparent;
color: var(--ink-soft);
padding: 0 2rem 1rem 0;
text-transform: uppercase;
letter-spacing: .18em;
font-size: .78rem;
}
.account-tabs .nav-link.active {
color: var(--rose-darker);
background: transparent;
}
.account-section-title {
margin-bottom: 1.6rem;
}
.profile-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1px;
background: rgba(43, 32, 31, .12);
border: 1px solid rgba(43, 32, 31, .12);
}
.profile-info-box {
background: var(--white);
padding: 1.4rem;
}
.profile-info-box small,
.order-details-top small {
display: block;
font-size: .68rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--ink-soft);
margin-bottom: .4rem;
}
.profile-info-box strong,
.order-details-top strong {
color: var(--ink);
font-weight: 500;
}
.profile-action-row,
.order-details-actions {
display: flex;
gap: 1rem;
margin-top: 2rem;
flex-wrap: wrap;
}
.account-outline-btn,
.account-solid-btn {
min-width: 170px;
height: 50px;
border-radius: 0;
display: inline-flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
letter-spacing: .16em;
font-size: .74rem;
transition: all .25s ease;
}
.account-outline-btn {
border: 1px solid var(--rose-darker);
background: transparent;
color: var(--rose-darker);
}
.account-outline-btn:hover {
background: var(--rose-darker);
color: var(--white);
}
.account-solid-btn {
border: 1px solid var(--rose-darker);
background: var(--rose-darker);
color: var(--white);
}
.account-solid-btn:hover {
background: var(--ink);
border-color: var(--ink);
color: var(--white);
}
/* Orders */
.orders-table-wrap {
overflow-x: auto;
}
.orders-table {
width: 100%;
border-collapse: collapse;
min-width: 760px;
}
.orders-table th,
.orders-table td {
padding: 1rem;
border-bottom: 1px solid rgba(43, 32, 31, .1);
text-align: left;
color: var(--ink);
}
.orders-table th {
font-size: .7rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--ink-soft);
font-weight: 500;
}
.order-status {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 95px;
height: 30px;
font-size: .68rem;
letter-spacing: .12em;
text-transform: uppercase;
}
.order-status.delivered {
background: #e8f5ed;
color: #247045;
}
.order-status.processing {
background: var(--blush);
color: var(--rose-darker);
}
.order-status.shipped {
background: #fff4d8;
color: #8a6319;
}
.order-view-link {
color: var(--rose-darker);
text-decoration: underline;
text-underline-offset: 4px;
}
/* Order Details */
.order-details-top {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: rgba(43, 32, 31, .12);
border: 1px solid rgba(43, 32, 31, .12);
margin-bottom: 2rem;
}
.order-details-top>div {
background: var(--white);
padding: 1.25rem;
}
.order-product-box {
display: grid;
grid-template-columns: 130px 1fr;
gap: 1.5rem;
padding: 1.5rem;
border: 1px solid rgba(43, 32, 31, .12);
margin-bottom: 2rem;
}
.order-product-box img {
width: 130px;
height: 175px;
object-fit: cover;
object-position: center top;
background: var(--blush);
}
.order-product-box h2 {
font-family: var(--font-body);
font-size: .95rem;
letter-spacing: .14em;
text-transform: uppercase;
font-weight: 500;
margin-bottom: .6rem;
}
.order-product-box p {
color: var(--ink-soft);
margin-bottom: .4rem;
}
.order-product-box strong {
color: var(--rose-darker);
font-weight: 500;
}
.order-details-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.2rem;
}
.order-info-panel {
border: 1px solid rgba(43, 32, 31, .12);
padding: 1.5rem;
}
.order-info-panel h3 {
font-family: var(--font-body);
font-size: .78rem;
letter-spacing: .18em;
text-transform: uppercase;
font-weight: 500;
margin-bottom: 1rem;
}
.order-info-panel p {
color: var(--ink-soft);
margin-bottom: .45rem;
}
.summary-row {
display: flex;
justify-content: space-between;
gap: 1rem;
color: var(--ink-soft);
margin-bottom: .7rem;
}
.summary-row.total {
border-top: 1px solid rgba(43, 32, 31, .12);
padding-top: .9rem;
color: var(--ink);
}
/* Responsive */
@media (max-width: 991.98px) {
.order-details-top,
.order-details-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 767.98px) {
.login-modal-body,
.account-dashboard-card,
.order-details-card {
padding: 1.5rem;
}
.profile-grid {
grid-template-columns: 1fr;
}
.order-details-top,
.order-details-grid {
grid-template-columns: 1fr;
}
.order-product-box {
grid-template-columns: 105px 1fr;
gap: 1rem;
padding: 1rem;
}
.order-product-box img {
width: 105px;
height: 145px;
}
}
@media (max-width: 575.98px) {
.login-modal .modal-dialog {
margin: 1rem;
}
.profile-action-row,
.order-details-actions {
flex-direction: column;
}
.account-outline-btn,
.account-solid-btn {
width: 100%;
}
}
/* =========================================================
PROFILE EDIT + SHIPPING ADDRESS
========================================================= */
.profile-edit-form.d-none {
display: none;
}
.profile-edit-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.2rem;
}
.profile-form-group {
display: flex;
flex-direction: column;
}
.profile-form-full {
grid-column: 1 / -1;
}
.profile-form-group label {
font-size: .7rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--ink);
margin-bottom: .55rem;
font-weight: 500;
}
.profile-form-group input,
.profile-form-group textarea,
.shipping-address-edit textarea {
width: 100%;
border: 1px solid rgba(43, 32, 31, .14);
background: var(--ivory);
padding: .85rem 1rem;
color: var(--ink);
outline: none;
border-radius: 0;
font-size: .95rem;
line-height: 1.7;
}
.profile-form-group input:focus,
.profile-form-group textarea:focus,
.shipping-address-edit textarea:focus {
border-color: var(--rose-darker);
background: var(--white);
}
.profile-form-group input[readonly] {
background: rgba(43, 32, 31, .05);
color: var(--ink-soft);
cursor: not-allowed;
}
.shipping-address-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1px;
background: rgba(43, 32, 31, .12);
border: 1px solid rgba(43, 32, 31, .12);
}
.shipping-address-card {
background: var(--white);
padding: 1.4rem;
}
.shipping-address-card small,
.shipping-edit-card small {
display: block;
font-size: .68rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--ink-soft);
margin-bottom: .5rem;
}
.shipping-address-card p {
color: var(--ink);
line-height: 1.75;
margin: 0;
font-weight: 400;
}
.shipping-edit-card {
border: 1px solid rgba(43, 32, 31, .12);
padding: 1.2rem;
margin-bottom: 1rem;
background: var(--white);
}
.shipping-edit-card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: .8rem;
}
.shipping-delete-btn {
border: 0;
background: transparent;
color: var(--rose-darker);
font-size: .78rem;
letter-spacing: .12em;
text-transform: uppercase;
text-decoration: underline;
text-underline-offset: 4px;
padding: 0;
}
.shipping-delete-btn:hover {
color: var(--ink);
}
.add-shipping-btn {
margin-top: .5rem;
}
.order-items-section {
margin-bottom: 2rem;
}
.order-items-section .order-product-box {
margin-bottom: 1rem;
}
.order-items-section .order-product-box:last-child {
margin-bottom: 2rem;
}
/* Responsive */
@media (max-width: 767.98px) {
.profile-edit-grid,
.shipping-address-list {
grid-template-columns: 1fr;
}
}
/* =========================================================
APPOINTMENT MODAL
========================================================= */
.appointment-modal .modal-content {
border: 0;
border-radius: 0;
background: var(--white);
box-shadow: 0 24px 70px rgba(43, 32, 31, .18);
}
.appointment-close {
position: absolute;
top: 1.25rem;
right: 1.25rem;
z-index: 5;
box-shadow: none;
}
.appointment-modal-body {
padding: 3rem;
}
.appointment-head {
max-width: 680px;
margin: 0 auto 2rem;
text-align: center;
}
.appointment-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.1rem;
}
.appointment-form-full {
grid-column: 1 / -1;
}
.appointment-form-group label {
display: block;
font-size: .7rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--ink);
margin-bottom: .55rem;
font-weight: 500;
}
.appointment-form-group input,
.appointment-form-group select,
.appointment-form-group textarea {
width: 100%;
border: 1px solid rgba(43, 32, 31, .14);
background: var(--ivory);
padding: .85rem 1rem;
color: var(--ink);
outline: none;
border-radius: 0;
font-size: .95rem;
}
.appointment-form-group input,
.appointment-form-group select {
height: 50px;
}
.appointment-form-group textarea {
resize: none;
line-height: 1.7;
}
.appointment-form-group input:focus,
.appointment-form-group select:focus,
.appointment-form-group textarea:focus {
border-color: var(--rose-darker);
background: var(--white);
}
.appointment-submit-btn {
width: 100%;
height: 52px;
margin-top: 1.4rem;
border: 1px solid var(--rose-darker);
background: var(--rose-darker);
color: var(--white);
text-transform: uppercase;
letter-spacing: .16em;
font-size: .74rem;
font-weight: 500;
transition: all .25s ease;
}
.appointment-submit-btn:hover {
background: var(--ink);
border-color: var(--ink);
}
.appointment-success-msg {
display: none;
margin: 1rem 0 0;
text-align: center;
color: var(--rose-darker);
font-size: .9rem;
}
.appointment-success-msg.show {
display: block;
}
@media (max-width: 767.98px) {
.appointment-modal-body {
padding: 2rem 1.4rem;
}
.appointment-grid {
grid-template-columns: 1fr;
}
}
/* =========================================================
FOUNDER INTRO SECTION - ABOUT PAGE
========================================================= */
.founder-intro-section {
background: var(--ivory);
padding: 6rem 0;
}
.founder-intro-image,
.founder-hero-image,
.founder-lead-image {
position: relative;
overflow: hidden;
background: var(--blush);
}
.founder-intro-image img,
.founder-hero-image img,
.founder-lead-image img {
width: 100%;
max-height: 620px;
object-fit: cover;
object-position: center top;
display: block;
}
.founder-intro-image img {
width: 100%;
/* height: 100%; */
object-fit: cover;
object-position: center top;
transition: transform .6s ease;
}
.founder-intro-image:hover img {
transform: scale(1.035);
}
.founder-intro-copy {
max-width: 560px;
}
.founder-meet-btn {
margin-top: 1.2rem;
}
/* =========================================================
FOUNDER PAGE
========================================================= */
.founder-hero-section {
background: linear-gradient(135deg, var(--ivory), var(--blush));
padding: 3rem 0;
}
.founder-hero-copy {
max-width: 620px;
}
.founder-section-head {
max-width: 760px;
margin: 0 auto 3rem;
text-align: center;
}
.founder-story-section {
background: var(--ivory);
}
.founder-story-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: rgb(244 220 226 / 80%);
border: 1px solid var(--blush);
}
.founder-story-card {
background: var(--white);
padding: 2rem;
text-align: center;
}
.founder-story-card span {
display: inline-block;
font-family: var(--font-display);
font-size: 2.4rem;
color: var(--rose-darker);
margin-bottom: .8rem;
}
.founder-story-card h3,
.founder-work-card h3,
.founder-award-card h3 {
font-size: calc(1rem + .5vw);
letter-spacing: .1em;
text-transform: uppercase;
font-family: var(--font-body);
color: var(--rose-deep);
margin-bottom: .9rem;
font-weight: 400;
}
.founder-work-section {
background: var(--ivory);
}
.founder-work-card {
background: var(--white);
border: 1px solid var(--blush);
height: 100%;
}
.founder-work-card img {
width: 100%;
height: 430px;
object-fit: cover;
object-position: center top;
display: block;
}
.founder-work-card>div {
padding: 1.4rem;
}
.founder-lead-section {
background: var(--white);
}
.founder-lead-copy {
max-width: 560px;
}
.founder-lead-list {
list-style: none;
padding: 0;
margin: 1.5rem 0 0;
}
.founder-lead-list li {
position: relative;
padding-left: 1.4rem;
color: var(--ink);
line-height: 1.8;
margin-bottom: .65rem;
}
.founder-lead-list li::before {
content: "";
position: absolute;
left: 0;
top: .75rem;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--rose-darker);
}
.founder-awards-section {
background: var(--ivory);
}
.founder-award-card {
height: 100%;
background: var(--white);
border: 1px solid rgba(43, 32, 31, .1);
padding: 1rem;
text-align: center;
transition: all .3s ease;
}
.founder-award-card:hover {
transform: translateY(-4px);
box-shadow: 0 18px 38px rgba(43, 32, 31, .08);
}
.founder-award-card img {
width: 100%;
height: 260px;
object-fit: contain;
background: var(--ivory);
margin-bottom: 1.2rem;
padding: 1rem;
}
.founder-cta-section {
background: var(--white);
padding: 5rem 0;
}
.founder-cta-box {
max-width: 820px;
margin: 0 auto;
text-align: center;
background: linear-gradient(135deg, var(--ivory), var(--blush));
border: 1px solid rgba(43, 32, 31, .1);
padding: 4rem 2rem;
}
.founder-cta-box h2 {
font-family: var(--font-display);
font-size: clamp(2.3rem, 4vw, 4.5rem);
font-weight: 400;
line-height: 1.08;
color: var(--ink);
margin-bottom: 1rem;
}
.founder-cta-box p {
max-width: 620px;
margin: 0 auto 1.5rem;
color: var(--ink-soft);
line-height: 1.9;
}
/* Responsive */
@media (max-width: 991.98px) {
.founder-intro-section,
.founder-hero-section {
padding: 2rem 0;
}
.founder-intro-image img,
.founder-hero-image img,
.founder-lead-image img {
height: 520px;
}
.founder-story-grid {
grid-template-columns: 1fr;
}
.founder-intro-copy,
.founder-hero-copy,
.founder-lead-copy {
max-width: 100%;
}
}
@media (max-width: 767.98px) {
.founder-intro-section,
.founder-hero-section {
padding: 1.5rem 0;
}
.founder-intro-image img,
.founder-hero-image img,
.founder-lead-image img {
height: 430px;
}
.founder-work-card img {
height: 380px;
}
.founder-section-head {
margin-bottom: 2.2rem;
}
}
@media (max-width: 575.98px) {
.founder-intro-image img,
.founder-hero-image img,
.founder-lead-image img {
height: 360px;
}
.founder-story-card {
padding: 1.4rem;
}
.founder-work-card img {
height: 330px;
}
.founder-cta-box {
padding: 3rem 1.2rem;
}
}
/* =========================================================
AI DESIGN TO REAL PRODUCT SECTION
========================================================= */
.ai-product-section {
background: linear-gradient(135deg, var(--ivory), var(--blush));
/* padding: 6rem 0; */
overflow: hidden;
}
/* .ai-product-head {
max-width: 820px;
margin: 0 auto 4rem;
}
.ai-product-head h2 {
margin-bottom: 1rem;
}
.ai-product-head p {
color: var(--ink-soft);
line-height: 1.9;
margin-bottom: 0;
} */
/* .ai-product-copy {
max-width: 560px;
}
.ai-product-copy h3 {
font-family: var(--font-display);
font-size: clamp(2.2rem, 4vw, 4.3rem);
font-weight: 400;
line-height: 1.08;
color: var(--ink);
margin-bottom: 1rem;
}
.ai-product-copy>p {
color: var(--ink-soft);
line-height: 1.9;
margin-bottom: 1.6rem;
}
*/
.ai-process-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.ai-process-item {
display: grid;
grid-template-columns: 54px 1fr;
align-items: center;
gap: 1rem;
padding: 1.15rem;
background: rgba(255, 255, 255, .72);
border: 1px solid rgba(43, 32, 31, .1);
backdrop-filter: blur(8px);
}
.ai-process-item span {
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--script-pink);
color: var(--white);
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-size: 1.25rem;
box-shadow: 0 10px 24px rgba(43, 32, 31, .08);
}
.ai-process-item h4 {
font-family: var(--font-body);
font-size: .875rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ink);
font-weight: 500;
margin-bottom: .25rem;
}
.ai-process-item p {
color: var(--ink-soft);
line-height: 1.7;
margin-bottom: 0;
}
.ai-transform-card {
background: var(--white);
border: 1px solid rgba(43, 32, 31, .1);
padding: 1.2rem;
box-shadow: 0 24px 60px rgba(43, 32, 31, .08);
}
.ai-transform-grid {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;/* 1fr 70px 1fr; */
align-items: center;
gap: 1rem;
}
.ai-transform-image {
position: relative;
overflow: hidden;
background: var(--ivory);
/* min-height: 520px; */
}
.ai-transform-image img {
width: 100%;
/* height: 520px; */
object-fit: cover;
object-position: center top;
display: block;
transition: transform .6s ease;
}
.ai-transform-card:hover .ai-transform-image img {
transform: scale(1.035);
}
.ai-transform-image span {
position: absolute;
left: 1rem;
top: 1rem;
z-index: 2;
background: rgba(255, 255, 255, .88);
color: var(--ink);
padding: .55rem .8rem;
font-size: .68rem;
letter-spacing: .16em;
text-transform: uppercase;
font-weight: 500;
backdrop-filter: blur(8px);
}
.ai-transform-arrow {
position: absolute;
left: calc(50% - 35px);
width: 70px;
height: 70px;
z-index: 9;
border-radius: 50%;
background: var(--rose-darker);
color: var(--white);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.6rem;
margin: 0 auto;
box-shadow: 0 16px 34px rgba(140, 84, 104, .24);
}
.ai-transform-bottom {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: rgba(43, 32, 31, .1);
border: 1px solid rgba(43, 32, 31, .1);
margin-top: 1.2rem;
}
.ai-transform-bottom>div {
background: var(--white);
padding: 1rem;
}
.ai-transform-bottom span {
display: block;
font-size: .875rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ink-soft);
margin-bottom: .25rem;
}
.ai-transform-bottom strong {
color: var(--ink);
font-size: 1rem;
font-weight: 500;
line-height: 1.5;
}
/* Responsive */
@media (max-width: 991.98px) {
.ai-product-section {
padding: 5rem 0;
}
.ai-product-head {
margin-bottom: 3rem;
}
.ai-product-copy {
max-width: 100%;
}
.ai-transform-grid {
grid-template-columns: 1fr;
}
.ai-transform-arrow {
transform: rotate(90deg);
}
.ai-transform-image,
.ai-transform-image img {
height: 520px;
min-height: 520px;
}
}
@media (max-width: 767.98px) {
.ai-product-section {
padding: 4rem 0;
}
.ai-process-item {
grid-template-columns: 46px 1fr;
padding: 1rem;
}
.ai-process-item span {
width: 46px;
height: 46px;
font-size: 1.15rem;
}
.ai-transform-image,
.ai-transform-image img {
height: 430px;
min-height: 430px;
}
.ai-transform-bottom {
grid-template-columns: 1fr;
}
}
@media (max-width: 575.98px) {
.ai-product-head {
margin-bottom: 2.2rem;
}
.ai-transform-card {
padding: .85rem;
}
.ai-transform-image,
.ai-transform-image img {
height: 360px;
min-height: 360px;
}
.ai-transform-arrow {
width: 56px;
height: 56px;
font-size: 1.3rem;
}
}
/* =========================================================
RESPONSIVE MEDIA - ALL PAGES
Keep all responsive code here only
========================================================= */
/* Accessibility - keep this separate, not screen-size related */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.001ms !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
/* =========================================================
Below 1200px
========================================================= */
@media (max-width: 1199.98px) {
.wishlist-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* =========================================================
Below 992px - Tablet
========================================================= */
@media (max-width: 991.98px) {
.ceremony .cer-copy {
bottom: 1rem;
}
.about-brand-hero {
padding: 2rem 0 3rem;
}
.about-brand-wrap {
grid-template-columns: 1fr;
gap: 3rem;
min-height: auto;
}
.about-brand-copy {
max-width: 760px;
padding-left: 0;
text-align: center;
margin: 0 auto;
}
.about-brand-points {
margin: 0 auto;
text-align: left;
}
.about-brand-visual {
min-height: 620px;
}
.about-brand-main-img {
width: 78%;
height: 560px;
}
.about-brand-small-img {
width: 38%;
height: 280px;
}
.about-image-row {
grid-template-columns: 1fr;
}
.about-image-card-small,
.about-image-card-large {
height: 520px;
}
.about-values-grid {
grid-template-columns: 1fr;
}
.contact-form-card,
.contact-info-panel {
padding: 2rem;
}
.faq-accordion-wrap {
padding: 2rem;
}
}
/* =========================================================
Below 768px - Mobile Landscape
========================================================= */
@media (max-width: 767.98px) {
.ml-panel {
flex: 0 0 62%;
}
.ml-overlay {
position: static;
transform: none;
padding: 1rem;
}
.cer-tabs {
/* overflow-y: scroll; */
display: none;
}
.ceremony .cer-photo {
min-height: 300px;
}
.ceremony .cer-copy {
position: relative;
bottom: 0;
}
.ceremony .cer-copy h2 {
margin-bottom: .5rem;
}
.cer-tabs .nav-link {
padding: 1rem 1rem;
}
.wishlist-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.2rem;
}
.legal-content-card {
padding: 2rem;
}
}
/* =========================================================
Below 576px - Mobile
========================================================= */
@media (max-width: 575.98px) {
.brand-wrap {
left: 110px;
}
.siteHeader .brand-script,
footer .footer-logo {
font-size: 1.5rem;
}
.about-brand-hero {
padding: 2rem 0 3rem;
}
.about-brand-visual {
min-height: auto;
display: flex;
flex-direction: column;
gap: 1rem;
}
.about-brand-main-img,
.about-brand-small-img,
.about-brand-note {
position: static;
width: 100%;
}
.about-brand-main-img {
height: 460px;
}
.about-brand-small-img {
height: 360px;
border: 0;
box-shadow: none;
}
.about-brand-note {
box-shadow: none;
}
.about-image-card-small,
.about-image-card-large {
height: 430px;
}
.about-value-card {
padding: 1.7rem;
}
.about-appointment-box {
padding: 3rem 1.2rem;
}
.about-outline-btn,
.about-solid-btn {
width: 100%;
}
.nour-inner-hero {
padding: 4.5rem 0 3rem;
}
.contact-form-card,
.contact-info-panel {
padding: 1.4rem;
}
.contact-info-item {
grid-template-columns: 42px 1fr;
}
.contact-info-icon {
width: 42px;
height: 42px;
}
.wishlist-toolbar {
flex-direction: column;
justify-content: center;
gap: .5rem;
}
.wishlist-grid {
grid-template-columns: 1fr;
}
.wishlist-card-body {
padding: 1.1rem;
}
.faq-hero-section {
padding: 4.5rem 0 3rem;
}
.faq-accordion-wrap,
.faq-help-card {
padding: 1.35rem;
}
.faq-group-title {
align-items: flex-start;
}
.nour-faq-accordion .accordion-button {
font-size: .76rem;
letter-spacing: .1em;
padding: 1.1rem 0;
}
.legal-page-head {
margin-bottom: 2rem;
}
.legal-content-card {
padding: 1.35rem;
}
.legal-content-block {
padding-bottom: 1.35rem;
margin-bottom: 1.35rem;
}
.legal-content-block h2 {
font-size: .78rem;
letter-spacing: .14em;
}
}
/* =========================================================
ABOUT BRAND VISUAL SLIDER
========================================================= */
.about-brand-slider {
position: relative;
min-height: 620px;
}
.about-brand-slide-data {
display: none;
}
.about-brand-main-img {
position: relative;
overflow: hidden;
margin-left: 120px;
background: var(--blush);
}
.about-brand-main-img img {
width: 100%;
height: 620px;
object-fit: cover;
object-position: center top;
display: block;
transition: opacity .35s ease, transform .65s ease;
}
.about-brand-slider.is-changing .about-brand-main-img img {
opacity: .35;
transform: scale(1.015);
}
.about-brand-small-img {
position: absolute;
left: 0;
bottom: 84px;
width: 245px;
height: 205px;
padding: 8px;
border: 0;
background: var(--white);
box-shadow: 0 18px 42px rgba(43, 32, 31, .14);
overflow: hidden;
z-index: 3;
cursor: pointer;
transition: all .35s ease;
}
.about-brand-small-img:hover {
transform: translateY(-4px);
box-shadow: 0 24px 50px rgba(43, 32, 31, .18);
}
.about-brand-small-img span {
position: absolute;
left: 16px;
top: 16px;
z-index: 2;
background: rgba(255, 255, 255, .88);
color: var(--ink);
padding: .35rem .55rem;
font-size: .62rem;
letter-spacing: .16em;
text-transform: uppercase;
font-weight: 500;
}
.about-brand-small-img img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
display: block;
transition: opacity .35s ease, transform .55s ease;
}
.about-brand-small-img:hover img {
transform: scale(1.04);
}
.about-brand-note {
position: absolute;
right: 70px;
bottom: 48px;
z-index: 4;
min-width: 430px;
background: var(--white);
padding: 1.3rem 1.8rem;
border: 1px solid rgba(43, 32, 31, .08);
box-shadow: 0 14px 34px rgba(43, 32, 31, .08);
text-align: center;
}
.about-brand-note p {
margin: 0;
color: var(--rose-darker);
font-size: .875rem;
letter-spacing: .12em;
text-transform: uppercase;
line-height: 1.7;
font-weight: 500;
transition: opacity .3s ease;
}
.about-brand-slider.is-changing .about-brand-note p {
opacity: .25;
}
.about-brand-slider-controls {
position: absolute;
right: 70px;
bottom: -12px;
z-index: 5;
display: flex;
align-items: center;
gap: .8rem;
}
.about-brand-arrow {
width: 38px;
height: 38px;
border: 1px solid rgba(43, 32, 31, .14);
border-radius: 50%;
background: var(--white);
color: var(--ink);
display: inline-flex;
align-items: center;
justify-content: center;
transition: all .25s ease;
}
.about-brand-arrow:hover {
background: var(--rose-darker);
border-color: var(--rose-darker);
color: var(--white);
}
.about-brand-dots {
display: flex;
align-items: center;
gap: .45rem;
}
.about-brand-dot {
width: 7px;
height: 7px;
border: 0;
border-radius: 50%;
background: rgba(43, 32, 31, .25);
padding: 0;
transition: all .25s ease;
}
.about-brand-dot.active {
width: 22px;
border-radius: 30px;
background: var(--script-pink);
}
/* Responsive */
@media (max-width: 991.98px) {
.about-brand-slider {
min-height: auto;
}
.about-brand-main-img {
margin-left: 0;
}
.about-brand-main-img img {
height: 560px;
}
.about-brand-small-img {
width: 210px;
height: 175px;
bottom: 74px;
left: 18px;
}
.about-brand-note {
right: 18px;
bottom: 42px;
min-width: 360px;
}
.about-brand-slider-controls {
right: 18px;
}
}
@media (max-width: 767.98px) {
.about-brand-main-img img {
height: 480px;
}
.about-brand-small-img {
width: 165px;
height: 138px;
bottom: 92px;
}
.about-brand-note {
left: 18px;
right: 18px;
bottom: 34px;
min-width: auto;
padding: 1rem;
}
.about-brand-note p {
font-size: .72rem;
letter-spacing: .22em;
}
.about-brand-slider-controls {
position: static;
justify-content: center;
margin-top: 1.2rem;
}
}
@media (max-width: 575.98px) {
.about-brand-main-img img {
height: 390px;
}
.about-brand-small-img {
width: 128px;
height: 108px;
left: 12px;
bottom: 96px;
padding: 6px;
}
.about-brand-small-img span {
display: none;
}
.about-brand-note {
left: 12px;
right: 12px;
}
}
/****Moon Phase CSS****/
/* =========================================================
MOON PHASE CATEGORY SCROLL SECTION
========================================================= */
.moon-phase-scroll-section {
position: relative;
height: 300vh;
background: var(--ink);
}
.moon-phase-sticky {
position: sticky;
top: 0;
height: 100vh;
overflow: hidden;
background: var(--ink);
}
.moon-phase-slide {
position: absolute;
inset: 0;
opacity: 0;
visibility: hidden;
transition: opacity .85s ease, visibility .85s ease;
}
.moon-phase-slide.active {
opacity: 1;
visibility: visible;
z-index: 2;
}
.moon-phase-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transform: scale(1.04);
transition: transform 1.2s ease;
}
.moon-phase-slide.active .moon-phase-bg {
transform: scale(1);
}
.moon-phase-overlay {
position: absolute;
inset: 0;
background: linear-gradient( 90deg, rgba(20, 14, 12, .76) 0%, rgba(20, 14, 12, .48) 38%, rgba(20, 14, 12, .18) 72%, rgba(20, 14, 12, .42) 100%);
z-index: 1;
}
.moon-phase-slide .container-fluid {
position: relative;
z-index: 3;
height: 100%;
display: flex;
align-items: center;
}
.moon-phase-content {
max-width: 620px;
color: var(--white);
transform: translateY(28px);
opacity: 0;
transition: opacity .75s ease .12s, transform .75s ease .12s;
}
.moon-phase-slide.active .moon-phase-content {
opacity: 1;
transform: translateY(0);
}
.moon-phase-content .nour-kicker {
color: var(--gold-soft);
margin-bottom: 1rem;
}
.moon-phase-content h2 {
font-family: var(--font-display);
font-size: clamp(2.5rem, 3.5vw, 4.5rem);
/* clamp(3.3rem, 7vw, 7.4rem); */
font-weight: 400;
line-height: .96;
color: var(--white);
margin-bottom: 1.35rem;
}
.moon-phase-content p {
max-width: 560px;
color: rgba(255, 255, 255, .88);
font-size: 1.08rem;
line-height: 1.9;
margin-bottom: 1.6rem;
}
.moon-phase-content .btn-outline-brand {
border-color: rgba(255, 255, 255, .75);
color: var(--white);
background: rgba(255, 255, 255, .06);
backdrop-filter: blur(8px);
}
.moon-phase-content .btn-outline-brand:hover {
background: var(--white);
border-color: var(--white);
color: var(--ink);
}
/* Indicator */
.moon-phase-indicator {
position: absolute;
right: 4rem;
bottom: 3.5rem;
z-index: 8;
display: flex;
align-items: center;
gap: .85rem;
}
.moon-phase-dot {
min-width: 145px;
border: 1px solid rgba(255, 255, 255, .24);
background: rgba(255, 255, 255, .08);
color: rgba(255, 255, 255, .72);
padding: .85rem 1rem;
text-align: left;
text-transform: uppercase;
letter-spacing: .14em;
font-size: .7rem;
transition: all .3s ease;
backdrop-filter: blur(10px);
}
.moon-phase-dot span {
display: block;
font-family: var(--font-display);
font-size: 1.45rem;
letter-spacing: 0;
line-height: 1;
margin-bottom: .35rem;
color: rgba(255, 255, 255, .86);
}
.moon-phase-dot.active {
background: var(--white);
border-color: var(--white);
color: var(--ink);
}
.moon-phase-dot.active span {
color: var(--rose-darker);
}
/* Responsive */
@media (max-width: 991.98px) {
.moon-phase-indicator {
right: 2rem;
bottom: 2rem;
}
.moon-phase-dot {
min-width: 128px;
}
}
@media (max-width: 767.98px) {
.moon-phase-scroll-section {
height: 300vh;
}
.moon-phase-slide .container-fluid {
align-items: flex-end;
padding-bottom: 9rem;
}
.moon-phase-overlay {
background: linear-gradient( 180deg, rgba(20, 14, 12, .16) 0%, rgba(20, 14, 12, .38) 42%, rgba(20, 14, 12, .82) 100%);
}
.moon-phase-content {
max-width: 100%;
}
.moon-phase-content h2 {
font-size: clamp(3rem, 13vw, 5rem);
}
.moon-phase-content p {
font-size: .96rem;
}
.moon-phase-indicator {
left: 1rem;
right: 1rem;
bottom: 1.2rem;
overflow-x: auto;
padding-bottom: .3rem;
}
.moon-phase-dot {
min-width: 132px;
flex: 0 0 auto;
padding: .75rem .85rem;
}
}
@media (max-width: 575.98px) {
.moon-phase-slide .container-fluid {
padding-bottom: 8.2rem;
}
.moon-phase-content h2 {
margin-bottom: 1rem;
}
.moon-phase-content p {
line-height: 1.75;
margin-bottom: 1.2rem;
}
.moon-phase-dot {
min-width: 118px;
font-size: .62rem;
letter-spacing: .1em;
}
.moon-phase-dot span {
font-size: 1.2rem;
}
}