/* Base Reset */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
margin: 0;
padding: 0;
width: 100%;
max-width: 100%;
overflow-x: clip; /* clip = hide overflow but without extra layer */
}
:root {
/* Brand Colors */
--c9-pink: #FE6892;
--c9-fakepink: #ff608a;
--c9-purple: #B3ADFF;
--c9-darkpurple:rgb(153, 148, 219);
--c9-cream: #FFF2E6;
--c9-darkcream: #f6e6d8;
--c9-navy: #2F3655;
--c9-white: #FFFFFF;
--c9-yellow: #fff79a;
--c9-green: #b8f6bd;
--c9-orange: #feab68;
--c9-blue: #a9d8f6;
--c9-lpink: #fef1f5;
/* Utility shades */
--shadow-dark: rgba(47, 54, 85, 0.2);
--overlay-light: rgba(255, 242, 230, 0.8);
}
/* Snap sections */
section {
align-items: center;
justify-content: space-between;
padding: 0 8%;
}
html {
scroll-behavior: smooth;
height: 100%;
overflow-y: scroll;
width: 100vw;
}
/* Snap sections only on main page */
html.main-page section {
align-items: center;
justify-content: space-between;
}
body {
margin: 0;
padding: 0;
background-color: #ffd3a445;
color: #1E1E1E;
font-family: 'Bricolage Grotesque', sans-serif;
}
html, body {
margin: 0;
padding: 0;
height: 100%;
}
.wrapper {
max-width: 1900px;
margin-inline: auto;
padding-left: 0px;
padding-right: 0px;
}
/*buttons*/
.wave-button {
position: relative;
display: inline-block;
overflow: hidden;
margin-top: 20px;
background: #FE6892;
color: white;
font-size: 1.1rem;
line-height: 1;
border: 2px solid #2F3655;
border-radius: 50px;
font-weight: bold;
cursor: pointer;
padding: 0.8em 1.4em;
z-index: 0;
transition: color 0.3s ease, transform 0.3s ease; /* added transform transition */
text-decoration: none;
}
.wave-btn-small {
font-size: 0.8rem;
background: #FFF;
color: var(--c9-navy);
}
/* Liquid wave layer */
.wave-button::before {
content: "";
position: absolute;
bottom: -100%;
left: 0;
width: 200%;
height: 450%;
background: #FE6892;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: repeat-x;
background-size: 50% 100%;
z-index: -1;
transform: translateY(100%);
transition: bottom 0.8s ease, transform 2s ease;
}
/* Hover state */
.wave-button:hover,
.wave-button.touched {
color: white;
transform: scale(1.05);
}
.wave-button:hover::before,
.wave-button.touched::before {
bottom: 0;
transform: translateY(0);
animation: wave 2s infinite linear;
}
/* Wave scroll animation */
@keyframes wave {
0% { background-position-x: 0; }
100% { background-position-x: 50%; }
}
/*wave borders*/
/*TOP WAVE*/
.wave-separator {
position: relative;
width: 100%;
line-height: 0; /* Removes stray gaps */
overflow: hidden;
top:-1px;
}
.wave-separator svg {
display: block;
width: 100%;
height: 120px; /* Adjust for how tall you want the visible wave */
}
.wave-separator3 {
transform: translateY(20px);
position: relative;
width: 100%;
line-height: 0; /* Removes stray gaps */
overflow: hidden;
}
.wave-separator3 svg {
display: block;
width: 100%;
height: 120px; /* Adjust for how tall you want the visible wave */
}
/*BOTTOM WAVE*/
.wave-separator-bottom {
position: relative;
width: 100%;
line-height: 0; /* Removes stray gaps */
overflow: hidden;
}
.wave-separator-bottom svg {
display: block;
width: 100%;
height: 120px; /* Adjust for how tall you want the visible wave */
}
.wave-separator-bottom3 svg { background: var(--c9-navy); }
.wave-separator--blue{
background: var(--c9-navy); /* cream behind */
top: 0px !important;
}
.wave-separator--blue path{
fill: var(--c9-cream); /* your blue */
}
/* NAVIGATION */
.top-banner {
background: var(--c9-purple);
color: var(--c9-navy);
font-size: clamp(0.75rem, 1vw, 1rem);
font-weight: 500;
text-align: center;
padding: 0.6em 1em;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1100;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
}
.top-banner a {
text-decoration: none;
color: inherit;
display: inline-block;
line-height: normal;
}
/* NAVBAR CONTAINER */
.navbar {
position: fixed;
top: 40px; /* below top banner */
left: 0;
width: 100%;
background: var(--c9-cream);
z-index: 1000;
display: flex;
justify-content: center;
padding: 0rem 1rem;
}
/* INNER CONTAINER */
/* Default stays as is for larger screens */
.nav-container {
position: relative; /* ✅ allows absolute positioning inside */
display: flex;
align-items: center;
justify-content: center; /* ✅ logo is now centered mathematically */
width: 100%;
max-width: 1800px;
padding: 24px 48px;
margin: 0 1.5rem;
background: var(--c9-cream);
gap: 0; /* ✅ remove spacing because buttons float now */
}
/* Tighter, balanced layout for tablets and mobiles */
@media (max-width: 900px) {
.nav-container {
gap: 16px; /* ✅ reduce gaps between elements */
padding: 16px 20px; /* ✅ tighter padding */
}
.logo img {
max-height: 44px; /* ✅ smaller logo */
max-width: 140px;
}
.burger-menu {
font-size: 1.8rem; /* ✅ scale burger to match logo */
}
.basket-btn {
padding: 0.5em;
font-size: 1.1rem;
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 50%; /* ✅ makes it visually smaller */
}
.basket-btn .basket-text {
display: none; /* ✅ hide text on small screens */
}
}
/* Even more compact for very small devices */
@media (max-width: 600px) {
.nav-container {
padding: 12px 16px;
gap: 12px;
}
.logo img {
max-height: 38px;
max-width: 120px;
}
.burger-menu {
font-size: 1.6rem;
}
.basket-btn {
width: 38px;
height: 38px;
padding: 0.4em;
}
}
/* LOGO */
.logo img {
max-height: 70px;
max-width: 190px;
height: auto;
width: auto;
display: flex;
align-items: center;
}
/* Shrink logo on tablets and smaller screens */
@media (max-width: 900px) {
.logo img {
max-height: 48px; /* ✅ smaller logo height */
max-width: 140px; /* ✅ proportional width */
}
}
/* Shrink logo even further on very small screens */
@media (max-width: 600px) {
.logo img {
max-height: 40px;
max-width: 120px;
}
}
/* NAV MENU — HIDDEN BY DEFAULT */
nav {
position: fixed;
top: 140px; /* ✅ below top banner + navbar */
left: 0; /* ✅ anchored to left */
width: 330px; /* ✅ fixed width */
background: var(--c9-cream);
padding: 0;
max-height: 0;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
transition: max-height 0.35s ease, padding 0.35s ease;
z-index: 5000;
border-radius: 0 0 12px 0; /* ✅ optional: rounded bottom-right corner */
}
/* NAV MENU WHEN ACTIVE */
nav.active {
max-height: 500px;
padding: 1em 1.5em;
}
/* NAV LINKS */
nav a {
display: block; /* ✅ back to full width */
font-size: 1.1rem;
font-weight: 700;
color: #2F3655;
text-decoration: none;
padding: 0.6em 0;
position: relative; /* ✅ still needed for ::after positioning */
transition: transform 0.2s ease;
white-space: nowrap; /* optional — keep long labels on one line if needed */
}
/* Hover effect */
nav a:hover {
color: var(--c9-pink);
transform: translateX(6px) scale(1.05);
}
/* Cat head positioned relative to the text */
nav a::after {
content: "";
display: inline-block; /* ✅ only the icon is inline now */
width: 22px;
height: 22px;
margin-left: 8px; /* ✅ small gap after the text */
background: url("assets/CatBullet.svg") no-repeat center / contain;
opacity: 0;
transform: scale(0.7);
transition: all 0.25s ease;
vertical-align: middle; /* ✅ aligns neatly with the text baseline */
}
/* Show the cat on hover */
nav a:hover::after {
opacity: 1;
transform: scale(1);
}
/* BURGER MENU BUTTON */
.burger-menu {
position: absolute; /* ✅ float on left edge */
left: 1rem; /* ✅ matches navbar padding */
top: 50%;
transform: translateY(-50%);
display: block;
font-size: 2rem;
background: none;
border: none;
cursor: pointer;
color: var(--c9-pink);
z-index: 5000;
}
/* BASKET BUTTON */
.basket-btn {
position: absolute; /* ✅ float on right edge */
right: 1rem; /* ✅ matches navbar padding */
top: 50%;
transform: translateY(-50%);
background: #C5BFFF;
color: #2F3655;
font-weight: bold;
border: 2px solid #2F3655;
padding: 0.7em 1.5em;
border-radius: 999px;
font-size: 1rem;
cursor: pointer;
}
/* RESPONSIVE BASKET BUTTON ON SMALLER SCREENS */
@media (max-width: 900px) {
.nav-container {
gap: 1em;
padding: 1em;
}
nav {
gap: 1em;
}
.basket-btn {
padding: 0.5em;
font-size: 1.1rem;
display: flex;
align-items: center;
justify-content: center;
}
.basket-btn .basket-text {
display: none;
}
}
.buttons button {
font-size: 1rem;
padding: 0.8em 1.5em;
line-height: 1.4;
margin-right: 60px;
border: 2px solid #2F3655;
border-radius: 999px;
font-weight: bold;
cursor: pointer;
}
.buttons button:hover {
transform: scale(1.05);
transition: transform 0.2s ease, background-color 0.2s ease;
}
@keyframes glow-pulse {
0%, 100% {
box-shadow: 0 0 0px rgba(255, 79, 139, 0.4);
}
50% {
box-shadow: 0 0 12px 4px rgba(255, 79, 139, 0.8);
}
}
@keyframes glow-pulse2 {
0%, 100% {
box-shadow: 0 0 0px rgba(190, 79, 255, 0.4);
}
50% {
box-shadow: 0 0 12px 4px rgba(185, 79, 255, 0.8);
}
}
button.shop {
background: var(--c9-pink);
color: #fff;
border: none;
padding: 0.8em 1.5em;
border-radius: 999px;
font-size: 1.3rem;
cursor: pointer;
}
button.toys {
background:#B3ADFF; /* Main CTA color */
color:#2F3655;
border: none;
padding: 0.8em 1.5em;
border-radius: 999px;
font-size: 1.3rem;
cursor: pointer;
}
button.toys:hover {
animation: glow-pulse 2s ease-in-out infinite;
}
button.shop:hover {
animation: glow-pulse2 2s ease-in-out infinite;
}
/* Star Story Feature Card */
.story-of-the-month-link {
display: block;
margin: 2rem auto 1.8rem;
max-width: 900px; /* You can tweak this */
width: 100%;
text-decoration: none;
z-index: 5;
position: absolute;
bottom: -30px; /* or however far below the hero you want it */
left: 50%;
transform: translateX(-50%);
z-index: 5;
}
.story-of-the-month-card {
position: relative;
z-index: 5;
display: flex;
align-items: center;
gap: 1rem;
background: #FFF6F8;
border: 2px solid var(--c9-pink);
border-radius: 12px;
padding: 1rem 1.5rem;
overflow: hidden;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
transform: translateY(-35px);
/* Remove width: 80%; */
}
.stars-layer {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
}
.story-month-thumb {
width: 90px;
height: 90px;
border-radius: 12px;
object-fit: cover;
border: 3px solid var(--c9-purple);
z-index: 2;
}
.story-month-info {
z-index: 2;
flex: 1;
}
.story-month-badge {
font-size: 1.2rem;
color: var(--c9-pink);
margin-bottom: 0.2rem;
}
.story-month-title {
font-size: 1.1rem;
font-weight: bold;
color: var(--c9-navy);
margin-bottom: 0.3rem;
}
.story-month-excerpt {
font-size: 0.95rem;
color: #444;
margin-bottom: 0.4rem;
}
.story-month-link {
font-weight: bold;
color: var(--c9-pink);
text-decoration: none;
}
.story-month-link:hover {
text-decoration: underline;
}
/* Stars */
.star-particle {
position: absolute;
width: 12px;
height: 12px;
background: currentColor;
opacity: 0.25;
clip-path: polygon(
50% 0%,
61% 35%,
98% 35%,
68% 57%,
79% 91%,
50% 70%,
21% 91%,
32% 57%,
2% 35%,
39% 35%
); /* Star shape */
animation: twinkle 2s infinite ease-in-out;
}
@keyframes twinkle {
0%, 100% { transform: scale(0.8); opacity: 0.4; }
50% { transform: scale(1.4); opacity: 0.8; }
}
/*SECTION 2 - BENEFITS SECTION/*
/* Benefits Section */
.benefits-highlight {
position: relative;
background-color: #FE6892;
background-image: url('assets/wave-haikei.svg');
background-repeat: no-repeat;
background-position: bottom;
background-size: cover;
padding: 175px 5% 6em;
color: #1E1E1E;
}
.benefits-heading {
margin-top: 0;
color: #fff; /* optional, use white text for contrast on pink */
font-size: clamp(2rem, 6vw, 2.5rem);
font-weight: 800;
line-height: 1; /* 100% */
letter-spacing: -2.8px;
text-align: center;
margin: 0 auto;
text-shadow: 1px 1px 0 var(--c9-navy),
2px 2px 3px rgba(0, 0, 0, 0.5);
}
.benefit-icon img {
width: 100px;
height: auto;
margin-bottom: 0.5em;
border-radius: 50%;
background: #FFD3A4;
padding: 10px;
}
.benefit-title {
font-size: 1.3rem;
font-weight: bold;
}
.benefit-text {
font-size: 1.05rem;
color: #333;
line-height: 1.4;
}
.benefits-replacement-img {
flex: 1 1 320px;
max-width: 360px;
}
.benefits-replacement-img img {
width: 100%;
height: auto;
border-radius: 24px;
object-fit: contain;
display: block;
}
.benefits-replacement-text h3 {
font-size: 2rem;
margin-bottom: 0.5em;
text-shadow:
1px 1px 0 #fff,
2px 2px 3px rgba(0, 0, 0, 0.5);
}
.benefits-replacement-text p {
font-size: 1.1rem;
margin-bottom: 1em;
}
.benefits-list {
display: grid;
grid-template-columns: repeat(2, minmax(140px, 1fr));
gap: 0.6em 2em;
list-style: none;
padding-left: 0;
font-weight: bold;
color: #2F3655;
text-align: left;
}
.benefits-list li {
display: flex;
align-items: center; /* ✅ Vertical alignment */
gap: 0.6em; /* ✅ Space between icon and text */
padding-left: 1.3em; /* ✅ Indent the whole item */
line-height: 1.3; /* Optional: improves visual spacing */
}
.benefits-list .benefit-icon {
width: 24px;
height: 24px;
flex-shrink: 0;
}
@media (max-width: 768px) {
.benefits-replacement {
flex-direction: column;
text-align: center;
padding: 2em;
}
.benefits-list {
grid-template-columns: 1fr;
text-align: left;
margin-inline: auto;
}
}
.benefits-container {
display: flex;
gap: 1.3em;
align-items: flex-start;
flex-wrap: nowrap; /* ✅ Forces side-by-side layout */
justify-content: center;
padding-top: 2em;
max-width: 1400px;
margin-inline: auto;
min-height: 600px;
flex-direction: column;
padding-left: 24vw; /* reduced from 30vw */
padding-right: 2em;
margin: 0 auto;
}
.benefits-left {
position: absolute;
bottom: 0;
left: 3%;
z-index: 2;
width: 28vw; /* ⬆️ increase this from 20–24vw */
max-width: 420px; /* ⬆️ bump max width */
}
.benefits-cat-img {
width: 100%;
height: auto;
object-fit: contain;
display: block;
}
.benefits-right {
flex: 1 1 700px;
display: flex;
flex-direction: column;
text-align: left;
}
.benefits-replacement-text {
background: #FFF3E0;
border: 2px solid #2F3655;
border-radius: 24px;
padding: 1.5em;
}
.benefits-replacement-text h3 {
font-size: 2rem;
margin-bottom: 0.5em;
color: #2F3655;
}
.benefits-replacement-text p {
font-size: 1.1rem;
color: #2F3655;
}
.benefits-replacement-text-wrapper {
position: relative;
width: 100%;
max-width: 1400px;
margin-left: 60px;
margin-bottom: 40px;
}
.nutrition-badge {
position: absolute;
top: -32px; /* push it up */
right: -21px; /* push it outward */
width: 220px; /* large by default */
transform: rotate(32deg) scale(1.2); /* LEFT HIGHER than right */
z-index: 3;
pointer-events: none;
}
@media (max-width: 1024px) {
.nutrition-badge {
width: 160px;
top: -40px;
right: -40px;
transform: rotate(10deg) scale(1); /* slightly smaller */
}
}
@media (max-width: 600px) {
.nutrition-badge {
width: 120px;
top: -30px;
right: -20px;
transform: rotate(8deg) scale(0.9);
}
}
.benefit-buttons {
display: flex;
justify-content: center;
gap: 1em;
flex-wrap: wrap;
}
.benefit-buttons a {
padding: 0.5em 1em;
font-size: 0.85rem;
border-radius: 999px;
font-weight: bold;
text-decoration: none;
border: 2px solid #2F3655;
transition: transform 0.2s ease, background 0.2s ease;
}
.btn-buy {
background: #FE6892;
color: white;
}
.btn-info {
background: white;
color: #2F3655;
}
.benefit-buttons a:hover {
transform: scale(1.05);
}
@media (max-width: 960px) {
.benefits-container {
flex-direction: column;
align-items: center;
padding: 4em 1.5em;
}
.benefits-left {
margin-bottom: 2em;
}
.benefits-list {
grid-template-columns: 1fr;
text-align: left;
margin-inline: auto;
}
.benefits-replacement-text {
text-align: center;
}
}
.benefits-carousel {
display: flex;
gap: 0.5em;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding: 1.5rem;
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
padding: 1em 0;
margin: 0 auto;
max-width: 1200px;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE 10+ */
}
.benefits-carousel::-webkit-scrollbar {
display: none;
}
.benefits-carousel-wrapper {
position: relative;
display: flex;
align-items: center;
justify-content: center;
max-width: 1044px;
margin-inline: auto;
}
.benefit-card {
flex: 0 0 auto;
width: clamp(240px, 80vw, 300px); /* ✅ dynamic resizing */
min-width: 240px;
max-width: 100%;
background-color: #FFF3E0;
padding: 1.5em 1.2em;
border-radius: 20px;
text-align: center;
border: 2px solid #2F3655;
display: flex;
flex-direction: column;
gap: 1em;
}
@media (max-width: 1575px) {
.benefits-carousel {
scroll-snap-type: x mandatory;
scroll-padding: 0;
}
.benefit-card {
flex: 0 0 100%; /* Take full visible width of carousel */
width: 100%;
max-width: none;
min-width: 100%;
scroll-snap-align: center;
}
}
@media (max-width: 1110px) {
.benefits-container {
display: flex;
flex-direction: column;
align-items: center;
padding: 2em 1.5em;
}
.benefits-replacement-text-wrapper {
order: -1;
margin-bottom: 2em;
max-width: 600px;
width: 100%;
}
.benefits-flex-row {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: center;
flex-wrap: wrap;
gap: 2rem;
width: 100%;
max-width: 1200px;
margin: 0 auto 2em;
}
.benefits-left {
position: static;
width: 240px;
max-width: 280px;
flex-shrink: 0;
text-align: center;
}
.benefits-carousel-column {
flex: 1 1 500px;
min-width: 320px;
max-width: 600px;
}
.benefits-heading {
text-align: center;
}
}
@media (max-width: 960px) {
.benefits-flex-row {
flex-direction: column;
align-items: center;
gap: 2rem;
}
.benefits-left {
width: auto;
max-width: 260px;
margin: 0 auto;
}
.benefits-cat-img {
width: 100%;
height: auto;
max-width: 100%;
object-fit: contain;
}
.benefits-carousel-column {
width: 100%;
max-width: 100%;
}
.benefits-carousel-wrapper {
width: 100%;
}
.benefits-heading {
text-align: center;
}
}
@media (max-width: 768px) {
.benefits-flex-row {
flex-direction: column;
align-items: center;
}
.benefits-left,
.benefits-carousel-column {
width: 100%;
max-width: 100%;
}
.benefits-carousel-wrapper {
width: 100%;
}
}
/*SECTION 2.5 STYLING TOY SECTION*/
/* Pawprint animation */
.pawprints svg g[clip-path] {
opacity: 0;
}
.pawprints.active svg g[clip-path] {
animation: fadeIn 0.6s ease forwards;
animation-delay: calc((var(--i) - 1) * 0.1s);
animation-fill-mode: forwards;
}
@keyframes fadeIn {
0% { opacity: 0; transform: translateY(10px); }
100% { opacity: 0.7; transform: translateY(0); }
}
@keyframes reset {
0% { }
100% { }
}
/* Container for content inside toys-section */
/* Base toys section styling */
.toys-section {
position: relative;
overflow: hidden;
height: 100vh; /* ✅ Lock to 100vh */
padding: 0 0%; /* ✅ Remove huge padding causing push-down */
}
/* Position SVG as background */
.toys-section .pawprints {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0; /* Behind everything else */
}
.toys-section .pawprints svg {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Main toys-content container */
.toys-section .toys-content {
display: flex;
justify-content: space-between;
align-items: flex-start; /* ⬅ Fix: Align top of both panels */
height: 100%;
position: relative;
}
/* LEFT PANEL */
/* LEFT PANEL */
.toys-section .left-panel {
flex: 0 0 50%;
display: grid;
grid-template-columns: repeat(2, 1fr); /* 2 equal columns */
grid-template-rows: auto auto; /* 2 rows */
gap: 20px;
justify-items: center;
align-items: center;
padding-top: 200px;
}
/* Bubbles */
.toys-section .bubble img {
object-fit: cover;
transition: transform 0.3s ease;
}
/* Bubble positions/sizes */
.toys-section .bubble:nth-child(1) {
grid-column: span 2; /* ✅ This bubble spans across both columns */
justify-self: center; /* Center it in the row */
border-radius: 50%;
border: 8px solid #fff;
box-shadow:
0 0 0 8px var(--c9-purple),
0 8px 25px rgba(0, 0, 0, 0.2);
object-fit: cover;
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
cursor: pointer; /* Optional: shows clickable cursor */
}
.toys-section .bubble:nth-child(1) img {
width: 400px;
height: 400px;
}
.toys-section .bubble:nth-child(2) img{
width: 250px;
height: 250px;
border-radius: 50%;
border: 8px solid #fff;
box-shadow:
0 0 0 8px var(--c9-pink),
0 8px 25px rgba(0, 0, 0, 0.2);
object-fit: cover;
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
cursor: pointer; /* Optional: shows clickable cursor */
}
.toys-section .bubble:nth-child(3) img {
width: 250px;
height: 250px;
border-radius: 50%;
border: 8px solid #fff;
box-shadow:
0 0 0 8px var(--c9-yellow),
0 8px 25px rgba(0, 0, 0, 0.2);
object-fit: cover;
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
cursor: pointer; /* Optional: shows clickable cursor */
}
/* Circular styling */
.toys-section .bubble img {
border-radius: 50%;
object-fit: cover;
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
cursor: pointer; /* Optional: shows clickable cursor */
}
/* Hover: Grow + Pink Pulse */
.toys-section .bubble img:hover {
transform: scale(1.08); /* Grows slightly */
animation: pink-pulse 1s ease infinite; /* Pink pulsing effect */
}
/* Pink pulse animation */
@keyframes pink-pulse {
0% {
box-shadow: 0 0 0 8px var(--bubble-color), 0 8px 25px rgba(0, 0, 0, 0.2);
}
50% {
box-shadow: 0 0 15px 12px #FE6892, 0 8px 25px rgba(0, 0, 0, 0.2); /* Pulse pink glow */
}
100% {
box-shadow: 0 0 0 8px var(--bubble-color), 0 8px 25px rgba(0, 0, 0, 0.2);
}
}
/* RIGHT PANEL STYLING */
.toys-section .right-panel {
flex: 0 0 50%; /* Increase width to fill unused gap */
display: flex;
flex-direction: column;
justify-content: center; /* Vertically center content */
height: 100%;
width: 100%;
text-align: left;
gap: 20px; /* Even spacing between elements */
padding-top: 850px; /* Remove unnecessary push-down */
}
/* Heading styling */
.toys-section .right-panel h2 {
text-shadow:
1px 1px 0 #fff,
2px 2px 3px rgba(0, 0, 0, 0.5);
font-size: 4.6rem;
color: #2F3655;
margin-bottom: 20px;
line-height: 1;
}
.toys-section .right-panel p {
font-size: 1.6rem;
color: #2F3655;
margin-bottom: 20px;
line-height: 1;
}
/* Text box styling */
.toys-section .toys-info-box {
color: #2F3655;
padding: 20px 25px; /* Slightly more breathing room */
max-width: 90%; /* Stretch wider but leave slight edge padding */
width: 100%;
font-size: 1rem;
line-height: 1.2; /* Compact but readable */
}
/* Adjust cat image positioning */
.toys-section .right-panel .cat-image {
align-self: flex-start; /* Align flush left under text */
max-width: 60%;
margin-top: 10px;
}
.toy-shop {
background: #FE6892;
color: #FFF;
border: 2px solid #2F3655;
padding: 1em 2em;
border-radius: 999px;
font-weight: bolder;
cursor: pointer;
animation: glow-pulse 2s ease-in-out infinite;
font-size: 1.4rem;
}
.toys-button {
padding-left: 25px;
}
/* Responsive */
@media (max-width: 900px) {
.toys-section .toys-content {
flex-direction: column;
text-align: center;
}
.toys-section .left-panel {
flex-direction: row;
gap: 40px;
justify-content: center;
margin-bottom: 40px;
}
.toys-section .bubble.mid {
transform: translateX(0); /* Remove offset on smaller screens */
}
.toys-section .right-panel {
align-items: center;
}
}
/*SECTION 3 STYLING*/
.founder-section {
padding: 215px 5% 0;
background-color: var(--c9-cream); /* Now matches flow nicely */
background-image: url('assets/wave-haikei2.svg');
background-repeat: no-repeat;
background-position: bottom;
background-size: cover;
text-align: center;
color: #2F3655;
}
.founder-heading {
font-size: 2rem;
font-weight: bold;
margin-bottom: 1.5em;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.founder-cats {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 40px;
margin-bottom: 2em;
}
.founder-card {
background-color: var(--c9-cream);
border-radius: 24px;
box-shadow: 4px 4px 0px #2F3655;
border: 2px solid #2F3655;
padding: 2em;
max-width: 300px;
flex: 1 1 250px;
text-align: center;
cursor: pointer;
}
.founder-card img {
width: 80px;
height: auto;
border-radius: 50%;
margin-bottom: 1em;
background: #FFD3A4;
padding: 10px;
}
.founder-card h3 {
font-size: 1.1rem;
font-weight: bold;
margin-bottom: 0.5em;
}
.founder-card p {
font-size: 0.95rem;
line-height: 1.4;
color: #333;
}
/* Updated badge layout */
.founder-badge-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
margin-bottom: 4em;
flex-wrap: wrap;
}
/* Email signup box */
.founder-signup-box {
background-color: #C5BFFF;
padding: 2em;
border-radius: 20px;
margin: 0 auto;
box-shadow: 4px 4px 0px #2F3655;
text-align: center;
color: #2F3655;
}
.signup-title {
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 0.5em;
}
.signup-subtitle {
font-size: 1rem;
margin-bottom: 1.5em;
color: #333;
}
.signup-form {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
}
.signup-form input[type="email"] {
padding: 1em;
font-size: 1rem;
border-radius: 999px;
border: 2px solid #2F3655;
width: 60%;
min-width: 240px;
}
.signup-form button {
padding: 1em 2em;
background-color: #FE6892;
color: white;
font-weight: bold;
border: 2px solid #2F3655;
border-radius: 999px;
cursor: pointer;
box-shadow: 2px 2px 0px #2F3655;
}
.signup-form button:hover {
background-color: #e03a72;
}
/*FOOTER*/
.footer {
text-align: center;
}
.footer-top {
background: #fef1e0;
}
.footer-top video {
max-width: 100%;
height: auto;
display: block;
}
.footer-bottom {
background: #ff648c; /* your pink */
color: #fff;
padding: 2.5rem 2rem 2rem;
display: grid;
grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
align-items: center; /* center vertically on the row */
}
/* Left column: vertical nav, left-aligned */
.footer-nav {
position: static !important; /* override the fixed positioning */
max-height: none !important; /* no collapsing */
overflow: visible !important; /* allow links to display */
padding: 0; /* reset any weird padding */
background: transparent; /* don’t inherit top nav background */
display: flex; /* or block if you want vertical links */
flex-direction: column; /* vertical stack */
box-shadow: none;
text-align: left;
padding-top: 30px;
}
.footer-nav a {
color: #fff;
text-decoration: none;
font-weight: 700;
padding: 0px 0px 3px;
}
.footer-nav a:hover {
color: var(--c9-cream) !important;
}
.footer-dropdown-menu a:hover {
text-decoration: none;
color: var(--c9-pink) !important;
}
/* Center column: logo centered */
.footer-logo {
justify-self: center;
}
.footer-logo img {
width: 250px;
height: auto;
padding: 1rem;
object-fit: contain;
}
/* Copyright spans underneath, centered */
.footer-copy {
grid-column: 1 / -1; /* full width */
text-align: center;
font-size: .95rem;
opacity: .95;
color: var(--c9-cream);
text-decoration: none;
}
/* Copyright spans underneath, centered */
.footer-copy a {
text-decoration: underline;
color: inherit;
margin-right: 10px;
}
/* Footer dropdown */
.footer-dropdown {
position: relative;
display: inline-block;
}
.footer-dropdown-toggle {
font-weight: 700;
color: #fff;
text-decoration: none;
cursor: pointer;
display: block;
padding: 0.3em 0;
}
.footer-dropdown-menu {
display: none;
position: absolute;
bottom: 100%;
left: 0;
background: var(--c9-cream);
min-width: 200px;
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
padding: 0.5em 0;
z-index: 50;
}
/* When dropdown is open */
.footer-dropdown-menu.active {
display: block;
}
.footer-dropdown-menu a {
display: block;
padding: 0.6em 1em;
color: #2F3655;
text-decoration: none;
font-weight: 600;
}
.footer-dropdown-menu a:hover {
color: var(--c9-fakepink);
}
/* Show dropdown on hover (desktop) */
.footer-dropdown:hover .footer-dropdown-menu {
display: block;
}
@media (max-width: 780px) {
.footer-bottom {
display: flex;
flex-direction: column;
align-items: center; /* ✅ logo & copyright remain centered */
text-align: center;
padding: 1.5rem 1rem;
gap: 1rem;
position: relative;
}
/* Make the nav stick left while logo stays centered */
.footer-nav {
order: 1;
display: flex;
flex-direction: column;
gap: 0.4rem;
align-items: flex-start; /* ✅ forces left alignment */
text-align: left;
width: 100%; /* ✅ allows alignment shift */
padding-left: 2rem; /* ✅ push it properly to the left */
padding-top: 0;
gap: 0.1rem;
}
.footer-nav a {
font-size: 0.8em;
font-weight: 700;
text-decoration: none;
transition: color 0.2s ease;
}
.footer-nav a:hover {
color: var(--c9-cream);
text-decoration: underline;
}
/* Logo stays centered */
.footer-logo {
order: 0;
margin-bottom: 0.3rem;
display: flex;
justify-content: center;
transform: translatey(40px);
}
.footer-logo img {
width: 220px; /* ✅ slightly bigger for balance */
height: auto;
}
/* Copyright stays centered below */
.footer-copy {
order: 2;
font-size: 0.8rem;
opacity: 0.9;
text-align: center;
}
}
/* Extra small screens: compact even more */
@media (max-width: 480px) {
.footer-logo img {
width: 180px; /* ✅ slightly smaller here */
}
.footer-nav {
gap: 0.3rem; /* ✅ compress links more */
margin-left: -8px;
}
.footer-nav a {
font-size: 0.95rem;
}
.footer-copy {
font-size: 0.75rem;
}
}
@media (max-width: 800px) {
#footerVid {
width: auto !important;
}
.footer-top video {
max-width: 165%;
}
}
@media (max-width: 550px) {
#footerVid {
width: auto !important;
}
.footer-top video {
max-width: 260%;
transform: translateX(-400px);
}
}
/* tune these if you like */
:root {
--footerVideoH: 220px; /* height of the visible strip */
--scrollDuration: 30s; /* how fast the skyline crawls left */
}
.footer-marquee {
overflow: hidden;
width: 100%;
height: var(--footerVideoH);
background: var(--c9-cream, #FFF2E6); /* safe fallback */
}
/* two videos laid side-by-side in one long track */
.footer-video {
position: relative;
overflow: hidden;
width: 100%;
max-height: 400px; /* or your desired footer height */
background: var(--c9-cream, #FFF2E6);
}
#footerVid {
width: 100%;
height: 100%;
object-fit: cover; /* covers edge to edge */
object-position: center top; /* this keeps the cats/clouds visible at top */
}
:root{
--c-bg: #FFF2E6;
--c-text: #2F3655;
--c-navy: var(--c9-navy, #2F3655);
--c-accent: #6E60E6; /* used only for small accents */
--hero-max: 1200px;
}
/* SECTION WRAPPER */
.shop-header--spotlight{
position: relative;
background: var(--c-bg);
color: var(--c-text);
padding: 180px 20px 64px 20px; /* Top/Btm rhythm sized for hero */
box-shadow: 0 18px 24px -18px rgba(0,0,0,.22);
overflow: visible;
/* Background image (desktop/tablet) */
background-image: url("assets/jarline.jpg");
background-size: contain; /* ⟵ EXPLICIT */
background-position: center bottom; /* ⟵ EXPLICIT */
background-repeat: no-repeat;
}
.shop-header--spotlight.blog-header{
background-image: url("assets/blogpagebanner.jpg");
}
.shop-header--spotlight.toy-shop-banner{
background-image: url("assets/toybannerf.jpg");
}
/* LAYOUT: left column for pills, right column for copy */
.shop-heading-wrapper{
display: grid;
grid-template-columns: 1fr 1fr; /* left | right */
gap: 40px;
align-items: start;
max-width: var(--hero-max);
margin: 0 auto;
position: relative;
z-index: 1;
}
/* RIGHT: COPY (header sits on right) */
.shop-copy{
grid-column: 2; /* ⟵ put on the RIGHT */
text-align: left;
justify-self: end;
max-width: 640px; /* explicit comfortable width */
}
.shop-heading{
color: var(--c9-cream);
font-size: clamp(2rem, 4vw, 3.4rem);
font-weight: 800;
line-height: 1;
letter-spacing: -2.8px;
margin: 0 0 16px 0;
text-align: left;
padding-top: 40px;
}
.shop-subheading{
color: var(--c9-cream);
font-weight: 700;
font-size: clamp(1rem, 1vw, 1.15rem);
max-width: 60ch; /* ⟵ EXPLICIT */
margin: 0;
}
/* LEFT: PILLS – horizontal row below the copy (left column) */
.spotlight-strip{
grid-column: 2; /* ⟵ under the copy on the RIGHT */
display: grid;
grid-auto-flow: column; /* horizontal row */
gap: 14px;
justify-content: start;
align-items: start;
padding: 0;
width: 100%;
}
.cap{
display: grid;
gap: 2px;
padding: 14px 12px;
border-radius: 14px;
background:
radial-gradient(120% 120% at 70% 30%, rgba(255,176,190,.35), rgba(255,176,190,0)),
#ffffff;
box-shadow: 0 10px 20px -12px rgba(110,96,230,.25);
animation: glow 5.4s ease-in-out infinite;
min-width: 160px; /* ⟵ EXPLICIT pill width for readability */
}
.cap:nth-child(2){ animation-delay: .6s; }
.cap:nth-child(3){ animation-delay: 1.2s; }
.cap-title{
font-weight: 800;
color: var(--c-navy);
font-size: clamp(0.8rem, .8vw, 1rem);
letter-spacing: .2px;
}
/* MICRO-MOTION (unchanged) */
@keyframes glow {
0%,100% { box-shadow: 0 10px 20px -12px rgba(110,96,230,.25); }
50% { box-shadow: 0 14px 28px -12px rgba(110,96,230,.36); }
}
/* Background swap for small screens (portrait) */
@media (max-width:1080px){
.shop-header--spotlight{
background-image: url("assets/jarlinemobileleft.jpg");
padding: 20px 20px 0px 20px; /* Top/Btm rhythm sized for hero */
margin-top: 140px;
background-size: cover;
min-height: 45vh;
}
.shop-header--spotlight.blog-header {
background-image: url("assets/blogpagebannermob.jpg");
}
.shop-header--spotlight.toy-shop-banner {
background-image: url("assets/toybannermob-2.jpg");
}
.spotlight-strip {
gap: 5px;
}
.cap {
max-width: 110px;
min-width: 110px;
padding: 10px 6px;
text-align: center;
}
.cap-title {
font-size: 0.60rem;
letter-spacing: 0;
}
.shop-heading {
padding-top: 10px;
}
}
@media (min-width: 1080px) and (max-width: 1220px){
.shop-header--spotlight.supplement-shop {
min-height: 50vh;
padding: 182px 20px 56px 20px;
}
}
@media (max-width: 460px){
.shop-header--spotlight {
padding: 20px 10px 56px 10px;
}
}
/* SMALL SCREENS (portrait): stack – header top, pills row under, then background jarlinemob.png shows */
@media (max-width: 1080px){
.shop-heading-wrapper{
grid-template-columns: 1fr; /* single column */
gap: 20px;
}
.shop-copy{
grid-column: 1; /* reset to the single column */
max-width: 100%;
justify-self: start;
}
.spotlight-strip{
grid-column: 1; /* sits below the copy */
grid-auto-flow: column;
overflow-x: auto; /* scroll if tight */
-webkit-overflow-scrolling: touch;
}
.shop-subheading {
max-width: 45ch;
}
}
/* Motion reduction */
@media (prefers-reduced-motion: reduce){
.cap{ animation: none; }
}
/* =========================================
HOW TO USE BANNER (Supplements Shop)
Fun + colourful, but boutique clean
========================================= */
.howto-banner{
margin: 26px auto 10px;
max-width: 1200px;
padding: 0 18px;
}
.howto-inner{
border-radius: 26px;
border: 1px solid rgba(0,0,0,0.10);
background: #fff;
backdrop-filter: blur(7px);
box-shadow: 0 18px 40px rgba(0,0,0,0.08);
padding: 22px 22px 18px;
}
.howto-header{
text-align: center;
margin-bottom: 16px;
}
.howto-kicker{
display: inline-block;
font-weight: 700;
font-size: 0.95rem;
letter-spacing: 0.3px;
padding: 8px 12px;
border-radius: 999px;
background: rgba(255,255,255,0.70);
border: 1px solid rgba(0,0,0,0.10);
margin: 10px 0px;
}
.howto-header h2{
margin: 0;
font-size: clamp(1.35rem, 3.4vw, 2.1rem);
line-height: 1.15;
}
.howto-subtitle{
margin: 10px auto 0;
max-width: 780px;
font-size: clamp(0.95rem, 2.2vw, 1.1rem);
opacity: 0.86;
line-height: 1.45;
}
.howto-steps{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
margin-top: 18px;
}
.howto-step{
border-radius: 22px;
border: 2px solid rgba(49, 132, 21, 0.658);
padding: 14px 14px 12px;
box-shadow: 0 14px 26px rgba(0,0,0,0.06);
transition: transform 160ms ease, box-shadow 160ms ease;
text-align: center;
}
.howto-step:hover{
transform: translateY(-2px);
box-shadow: 0 18px 34px rgba(0,0,0,0.09);
}
.howto-icon{
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.35rem;
padding: 10px 12px;
border-radius: 16px;
border: 1px solid rgba(0,0,0,0.10);
background: rgba(255,255,255,0.75);
margin-bottom: 10px;
}
.howto-step h3{
margin: 0 0 8px;
font-size: 1.05rem;
}
.howto-step p{
margin: 0;
opacity: 0.86;
line-height: 1.45;
font-size: 0.98rem;
}
.howto-bottom{
margin-top: 14px;
text-align: center;
}
.howto-badges{
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin-bottom: 10px;
}
.howto-badge{
display: inline-block;
padding: 9px 12px;
border-radius: 999px;
border: 1px solid rgba(0,0,0,0.10);
background: rgba(255,255,255,0.70);
font-weight: 650;
font-size: 0.95rem;
opacity: 0.92;
transition: transform 160ms ease;
}
.howto-badge{
position: relative;
padding-left: 40px; /* room for tick */
}
.howto-badge::before{
content: "✓";
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
border-radius: 999px;
display: grid;
place-items: center;
font-weight: 900;
font-size: 0.9rem;
color: #0b7a2a;
background: rgba(35, 180, 90, 0.18);
border: 1px solid rgba(35, 180, 90, 0.35);
}
.howto-badge:hover{
transform: translateY(-1px);
}
.howto-micro{
margin: 0;
opacity: 0.80;
font-size: 0.95rem;
line-height: 1.45;
}
/* Responsive */
@media (max-width: 900px){
.howto-steps{
grid-template-columns: 1fr;
}
.howto-inner{
padding: 18px 16px 16px;
}
}
.toy-page-head {
padding-top: 30px;
}
.shop-category {
text-align: left;
justify-content: left;
}
.shop-category h1,
.shop-category p {
margin-left: 30px;
}
.product-grid {
display: grid;
gap: 40px;
justify-items: center;
padding: 2em 1em;
align-items: stretch;
}
@media (max-width: 690px) {
.product-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 691px) and (max-width: 1099px) {
.product-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1100px) {
.product-grid {
grid-template-columns: repeat(4, 1fr);
}
}
.product-card {
padding: 1.2em;
max-width: 300px;
text-align: center;
align-items: center;
transition: transform 0.2s ease;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
width: 100%;
box-sizing: border-box;
position: relative;
}
/* Top-right badge */
.handmade-badge{
position: absolute; /* NEW */
top: 5px; /* tweak */
right: 5px; /* tweak */
width: clamp(44px, 6vw, 70px); /* NEW: responsive */
height: clamp(44px, 6vw, 70px); /* NEW: responsive */
z-index: 5;
display: grid;
place-items: center;
pointer-events: none; /* badge won’t block clicks */
}
/* Keep the png contained */
.handmade-badge img{
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.product-card--hero .handmade-badge {
width: clamp(70px, 16vw, 140px); /* NEW: responsive */
height: clamp(70px, 16vw, 140px); /* NEW: responsive */
top: 20px;
right: 20px;
}
.toy-shop-subline {
color: var(--c9-fakepink);
}
.product-card h3,
.product-card p {
min-height: 3em;
}
.product-card h3 {
margin-top: 20px;
}
.quantity-row {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.price-quantity-row {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%; /* ensure it fills the card */
gap: 10px; /* optional spacing between elements */
margin: 10px 0 15px;
}
.product-price {
flex-shrink: 0; /* don't let price get squashed */
font-size: 1.2rem;
font-weight: bold;
color: #2F3655;
}
.quantity-select {
padding: 5px 10px;
font-size: 1rem;
border: 2px solid #2F3655;
border-radius: 4px;
background: #FFF2E6;
color: #2F3655;
cursor: pointer;
transition: all 0.2s ease;
flex-shrink: 0; /* prevent it from growing or shrinking */
min-width: 100px; /* give it room */
padding: 4px 8px;
font-size: 1rem;
}
.quantity-select:hover {
border-color: #8B5EFF;
background: #fceee1;
}
.quantity-select:focus {
outline: none;
border-color: #8B5EFF;
box-shadow: 0 0 4px rgba(139, 94, 255, 0.5);
}
.quantity-picker {
display: flex;
align-items: center;
border: 2px solid #2F3655;
border-radius: 4px;
background: #FFF2E6;
overflow: hidden;
flex-shrink: 0;
min-width: 120px;
}
@media (max-width: 600px) {
.quantity-picker{
max-width: 95px;
min-width: 0;
}
}
.qty-btn {
width: 36px;
height: 36px;
border: none;
background: #FFF2E6;
color: #2F3655;
font-size: 1.2rem;
font-weight: bold;
cursor: pointer;
}
.qty-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.quantity-input {
width: 48px;
height: 36px;
border: none;
border-left: 1px solid #2F3655;
border-right: 1px solid #2F3655;
background: #FFF2E6;
color: #2F3655;
text-align: center;
font-size: 1rem;
font-weight: 600;
padding: 0;
}
.image-scroll {
width: 100%;
overflow: hidden;
height: auto;
}
.image-track {
display: flex;
flex-direction: row;
position: relative;
z-index: 2; /* Ensure it's above .image-fill */
}
.image-scroll-link {
display: block;
position: relative;
overflow: hidden;
}
.image-fill {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 30%; /* 👈 Always fill 30% by default */
background-color: #FE6892;
transition: height 0.6s ease;
z-index: 1;
border-radius: 5%;
}
.pairs-with-text {
font-size: small;
text-align: center;
}
.product-card:hover .image-fill {
height: 100%;
}
.product-card:nth-child(1) .image-fill {
background-color: var(--c9-darkcream); /* Purple */
}
.product-card:nth-child(2) .image-fill {
background-color: var(--c9-green); /* Pink */
}
.product-card:nth-child(3) .image-fill {
background-color: var(--c9-orange); /* Yellow */
}
.product-card:nth-child(4) .image-fill {
background-color: var(--c9-pink); /* Teal */
}
.product-card:nth-child(5) .image-fill {
background-color: var(--c9-purple); /* Light Blue */
}
.product-card:nth-child(6) .image-fill {
background-color: var(--c9-blue); /* Soft Coral */
}
.product-card:nth-child(7) .image-fill {
background-color: var(--c9-purple); /* Mint Green */
}
/*toys page*/
.product-card--hero .image-fill {
background-color: var(--c9-darkcream) !important;
}
.product-wand {
background: rgb(224, 210, 248);
}
.product-wand .image-fill {
background-color: #C5C0FF !important;
}
.product-kicker {
background: rgb(224, 210, 248);
}
.product-kicker .image-fill {
background-color: #C5C0FF !important;
}
.product-brush {
background: rgb(253, 214, 190);
}
.product-brush .image-fill {
background-color: #e5b690 !important;
}
.product-bowl {
background: rgb(189, 221, 239);
}
.product-bowl .image-fill {
background-color: #a3d1ee !important;
}
.product-bed {
background: rgb(239, 189, 218);
}
.product-bed .image-fill {
background-color: #FF9BB7 !important;
}
.image-scroll-link img {
cursor: pointer;
}
.image-track img {
flex: 0 0 100%;
width: 100%;
height: auto;
object-fit: contain;
max-height: 250px;
}
.product-card:hover .image-track {
animation: scrollImages 3s steps(2) infinite;
}
.line {
border: none;
height: 3px;
margin: 8px 0;
width: 100%;
display: block;
}
.line-1 {
background-color: #B3ADFF;
}
.line-2 {
background-color: #FE6892;
}
.shop-button {
position: relative;
display: inline-block;
overflow: hidden;
margin-top: 20px;
background: #FE6892;
color: white;
font-size: 1rem;
line-height: 1.4;
border: 2px solid #2F3655;
border-radius: 50px;
font-weight: bold;
cursor: pointer;
padding: 0.6em 1.5em;
z-index: 0;
}
.shop-button::before {
transform: translateY(100%);
content: "";
position: absolute;
bottom: -100%;
left: 0;
width: 200%;
height: 450%;
background: #FE6892;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: repeat-x;
background-size: 50% 100%;
z-index: -1;
transition: bottom 0.8s ease;
}
.shop-button:hover::before {
transform: translateY(0);
transition: transform 2s ease;
bottom: 0;
animation: wave 2s infinite linear;
}
@keyframes wave {
0% { background-position-x: 0; }
100% { background-position-x: 50%; }
}
.shop-button:hover {
color: #2F3655;
}
@media (max-width: 840px) {
.image-scroll, .image-track img {
height: 180px;
}
.product-card {
padding: 1em;
}
.product-grid {
gap: 13px;
}
.shop-section {
padding: 0;
margin-top: 20px;
}
.product-card button {
font-size: 0.8rem;
}
}
@media (max-width: 1350px) {
.product-card .wave-button,
.product-card .shop-button {
font-size: 1rem;
padding: 0.8em 1.2em;
}
}
/* 👇 Mobile-first: limit to 2 cards per row and ensure no overflow */
@media (max-width: 600px) {
.product-grid {
grid-template-columns: repeat(2, 1fr); /* always 2 equal columns */
gap: 12px; /* smaller gap for mobile */
padding: 0.5em; /* reduce padding */
margin: 0; /* no extra margins */
box-sizing: border-box;
max-width: 100%;
overflow-x: hidden; /* prevent horizontal scroll */
}
.product-card {
width: 100%; /* fill the column perfectly */
max-width: 100%; /* don't exceed column width */
padding: 0.6em; /* less padding */
box-sizing: border-box; /* padding included in width */
}
body {
overflow-x: hidden; /* Enforce no side-scroll globally */
}
html {
width: 100vw;
overflow-x: hidden;
}
.image-scroll, .image-track img {
height: auto;
max-height: 180px;
}
.product-card h3 {
font-size: 1rem;
min-height: 3em;
}
.product-card p {
font-size: 0.85rem;
min-height: 3.5em;
}
.product-card .wave-button,
.product-card .shop-button {
font-size: 0.8rem;
padding: 0.6em 1em;
}
.price-quantity-row {
gap: 6px;
flex-wrap: wrap; /* allow wrapping on tiny widths */
justify-content: center;
}
.product-price {
font-size: 1rem;
}
.quantity-select {
min-width: auto;
max-width: 100%;
}
}
@media (max-width: 380px) {
.product-card .quantity-select {
font-size: 0.7rem;
padding: 4px 2px !important;
width: 60px !important;
max-width: 60px !important;
min-width: 0 !important; /* ✅ ADD THIS LINE */
}
}
/* =========================================================
SHOP PAGE: Boutique + Cute + Handmade
- Slim left nav (no big blank column feel)
- Hero wand card is mostly photo
- Badges feel cute/premium
- Subtle fun micro-interactions (not gimmicky)
========================================================= */
/* -----------------------------
Overall layout: slim sidebar
------------------------------ */
.shop-layout {
max-width: 1800px;
margin: 0 auto;
padding: 0 18px 46px;
display: grid;
grid-template-columns: 170px 1fr; /* slimmer than before */
gap: 18px; /* tighter */
}
/* Make the "blank column" feel less blank by visually anchoring it */
.shop-sidenav {
position: sticky;
top: 180px;
align-self: start;
left: 20px;
margin-top: 15px;
}
/* The nav itself is now compact and visually “contained”
so even if there is space below, it doesn’t feel empty. */
.sidenav-inner {
border: 1px solid rgba(0,0,0,0.10);
border-radius: 16px;
padding: 12px 10px;
background: rgba(255,255,255,0.55);
backdrop-filter: blur(6px);
box-shadow: 0 10px 26px rgba(0,0,0,0.06);
}
.sidenav-title {
margin: 0 0 8px;
font-weight: 700;
font-size: 0.95rem;
opacity: 0.85;
}
/* Main links as “pill buttons” (cute + premium) */
.sidenav-link {
display: block;
text-decoration: none;
color: var(--c9-cream);
font-weight: 700;
border-radius: 999px;
padding: 10px 10px;
margin: 8px 0 6px;
background: #FF9DB8;
border: 1px solid rgba(0,0,0,0.06);
transition: transform 160ms ease, background-color 160ms ease;
}
.sidenav-link:hover {
background: var(--c9-pink);
transform: translateY(-1px);
}
/* Sub-links are compact “dots” */
.sidenav-sublink {
display: block;
text-decoration: none;
color: #222;
opacity: 0.82;
border-radius: 12px;
padding: 7px 10px;
margin: 2px 0;
font-size: 0.9rem;
transition: background-color 160ms ease, transform 160ms ease;
}
.sidenav-sublink:hover {
background: rgba(0,0,0,0.04);
transform: translateY(-1px);
}
/* Optional: soft divider between nav blocks if you add
*/
.nav-divider {
border: none;
border-top: 1px dashed rgba(0,0,0,0.14);
margin: 10px 0;
opacity: 0.8;
}
/* -----------------------------
Section sublines + headings
------------------------------ */
.section-subline {
margin-top: 6px;
opacity: 0.70;
font-weight: bold;
}
.shop-subsection-title {
margin: 26px 0px 5px 30px;
font-size: 1.25rem;
}
/* -----------------------------
Product grid: toys + hero wand
------------------------------ */
/* Toys grid */
.product-grid--toys {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 22px;
/* Optional but recommended: helps cards pack neatly after a spanning hero */
grid-auto-flow: dense;
}
/* Hero wand kit spans the FIRST ROW across all columns */
.product-card--hero {
grid-column: 1 / -1; /* span full row */
grid-row: 1; /* only first row */
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
/* Boutique “handmade” feel */
border-radius: 22px;
border: 1px solid rgba(0,0,0,0.10);
background: rgba(255,255,255,0.58);
backdrop-filter: blur(6px);
}
.product-card--hero{
grid-column: 1 / -1 !important;
width: 100%;
max-width: none !important;
justify-self: stretch;
margin: 0 !important;
}
/* Make the hero mostly photo */
.product-card--hero .image-scroll {
/* no fixed heights; use aspect ratio to make it photo-dominant */
aspect-ratio: 16 / 10;
border-radius: 18px;
overflow: hidden;
margin: 12px 12px 0;
}
/* Regular cards (you likely already have styling; these are tasteful enhancements) */
.product-card {
position: relative;
transition: transform 170ms ease, box-shadow 170ms ease;
}
.product-card:hover {
transform: translateY(-2px);
}
/* Give a touch of “soft boutique” to cards if yours are plain */
.product-card:not(.product-card--hero) {
border-radius: 18px;
border: 1px solid rgba(0,0,0,0.08);
backdrop-filter: blur(6px);
box-shadow: 0 12px 26px rgba(0,0,0,0.06);
}
#shop-hero,
#toys, #wand-kit, #attachments, #kicker,
#accessories, #bowls, #brushes,
#bedding, #beds {
scroll-margin-top: 180px;
}
/* -----------------------------
Hero overlay: “Build me” vibe
(No HTML changes needed)
------------------------------ */
/* Ribbon becomes cute + obvious and sits over image */
.product-card--hero .hero-ribbon {
position: absolute;
top: 18px;
left: 18px;
padding: 10px 14px;
border-radius: 999px;
background: rgba(255,255,255,0.86);
border: 1px solid rgba(0,0,0,0.10);
box-shadow: 0 14px 28px rgba(0,0,0,0.12);
font-weight: 800;
font-size: 0.92rem;
letter-spacing: 0.2px;
}
/* Add cute “build me” sparkle without changing text */
.product-card--hero .hero-ribbon::after {
content: " ✨";
}
/* Badges row (now feels like a label strip) */
.product-badges {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 12px 12px 6px;
position: relative;
}
.product-badges .badge img {
display: block;
max-width: 26px;
height: auto;
}
.badge-text {
font-size: 0.92rem;
opacity: 0.86;
font-weight: 600;
}
/* Hero title + blurb tucked close, feels “product spotlight” */
.product-card--hero h3 {
margin: 10px 12px 0;
font-size: 1.35rem;
}
.product-card--hero .product-blurb {
margin: 8px 12px 0;
font-size: 1rem;
opacity: 0.86;
line-height: 1.4;
}
/* Turn the hero pills into a grid */
.product-card--hero .hero-pills{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr)); /* desktop: 3 in one row */
gap: 10px;
margin: 12px 12px 0;
align-items: stretch;
}
/* Pills: fill their grid cell (equal widths) */
.product-card--hero .hero-pill{
width: 100%; /* IMPORTANT: equal width via grid */
box-sizing: border-box;
padding: 9px 12px;
border-radius: 999px;
background: rgba(255,255,255,0.72);
border: 1px dashed rgba(0,0,0,0.18);
box-shadow: 0 10px 22px rgba(0,0,0,0.06);
font-size: 0.95rem;
font-weight: 650;
opacity: 0.95;
transition: transform 160ms ease;
display: flex;
align-items: center;
justify-content: center; /* centers text inside pill */
text-align: center;
}
/* Tablet + mobile: 1 per row, centered */
@media (max-width: 1020px){
.product-card--hero .hero-pills{
grid-template-columns: minmax(0, 520px); /* ⟵ EXPLICIT max pill column width */
justify-content: center; /* centers the single column */
}
}
.product-card--hero .hero-pill:hover {
transform: translateY(-1px);
}
/* Cute “build tokens” icons (no HTML edits) */
.product-card--hero .hero-pill:nth-child(1)::before { content: "🧩 "; }
.product-card--hero .hero-pill:nth-child(2)::before { content: "🔁 "; }
.product-card--hero .hero-pill:nth-child(3)::before { content: "🧵 "; }
/* Hero micro tip looks like a soft note */
.product-card--hero .hero-micro {
margin: 10px 12px 12px;
padding: 10px 12px;
border-radius: 16px;
background: var(--c9-lpink);
border: 1px solid rgba(0,0,0,0.06);
opacity: 0.88;
font-size: 0.95rem;
}
.hero-micro{
display: flex;
align-items: center;
gap: 12px;
}
/* Pink bubbly exclamation */
.micro-bubble{
flex: 0 0 34px; /* ⟵ EXPLICIT size */
width: 34px;
height: 34px;
border-radius: 999px;
display: grid;
place-items: center;
color: #fff;
font-weight: 900;
font-size: 1.1rem;
line-height: 1;
transform-origin: 50% 80%;
animation: microJiggle 2.6s ease-in-out infinite;
overflow: hidden;
}
.micro-bubble img{
display: block;
width: 18px; /* NEW: explicit size */
height: 35px; /* NEW: explicit size */
object-fit: contain;
}
/* Text wrapper so your
behaves nicely */
.micro-text{
display: block;
min-width: 0;
}
/* Subtle jiggle */
@keyframes microJiggle{
0%, 82%, 100% { transform: rotate(0deg) translateY(0); }
86% { transform: rotate(-8deg) translateY(-1px); }
90% { transform: rotate(8deg) translateY(0); }
94% { transform: rotate(-6deg) translateY(-1px); }
98% { transform: rotate(4deg) translateY(0); }
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
.micro-bubble{ animation: none; }
}
/* Make the pricing + button area sit “bottom-ish” naturally */
.product-card--hero hr.line-1,
.product-card--hero hr.line-2 {
margin-left: 12px;
margin-right: 12px;
max-width: 700px;
}
.product-card--hero .price-quantity-row {
margin-left: 12px;
margin-right: 12px;
max-width: 700px;
}
.product-card--hero .product-action-link {
margin-left: 12px;
margin-right: 12px;
margin-bottom: 10px;
display: inline-block;
}
/* -----------------------------
Product blurbs (regular cards)
------------------------------ */
.product-blurb {
margin: 8px 0 0;
font-size: 0.95rem;
opacity: 0.84;
line-height: 1.35;
min-height: 2.6em; /* aligns card heights without fixed heights */
}
/* On regular cards, keep blurbs inside their padding */
.product-card:not(.product-card--hero) .product-blurb {
padding: 0 12px;
}
/* Optional: tighten headings on regular cards */
.product-card:not(.product-card--hero) h3 {
padding: 0 12px;
}
/* Keep your internal structure neat */
.product-card:not(.product-card--hero) .price-quantity-row,
.product-card:not(.product-card--hero) hr.line-1,
.product-card:not(.product-card--hero) hr.line-2,
.product-card:not(.product-card--hero) .product-action-link {
margin-left: 12px;
margin-right: 12px;
}
/* -----------------------------
Subtle “cute” hover delights
------------------------------ */
.product-card:hover .badge img {
transform: rotate(-2deg) scale(1.03);
transition: transform 160ms ease;
}
/* Gently brighten image on hover */
.product-card:hover .image-scroll img {
filter: brightness(1.03);
transition: filter 180ms ease;
}
/* -----------------------------
Responsive behaviour
------------------------------ */
@media (max-width: 1020px) {
.shop-layout {
grid-template-columns: 1fr;
}
.shop-sidenav {
position: static;
}
}
@media (max-width: 560px) {
.atelier-pill {
font-size: 0.92rem;
}
}
@media (max-width: 1020px) {
.product-grid--toys {
grid-template-columns: repeat(2, 1fr);
}
.product-card--hero {
grid-column: 1 / -1; /* full width across 2 cols */
grid-row: 1;
}
}
@media (max-width: 560px) {
.product-card--hero {
grid-column: 1 / -1; /* full width in 1 col */
grid-row: 1;
}
}
.footer-section {
width: 100vw;
position: relative;
left: 50%;
transform: translateX(-50%);
background: #FE6892;
min-height: auto;
padding-top: 20px !important;
/* 👇 Add a wave at the top */
background-image: url('assets/footer-wave.svg'); /* your wave SVG path */
background-repeat: no-repeat;
background-position: top center;
background-size: cover; /* or contain, depending on your SVG */
}
.footer-section .footer {
margin-top:0;
padding: 10px
}
/*PRODUCT PAGES*/
/* ========================================
Cloud9 Feline - Product Page Styles
======================================== */
/* === Product Page Styles === */
.product-wrapper {
scroll-snap-type: y mandatory;
scroll-behavior: smooth;
}
.cat-print-banner svg {
margin-top: 180px;
}
.cat-print-banner svg g[clip-path] {
opacity: 0;
}
.cat-print-banner.active svg g[clip-path] {
animation: fadeInOut 1.8s ease-in-out forwards; /* Reduced duration for quicker fade cycle */
animation-delay: calc((var(--i) - 1) * 0.25s); /* Reduced delay for tighter paw spacing */
}
@keyframes fadeInOut {
0% { opacity: 0; }
15% { opacity: 0.8; }
40% { opacity: 0.8; }
60% { opacity: 0.5; }
80% { opacity: 0.2; }
100% { opacity: 0; }
}
.product-hero {
height: calc(100vh - 230px); /* Ensures full viewport height minus header/banner */
}
.product-section {
height: auto !important; /* Allows it to grow if content stacks or wraps */
display: flex;
flex-direction: column;
justify-content: space-between;
}
.product-hero,
.product-section {
margin: 0;
padding: 0px 20px;
padding-top:0 !important;
}
.product-hero-inner {
display: flex;
width: 100%;
flex: 1;
align-items: center;
justify-content: center;
gap: 2rem;
flex-wrap: wrap; /* Allow wrapping instead of forcing shrink */
max-height: none; /* Remove height limit so it doesn't cut off */
}
/* Mobile / Tablet (stacked layout) */
@media (max-width: 1024px) {
.product-section {
height: auto; /* Allow it to expand naturally */
min-height: calc(100vh - 230px); /* Ensure it’s at least full height */
padding-bottom: 2rem; /* Extra breathing space for stacked layout */
}
.product-hero-inner {
flex-direction: column; /* Stack carousel + text */
max-height: none; /* Remove height constraint */
}
}
.carousel-wrapper {
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-basis: 65%;
}
.back-to-shop-link {
display: inline-flex;
align-items: center;
gap: 6px; /* Space between arrow and text */
font-size: clamp(0.65rem, 2.5vw, 1.1rem);
font-weight: bolder;
color: var(--c9-pink);
text-decoration: none;
margin-left: 0; /* Reset default */
margin-bottom: 0.8rem; /* Space below it */
position: relative;
transition: color 0.25s ease, transform 0.2s ease;
padding-left: 15px;
}
.back-to-shop-link::before {
font-size: 1.1rem;
display: inline-block;
transform: translateX(0);
transition: transform 0.25s ease;
}
.back-to-shop-link:hover {
color: var(--c9-purple);
transform: translateX(-2px); /* Slight shift left for hover feedback */
}
.back-to-shop-link:hover::before {
transform: translateX(-4px); /* Arrow glides slightly on hover */
}
.back-to-shop-link::after {
content: "";
position: absolute;
bottom: -3px;
left: 0;
width: 0%;
height: 2px;
background: var(--c9-purple);
transition: width 0.3s ease;
}
.back-to-shop-link:hover::after {
width: 100%; /* Underline animation */
}
/*right panel product info*/
/* Ingredient badges row */
.ingredient-badges {
display: flex;
justify-content: center; /* center above heading */
gap: 20px; /* spacing between badges */
margin-bottom: 1rem;
margin-top: 2rem;
}
.ingredient-badges img {
width: 135px;
height: auto;
}
/* Benefit tick points */
.benefit-points {
margin-bottom: 1rem;
text-align: left; /* align ticks neatly */
font-size: 1.1rem;
color: #2F3655;
}
.benefit-points p {
display: flex;
align-items: center;
margin: 0.3em 0;
}
.benefit-points .tick {
color: #4CAF50; /* green tick */
font-weight: bold;
margin-right: 8px;
font-size: 1.2rem;
}
.product-info {
flex: 1;
max-width: 600px;
flex-basis: 35%;
margin-left: 2rem;
}
.product-info h1 {
font-size: 2.5rem;
font-weight: 800;
margin-bottom: .5em;
color: #2F3655;
line-height: 1;
}
.product-subtext {
margin-bottom: 0.8em;
font-size: 1.3rem !important;
margin-top: 18px;
color: var(--c9-pink) !important;
font-weight: bolder;
}
.product-subtext2 {
margin-bottom: 0.8em;
font-size: 1.3rem !important;
margin-top: 18px;
color: var(--c9-navy) !important;
font-weight: bolder;
}
.product-info p {
font-size: 1.2rem;
line-height: 1.5;
color: #333;
}
.product-info .price {
font-weight: bold;
font-size: 1.3rem;
color: #2F3655;
}
.shop-button {
background: #FE6892;
color: white;
font-size: 1.1rem;
line-height: 1.4;
border: 2px solid #2F3655;
border-radius: 999px;
font-weight: bold;
cursor: pointer;
padding: 0.7em 1.6em;
box-shadow: 3px 3px 0 #2F3655;
transition: transform 0.2s ease;
}
.shop-button:hover {
transform: scale(1.05);
}
.basket-info {
display:flex;
justify-content: space-between;
align-items: center;
}
.basket-info a {
text-decoration: none;
font-size: 1.2rem;
line-height: 1.4;
color: #333;
}
.arrow-icon {
margin-left: 6px;
vertical-align: middle;
}
#product-section {
scroll-margin-top: 160px; /* match or slightly exceed header height */
}
/* Product Hero: split background */
/* Left Panel (Orange) */
.carousel-panel {
flex: 1; /* Fill half the screen */
display: flex;
justify-content: center;
align-items: center;
margin: 0;
}
.product-info-panel {
flex: 1; /* Right half of page */
background: var(--c9-cream);
display: flex;
justify-content: center;
align-items: center;
}
/* Center content in each panel */
.carousel, .product-info {
text-align: center;
}
/*SECTION 2 PRODUCT INFORMATION*/
.product-section{
height: calc(100vh - 250px); /* Ensures full viewport height minus header/banner */
}
.benefits-tabs {
display: flex;
position: relative;
background: var(--c9-cream);
padding-bottom: 2rem; /* NEW: Creates extra space below tab area */
flex-direction: row; /* Just to be explicit */
}
.tab-border-wrapper {
padding: 0;
display: block; /* ✅ Full-width container */
width: 100%; /* ✅ Matches the above section's width */
box-sizing: border-box; /* ✅ Ensures border is included in width calc */
}
/* Layout container: full width split */
.tabs-layout {
display: flex;
width: 100%;
}
/* LEFT TABS: sticky and flush to page edge */
.vertical-tabs {
top: 120px;
width: 220px;
display: flex;
flex-direction: column;
align-self: stretch; /* Force full stretch in flex container */
}
/* Buttons */
.vertical-tabs .tab-btn {
background: none;
border: none;
padding: 1rem;
text-align: left;
font-weight: bolder;
font-size: 1.3rem;
color: var(--c9-navy);
cursor: pointer;
transition: background 0.2s;
margin-bottom: 20px;
}
.vertical-tabs .tab-btn.active {
background: #FE6892;
color: var(--c9-cream);
}
.vertical-tabs .tab-btn:hover {
background: var(--c9-purple);
}
/* RIGHT CONTENT */
.tab-contents {
flex: 1;
}
.tab-content {
display: none;
padding-right: 1rem;
}
.tab-content.active {
display: block;
}
/* Optional: Style scrollbars (Webkit browsers: Chrome, Edge, Safari) */
.tab-content::-webkit-scrollbar {
width: 8px;
}
.tab-content::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 4px;
}
.tab-content::-webkit-scrollbar-thumb:hover {
background: #aaa;
}
.tab-content h2 {
font-size: 2rem;
margin-bottom: 1rem; /* Space below headers */
color: #2F3655;
}
.tab-content h3 {
margin-top: 1.5rem;
margin-bottom: 1rem; /* Space below headers */
font-size: 1.4rem;
color: #2F3655;
}
.tab-content li {
font-size: 1.1rem;
line-height: 1.5;
color: #2F3655;
margin-top: 0.8rem;
}
.tab-image {
margin-top: 1.5rem;
}
.feeding-header h2{
color: var(--c9-cream);
font-size: clamp(1.9rem, 4.2vw, 4.5rem);
font-weight: 800;
line-height: 1;
letter-spacing: -2.8px;
text-align: center;
margin: 35px auto 18px;
}
.feeding-header p {
margin: 0;
font-weight: 600;
color: var(--c9-cream);
}
.tab-flex {
display: flex;
align-items: flex-start;
justify-content: center; /* Center both elements */
gap: 4rem; /* Control even spacing between text and image */
max-width: 1000px; /* Optional: limit total width to keep them closer */
margin: 0 auto; /* Center the flex container within its parent */
}
.tab-text {
flex: 1;
}
.tab-text h3 {
color: var(--c9-pink);
font-size: 1.9rem;
margin-top: 15px;
}
.intro-text {
font-size: clamp(0.95rem, 2.5vw, 1.2rem);
color: var(--c9-navy);
text-align: center;
padding: 0% 3%;
}
.tab-subtext {
color:var(--c9-pink);
font-size: 1.15rem;
font-weight: bolder;
margin-top: 1rem;
margin-bottom: 1rem;
}
.serving-sizes {
display: flex;
gap: 2rem; /* Space between the two boxes */
margin-top: 1rem;
}
.serving-box {
flex: 1; /* Equal width for both boxes */
text-align: center; /* Center image and text */
background: c9; /* Optional: add a subtle background */
padding: 1rem;
border-radius: 8px; /* Rounded corners */
}
.serving-icon {
width: 80px;
height: 80px;
object-fit: contain;
margin-bottom: 0.5rem;
}
.faq-item {
margin-bottom: 1.2rem;
}
.faq-item h3 {
font-size: 1.2rem;
color: var(--c9-pink);
margin-bottom: 0.4rem;
}
.faq-item p {
font-size: 1rem;
color: var(--c9-navy);
margin: 0;
font-weight: bolder;
}
.feeding-tips {
margin-top: 1.5rem;
}
.feeding-tips h3 {
color: var(--c9-pink);
font-size: 1.9rem;
margin-bottom: 0.75rem;
}
.feeding-tips p {
font-size: 1.15rem;
line-height: 1.6;
color: #2F3655;
margin-bottom: 0.8rem;
}
.training-note p {
margin-bottom: 1rem;
font-size: clamp(0.65rem, 2.5vw, 0.95rem);
color: #2F3655;
}
.tab-image img {
width: 350px;
height: 350px;
object-fit: cover;
border-radius: 50%;
border: 4px solid #FE6892;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
/* Container for vertically stacked images on the right */
.tab-image-wrapper {
display: flex;
flex-direction: column;
align-items: center; /* center image horizontally inside the column */
gap: 3rem; /* controls spacing between images */
margin-left: 2rem;
}
/* Image styling (already exists, but in case it's not global) */
.tab-image-wrapper img {
width: 250px;
height: 250px;
object-fit: cover;
border-radius: 50%;
border: 4px solid #FE6892;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.tab-image-wrapper .second-img {
margin-top: 12rem; /* Increase or decrease this value as needed */
}
@media (max-width: 768px) {
.tab-flex {
flex-direction: column;
align-items: center;
}
.tab-image-wrapper {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: 2rem;
margin-left: 0;
margin-top: 2rem;
}
.tab-image-wrapper img {
width: 180px;
height: 180px;
}
}
/*Show more */
/* Collapsible wrapper to limit content height */
.collapsible-wrapper {
max-height: 200px; /* Adjust to control how much is initially shown */
overflow: hidden;
transition: max-height 0.5s ease;
}
.tab-content.expanded .collapsible-wrapper {
max-height: 2000px; /* Big enough to reveal everything */
}
.expand-toggle {
display: block;
margin: 1.5rem auto 0;
background: var(--c9-pink);
color: #fff;
font-weight: bold;
padding: 0.75rem 1.5rem;
border: none;
border-radius: 999px;
cursor: pointer;
transition: background 0.3s ease;
}
.expand-toggle:hover {
background: var(--c9-purple);
}
/* Section: Success + Toys */
.success-toys {
background: var(--c9-cream);
padding: 0;
margin: 0px 20px 0px 20px;
}
/* Success Story Styling */
.success-stories {
background: var(--c9-pink);
padding: 3rem 9rem 2rem;
position: relative;
margin: 0;
width: 100%; /* Ensure full width like the above section */
box-sizing: border-box;
color: var(--c9-cream);
}
.success-content {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1200px;
margin: 0 auto;
gap: 3rem;
}
.success-text {
flex: 1;
}
.success-text h2 {
font-size: clamp(2.5rem, 6vw, 2rem);
margin-bottom: 1rem;
color: var(--c9-cream);
text-shadow:
1px 1px 0 #fff,
2px 2px 3px rgba(0, 0, 0, 0.5);
}
.success-text p {
font-size: 1.1rem;
font-weight: bold;
margin-bottom: 0.8rem;
color: var(--c9-navy);
}
.success-btn {
display: inline-block;
margin-top: 1rem;
background: var(--c9-purple);
color: var(--c9-navy);
font-weight: bolder;
padding: 0.75rem 1.5rem;
border-radius: 30px;
text-decoration: none;
box-shadow: 2px 2px 0 #2F3655;
border: 2px solid #2F3655;
transition: background 0.2s ease;
}
.success-btn:hover {
transform: scale(1.05);
}
.success-image {
display: flex;
flex-direction: column;
align-items: center;
}
.success-image img {
width: 250px;
height: 250px;
object-fit: cover;
border-radius: 50%;
border: 4px solid var(--c9-cream);
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.image-caption {
margin-top: 0.8rem;
font-size: 1.5rem;
font-weight: bold;
color: var(--c9-cream);
text-align: center;
}
/* Responsive */
@media (max-width: 768px) {
.success-content {
flex-direction: column;
text-align: center;
}
.success-image {
margin-top: 1.5rem;
}
}
.wave-separator2 {
position: absolute;
top: 0;
left: 0;
width: 100%; /* Changed from 100vw to avoid scrollbar overhang */
height: 120px;
z-index: 2;
pointer-events: none;
transform: translateY(-101px);
}
.wave-separator2 svg {
display: block;
width: 100%;
height: 100%;
}
/* Toys Carousel */
/* Toys Section */
.toys-featured {
text-align: center;
margin-top: 3rem;
padding: 2rem 0;
}
.toys-featured h2 {
font-size: clamp(2.5rem, 6vw, 3.5rem);
letter-spacing: -3.5px;
color: var(--c9-navy);
margin-bottom: 2rem;
text-shadow:
1px 1px 0 #fff,
2px 2px 3px rgba(0, 0, 0, 0.5);
}
.toy-carousel-wrapper {
position: relative;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 40px;
}
.toy-carousel-track {
overflow: visible;
display: flex;
gap: 3rem; /* Increased spacing between cards */
transition: transform 0.4s ease-in-out;
}
/* Outer Card with Glow */
.toy-card {
width: 220px;
height: 220px;
overflow: visible; /* Stop clipping glow */
border-radius: 999px;
box-shadow: none;
flex-shrink: 0;
position: relative;
}
/* Inner Image Container (clipped) */
.toy-image {
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 999px;
}
.toy-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Glow Effects */
.pink-glow {
animation: pink-card-glow 2s infinite ease-in-out;
}
.purple-glow {
animation: purple-card-glow 2s infinite ease-in-out;
}
.yellow-glow {
animation: yellow-card-glow 2s infinite ease-in-out;
}
@keyframes pink-card-glow {
0%, 100% {
box-shadow: 0 0 0px rgba(255, 79, 139, 0.4);
}
50% {
box-shadow: 0 0 14px 4px rgba(255, 79, 139, 0.8);
}
}
@keyframes purple-card-glow {
0%, 100% {
box-shadow: 0 0 0px rgba(185, 79, 255, 0.4);
}
50% {
box-shadow: 0 0 14px 4px rgba(185, 79, 255, 0.8);
}
}
@keyframes yellow-card-glow {
0%, 100% {
box-shadow: 0 0 0px rgba(255, 223, 79, 0.4);
}
50% {
box-shadow: 0 0 14px 4px rgba(255, 193, 79, 0.8);
}
}
/* Buttons under Carousel */
.toy-buttons {
margin: 2rem;
display: flex;
justify-content: center;
gap: 1.5rem;
}
/* Mobile Responsiveness */
@media (max-width: 768px) {
.toy-carousel-track {
overflow-x: auto;
scroll-snap-type: x mandatory;
}
.toy-card {
scroll-snap-align: center;
}
.carousel-btn {
display: none;
}
.toy-buttons {
flex-direction: column;
gap: 1rem;
}
}
/* ================================
Blog & Success Stories Section
================================= */
/* Blog page */
.blog-hero .shop-heading-wrapper{
display: grid;
grid-template-columns: minmax(320px, 1.05fr) minmax(260px, 0.95fr);
align-items: center;
gap: clamp(24px, 4vw, 48px);
padding: clamp(2.8rem, 5vw, 4rem) 8%;
}
.blog-hero .shop-hero-visual{
display: flex;
justify-content: center;
}
.blog-hero-img{
width: min(420px, 42vw);
max-width: 520px;
height: auto;
filter: drop-shadow(0 10px 40px rgba(47,54,85,0.2));
}
.blog-topics{
gap: 10px;
flex-wrap: wrap;
}
.blog-topics .cap{
background: var(--c9-cream);
border-color: var(--c9-navy);
color: var(--c9-navy);
}
.blog-shell{
max-width: 1180px;
margin: 0 auto;
padding: 0 24px;
}
.blog-featured{
background: var(--c9-cream);
padding: clamp(2.5rem, 5vw, 3.75rem) 0;
}
.featured-article{
display: grid;
grid-template-columns: minmax(280px, 0.95fr) minmax(320px, 1.05fr);
gap: clamp(20px, 4vw, 32px);
padding: clamp(1.8rem, 4vw, 2.4rem);
background: #fff;
border: 2px solid var(--c9-navy);
border-radius: 18px;
box-shadow: 6px 8px 0 rgba(47,54,85,0.18);
}
.featured-image img{
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 14px;
}
.eyebrow{
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 0.78rem;
color: var(--c9-navy);
margin-bottom: 6px;
}
.featured-copy h2{
margin: 0 0 10px;
font-size: clamp(1.4rem, 2.5vw, 1.85rem);
line-height: 1.15;
}
.featured-summary{
margin: 0 0 14px;
color: #1f2437;
line-height: 1.6;
}
.article-tags{
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.tag{
display: inline-flex;
align-items: center;
padding: 6px 12px;
border-radius: 999px;
background: var(--c9-lpink);
border: 1px solid var(--c9-navy);
font-size: 0.85rem;
font-weight: 600;
color: var(--c9-navy);
}
.text-link{
color: var(--c9-navy);
font-weight: 700;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
}
.text-link::after{
content: "→";
font-size: 0.9em;
}
.blog-grid-section{
padding: clamp(2.5rem, 5vw, 3.75rem) 0 clamp(2rem, 4vw, 3rem);
background: #fff;
}
.section-heading{
text-align: center;
margin-bottom: 26px;
}
.section-heading h2{
margin: 0 0 6px;
font-size: clamp(1.6rem, 3vw, 2.2rem);
}
.section-heading p{
margin: 0;
color: #2f3655;
}
.article-grid{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.article-card{
background: var(--c9-cream);
border: 1.5px solid var(--c9-navy);
border-radius: 16px;
padding: 12px;
display: flex;
flex-direction: column;
gap: 10px;
box-shadow: 5px 6px 0 rgba(47,54,85,0.12);
}
.article-card,
.featured-article{
display:block;
color:inherit;
text-decoration:none;
}
.article-card:hover,
.featured-article:hover{
transform: translateY(-2px);
}
.article-card:focus-visible,
.featured-article:focus-visible{
outline: 3px solid #fe6892;
outline-offset: 6px;
border-radius: 18px;
}
/* Make the whole featured article clickable, without changing layout */
.featured-link{
display: grid; /* keep the same two-column layout */
grid-template-columns: 1fr 1fr;/* adjust if your original differs */
gap: 24px; /* match your spacing */
align-items: center;
text-decoration: none;
color: inherit;
}
@media (max-width: 900px) {
.featured-link {
grid-template-columns:1fr;
}
}
/* Stop huge images */
.featured-image img{
width: 100%;
height: 100%;
max-height: 340px; /* keeps it from becoming massive */
object-fit: cover;
display: block;
border-radius: 16px; /* match your style if needed */
}
/* Nice focus state */
.featured-link:focus-visible{
outline: 3px solid #fe6892;
outline-offset: 6px;
border-radius: 18px;
}
.article-card img{
width: 100%;
height: 140px;
object-fit: cover;
border-radius: 12px;
}
.article-copy h3{
margin: 0;
font-size: 1.05rem;
line-height: 1.25;
}
.article-copy p{
margin: 4px 0 8px;
color: #2f3655;
line-height: 1.45;
}
.review-cta{
padding: clamp(2.2rem, 5vw, 3.4rem) 0;
background: var(--c9-pink);
}
.review-card{
background: #fff;
border: 2px solid var(--c9-navy);
border-radius: 18px;
padding: clamp(1.6rem, 4vw, 2.2rem);
box-shadow: 6px 8px 0 rgba(47,54,85,0.18);
}
.review-copy h3{
margin: 0 0 8px;
font-size: clamp(1.4rem, 3vw, 1.9rem);
}
.review-copy p{
margin: 0 0 14px;
color: #2f3655;
}
.review-actions{
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
@media (max-width: 1024px){
.blog-hero .shop-heading-wrapper{
grid-template-columns: 1fr;
text-align: center;
}
.blog-hero .shop-copy{
align-items: center;
}
.blog-hero .shop-heading{
margin-bottom: 8px;
}
.blog-topics{
justify-content: center;
}
.featured-article{
grid-template-columns: 1fr;
}
}
@media (max-width: 900px){
.article-grid{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 640px){
.blog-shell{
padding: 0 14px;
}
.article-grid{
grid-template-columns: 1fr;
}
.article-card{
padding: 10px;
gap: 8px;
}
.article-card img{
height: 140px;
}
.article-copy h3{
font-size: 1rem;
}
.article-copy p{
font-size: 0.92rem;
line-height: 1.4;
}
.featured-article{
padding: 14px;
gap: 14px;
}
.featured-image img{
height: 220px;
}
}
/* Fade in animation */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
#blog.best-sellers {
background: linear-gradient( to bottom, var(--c9-pink) 0%, var(--c9-cream) 25%, var(--c9-cream) 75%, var(--c9-cream) 100%);
}
#blog.best-sellers h2 {
margin-top: 25px;
color: var(--c9-navy);
}
#best-sellers-cta {
padding-top:30px;
}
#best-sellers-cta h2 {
/* Your styles here */
text-align: center;
font-size: clamp(2.5rem, 6vw, 4.5rem);
color: var(--c9-pink);
font-weight: 800;
letter-spacing: -4.5px;
margin-bottom: 30px;
text-shadow:
1px 1px 0 #fff,
2px 2px 3px rgba(0, 0, 0, 0.5);
}
#best-sellers-cta img {
height: 240px;
width: auto;
margin-bottom: 0;
}
#best-sellers-cta .founder-cats {
gap: 90px;
}
#best-sellers-cta .founder-card {
padding: 0.2em;
}
#best-sellers-cta .founder-card:hover {
transform: scale(1.1);
cursor: pointer;
}
.best-sellers-tags{
padding: 15px;
height: 180px;
align-content: center;
}
.best-sellers-tags p,
.best-sellers-tags h3 {
color: var(--c9-navy);
}
#blog-section .tab-border-wrapper {
border-top:none !important;
border-radius: 0%;
padding: 0;
display: block; /* ✅ Full-width container */
width: 100%; /* ✅ Matches the above section's width */
box-sizing: border-box; /* ✅ Ensures border is included in width calc */
}
/* Layout container: full width split */
/* Layout container: stack tabs on top of content */
#blog-section .tabs-layout {
display: flex;
flex-direction: column; /* ⬅️ stack nav above content */
width: 100%;
clip-path: none;
border-radius: 0;
}
/* Tabs bar: horizontal row instead of vertical list */
#blog-section .vertical-tabs {
display: flex;
flex-direction: row; /* ✅ enforce side by side */
justify-content: center;
align-items: center;
gap: 1rem;
margin: 2rem auto;
width: auto; /* ✅ no forced 100% that can break it */
}
#blog-section .tab-btn {
display: inline-flex; /* ✅ keeps text centered, prevents stretching */
align-items: center;
justify-content: center;
padding: 0.6rem 1.6rem;
border: 2px solid var(--c9-navy);
border-radius: 999px;
font-weight: 600;
font-size: 1rem;
line-height: 1.2;
background: transparent;
color: var(--c9-navy);
cursor: pointer;
white-space: nowrap;
transition: all 0.2s ease;
}
#blog-section .tab-btn.active {
background: var(--c9-pink);
border-color: var(--c9-pink);
color: #fff;
}
/* Mobile tweak */
@media (max-width: 600px) {
#blog-section .vertical-tabs {
flex-wrap: wrap;
gap: 0.75rem;
}
#blog-section .tab-btn {
flex: 1; /* Equal width */
text-align: center;
font-size: 0.95rem;
padding: 0.6rem 1rem;
}
}
#blog-section .tab-content h2 {
margin: 2.5rem 0rem;
font-size: clamp(3rem, 3vw, 3.6rem);
text-align: center;
padding: 0% 3%;
}
/*featured story*/
.featured-story {
position: relative;
overflow: hidden; /* keep stars contained */
background-color: #fff5f8;
}
.star-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none; /* so stars don’t block clicks */
}
.star {
position: absolute;
width: 10px;
height: 10px;
background: var(--c9-pink);
clip-path: polygon(
50% 0%, 61% 35%, 98% 35%, 68% 57%,
79% 91%, 50% 70%, 21% 91%, 32% 57%,
2% 35%, 39% 35%
);
opacity: 0;
animation: twinkle 2s infinite ease-in-out;
}
/* Twinkle animation */
@keyframes twinkle {
0%, 100% { transform: scale(0.5); opacity: 0; }
50% { transform: scale(1.3); opacity: 1; }
}
@keyframes glow-aura {
0%, 100% {
box-shadow: 0 0 10px rgba(255, 105, 180, 0.4), 0 0 20px rgba(255, 105, 180, 0.2);
}
50% {
box-shadow: 0 0 20px rgba(255, 105, 180, 0.7), 0 0 40px rgba(255, 105, 180, 0.4);
}
}
/*INDIVIDUAL BLOG PAGE*/
/* Blog Article Page */
.blog-article-section {
max-width: 1200px;
margin: 4rem auto;
padding: 0 1.5rem;
color: #2F3655;
}
.blog-article-header {
text-align: center;
margin-bottom: 2rem;
}
.blog-article-title {
text-align: center;
font-size: clamp(2.5rem, 6vw, 4.5rem);
color: var(--c9-pink);
font-weight: 800;
letter-spacing: -4.5px;
margin-bottom: 30px;
text-shadow: 1px 1px 0 #fff, 2px 2px 3px rgba(0, 0, 0, 0.5);
}
.blog-article-meta {
font-size: 0.95rem;
color: #666;
margin-bottom: 1.5rem;
}
.blog-article-hero {
width: 100%;
max-height: 400px;
object-fit: cover;
border-radius: 12px;
margin-bottom: 2rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.blog-article-content h2 {
font-size: 1.8rem;
color: var(--c9-purple);
margin-top: 2rem;
margin-bottom: 0.8rem;
}
.blog-article-content p,
.blog-article-content ul {
font-size: 1.1rem;
margin-bottom: 1.2rem;
}
.blog-article-content ul {
padding-left: 1.5rem;
}
.blog-article-content li {
list-style: disc;
margin-bottom: 0.6rem;
}
.blog-article-image {
width: 100%;
border-radius: 12px;
margin: 1.5rem 0;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.blog-quote-box {
background: #fef1f5;
border-left: 5px solid var(--c9-pink);
padding: 1.2rem 1.5rem;
font-style: italic;
margin: 2rem 0;
border-radius: 8px;
color: #444;
}
.blog-article-cta {
text-align: center;
margin-top: 3rem;
padding: 2rem;
background: #FFF3E0;
border-radius: 12px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}
.blog-article-cta h3 {
font-size: 1.8rem;
color: var(--c9-navy);
margin-bottom: 0.5rem;
}
.blog-cta-button {
display: inline-block;
margin-top: 1rem;
background: var(--c9-pink);
color: #fff;
text-decoration: none;
font-weight: bold;
padding: 0.8rem 1.6rem;
border-radius: 999px;
transition: transform 0.2s ease, background 0.2s ease;
}
.blog-cta-button:hover {
transform: scale(1.05);
background: var(--c9-purple);
}
/*Success stories page******/
/* Page Container */
.success-story-page {
background: var(--c9-cream);
font-family: 'Bricolage Grotesque', sans-serif;
color: var(--c9-navy);
padding-top: 0px !important;
}
/* Hero */
.success-story-hero {
display: flex;
align-items: center;
gap: 2rem;
margin-bottom: 3rem;
}
.success-hero-image {
width: 280px;
height: 280px;
border-radius: 50%;
border: 5px solid var(--c9-pink);
object-fit: cover;
}
.success-hero-text h1 {
font-size: clamp(2.5rem, 6vw, 4.5rem);
color: var(--c9-pink);
margin-bottom: 10px;
font-weight: 800;
line-height: 1; /* 100% */
letter-spacing: -4.5px;
text-align: left;
padding-top: 60px;
text-shadow:
1px 1px 0 #fff,
2px 2px 3px rgba(0, 0, 0, 0.5);
}
.success-meta {
font-size: 0.9rem;
color: var(--c9-purple);
margin-top: 0.3rem;
}
/* Before & After */
.before-after {
display: flex;
gap: 5rem;
margin: 2rem 0;
justify-content: center;
}
.before, .after {
flex: 1;
text-align: center;
background: var(--c9-lpink);
border-radius: 12px;
padding: 1rem;
box-shadow: 0 4px 8px rgba(0,0,0,0.08);
max-width: 400px;
}
.before img, .after img {
width: 100%;
max-width: 300px;
border-radius: 10px;
margin-bottom: 0.8rem;
}
/* Success Story Content */
.success-story-content {
padding: 2rem;
line-height: 1.8;
font-size: 1.1rem;
color: var(--c9-navy);
display: flex;
flex-direction: column;
gap: 2.5rem;
max-width: 1100px; /* Constrain line length for readability */
margin: 0 auto; /* Center it */
}
.story-section p,
.story-intro p {
text-align: left;
word-wrap: break-word; /* Ensure long words break properly */
}
.story-img {
width: 280px;
border-radius: 12px;
border: 3px solid var(--c9-pink);
margin: 0 1.5rem 1rem 0;
float: left;
}
.story-img.right {
float: right;
margin: 0 0 1rem 1.5rem;
}
/* Ensure wrapping clears properly */
.story-section::after {
content: "";
display: block;
clear: both;
}
/* Keep quotes styled nicely */
.story-quote {
font-style: italic;
border-left: 4px solid var(--c9-purple);
margin: 1rem 0;
padding-left: 1rem;
color: var(--c9-navy);
}
/* Mobile friendly */
@media (max-width: 768px) {
.story-img,
.story-img.right {
float: none;
display: block;
margin: 1rem auto;
}
}
/* Section headers */
.story-subheading {
font-size: 1.6rem;
color: var(--c9-pink);
margin-bottom: 0.8rem;
}
/* Quote box */
.story-quote {
background: var(--c9-cream);
border-left: 4px solid var(--c9-purple);
padding: 1rem 1.2rem;
font-style: italic;
color: var(--c9-navy);
margin-top: 1rem;
border-radius: 8px;
}
/* Highlight block (ending) */
.story-highlight {
background: var(--c9-cream);
padding: 1.2rem;
border-left: 6px solid var(--c9-pink);
border-radius: 8px;
font-weight: bold;
margin-top: 1.2rem;
}
/* Side images */
.story-side-image {
width: 100%;
max-width: 400px;
border-radius: 12px;
border: 4px solid var(--c9-pink);
margin-top: 1rem;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
/* Intro text */
.story-intro {
background: var(--c9-pink);
padding: 1.5rem;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
font-size: 1.4rem;
color: var(--c9-cream);
font-weight: bold;
}
/* What Helped */
.what-helped h2 {
color: var(--c9-pink);
margin-bottom: 1rem;
}
.what-helped ul {
list-style: none;
padding: 0;
}
.what-helped li {
margin: 0.5rem 0;
font-size: 1.1rem;
position: relative;
padding-left: 1.5rem;
}
.what-helped li::before {
content: "✔";
color: var(--c9-purple);
font-weight: bold;
position: absolute;
left: 0;
}
/* Quote Box */
.owner-quote {
margin: 2rem 0;
background: var(--c9-purple);
color: white;
padding: 1.5rem;
border-radius: 12px;
text-align: center;
font-size: 1.2rem;
font-style: italic;
}
.owner-quote cite {
display: block;
margin-top: 0.5rem;
font-size: 1rem;
font-style: normal;
}
/* Tips Section */
.tips-section {
margin-bottom: 100px !important;
}
.tips-section h2 {
color: var(--c9-pink);
margin-bottom: 0.5rem;
}
.tips-section p {
padding: 1rem;
font-weight: bolder;
font-size: 1.2rem;
}
.tips-section ol {
padding-left: 1.5rem;
margin-top: 0.5rem;
}
.tips-section li {
margin-bottom: 0.5rem;
font-size: 1.05rem;
}
/* Share CTA */
.share-your-story {
margin-top: 3rem;
text-align: center;
background: var(--c9-pink);
color: white;
padding: 2rem;
}
.share-your-story p {
padding: 1rem;
}
.share-story-btn {
display: inline-block;
margin-top: 1rem;
background: white;
color: var(--c9-pink);
font-weight: bold;
padding: 0.7rem 1.5rem;
border-radius: 999px;
text-decoration: none;
}
.story-page .footer {
margin-top: 0 !important;
}
/* Center the section containers */
.what-helped,
.tips-section {
text-align: center; /* Centers inline elements like headings and text */
margin: 0 auto;
}
/* Center their lists */
.what-helped ul,
.tips-section ol {
display: inline-block; /* Centers block-level list within parent */
text-align: left; /* Keeps list items left-aligned inside the centered block */
padding: 0;
margin: 0 auto;
}
/* Keep the ✔ and numbers properly positioned */
.what-helped li,
.tips-section li {
list-style: none;
position: relative;
padding-left: 1.5rem;
margin-bottom: 0.75rem;
font-size: 1.1rem;
}
/* Ticks */
.what-helped li::before {
content: "✔";
position: absolute;
left: 0;
color: var(--c9-purple);
font-weight: bold;
}
/* Numbers */
.tips-section {
counter-reset: list-counter;
}
.tips-section li::before {
counter-increment: list-counter;
content: counter(list-counter) ".";
position: absolute;
left: 0;
font-weight: bold;
color: var(--c9-purple);
}
.story-page .back-to-shop-link {
padding-top: 180px;
padding-bottom: 10px;
}
/****FAQ & CONTACT PAGE ***/
/* Page Container */
/* =============== Envelope CTA =============== */
.contact-faq-page {
padding-top: 220px ;
}
.contact-faq{
position: relative;
overflow: visible; /* let the cat hang outside without affecting layout */
}
/* Big cat image */
.contact-cat-deco{
position: absolute;
left: max(-6vw, -20px); /* pull slightly off-screen so it “peeks” */
bottom: -36vh; /* let it drift below the section edge */
height: 70vh; /* HUGE, taller than the viewport */
width: auto;
max-width: none;
z-index: 0; /* behind content */
pointer-events: none;
opacity: 0.65; /* tweak if too strong */
}
/* Keep the text above the cat */
.Contact-heading,
.contact-faq-wrapper{
position: relative;
z-index: 1;
}
.contact-faq-wrapper {
display: flex;
justify-content: center;
align-items: center;
padding: 0px 16px;
}
.Contact-heading {
color: var(--c9-navy);
font-size: clamp(2rem, 2.4vw, 3rem);
font-weight: 800;
line-height: 1; /* 100% */
letter-spacing: -2.8px;
text-align: center;
margin: 0 auto;
}
#FAQ.Contact-heading {
margin-top: 40px;
}
.contact-envelope {
display: flex;
flex-direction: column; /* stack envelope above text */
align-items: center;
background: none;
border: none;
cursor: pointer;
gap: 7px; /* space between envelope + text */
}
.contact-envelope:focus-visible{ outline:3px solid var(--c9-fakepink,#ff608a); outline-offset:3px; }
.contact-envelope:hover{ transform: translateY(-2px); }
.cat-mail {
width: 140px; /* bigger size */
height: 140px;
object-fit: contain;
animation: floatY 3s ease-in-out infinite;
margin-bottom: 30px ;
}
@keyframes floatY{
0%,100%{ transform: translateY(0); }
50%{ transform: translateY(-6px); }
}
.envelope-cta {
font-weight: 600;
color: var(--c9-navy, #2f3655);
font-size: clamp(1.1rem, 1.2vw, 1.4rem);
text-align: center;
width: 60%;
margin-top: 20px;
}
/* =============== Modal =============== */
.contact-modal-backdrop{
position: fixed; inset: 0;
background: rgba(0,0,0,.35);
z-index: 9998; /* above sticky bars */
}
.contact-modal{
position: fixed; inset: 0;
display: grid;
place-items: center;
z-index: 9999; /* modal above backdrop */
}
.contact-modal h2 {
color: var(--c9-cream);
margin-bottom: 10px;
}
.contact-modal p,
.contact-modal label {
color: var(--c9-cream);
}
.contact-modal[hidden],
.contact-modal-backdrop[hidden]{ display:none !important; }
.contact-modal-inner{
background: var(--c9-fakepink); /* cream-ish to match theme */
border: 2px solid var(--c9-navy,#2f3655);
border-radius: 20px;
width: min(560px, calc(100vw - 32px)); /* explicit width cap */
max-height: min(85vh, 900px); /* explicit height cap */
overflow: auto; /* scroll if content long */
padding: 22px 20px 18px;
box-shadow: 10px 10px 0 var(--c9-navy,#2f3655);
position: relative;
}
.contact-close{
position: absolute; right: 10px; top: 8px;
width: 36px; height: 36px; line-height: 32px;
border-radius: 50%;
border: 2px solid var(--c9-navy,#2f3655);
background: #fff;
font-size: 22px; font-weight: 800;
cursor: pointer;
}
.contact-desc{ margin: 0 0 10px; color: var(--c9-ink,#2e2e3a); }
.contact-form .form-group{
display:flex; flex-direction:column; gap:6px; margin-bottom:12px;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="file"],
.contact-form textarea{
border:2px solid var(--c9-navy,#2f3655);
border-radius: 10px;
padding:10px 12px;
font-size: 1rem;
background: #fff;
}
.contact-form textarea{ resize: vertical; min-height: 110px; }
.contact-form-buttons{
display:flex; gap: 12px; justify-content:space-between; margin-top: 14px;
}
/* Reuse your existing button styles if present: */
.cancel-btn{
background:var(--c9-cream); color: var(--c9-navy,#2f3655);
}
/* Mobile tweaks */
@media (max-width: 700px){
.contact-modal-inner{ width: calc(100vw - 24px); padding:18px 16px; }
.envelope-cta { width: 100%;}
}
.FAQ-section .expand-box2 {
max-width: 900px;
margin: 5px auto;
max-width: 600px;
}
.FAQ-section .expand-header2 strong {
font-size: 0.95rem;
}
.FAQ-section .expand-box2 .expand-body2 p{
font-size: 0.8rem;
}
/*TEST PAGE*/
/*remove sticky nav**/
body.productpage2 .navbar,
body.productpage2 .top-banner {
position: static !important;
top: unset !important;
margin-top: 0 !important;
z-index: auto !important;
}
/* Prevent full-height forcing that mimics sticky behavior */
body.productpage2 html {
min-height: auto !important;
height: auto !important;
}
/* Optional: fix layout flow if affected by scroll-snapping */
body.productpage2 html.main-page {
scroll-snap-align: unset !important;
justify-content: unset !important;
}
/* === MOBILE HERO SECTION THAT ACTUALLY ISN'T JUST MOBILE... === */
/* ---------------------------
GENERAL FIXES & RESET
--------------------------- */
/* Remove sticky nav on product page */
body.productpage2 .navbar,
body.productpage2 .top-banner {
position: static !important;
top: unset !important;
margin-top: 0 !important;
z-index: auto !important;
}
/* Prevent sticky scroll snapping effects */
body.productpage2 html {
min-height: auto !important;
height: auto !important;
}
body.productpage2 html.main-page {
scroll-snap-align: unset !important;
justify-content: unset !important;
}
/* ---------------------------
HERO SECTION
--------------------------- */
.mobile-hero2 {
background: var(--c9-cream);
position: relative;
display: block !important;
padding: min(4svh, 30px) 10px;
padding-bottom: 0 !important;
padding-top: 0 !important;
}
.mobile-hero-inner {
display: flex;
flex-direction: column;
align-items: center;
}
/* Fallback for older browsers that don’t support svh */
@supports not (height: 100svh) {
.mobile-hero2 { padding: min(4vh, 30px) 10px; }
.mobile-hero-inner { margin-bottom: clamp(20px, 8vh, 80px); }
}
.mobile-subtext2 {
font-size: 1.1rem;
font-weight: bold;
text-align: center;
line-height: 1.2;
max-width: 85%;
margin-bottom: 1.5rem;
color: var(--c9-navy);
}
/* ---------------------------
PRODUCT IMAGE
--------------------------- */
.html {
overflow-x: hidden;
}
/* ===== Full-bleed wrapper (kept if you already use .full-bleed elsewhere) ===== */
.full-bleed{
width:100vw;
margin-left:calc(50% - 50vw);
margin-right:calc(50% - 50vw);
}
/* ===== Scoped Supplement Hero ===== */
.c9sh-hero{
background:#a39cf9; /* requested white background */
color:#111;
border-radius: 20px;
min-width: 90%;
}
/* Grid container: NO min-height; no bottom padding. */
.c9sh-hero__grid{
max-width:1400px; /* match your site container */
margin:0;
display:grid;
grid-template-columns:1fr; /* mobile: stack */
align-items:stretch; /* media column stretches to tallest row */
column-gap:24px;
row-gap:16px;
position:relative; /* anchor badge */
}
/* Desktop/tablet: exact 40/60 split */
@media (min-width:900px){
.c9sh-hero__grid{
grid-template-columns:2fr 3fr; /* 40% / 60% */
}
}
@media (max-width:900px){
.c9sh-hero__grid{
min-height: 63vh;
}
}
@media (max-width:1200px){
.c9sh-hero__content {
padding: 40px 15px !important;
}
}
@media (max-width:900px){
.c9sh-hero__content {
padding-top: 100px !important;
padding-bottom: 0px !important;
}
.mobile-heading {
font-size: clamp(35px,7.5vw,70px) !important;
max-width: 80%;
}
.mobile-subheading {
font-size: clamp(14px,1.6vw,40px) !important;
max-width: 80%;
}
}
/* LEFT column (copy) */
.c9sh-hero__content{
text-align:left;
max-width:46ch;
padding: 40px; /* readable lines; remove to fill full 40% */
}
/* keep your existing heading/subheading tokens */
.mobile-heading{
margin:0 0 .2em;
font-size:clamp(22px,4.5vw,50px);
line-height:1.05;
letter-spacing:-.02em;
color:var(--c9-navy);
}
.mobile-subheading{
margin:0;
font-size:clamp(11px,1.6vw,18px);
line-height:1.28;
color:var(--c9-navy);
opacity:.9;
}
/* RIGHT column (media). The figure stretches to the row height. */
.c9sh-hero__media{
position: relative; /* already there */
margin: 0;
min-height: clamp(174px, 35vw, 475px); /* controls the cat band height */
}
/* 2) Make the cat fill that band and sit at the bottom-right */
.c9sh-hero__img{
position: absolute;
right: 0;
bottom: 0; /* pinned to bottom */
height: 100%; /* fill the media column height */
width: 93%; /* preserve aspect ratio */
object-fit: contain; /* safety: no cropping */
display: block;
border-radius: 20px;
}
/* Badge at top-right of the entire hero section */
.c9sh-badge{
position:absolute;
right:clamp(10px,10.5vw,73px);
top:clamp(10px,6vh,48px);
width:clamp(99px,12vw,150px);
aspect-ratio:1 / 1;
border-radius:50%;
background:#fff;
color:#1a1a1a;
box-shadow:0 6px 24px rgba(0,0,0,.15);
display:grid;
place-items:center;
text-align:center;
padding:10px;
z-index:2;
}
.c9sh-badge__inner{
display:grid;
gap:2px;
font-size:clamp(10px,1.9vw,13px);
line-height:1.15;
}
.c9sh-badge .badge-top strong{ font-weight:800; }
.c9sh-badge::after{
content:"";
position:absolute;
inset:6px;
border-radius:50%;
border:2px solid rgba(0,0,0,0.08);
pointer-events:none;
}
@media (min-width:1024px){
.c9sh-badge{ width:clamp(120px,10vw,180px); }
}
/* Hard cleanup (legacy background/overlay in earlier versions) */
.mobile-jar-wrapper .mobile-jar-img{ display:none; }
.mobile-jar-wrapper::before{ content:none; }
/* ---------------------------
BLUE INFO BAR
--------------------------- */
.mobile-bar-content {
width: 100%;
padding: 2rem 1.5rem;
border-radius: 24px 24px 0 0;
color: #2f3655;
transition: margin-bottom 0.3s ease;
scroll-margin-top: 0;
position: relative; /* natural document flow */
}
/* === DESKTOP FIX: RESTORE FULL WIDTH === */
@media screen and (min-width: 680px) {
/* Allow this whole area to stretch */
.buy-section-wrapper {
max-width: none !important; /* Remove hidden constraints */
width: 100% !important; /* Full width */
display: block; /* Reset flex inheritance */
position: relative;
}
/* Make the blue info bar wide and centered */
.mobile-bar-content {
max-width: 1200px; /* ✅ Matches your old SS1 layout */
width: 95%;
margin: 0 auto;
position: relative;
}
/* Jar overlaps edge again */
.buy-bar-left {
position: relative;
overflow: visible !important; /* ✅ Let jar escape container */
}
.buy-bar-image {
width: 420px; /* ✅ Large size like SS1 */
position: absolute;
bottom: -30px;
left: -80px; /* ✅ Hang off left edge */
transform: none !important;
z-index: 10;
}
}
/* ---------------------------
BUY BAR (STICKY)
--------------------------- */
.mobile-buy-bar {
position: sticky;
bottom: 0;
left: 0;
width: 100%;
background: var(--c9-cream);
border-top: 2px solid #2f3655;
display: flex;
align-items: flex-end;
justify-content: space-between;
padding: 1.5rem 1.2rem 2.5rem;
gap: 1.2rem;
z-index: 30;
overflow: visible;
box-sizing: border-box;
min-height: 140px;
transform: translateZ(0);
inset-block-end: 0;
padding-bottom: calc(2.5rem + env(safe-area-inset-bottom));
}
/* Jar image inside buy bar */
.buy-bar-left {
position: relative;
flex-shrink: 0;
overflow: visible;
}
.buy-bar-image {
width: min(33vw, 255px);
height: auto;
position: absolute;
bottom: -28px;
left: 25px;
pointer-events: none;
}
/* Buy bar content */
.buy-bar-right {
display: flex;
flex-direction: column;
align-items: flex-end;
text-align: right;
gap: 0.5rem;
flex-grow: 1;
padding: 0px 40px;
}
.buy-bar-right .mobile-price {
font-size: 1.5rem;
font-weight: bold;
color: #2F3655;
white-space: nowrap;
}
.mobile-quantity-select {
padding: 5px 10px;
font-size: 1rem;
border: 2px solid #2F3655;
border-radius: 4px;
background: #FFF2E6;
color: #2F3655;
min-width: 100px;
cursor: pointer;
}
.mobile-quantity-select:focus {
outline: none;
border-color: #8B5EFF;
box-shadow: 0 0 4px rgba(139, 94, 255, 0.5);
}
.mobile-basket-btn {
width: 100%;
max-width: 280px;
cursor: pointer;
}
.buy-bar-actions {
display: flex;
gap: 0.5rem;
flex-wrap: nowrap;
align-items: center;
}
.buy-bar-actions .mobile-quantity-select {
flex-shrink: 0;
}
.buy-bar-actions .mobile-basket-btn {
flex-grow: 1;
white-space: nowrap;
}
/* ---------------------------
BADGES & HEADINGS
--------------------------- */
/* GRID (reuse your base) */
.mobile-full-bleed-bar.info-panels{
text-align:left;
padding:clamp(10px,5vw,20px) 0;
max-width:1100px;
margin:0 auto;
padding-inline:clamp(16px,3vw,24px);
display:grid;
gap:clamp(16px,2.5vw,24px);
grid-template-columns:1fr; /* mobile: stack */
}
@media (min-width:860px){
.mobile-full-bleed-bar.info-panels.info-panels--two{
grid-template-columns:1fr 1fr; /* desktop: two columns */
}
}
/* CARDS (as you had) */
.mobile-full-bleed-bar.info-panels .panel{
background:#fff;
border-radius:18px;
box-shadow:0 12px 28px rgba(10,12,36,.08);
border:1px solid rgba(10,12,36,.06);
padding:clamp(23px,3vw,28px);
}
@media (max-width:500px){
.mobile-full-bleed-bar.info-panels .panel{
margin-bottom: 5px;
}
}
.mobile-full-bleed-bar.info-panels h3{
color:var(--c9-navy);
font-size:clamp(1rem,2vw,1.3rem);
font-weight:800;
letter-spacing:-.02em;
margin:0 0 .6rem;
}
/* LEFT LIST + cat bullets (unchanged) */
.mobile-full-bleed-bar.info-panels .panel-list{
list-style:none;
margin:20px 0px;
padding:0;
display:grid;
gap:10px;
font-size:clamp(.85rem,1.4vw,1rem);
}
.mobile-full-bleed-bar.info-panels .panel-list li{
position:relative;
padding-left:30px;
line-height:1.45;
font-weight:600;
color:var(--c9-navy);
}
.mobile-full-bleed-bar.info-panels .panel-list li::before{
content:"";
position:absolute; top:.2em; left:0;
width:20px; height:20px;
-webkit-mask:url('assets/CatBullet.svg') no-repeat center / contain;
mask:url('assets/CatBullet.svg') no-repeat center / contain;
background:#FE6892; opacity:.95;
transition:transform 180ms ease;
}
.mobile-full-bleed-bar.info-panels .panel-list li:hover::before{
transform:rotate(-6deg) scale(1.04);
}
.hi{ color:#FE6892;
font-weight:800;
font-size:inherit;
}
/* RIGHT: timing card */
.panel--timing{
display:flex;
flex-direction:column;
align-items: center;
gap:.5rem;
}
@media (min-width:860px){
.panel--timing{
align-items:center;
text-align:center;
}
}
/* Simple placeholder clock (replace with your SVG when ready) */
.timing-icon{
width:72px; height:72px; border-radius:50%;
background:#fff; border:6px solid #f2e7f0;
box-shadow:0 6px 14px rgba(10,12,36,.08) inset, 0 2px 6px rgba(10,12,36,.06);
position:relative; margin:2px 0 8px;
}
@media (min-width:860px){
.timing-icon{ margin:2px auto 10px; }
}
.timing-icon::before, .timing-icon::after{
content:"";
position:absolute;
left:50%; top:50%;
background:#FE6892;
border-radius:2px;
transform-origin:bottom center;
}
.timing-icon::before{
width:3px;
height:22px;
transform:translate(-50%,-100%) rotate(0deg);
} /* hour hand */
.timing-icon::after{
width:3px;
height:28px;
transform:translate(-50%,-100%) rotate(45deg);
} /* minute hand */
.panel--timing p{
margin:.25rem 0;
color:var(--c9-navy);
font-weight:600; }
.tiny-note{
font-size:.85rem;
opacity:.7;
font-weight:500; }
/* theme hook */
.product-anxiety .panel{
border-color:rgba(254,104,146,.2);
}
/* ---------------------------
EXPANDABLE BOX
--------------------------- */
.expand-box2 {
position: relative;
background: var(--c9-pink);
color: var(--c9-white);
border: 2px solid #2F3655;
border-radius: 50px;
padding: 20px;
margin: 40px auto 30px;
z-index: 0;
transition: background 0.3s ease, color 0.3s ease;
overflow: hidden;
cursor: pointer;
font-weight: bold;
font-size: 1.1rem;
box-shadow: 3px 3px 0 #2F3655;
max-width: 700px;
display: block;
}
.expand-box2::before {
content: "";
position: absolute;
bottom: -100%;
left: 0;
width: 200%;
height: 450%;
background: #FE6892;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: repeat-x;
background-size: 50% 100%;
z-index: -1;
transition: bottom 0.8s ease, transform 2s ease;
transform: translateY(100%);
}
.expand-box2:hover,
.expand-box2.touched {
color: var(--c9-navy);
transform: scale(1.05);
}
.expand-box2:hover::before,
.expand-box2.touched::before {
bottom: 0;
transform: translateY(0);
animation: wave23 2s infinite linear;
}
@keyframes wave23 {
0% { background-position-x: 0; }
100% { background-position-x: 50%; }
}
.expand-box2.open {
background: none;
color: var(--c9-navy);
border-color: var(--c9-navy);
}
.expand-box2.open::before { display: none; }
.expand-header2 {
display: flex;
justify-content: space-between;
align-items: center;
font-weight: bold;
}
.expand-icon2 { transition: transform 0.3s ease; }
.expand-box2 .expand-body2 {
max-height: 0;
opacity: 0;
transition: all 0.3s ease;
pointer-events: none;
overflow: hidden;
}
.expand-box2.open .expand-body2 {
max-height: 200px;
overflow-y: auto;
opacity: 1;
margin-top: 10px;
pointer-events: auto;
}
.expand-box2.open .expand-icon2 {
transform: rotate(180deg);
}
/* Header: align like your cards’ headers */
.expand-header2{
display: flex;
align-items: center;
justify-content: space-between;
gap: .5rem;
padding: .9rem 1.1rem;
cursor: pointer;
}
.expand-header2 strong{
font-size: clamp(1rem, 2.5vw, 1.25rem);
font-weight: 800;
color: var(--c9-navy);
}
.expand-icon2{
transition: transform .2s ease;
}
.expand-box2.is-open .expand-icon2{
transform: rotate(180deg);
}
.expand-body2 h4{
font-size: clamp(.95rem, 2.2vw, 1.1rem);
font-weight: 800;
color: var(--c9-navy);
margin: .6rem 0 .25rem;
line-height: 1.3;
}
.expand-body2 h4:not(:first-of-type){
padding-top: .75rem;
border-top: 1px solid rgba(0, 3, 15, .08); /* subtle navy divider */
}
.expand-body2 p{
margin: 0 0 .9rem;
font-size: clamp(.85rem, 2.1vw, 1rem);
font-weight: 400; /* fixes the “everything bold” look */
color: var(--c9-navy);
}
/* Links inside FAQ */
.expand-body2 a{
color: var(--c9-blue);
font-weight: 700;
text-decoration: underline;
text-underline-offset: 2px;
}
/* ---------------------------
RESPONSIVE TWEAKS
--------------------------- */
/* Whatever the bar height is, keep content clear of it */
.mobile-bar-content {
padding-bottom: calc(var(--buybarH, 140px) + 45px);
}
@media screen and (max-width: 679px) {
.mobile-buy-bar {
flex-wrap: nowrap;
align-items: flex-end;
gap: 0.6rem;
padding: 1rem 1.2rem 1rem;
transform: translateZ(0); /* force compositing */
backface-visibility: hidden;
will-change: transform;
}
.mobile-bar-content {
padding-bottom: 120px;
}
.buy-bar-image {
width: 190px;
transform: translate(-9%, 5%);
}
.buy-bar-right {
flex-grow: 1;
align-items: flex-end;
gap: 0.4rem;
padding: 0;
}
.buy-bar-right .mobile-price {
font-size: 1rem;
line-height: 1.1;
white-space: normal;
padding-bottom: 15px;
}
.c9toy-qty-label {
font-size: 0.85rem !important;
}
.mobile-quantity-select {
margin-top: 20px;
font-size: 0.85rem;
padding: 3px 16px;
min-width: 60px;
margin-right: 10px;
}
.mobile-basket-btn {
font-size: 0.9rem;
padding: 10px 10px;
max-width: 120px;
}
}
@media screen and (max-width: 460px) {
.buy-bar-image {
width: 160px;
transform: translate(-31%, -7%);
}
.buy-bar-right {
padding: 0.5rem 0 0.5rem;
}
.buy-bar-actions {
justify-content: flex-end;
min-width: 80%;
gap: 0.5rem;
flex-wrap: wrap;
}
.mobile-subtext2 { font-size: 0.9rem; }
.mobile-bar-content {
padding: 0;
padding-bottom: 60px;
}
.quantity-row {
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-items: center;
}
.c9toy-qty-select {
margin-top: 5px !important;
height: auto !important;
}
.c9toy-qty-label {
margin-top: 5px !important;
}
.buy-bar-actions .wave-button {
margin-top: 8px;
}
}
@media screen and (max-width: 400px) {
.buy-bar-image {
width: 140px;
transform: translate(-40%, -13%);
}
.c9sh-hero {
margin-top: 0px;
}
.c9sh-hero__content h1{
margin-bottom: 10px;
}
.buy-bar-right .mobile-price {
font-size: 0.85rem;
}
}
@media screen and (max-width: 610px) {
.c9sh-badge {
right: 16px;
top: 6px;
}
.c9sh-hero__content {
padding: 25px;
}
.img-flip-x {
transform: scaleX(-1); /* mirror across the vertical axis */
transform-origin: center; /* default, just to be explicit */
}
}
/*WHY CLOUD9*/
/* === WHY CLOUD9 SECTION === */
.whyC9-section {
background: linear-gradient(to bottom, var(--c9-pink), var(--c9-pink), var(--c9-cream));
padding: 2rem 1rem 3rem;
text-align: center;
}
.whyC9-title {
font-size: clamp(1.8rem, 6vw, 3.2rem);
font-weight: 800;
color: var(--c9-cream);
margin-bottom: 4rem;
}
/* === FEATURES === */
.whyC9-features {
display: flex;
justify-content: center;
gap: 2rem;
flex-wrap: wrap;
margin-bottom: 2rem;
}
.whyC9-feature {
max-width: 280px;
flex: 1 1 250px;
}
.whyC9-icon {
background: var(--c9-cream);
border-radius: 50%;
width: 120px; /* slightly bigger base */
height: 120px;
margin: 0 auto 1rem;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 3px 3px 0 var(--c9-navy);
position: relative; /* allows child to overlap */
}
.whyC9-icon img {
width: 140px; /* larger than the circle */
height: auto;
position: absolute; /* lets it poke out */
bottom: -10px; /* adjust vertical escape */
}
.whyC9-heading {
color: var(--c9-navy);
font-size: 1.2rem;
font-weight: 800;
margin-bottom: 0.5rem;
}
.why-logo {
max-width: 200px;
transform: translateY(15px);
}
.whyC9-text {
font-size: 0.95rem;
color: var(--c9-cream);
line-height: 1.5;
}
.charity-read{
color: var(--c9-navy);
font-weight: 600;
text-decoration: none;
}
/*matrix*/
/* Container */
.comp-compare {
display: flex;
color: var(--c9-navy);
padding: 5px 16px 13px;
align-items: center;
flex-direction: column;
flex-wrap: wrap;
}
.comp-title {
margin: 0 0 1.5rem;
font-weight: 900;
letter-spacing: -0.02em;
color: var(--c9-cream);
font-size: 1.6rem;
}
/* Table grid (2 columns + feature column) */
.comp-table {
display: grid;
grid-template-columns: 1.4fr minmax(90px, 0.7fr) minmax(90px, 0.7fr);
background: #fff;
border: 1px solid rgba(10,12,36,.08);
border-radius: 14px;
overflow: hidden;
width: 90%;
max-width: 950px; /* or whatever upper limit you like */
}
/* Rows use display: contents so each cell aligns to the parent grid */
.comp-row { display: contents; }
.comp-row--head > .comp-cell {
background: #fff7fa;
font-weight: 800;
border-bottom: 1px solid rgba(10,12,36,.08);
}
/* Cells */
.comp-cell {
padding: 14px 12px;
border-bottom: 1px solid rgba(10,12,36,.06);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.comp-cell--feature {
justify-content: flex-start;
text-align: left;
font-weight: 800;
font-size: clamp(.85rem, 1.4vw, 1rem);
background: linear-gradient(to right, rgba(252,91,132,0.06), rgba(252,91,132,0));
}
@media screen and (max-width: 460px) {
.comp-cell--feature {
font-size: 0.75rem;
font-weight: 550;
}
.comp-compare {
padding: 20px 0px 0px;
}
}
/* Us / Others headers */
.comp-cell--us {
background: var(--c9-pink);
}
.comp-logo {
max-height: 26px; /* explicit for tidy header */
}
.comp-cell--others {
font-weight: 800;
}
/* Marks */
.ok { color: #1f8f6f; font-weight: 900; }
.no { color: #c43b4a; font-weight: 900; }
.maybe { color: #8a7a00; font-weight: 900; }
/* === REVIEW CAROUSEL === */
.c9r-carousel {
position: relative;
width: 100%;
max-width: 60%;
margin: 0 auto;
overflow: hidden;
padding: 20px 0;
text-align: center; /* optional: center inline content */
}
@media (max-width: 1300px) {
.c9r-carousel {
max-width: 80%;
}
}
@media (max-width: 900px) {
.c9r-carousel {
max-width: 95%;
}
}
.carousel-title {
font-size: clamp(1.5rem, 4vw, 1.5rem);
font-weight: 800;
color: var(--c9-navy);
margin-bottom: 1.5rem;
text-align: center;
}
.c9r-track-container {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
/* avoid reflow from children paints */
contain: content;
width: 100%;
padding-bottom: 10px;
}
.c9r-track{
display: flex;
gap: 10px;
overflow-x: auto; /* <- must be on the scroller */
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
/* hide scrollbar (Firefox) */
scrollbar-width: none;
/* hide scrollbar (old IE/Edge) */
-ms-overflow-style: none;
}
/* hide scrollbar (Chrome/Safari/Edge) */
.c9r-track::-webkit-scrollbar{
height: 0; /* sometimes needed */
display: none;
}
.c9r-card {
min-width: 280px;
max-width: 320px;
height: 320px;
border-radius: 16px;
margin: 0 10px;
background-size: cover;
background-position: center;
position: relative;
flex-shrink: 0;
display: flex;
align-items: flex-end;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
color: #fff;
border: 3px var(--c9-pink) solid;
flex: 0 0 clamp(260px, 28vw, 320px);
}
.c9r-card-footer {
width: 100%;
padding: 15px;
border-radius: 0 0 16px 16px;
display: flex;
justify-content: space-between;
align-items: center;
background: var(--c9-cream);
}
.c9r-card-footer p {
margin: 0;
font-size: 0.95rem;
max-width: 70%;
color: var(--c9-navy);
font-weight: 600;
}
.c9r-product {
width: 60px;
height: auto;
}
.c9r-review-card {
background: var(--c9-cream);
color: #333;
display: flex;
justify-content: center;
align-items: center;
}
.c9r-review-content {
text-align: center;
padding: 20px;
}
.c9r-btn {
display: inline-block;
margin-top: 10px;
padding: 10px 18px;
border-radius: 6px;
background: var(--c9-purple);
color: #fff;
text-decoration: none;
}
.c9r-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
border: none;
background: rgba(0,0,0,0.5);
color: #fff;
font-size: 2rem;
cursor: pointer;
padding: 6px 12px;
border-radius: 50%;
z-index: 5;
}
.c9r-prev { left: 10px; }
.c9r-next { right: 10px; }
/* MOBILE FIRST (default) → 2 cards */
.c9r-card {
flex: 0 0 50%; /* take up half the row */
margin: 0 5px; /* smaller margin so 2 fit */
}
/* TABLET (≥768px) → 3 cards */
@media (min-width: 768px) {
.c9r-card {
flex: 0 0 33.3333%;
margin: 0 10px;
}
}
/* DESKTOP (≥1200px) → 4 cards */
@media (min-width: 1200px) {
.c9r-card {
flex: 0 0 25%;
margin: 0 10px;
}
}
@media (max-width: 767px) {
.c9r-card {
min-width: auto; /* let it shrink */
flex: 0 0 50%; /* two cards side-by-side */
}
}
/* Base layout */
.c9r-track-container{
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
/* smooth only for arrow clicks; JS will temporarily disable when needed */
scroll-behavior: smooth;
}
.c9r-track{
display: flex;
gap: 20px;
padding: 2px;
}
.c9r-card{
flex: 0 0 clamp(260px, 28vw, 320px);
scroll-snap-align: start;
}
/* Hide arrows on mobile */
@media (max-width: 768px){
.c9r-nav{ display:none; }
}
/* mobile: native scroll + snap, hide arrows, put review card last */
@media (max-width: 768px){
.c9r-nav { display: none; }
.c9r-track-container{
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
}
.c9r-track{ gap: 16px; transform: none !important; } /* disable JS translate */
.c9r-card{ flex: 0 0 80%; scroll-snap-align: start; }
.c9r-review-card{ order: 999; } /* push review to the end */
}
.whyC9-review {
padding-bottom: 15px;
text-align: center;
}
.whyC9-reviewText {
text-align: center;
margin-bottom: 30px;
font-size:clamp(.95rem,1.7vw,1.4rem);
}
.whyC9-buttons {
display: flex;
justify-content: center;
gap: 1.5rem;
flex-wrap: wrap;
}
.whyC9-reviewText {
display: inline-block;
background: rgba(255, 255, 255, 0.55);
border: 2px solid rgba(255, 94, 139, 0.35);
border-radius: 999px;
padding: 12px 24px;
color: #203059;
font-size: 15px;
line-height: 1.5;
box-shadow: 0 8px 20px rgba(255, 94, 139, 0.12);
}
.whyC9-reviewText a {
color: #203059;
font-weight: 800;
text-decoration: none;
border-bottom: 2px solid #ff5e8b;
}
.whyC9-reviewText a:hover {
color: #ff5e8b;
}
/* Base button style */
.whyC9-btnReview,
.whyC9-btnInsta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px; /* space between icon + text */
padding: 12px 20px;
border-radius: 40px;
font-weight: 700;
box-shadow: 3px 3px 0 var(--c9-navy);
text-decoration: none;
transition: transform 0.2s ease;
font-size: 0.95rem;
}
/* Review button */
.whyC9-btnReview {
background: var(--c9-pink);
color: #fff;
}
.whyC9-btnReview img {
width: 16px;
height: 16px;
display: block;
}
/* Instagram button */
.whyC9-btnInsta {
background: var(--c9-purple); /* Insta gradient */
color: #fff;
}
.whyC9-btnInsta img {
width: 18px;
height: 18px;
display: block;
}
/* Hover effects */
.whyC9-btnReview:hover,
.whyC9-btnInsta:hover {
transform: scale(1.05);
}
/* === RESPONSIVE === */
@media screen and (max-width: 768px) {
.whyC9-features {
flex-direction: column;
}
.whyC9-feature {
max-width: 100%;
text-align: center;
}
.whyC9-text {
max-width: 60%;
margin: 0 auto;
}
.whyC9-buttons {
display: flex;
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
}
}
/*SECTION 2*/
/* ===========================
Coverflow Carousel (readable)
=========================== */
:root {
/* easy to tweak */
--cf-card-width: 360px;
--cf-card-width-sm: 300px; /* mobile cap */
--cf-hero-scale: 1.00;
--cf-side-scale: 0.88;
--cf-far-scale: 0.78;
--cf-gap: 320px; /* horizontal spacing between cards */
--cf-elevate: 18px; /* how much side cards sit "above" hero */
}
/* ----- Shell ----- */
.coverflow {
background: linear-gradient(to bottom, var(--c9-cream) 0%, var(--c9-cream) 20%, #fc5b84 100%);
color: var(--c9-navy);
padding: 32px 0 26px;
}
@media screen and (max-width: 679px) {
.coverflow {
padding-bottom: 1px;
}
}
.coverflow__head {
max-width: 1100px;
margin: 0 auto 1px;
text-align: center;
padding: 0 16px;
}
.coverflow__title {
margin: 30px 0 6px;
font-weight: 900;
letter-spacing: -0.02em;
color: var(--c9-navy);
font-size: clamp(1.8rem, 4vw, 3rem);
}
@media screen and (max-width: 679px) {
.coverflow__title {
margin: 10px 0 6px;
}
.coverflow__track {
height: 200px !important;
}
.coverflow__nav {
display: none;
}
.coverflow__dots {
padding-top: 10px;
}
}
.scoop-pic {
max-height: 150px;
}
/* ----- Viewport / Track ----- */
.coverflow__viewport {
position: relative;
max-width: 1100px;
margin: 1px auto 0;
overflow: hidden;
/* subtle depth */
perspective: 1200px;
}
.coverflow__track {
position: relative;
height: 275px;
}
/* ----- Card ----- */
.cf-card {
position: absolute;
top: 50%;
left: 50%;
width: min(var(--cf-card-width), 90vw);
max-width: var(--cf-card-width);
transform: translate(-50%, -50%); /* base; we add more transforms via CSS variables */
transform-style: preserve-3d;
background: #fff;
border: 1px solid rgba(10,12,36,.08);
border-radius: 16px;
box-shadow: 0 12px 26px rgba(10,12,36,.08);
padding: 18px;
opacity: 0;
pointer-events: none;
transition:
transform 220ms ease,
opacity 220ms ease,
filter 220ms ease,
box-shadow 220ms ease;
}
/* layout via variables set by JS */
.cf-card {
/* custom properties:
--x : horizontal offset (px, negative = left)
--y : vertical offset (px, negative = above)
--s : scale (0..1)
--z : z-index (int)
--blur : px for blur
*/
transform:
translate(calc(-50% + var(--x, 0px)), calc(-50% + var(--y, 0px)))
scale(var(--s, 1))
translateZ(0); /* keep GPU happy */
z-index: var(--z, 1);
filter: blur(var(--blur, 0));
}
/* states (applied by JS) */
.cf-card--center {
opacity: 1;
pointer-events: auto;
--s: var(--cf-hero-scale);
--y: 0px;
--blur: 0px;
box-shadow: 0 16px 30px rgba(10,12,36,.12);
}
.cf-card--side {
opacity: 0.92;
pointer-events: auto;
--s: var(--cf-side-scale);
--y: calc(var(--cf-elevate) * -1); /* lift above the hero */
--blur: 0.5px;
}
.cf-card--far {
opacity: 0.7;
pointer-events: auto;
--s: var(--cf-far-scale);
--y: calc(var(--cf-elevate) * -1.4);
--blur: 1px;
}
/* ----- Card content ----- */
.cf-badge {
display: inline-block;
padding: 4px 10px;
border-radius: 999px;
font-weight: 900;
font-size: 0.78rem;
color: #fff;
margin-bottom: 6px;
}
.cf-badge--short { background: #33c69f; }
.cf-badge--ongoing { background: #5db0ff; }
.cf-badge--pal { background: #b86cf4; }
.cf-name {
margin: 0.1rem 0 0.2rem;
font-weight: 900;
letter-spacing: -0.01em;
font-size: clamp(1.05rem, 2.2vw, 1.4rem);
}
.cf-dose {
margin: 0 0 0.5rem;
font-weight: 800;
opacity: 0.75;
}
.cf-one {
margin: 0 0 0.6rem;
font-weight: 700;
}
.cf-list {
margin: 0;
padding-left: 1.1rem;
}
.cf-list li { font-weight: 600; }
/* ----- Arrows ----- */
.coverflow__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
border: none;
border-radius: 999px;
background: #fff;
color: var(--c9-navy);
font-size: 24px;
font-weight: 900;
cursor: pointer;
box-shadow: 0 6px 16px rgba(10,12,36,.12);
}
.coverflow__nav--prev { left: 8px; }
.coverflow__nav--next { right: 8px; }
.coverflow__nav:disabled { opacity: 0.3; pointer-events: none; }
/* ----- Dots ----- */
.coverflow__dots {
display: flex;
gap: 8px;
justify-content: center;
margin-top: 10px;
margin-bottom: 15px;
}
.cf-dot {
width: 8px;
height: 8px;
border-radius: 999px;
background: rgba(10,12,36,.25);
}
.cf-dot--active { background: var(--c9-pink); }
#feeding-guide > *:first-child {
margin-top: 0 !important;
}
/* === FEEDING GUIDE SECTION === */
.feeding-guide-content {
margin: 0 1rem;
}
.feeding-guide {
background-color: #fc5b84;
}
/* Subheadings */
.feeding-subheading {
color: var(--c9-cream);
font-size: 1.5rem;
font-weight: 800;
margin: 1rem 0 1rem;
text-align: center;
text-decoration: underline;
}
.how-to-feed {
text-align: center;
line-height: 1.6;
}
.how-to-feed a {
color: var(--c9-blue);
font-weight: 600;
font-size: clamp(0.8rem, 2.7vw, 1.1rem);
}
.feeding-bowl {
max-height: 200px;
}
/* Serving size cards */
.serving-sizes {
display: flex;
justify-content: center;
gap: 2rem;
margin-bottom: 1rem;
flex-wrap: wrap;
}
.serving-box {
background: #fff;
padding: 1rem 1.5rem;
border-radius: 14px;
box-shadow: 3px 3px 0 var(--c9-navy);
border: 2px solid var(--c9-cream);
text-align: center;
max-width: 250px;
}
.serving-box p {
color: var(--c9-navy);
font-size: clamp(0.8rem, 2.7vw, 1.1rem);
}
.scoop-badge {
display: inline-block;
background: var(--c9-pink);
color: white;
padding: 6px 14px;
border-radius: 40px;
font-weight: 700;
margin-top: 0.5rem;
font-size: clamp(0.65rem, 2.5vw, 0.95rem);
}
/* Serving note */
.serving-note {
text-align: center;
margin: 0.5rem auto 2rem;
font-size: clamp(0.75rem, 2.7vw, 0.95rem);
color: var(--c9-navy);
text-decoration: none;
}
.serving-note a {
text-decoration: none;
color:var(--c9-blue);
font-weight: 600;
}
/* Cat bullet list */
/* Match hero section bullet style */
.cat-bullet-list {
list-style: none;
padding: 0;
margin: 0 auto !important;
display: flex;
flex-direction: column; /* Stack bullets vertically */
gap: 0.9rem; /* Match hero section spacing */
max-width: 620px; /* Keep consistent width */
}
/* Each bullet */
.cat-bullet-list li {
position: relative;
padding-left: 34px; /* Matches hero spacing */
font-size: clamp(0.8rem, 2.7vw, 1.1rem);
font-weight: 600;
color: var(--c9-navy);
line-height: 1.5;
}
/* Paw bullet itself */
.cat-bullet-list li::before {
content: '';
position: absolute;
left: 0;
top: 4px;
width: 22px;
height: 22px;
mask-image: url('assets/CatBullet.svg');
-webkit-mask-image: url('assets/CatBullet.svg');
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
mask-size: contain;
-webkit-mask-size: contain;
background-color: var(--c9-cream); /* ✅ Colour applied here */
animation: wiggle 1s ease-in-out infinite;
}
/* Center the entire list container */
.cat-bullet-list-wrapper {
text-align: center;
}
@keyframes wiggle {
0%, 100% { transform: rotate(0deg); }
30% { transform: rotate(-10deg); }
70% { transform: rotate(10deg); }
}
/* Training note box */
.training-note {
background:#fff; /* cream tile like hero */
border: 1.6px solid #00030F;
border-radius: .5rem;
box-shadow: -4px 4px 10px #ff4c8b66;
opacity: .95;
padding: 1.5rem;
text-align: center;
margin: 2rem auto;
max-width: 650px;
position: relative;
}
.training-note::before {
content: '';
background-image: url('/assets/CatPawWatermark.svg');
background-size: 60%;
background-repeat: no-repeat;
opacity: 0.05;
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
width: 150px;
height: 150px;
pointer-events: none;
}
/* Video wrapper: leave animations as-is but center content */
.cat-video-wrapper {
position: relative;
/* Truly full width, no gaps */
width: 100vw;
max-width: 100vw;
margin-left: 50%;
transform: translateX(-50%);
/* Vertical spacing only */
padding: 0.5rem 0 0.5rem;
display: flex;
flex-direction: column;
align-items: center;
}
@media screen and (max-width: 679px) {
.cat-video-wrapper {
padding-top: 1rem;
}
}
/* Inner content container — keeps header + videos aligned nicely */
.cat-video-wrapper .feeding-header,
.cat-video-wrapper .cat-videos {
max-width: 1200px; /* Match your site’s content width */
margin: 0 auto; /* Center content */
padding: 0 1.5rem; /* Small horizontal breathing room */
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.cat-video-wrapper .cat-videos {
flex-direction: row; /* Keep the videos side-by-side */
gap: clamp(0.2rem, 5vw, 6rem); /* Responsive spacing between videos */
}
/* New flex container for videos */
.cat-videos {
display: flex;
justify-content: center;
align-items: flex-end;
gap: clamp(2rem, 5vw, 6rem); /* space between the two cats */
width: 100%;
}
/* Videos retain their height but become fluidly responsive */
.cat-video {
height: clamp(85px, 15vw, 150px);
opacity: 0;
transition: opacity 0.4s ease;
}
.cat-video.kitten {
transform: translateX(-100%);
animation: kittenIn 1.2s ease-out forwards;
}
.cat-video.adult {
transform: translateX(100%);
animation: adultIn 1.2s ease-out forwards;
}
/* Animations */
@keyframes kittenIn {
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes adultIn {
to {
transform: translateX(0);
opacity: 1;
}
}
/*TOY AND ACCESSORIES PRODUCT PAGES*/
/* =========================================
CLOUD9 TOY PAGES (namespaced: c9toy-*)
========================================= */
/* ---------- HERO ---------- */
.c9toy-hero {
background: var(--c9-cream);
padding: clamp(1rem, 3vw, 2rem) 0;
}
.c9toy-hero__inner {
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
align-items: start;
padding: 0 clamp(1rem, 3vw, 2rem);
}
/* Gallery */
.c9toy-gallery {
display: grid;
gap: .75rem;
}
.c9toy-gallery__main {
background: var(--c9-purple);
border: 2px solid var(--c9-cream);
border-radius: 16px;
box-shadow: 0 6px 15px rgba(0,0,0,.06);
overflow: hidden;
}
.c9toy-gallery__main.bowls-gallery{
background: rgb(189, 221, 239);
}
.c9toy-gallery__main.brushes-gallery{
background: rgb(253, 214, 190);
}
.c9toy-gallery__main.beds-gallery{
background: rgb(239, 189, 218);
}
.c9toy-gallery__main img { display: block; width: 100%; height: auto; }
.c9toy-gallery__thumbs {
display: grid;
gap: .5rem;
grid-template-columns: repeat(4, 1fr);
}
.c9toy-thumb {
border: 2px solid var(--c9-cream);
background: #fff;
border-radius: 12px;
padding: .25rem;
cursor: pointer;
box-shadow: 0 4px 10px rgba(0,0,0,.05);
}
.c9toy-thumb img { width: 100%; height: auto; display: block; border-radius: 8px; }
.c9toy-thumb.is-active { border-color: var(--c9-pink); }
/* Summary / Buy */
.c9toy-summary { display: grid; gap: 1rem; }
.c9toy-title { font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 800; color: var(--c9-navy); }
.c9toy-tagline { color: var(--c9-navy); opacity: .9; line-height: 1.5; }
.c9toy-feature-list {
margin: .25rem 0 0;
padding-left: 1.2rem;
color: var(--c9-navy);
}
.c9toy-feature-list li { margin: .25rem 0; font-weight: 600; }
.c9toy-buy {
background: #fff;
border: 2px solid var(--c9-cream);
border-radius: 16px;
padding: 1rem;
box-shadow: 0 6px 15px rgba(0,0,0,.06);
margin-top: 0 !important;
}
.c9toy-price-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .75rem; }
.c9toy-price { font-size: clamp(1.3rem, 4vw, 1.8rem); font-weight: 800; color: var(--c9-navy); }
.c9toy-buy__actions { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.c9toy-qty-label {
font-weight: 700;
color: var(--c9-navy);
font-size: 1.5rem;
margin-top: 20px;
padding-right: 15px;
}
.c9toy-qty-select {
border: 2px solid var(--c9-cream);
border-radius: 12px;
padding: .45rem .6rem;
font-weight: 700;
color: var(--c9-navy);
background: #fff;
margin-top: 10px;
height: 50px;
width: 50px;
font-size: 1rem;
}
.c9toy-add-btn { white-space: nowrap; }
.c9toy-note { margin-top: .5rem; font-size: .9rem; color: var(--c9-navy); opacity: .8; }
/* Container: grid so pills align + match your other pill style */
.c9toy-trust{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr)); /* desktop: 1 row (3 pills) */
gap: 10px;
align-items: stretch;
}
/* Pills: same size + centered text */
.c9toy-badge{
width: 100%;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 9px 12px;
border-radius: 999px;
background: var(--c9-lpink);
border: 1px dashed rgba(0,0,0,0.18);
box-shadow: 0 10px 22px rgba(0,0,0,0.06);
color: var(--c9-navy);
font-weight: 650;
font-size: 0.95rem;
opacity: 0.95;
transition: transform 160ms ease;
}
/* Tablet + mobile: 1 per row (so 3 rows total), centered column */
@media (max-width: 1020px){
.c9toy-trust{
grid-template-columns: minmax(0, 520px); /* ⟵ EXPLICIT max pill width */
justify-content: center;
}
}
/* Optional hover to match your other pills */
.c9toy-badge:hover{
transform: translateY(-1px);
}
/* Cat SVG bullets (only where you add .cat-svg-bullet) */
.cat-svg-bullet{
list-style:none;
margin:20px 0px;
padding:0;
display:grid;
gap:10px;
font-size:clamp(.85rem,1.4vw,1rem);
}
.cat-svg-bullet li{
position:relative;
padding-left:30px;
line-height:1.45;
font-weight:600;
color:var(--c9-navy);
}
.cat-svg-bullet li::before{
content:"";
position:absolute; top:.2em; left:0;
width:20px; height:20px;
-webkit-mask:url('assets/CatBullet.svg') no-repeat center / contain;
mask:url('assets/CatBullet.svg') no-repeat center / contain;
background:#FE6892; opacity:.95;
transition:transform 180ms ease;
}
.cat-svg-bullet li:hover::before{
transform:rotate(-6deg) scale(1.04);
}
.cat-svg-bullet .c9toy-link{
color:#FE6892;
font-weight:800;
text-decoration: underline;
text-underline-offset: 2px;
}
.cat-svg-bullet .c9toy-link:visited{
color:#FE6892;
}
/* Make the whole sentence (commas, ellipsis, !) pink by default */
.bundle-teaser{
background: var(--c9-lpink);
border-radius: 22px;
padding: 1.1rem 1.2rem;
box-shadow: 0 10px 25px rgba(0,0,0,.06);
}
.bundle-title{
margin: 0 0 .8rem 0;
font-weight: 800;
font-size: 1.15rem;
color: #1b2230;
}
.bundle-row{
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
}
.bundle-item{
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
.bundle-img{
width: 74px; /* explicit size (edit this if you want bigger/smaller) */
height: 74px; /* explicit size */
object-fit: cover;
border-radius: 16px;
background: #f6f1ea;
padding: 8px;
}
.bundle-plus{
font-weight: 900;
font-size: 1.6rem;
line-height: 1;
opacity: .75;
transform: translateY(-1px);
}
.bundle-btn{
margin-left: auto;
padding: .75rem 1.1rem;
border-radius: 999px;
border: none;
font-weight: 800;
cursor: pointer;
background: #e9e7f6;
color: #1b2230;
}
@media (max-width: 560px){
.bundle-btn{
width: 100%;
margin-left: 0;
}
}
/* Desktop layout */
@media (min-width: 980px) {
.c9toy-hero__inner { grid-template-columns: 1.15fr .85fr; gap: 2rem; }
.c9toy-gallery__thumbs { grid-template-columns: repeat(6, 1fr); }
}
/* ---------- HIGHLIGHTS ---------- */
.c9toy-highlights {
padding: clamp(1.2rem, 3vw, 2rem) 0;
background: var(--c9-pink);
}
.c9toy-highlights .section-title { text-align: center; }
.c9toy-feature-grid {
max-width: 1100px;
margin: 0 auto;
padding: 0 clamp(1rem, 3vw, 2rem);
display: grid;
grid-template-columns: 1fr;
gap: .9rem;
}
@media (min-width: 760px) { .c9toy-feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1120px) { .c9toy-feature-grid { grid-template-columns: repeat(4, 1fr); } }
.c9toy-card {
background: var(--c9-cream);
border: 2px solid var(--c9-cream);
border-radius: 14px;
padding: 1rem;
box-shadow: 0 6px 15px rgba(0,0,0,.06);
color: var(--c9-navy);
}
.c9toy-card h3 { margin: .35rem 0 .25rem; font-weight: 800;
font-size: clamp(.95rem,1.7vw,1.4rem); }
.c9toy-card p {
margin: 0;
line-height: 1.45;
font-size: clamp(.85rem,1.4vw,1rem);
}
.c9toy-card__icon { font-size: 1.35rem; }
/* ---------- HOW TO REFILL ---------- */
.c9toy-how {
margin: 0 auto;
padding: clamp(1.2rem, 3vw, 2rem) clamp(1rem, 3vw, 2rem);
background: var(--c9-pink);
display: flex;
justify-content: center !important;
align-items: center;
}
.c9toy-how-wrapper {
max-width: 900px;
margin: 0 auto; /* centers the whole wrapper itself */
display: flex;
flex-direction: column; /* stack items vertically */
align-items: center; /* ✅ centers children horizontally */
text-align: center; /* optional: center-align text as well */
}
.section-title {
font-size: clamp(1.5rem, 4.2vw, 4.5rem);
margin-bottom: 2.5rem;
color: var(--c9-cream);
}
.chirpy-toy {
max-width: 250px; /* or clamp() for responsiveness */
height: auto;
margin-bottom: 2rem;
}
.c9toy-steps {
counter-reset: step;
margin: .4rem 0 0 0;
padding: 0;
list-style: none;
}
.c9toy-steps li {
counter-increment: step;
position: relative;
background: var(--c9-purple);
border: 2px solid var(--c9-cream);
border-radius: 12px;
padding: .75rem .75rem .75rem 2.4rem;
margin-bottom: .6rem;
box-shadow: 0 6px 15px rgba(0,0,0,.05);
color: var(--c9-navy);
font-weight: 600;
}
.c9toy-steps li::before {
content: counter(step);
position: absolute;
left: .75rem; top: 50%;
transform: translateY(-50%);
width: 1.4rem; height: 1.4rem;
border-radius: 999px;
background: var(--c9-pink);
color: #fff;
display: grid; place-items: center;
font-weight: 800; font-size: .8rem;
}
.c9toy-tip { color: var(--c9-navy); opacity: .85; margin-top: .25rem; }
/* ---------- CARE & SPECS ---------- */
/* ---------- CARE & SPECS ---------- */
.c9toy-care-specs{
background: linear-gradient(to bottom, var(--c9-pink) 0%, var(--c9-cream) 100%);
padding: clamp(1.2rem, 3vw, 2rem) 0;
}
.c9toy-care-specs h2 { margin: .35rem 0 .25rem; font-weight: 800;
font-size: clamp(.95rem,1.7vw,1.4rem); }
.c9toy-care-specs li,
.c9toy-care-specs dd,
.c9toy-care-specs dt {
margin: 0;
line-height: 1.45;
font-size: clamp(.85rem,1.4vw,1rem);
}
.c9toy-care-specs__inner{
max-width: 1100px;
margin: 0 auto;
padding: 0 clamp(1rem, 3vw, 2rem);
}
/* One large container */
.c9toy-care-specs__box{
background: var(--c9-cream);
border: 2px solid var(--c9-cream);
border-radius: 16px;
padding: clamp(1rem, 2.4vw, 1.4rem);
box-shadow: 0 6px 15px rgba(0,0,0,.06);
color: var(--c9-navy);
display: grid;
grid-template-columns: 1fr;
gap: 1.2rem;
}
@media (min-width: 980px){
.c9toy-care-specs__box{
grid-template-columns: 1fr 1fr;
gap: 1.6rem;
align-items: start;
}
}
/* Remove the old “two separate cards” styling */
.c9toy-care, .c9toy-specs{
background: transparent;
border: 0;
border-radius: 0;
padding: 0;
box-shadow: none;
}
.c9toy-checks{ margin: .25rem 0 0; padding-left: 1.2rem; }
.c9toy-checks li{ font-weight: 600; margin: .25rem 0; }
.c9toy-specs__list{ margin: .4rem 0 0; }
.c9toy-specs__list dt{ font-weight: 800; margin-top: .45rem; color: var(--c9-navy); }
.c9toy-specs__list dd{ margin: 0 0 .25rem 0; color: var(--c9-navy); opacity: .95; }
/* ---------- PAIRS WELL WITH ---------- */
/* Reuses your .best-sellers carousel styles/JS */
.c9toy-pairs { padding-top: 0; }
.c9toy-pairs .carousel-item { text-decoration: none; }
.c9toy-pairs .best-seller-label p { font-weight: bolder; color: var(--c9-navy); text-decoration: none;}
/* Best Sellers product title links */
.carousel-item > a,
.carousel-item > a:link,
.carousel-item > a:visited,
.carousel-item > a:hover,
.carousel-item > a:active{
text-decoration: none !important;
}
.best-seller-label::after{
content: none !important;
}
/* ---------- FAQ/REVIEWS WRAPPER ---------- */
.c9toy-faq-reviews {
max-width: 400px;
margin: 0 auto;
padding: 0 clamp(1rem, 3vw, 2rem);
}
.c9toy-faq-reviews .expand-box2 {
height: 60px;
padding: 5px;
}
/*reviews on toy page*/
.toy-reviews {
text-align: center;
padding: 3rem 1rem;
background: var(--c9-cream);
}
.toy-review-wrapper {
display: flex;
gap: 2rem;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 2rem;
}
.toy-review-card {
flex: 1 1 250px;
max-width: 280px;
background: #fffbea;
border-radius: 12px;
box-shadow: 3px 3px 0 var(--c9-navy);
padding: 1rem;
}
.toy-review-card img {
width: 100%;
border-radius: 10px;
margin-bottom: 0.8rem;
}
.toy-review-caption {
font-size: 0.95rem;
font-weight: 600;
color: var(--c9-navy);
}
.toy-review-cta {
max-width: 700px;
margin: 0 auto;
}
.toy-review-cta p {
margin-bottom: 1rem;
font-weight: 500;
}
.purple-to-cream {
background:linear-gradient( to bottom, var(--c9-purple) 0%, var(--c9-cream) 25%, var(--c9-cream) 75%, var(--c9-cream) 100%) !important;
}
.purple-to-cream h2 {
margin-top: 35px !important;
color: var(--c9-navy) !important;
}
/*NEW MAIN*//* =========================
HERO: clean two-column layout
========================= */
/* =========================
HERO: two-column → mobile stack
========================= */
:root{
--hero-header-height: 160px;
--hero-gutter: clamp(16px, 2.4vw, 36px);
--left-max: 620px;
--tile-radius: 20px;
--purple:#6a57d2; --pink:#fe7aa5; --navy:#2F3655; --cream:#F7E5D6;
}
/* ===== Base (desktop-first) ===== */
.main-hero{
background: var(--navy);
color: var(--cream);
padding-inline: clamp(20px, 4vw, 48px);
padding-block: clamp(12px, 2vw, 28px);
}
.hero-inner{
display: grid;
grid-template-columns: minmax(320px, var(--left-max)) 1fr;
grid-template-areas:
"copy cat"
"buttons cat";
align-items: stretch;
gap: var(--hero-gutter);
min-height: 70vh;
}
.hero-copy { grid-area: copy; }
.hero-products{ grid-area: buttons; }
.hero-right { grid-area: cat; }
.hero-copy h1{
margin: 0 0 14px;
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1;
font-size: clamp(2.6rem, 5.6vw, 3.6rem);
color: var(--cream);
}
@media (min-width: 800px){
.hero-copy h1 {
margin: 133px 0 14px;
}
}
.head-subtext{
margin: 0 0 18px;
font-size: clamp(1.05rem, 1.1vw, 1.25rem);
line-height: 1.35;
}
.tagline {
font-weight: bolder;
}
/* Buttons row – two across on desktop */
.hero-products{
display: grid;
grid-template-columns: repeat(2, minmax(150px, 1fr)); /* was 220px min */
gap: 12px; /* was 16px */
justify-content: start; /* prevents stretching */
max-width: 370px;
}
/* Obscure pill caption inside hero-stage */
.hero-stage .hc9-pillcap{
position: absolute;
bottom: 25px;
z-index: 5;
display: inline-block;
padding: 10px 14px;
border-radius: 999px;
background: rgba(247, 229, 214, 0.92); /* matches your cream tone */
border: 2px solid #2F3655;
box-shadow: 2px 2px 0 #2F3655;
color: #2F3655;
font-weight: 800;
font-size: clamp(0.85rem, 1.2vw, 1.05rem);
line-height: 1;
letter-spacing: -0.02em;
margin: 0; /* removes default p spacing */
pointer-events: none; /* won’t block clicks */
}
/* Mobile tweak so it stays readable and doesn’t collide */
@media (max-width: 700px){
.hero-stage .hc9-pillcap{
padding: 8px 12px;
font-size: clamp(0.8rem, 3.6vw, 1rem);
}
}
/* Portrait tiles (60/40) */
.shop-tile{
display: grid;
grid-template-rows: 60% 40%;
aspect-ratio: 3 / 4;
border-radius: var(--tile-radius);
overflow: hidden;
text-decoration: none;
box-shadow: 0 12px 24px rgba(20,24,44,.16);
transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.tile-media{ display:grid; place-items:center; padding:12px; overflow:hidden; }
.tile-media img{
height:100%; width:auto; max-width:100%; object-fit:contain; display:block;
filter: drop-shadow(0 12px 20px rgba(0,0,0,.18));
transition: transform .25s ease;
}
.tile-body{
display:grid; align-content:center;
gap:6px;
padding:0px 14px 14px;
text-align:left;
background: linear-gradient(0deg, rgba(255,255,255,.10), rgba(255,255,255,0));
}
.tile-body h3{ margin:0 0 6px; font-weight:900; font-size:clamp(1.05rem, 1rem + .5vw, 1.3rem); line-height:1.1; }
.tile-body p{ margin:0; font-size:clamp(.9rem, .9vw, 1.05rem); line-height:1.32; opacity:.95; }
.shop-tile:hover{ transform:translateY(-2px); box-shadow:0 18px 40px rgba(20,24,44,.22); }
.shop-tile:hover .tile-media img{ transform:translateY(-3px) scale(1.03); }
/* Themes */
.theme-purple{ background:linear-gradient(180deg, var(--purple) 0%, rgba(106,87,210,.85) 65%, rgba(106,87,210,0) 100%); color:var(--c9-cream); }
.theme-pink { background:linear-gradient(180deg, var(--pink) 0%, rgba(254,122,165,.85) 65%, rgba(254,122,165,0) 100%); color:var(--c9-cream); }
.theme-purple:hover{ background:var(--purple); }
.theme-pink:hover { background:var(--pink); }
/* Cat */
.hero-right{ position:relative; display:grid; place-items:center; }
.hero-cat{ width:clamp(520px, 44vw, 900px); height:auto; object-fit:contain; display:block; filter:drop-shadow(0 24px 48px rgba(0,0,0,.18)); }
/* =========================
HERO CAT: auto carousel (no layout change)
========================= */
/* =========================
HERO CAT CAROUSEL — FIXED (fills hero-right, no blank)
========================= */
.hero-right {
position: relative; /* you already had this */
display: grid; /* keep your layout */
place-items: center; /* keep your layout */
}
/* Carousel viewport must fill the grid cell */
.hero-cat-carousel{
width: 100%;
height: 100%;
overflow: hidden;
}
/* Track should size to content (DON'T force 300%) */
.hero-cat-track{
display: flex;
height: 100%;
width: 100%;
transition: transform 0.6s ease;
will-change: transform;
}
/* Each slide is exactly the width of the viewport */
.hero-cat-slide{
flex: 0 0 100%;
width: 100%;
height: 100%;
position: relative; /* caption positioning */
display: grid;
place-items: center;
}
/* IMPORTANT: your hero cat width must apply INSIDE slide */
.hero-cat-slide .hero-cat{
width: clamp(520px, 44vw, 900px);
height: auto;
object-fit: contain;
display: block;
filter: drop-shadow(0 24px 48px rgba(0,0,0,.18));
}
/* Product overlay in hero-right */
.hero-cat-slide{
position: relative; /* already in your carousel CSS, but must be true */
}
.hero-product-show{
position: absolute;
left: 120px; /* move this to match your mock */
bottom: 80px; /* move this to match your mock */
width: clamp(140px, 15vw, 200px);
height: auto;
z-index: 3; /* above cat */
filter: drop-shadow(0 12px 20px rgba(0,0,0,.25));
pointer-events: none;
}
/* Mobile tweak so it doesn’t cover the cat */
@media (max-width: 1200px){
.hero-product-show{
left: 55px;
bottom: 80px;
width: clamp(70px, 22vw, 110px);
}
}
/* =========================
HERO STAGE (stable overlay anchoring)
========================= */
.hero-stage{
position: relative;
width: min(900px, 100%);
aspect-ratio: 1 / 1; /* desktop stage is square */
display: grid;
place-items: center;
max-width: 690px;
}
/* Cat fills the stage predictably */
.hero-stage .hero-cat{
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
/* Product overlay (desktop) */
.hero-stage .hero-product{
position: absolute;
left: -5%;
bottom: 0%;
width: 30%;
height: auto;
z-index: 3;
pointer-events: none;
filter: drop-shadow(0 12px 20px rgba(0,0,0,.25));
}
.hero-stage .toy-slide{
left: -12%;
bottom: -6%;
width: 66%;
}
@media (max-width: 1500px){
.hero-stage{
width: 92vw;
max-width: 420px;
aspect-ratio: 4 / 5; /* taller frame fits the cat nicely */
}
/* Slightly zoom the cat inside stage so it doesn't look tiny */
.hero-stage .hero-cat{
object-fit: contain;
transform: scale(1.55);
}
/* Product: keep it in bottom-left, but bigger and more central */
.hero-stage .hero-product{
left: -13%;
bottom: 0%;
width: 39%;
}
.hero-stage .hc9-pillcap {
bottom: -23px;
}
.hero-stage .toy-slide{
left: -40%;
bottom: -11%;
width: 88%;
}
}
@media (max-width: 1302px){
.hero-stage{
width: 92vw;
max-width: 420px;
aspect-ratio: 4 / 5; /* taller frame fits the cat nicely */
}
/* Slightly zoom the cat inside stage so it doesn't look tiny */
.hero-stage .hero-cat{
object-fit: contain;
transform: scale(1.05);
}
/* Product: keep it in bottom-left, but bigger and more central */
.hero-stage .hero-product{
left: -3%;
bottom: 14%;
width: 29%;
}
.hero-stage .toy-slide{
left: -20%;
bottom: 0%;
width: 78%;
}
.hero-stage .hc9-pillcap {
bottom: 32px;
}
}
/* =========================
MOBILE FIX (≤900px)
Make stage shorter so it doesn't dominate,
and reposition overlays for that shape.
========================= */
@media (max-width: 900px){
.hero-stage{
width: 92vw;
max-width: 420px;
aspect-ratio: 4 / 5; /* taller frame fits the cat nicely */
}
/* Slightly zoom the cat inside stage so it doesn't look tiny */
.hero-stage .hero-cat{
object-fit: contain;
transform: scale(1.05);
}
/* Product: keep it in bottom-left, but bigger and more central */
.hero-stage .hero-product{
left: 3%;
bottom: 12%;
width: 28%;
}
.hero-stage .toy-slide{
left: -19%;
bottom: 10%;
width: 68%;
}
}
/* Mobile keeps your sizing */
@media (max-width: 700px){
.hero-cat-slide .hero-cat{ width:68vw; max-height:28vh; }
}
/* Tablet portrait: keep your existing hero-cat caps */
@media (min-width: 541px) and (max-width: 900px){
.hero-cat-slide .hero-cat{
max-height: 36vh !important;
height: auto !important;
object-fit: contain !important;
}
}
/* ======================================================
XS / PHONES (≤ 540px) — fit entire hero on one screen
====================================================== */
@media (max-width: 900px){
.hero-inner{
grid-template-columns: 1fr;
grid-template-areas:
"copy"
"cat"
"buttons";
gap: 2px;
min-height: calc(100dvh - var(--hero-header-height));
}
.hero-copy{ margin-top: clamp(8px, 4vh, 24px); }
.hero-copy h1{ font-size: clamp(2.4rem, 7.2vw, 3.5rem); margin-bottom:6px; }
.head-subtext{ font-size: clamp(1.1rem, 4vw, 1.35rem); margin-bottom:8px; }
.hero-right{ place-items:center; }
.hero-cat{ width:68vw; max-height:28vh; }
.shop-tile{ border-width:2px; border-radius:16px; }
.tile-media{ padding:10px; }
.tile-body{ padding:0px 12px 12px; }
.tile-body h3{
font-size: clamp(.95rem, 3.2vw, 1.05rem);
margin-bottom:4px;
}
.tile-body p{
font-size: clamp(.7rem, 2.2vw, .9rem);
line-height:1.25; }
}
/* =====================================================
TABLET LANDSCAPE / SMALL LAPTOP (901–1199px): 2 cols
(fixes 1024-ish widths & small laptops)
===================================================== */
@media (min-width: 901px) and (max-width: 1199px){
.hero-inner{
grid-template-columns: minmax(360px, 48%) 1fr !important;
gap: clamp(16px, 2.2vw, 28px) !important;
}
.hero-copy h1{ font-size: clamp(2.4rem, 4.2vw, 3.2rem) !important; }
.head-subtext{ font-size: clamp(1rem, 1.2vw, 1.18rem) !important; }
.hero-right{ place-items: center !important; }
.hero-products{
grid-template-columns: repeat(2, minmax(200px, 1fr)) !important;
gap: 16px !important;
}
.shop-tile{ border-width: 3px !important; }
}
/* =====================================================
XS phones safety (≤380px): keep 2-up without overflow
===================================================== */
@media (max-width: 900px){
.hero-products{
grid-template-columns: repeat(2, 140px) !important; /* fixed tile width */
justify-content: center !important; /* centers columns */
justify-self: center !important; /* centers the whole grid as a grid-item */
width: fit-content !important; /* shrink-wrap */
margin: 0 auto !important; /* fallback centering */
max-width: none !important;
padding-top: 20px;
}
}
/* MOBILE: keep carousel visible + move it up + equal spacing */
@media (max-width: 900px){
/* Give the cat row a controlled height */
.hero-inner{
grid-template-rows: auto 34vh auto !important;
}
/* Center the carousel within its grid row */
.hero-right{
display: grid !important;
place-items: center !important;
padding: 8px 0 !important;
}
/* DO NOT make the carousel a grid */
.hero-cat-carousel{
height: auto !important;
max-height: 51vh !important;
width: 100% !important;
overflow: hidden !important;
}
/* Keep the track flex so slides work */
.hero-cat-track{
display: flex !important;
height: 100% !important;
}
/* Slides fill the viewport */
.hero-cat-slide{
height: 100% !important;
display: grid !important;
place-items: center !important;
}
/* Stage: keep it nicely sized */
.hero-stage{
width: 92vw !important;
max-width: 420px !important;
aspect-ratio: 1 / 1 !important;
}
}
/*ABOUT US*/
:root {
--header-width: 900px; /* max video width */
--header-max: 92vw; /* max percentage of screen width */
--vid-opacity: 1; /* slightly transparent */
--vid-brightness: 1.04; /* 10% brighter */
--vid-contrast: 1; /* 5% more contrast */
} /* 1 = normal, <1 = less contrast, >1 = more */
.about-section {
background:var(--c9-fakepink);
padding: 45px 16px 80px;
display: flex;
flex-direction: column;
align-items: center; /* centers content horizontally */
gap: 20px;
position: relative; /* anchor the pseudo-element */
overflow: visible; /* allow the wave to spill over */
}
.about-header {
width: min(var(--header-width), var(--header-max));
aspect-ratio: 1920 / 720; /* keeps your video shape */
border-radius: 16px;
overflow: hidden;
max-width: 690px;
}
.about-header__video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: opacity(var(--vid-opacity))
brightness(var(--vid-brightness))
contrast(var(--vid-contrast));
}
.about-body {
margin-top:0;
max-width: 900px;
text-align: center;
color: var(--c9-cream);
padding: 0px 150px;
font-weight: bold;
}
.about-body h2 {
color: var(--c9-cream);
text-shadow: none;
padding: 0;
}
.about-body p {
color: var(--c9-cream);
text-shadow: none;
padding: 0;
line-height: 1.4;
margin-top: 40px;
font-size: clamp(.85rem, 2vw, 1.05rem);
}
@media (max-width: 1200px) {
.about-body {
padding: 0px 50px;
}
}
/*section 2*/
/* SECTION 2 */
.section-covered{
background: var(--c9-cream);
padding-block: clamp(2rem, 5vh, 4rem);
}
.left-text{
position: relative;
max-width: 1600px;
margin: 0 auto 45px;
padding: 0 24px;
}
/* Center the heading itself (no flex) */
.section-covered-header{
margin: 0;
text-align: center;
font-size: clamp(3rem, 6vw, 3.6rem);
color: var(--c9-navy);
font-weight: 800;
line-height: 1;
letter-spacing: -2.8px;
z-index: 2;
position: relative;
}
.section-covered-sub {
max-width: 70ch; /* ⟵ EXPLICIT: readable line length */
margin: 10px auto 28px; /* centers + space below */
text-align: center;
color: var(--c9-navy);
line-height: 1.6;
font-size: clamp(1rem, 1.6vw, 1.2rem);
opacity: 0.9;
}
/* Tick list under the covered subheading */
/* === Trust pill grid (2-up desktop, 1-up mobile, equal widths) === */
.covered-ticks{
list-style: none;
padding: 0;
margin: 18px auto 0;
width: min(860px, 100%); /* ⟵ EXPLICIT max width */
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 per row */
gap: 14px 18px;
justify-items: stretch; /* each pill fills the cell */
align-items: stretch;
}
/* Each pill = full cell width, consistent height */
.covered-ticks li{
width: 100%;
box-sizing: border-box;
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
border-radius: 999px;
background: rgba(255,255,255,0.55);
border: 1px solid rgba(0,0,0,0.08);
color: var(--c9-navy);
font-weight: 800;
font-size: clamp(0.95rem, 1.2vw, 1.05rem);
line-height: 1.2;
justify-content: flex-start; /* tick + text start aligned */
}
/* Green tick bubble */
.covered-ticks li::before{
content: "✓";
flex: 0 0 24px; /* ⟵ EXPLICIT fixed tick size */
width: 24px;
height: 24px;
border-radius: 999px;
display: grid;
place-items: center;
background: rgba(143,239,164,.28);
border: 2px solid rgba(28,160,86,.65);
color: rgb(28,160,86);
font-weight: 900;
font-size: 1rem;
}
/* Mobile: 1 per row */
@media (max-width: 670px){
.covered-ticks{
grid-template-columns: 1fr;
width: min(520px, 100%);
padding: 0 18px; /* stops edge hugging */
}
}
/* Badge: taken out of the flow so it doesn't shift the heading */
.cover-badge{
position: absolute;
right: 24px; /* distance from the right edge of the header block */
top: 50%; /* vertically align with heading line */
transform: translateY(-55%); /* true vertical centering */
margin: 0;
z-index: 1;
}
.cover-badge img{
max-width: 165px; /* explicit width cap */
height: auto; /* keep aspect ratio */
border-radius: 16px;
}
/* Optional: on small screens, drop the badge below and center it */
@media (max-width: 1345px){
.cover-badge{
margin-top: 28px;
right: -44px;
transform: translateY(-55%);
top: 100%;
}
.cover-badge img{ max-width: 145px; }
.section-covered-header{ padding-bottom: 10px;}
}
@media (max-width: 670px){
.cover-badge{
right: -9px;
top: 103%;
}
}
/* ==== Grid wrapper ==== */
.section-covered-grid{
max-width: 1600px;
margin: 0 auto;
padding: 0 24px;
}
/* ==== TWO-column grid of cards ==== */
.cards-grid{
--gap: clamp(1rem, 2.5vw, 2rem);
--radius: 18px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr)); /* TWO columns */
gap: var(--gap);
align-items: stretch;
}
/* ==== Card: TEXT | IMAGE (fixed at all sizes) ==== */
.cover-card{
background: white;
border-radius: var(--radius);
padding: clamp(14px, 2vw, 20px);
--thumbW: clamp(160px, 26vw, 220px); /* explicit image column width */
display: grid;
grid-template-columns: 1fr var(--thumbW);/* TEXT | IMAGE */
align-items: center;
column-gap: clamp(12px, 2vw, 20px);
position: relative;
overflow: hidden;
box-shadow: 0 6px 24px rgba(0,0,0,.06);
transition: transform .25s ease, box-shadow .25s ease;
}
.cover-card:hover{
transform: translateY(-4px);
box-shadow: 0 10px 28px rgba(0,0,0,.10);
}
/* CTA button inside cover cards */
.c9-card-cta{
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 10px;
padding: 10px 14px;
border-radius: 999px;
background: rgba(247, 229, 214, 0.92); /* cream */
border: 2px solid #2F3655; /* navy */
box-shadow: 2px 2px 0 #2F3655;
color: #2F3655;
font-weight: 800;
font-size: 0.95rem;
line-height: 1;
text-decoration: none;
white-space: nowrap;
position: relative;
z-index: 3; /* IMPORTANT: sits above the full-card .cover-link overlay */
}
.c9-card-cta:hover{
transform: translateY(-1px);
}
.c9-card-cta:active{
transform: translateY(0);
box-shadow: 1px 1px 0 #2F3655;
}
/* Keyboard focus */
.c9-card-cta:focus-visible{
outline: 3px solid rgba(254, 122, 165, 0.9);
outline-offset: 3px;
}
/* Optional: make CTA full width on small screens (more tappable) */
@media (max-width: 700px){
.c9-card-cta{
width: fit-content;
padding: 10px 14px;
font-size: 0.9rem;
}
}
/* soft wash colours (as before) */
.cover-card--anxiety { background-color: rgba(255, 251, 248, 0.35); }
.cover-card--digestion { background-color: rgba(143,239,164,.22); }
.cover-card--hydration { background-color: rgba(130,194,246,.22); }
.cover-card--skin { background-color: rgba(244, 87,131,.22); }
.cover-card--eye { background-color:#a49cf9a1; }
.cover-card--joints { background-color: rgba(244,148, 87,.22); }
/* text */
.cover-card .card-body{ min-width: 0; }
.cover-card .card-body h3{
margin: 0 0 6px;
font-weight: 800;
font-size: clamp(0.85rem, 1.6vw, 1.4rem);
color: var(--c9-c);
}
.cover-card .card-body p{
margin: 0;
color: var(--c9-navy);
line-height: 1.45;
font-size: clamp(.85rem, 1.1vw, 1.05rem);
}
/* image (right) */
.cover-card .card-thumb{
width: 100%;
height: auto; /* explicit */
object-fit: cover;
border-radius: 14px;
justify-self: end;
}
/* link covers card */
.cover-link{
position: absolute;
inset: 0;
z-index: 1;
border-radius: var(--radius);
text-decoration: none;
}
/* CTA (unchanged) */
.product-cta{
display: flex;
justify-content: center;
margin-top: 24px;
}
/* ===== Responsive: one-column grid on small screens ===== */
@media (max-width: 970px){
.cards-grid{
grid-template-columns: 1fr; /* ONE column */
gap: 16px;
}
}
@media (max-width: 670px){
.section-covered {
padding: 0;
}
}
/*Best sellers section*/
/* =========================
Best Sellers – FULL CSS
========================= */
/* Section */
.best-sellers{
background: var(--c9-cream); /* bottom fade end */
padding: 1rem 1rem 3rem; /* compact base vertical padding */
text-align: center;
position: relative;
}
.best-sellers h2{
margin: 10px 0 24px;
color: var(--c9-navy);
font-size: clamp(1.6rem,4vw, 2rem);
font-weight: 800;
line-height: 1;
letter-spacing: -2.8px;
}
/* Optional product label under image */
.best-seller-label{
font-size: 1rem;
margin-top: .5rem;
color: var(--c9-navy);
text-decoration: none;
}
a.carousel-item {
text-decoration: none;
}
/* -------- Viewport (clips) -------- */
.carousel-wrapper{
position: relative;
max-width: 1200px;
margin: 0 auto;
padding: 0 3rem; /* space reserved for arrows */
overflow: hidden; /* CLIP at edges */
}
/* Edge masks (hide belt under arrows). Match section bg. */
.carousel-wrapper::before,
.carousel-wrapper::after{
content: "";
position: absolute;
top: 0; bottom: 0;
width: 3rem; /* = wrapper side padding */
z-index: 2; /* above belt, below arrows */
pointer-events: none;
}
.carousel-wrapper::before{ left: 0; }
.carousel-wrapper::after { right: 0; }
/* -------- Moving belt -------- */
.carousel-track{
display: flex;
gap: 16px; /* consistent inter-card gap */
align-items: flex-start; /* avoid tall-item vertical stretch */
will-change: transform;
z-index: 0; /* under masks & arrows */
}
/* Cards (4-up by default, gap-aware width) */
.carousel-item{
flex: 0 0 calc((100% - 3*16px)/4);
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden; /* no spill outside card */
padding: 0;
}
/* Images scale with viewport; stay contained */
.carousel-item img{
width: 100%;
height: clamp(180px, 18vw, 260px);
object-fit: contain;
display: block;
border-radius: .5rem;
}
/* -------- Arrows (overlay) -------- */
.carousel-arrow{
position: absolute; /* sit over belt */
top: 50%;
transform: translateY(-50%);
z-index: 3;
width: 45px; height: 45px;
background: #FFF3E0;
border: 2px solid #2F3655;
border-radius: 999px;
box-shadow: 2px 2px 0 #2F3655;
display: grid; place-items: center;
cursor: pointer;
transition: transform .2s ease;
}
.carousel-arrow:hover{ transform: translateY(-50%) scale(1.1); }
.carousel-arrow.left { left: .5rem; }
.carousel-arrow.right { right: .5rem; }
.carousel-arrow img{ width: 24px; height: 24px; }
/* =========================
Responsive breakpoints
========================= */
/* --- ≤ 1170px: 3-up, scale jars down, tighten spacing --- */
@media (max-width: 1170px){
.best-sellers{ padding: 2.75rem 1rem 1rem 1rem; }
.best-sellers h2{ margin: 8px 0 18px; }
.carousel-wrapper{ padding: 0 2rem; }
.carousel-wrapper::before,
.carousel-wrapper::after{ width: 2rem; }
.carousel-track{ gap: 12px; }
.carousel-item{
flex: 0 0 calc((100% - 2*12px)/3); /* (100% - gaps)/3 */
}
.carousel-item img{
height: clamp(140px, 22vw, 200px); /* smaller at this tier */
}
.carousel-arrow{ width: 40px; height: 40px; }
}
/* --- ≤ 650px: 2-up, small jars, tight gap --- */
/* PHONE: nuke the gap between the two visible items */
@media (max-width: 650px) {
.carousel-track {
gap: 0;
justify-content: center;
}
.carousel-item {
flex: 0 0 45%;
max-width: 45%;
box-sizing: border-box;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
min-height: 200px; /* ensures room for image + label */
}
.carousel-item img {
width: 90%;
height: auto;
max-height: 130px; /* leaves space for label */
object-fit: contain;
margin-bottom: 8px; /* gap between image and text */
}
.best-seller-label {
font-size: 0.85rem;
text-align: center;
white-space: normal; /* allow wrapping */
line-height: 1.2;
}
.carousel-arrow {
width: 30px; height: 30px;
}
}
/* TOYS AND ACCESSORIES SECTION — cleaned & responsive */
/* --- SECTION 3: Toys & Accessories (simple, stable layout) --- */
/* SECTION: Toys & Accessories (simple) */
/* explicit sizes noted with ⟵ EXPLICIT */
/* ===============================
TOYS & ACCESSORIES — SECTION 3
=============================== */
@import url('https://fonts.googleapis.com/css2?family=Homemade+Apple&display=swap');
.accessories-section{
background: var(--c9-navy);
padding: 48px 0;
}
.accessories-wrap{
max-width: 1400px; /* wrap cap */
margin: 0 auto;
padding: 0 24px; /* side padding */
}
/* GRID
Desktop/tablet: two cols
row1: sub (header+copy) | cat
row2: buttons | cat
Mobile: sub → cat → buttons
*/
.accessories-grid{
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"sub cat"
"buttons cat";
column-gap: 40px;
row-gap: 24px;
align-items: center;
}
/* Areas */
.accessories-sub { grid-area: sub; }
.accessories-buttons { grid-area: buttons; }
.accessories-cat { grid-area: cat; position: relative; justify-self: end; }
/* Header + subtext (live inside .accessories-sub) */
.accessories-head h3{
margin: 20px 0px 8px;
color: var(--c9-cream);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.05;
font-size: clamp(1.6rem, 3.2vw, 2.2rem);
}
.accessories-subheader{
margin: 0;
color: var(--c9-cream);
line-height: 1.45;
font-size: clamp(1rem, 1.6vw, 1.2rem);
max-width: 58ch;
text-align: center;
}
/* Cat image */
.accessories-cat img{
width: clamp(420px, 46vw, 720px);
height: auto;
display: block;
}
.accesspill{
display: flex;
justify-content: center;
width: 100%;
}
.accessories-pillcap{
display: inline-block; /* shrink-wrap */
margin: 0 auto; /* extra safety centering */
text-align: center;
position: relative;
bottom: 25px;
padding: 10px 14px;
border-radius: 999px;
background: rgba(247, 229, 214, 0.92);
border: 2px solid #2F3655;
box-shadow: 2px 2px 0 #2F3655;
color: #2F3655;
font-weight: 800;
font-size: clamp(0.85rem, 1.2vw, 1.05rem);
line-height: 1;
letter-spacing: -0.02em;
width: fit-content; /* key */
max-width: 80%;
}
/* Mobile tweak so it stays readable and doesn’t collide */
@media (max-width: 700px){
.accessories-pillcap{
padding: 8px 12px;
font-size: clamp(0.8rem, 3.6vw, 1rem);
}
}
/* Buttons reuse your hero tiles */
.accessories-buttons .hero-products{
display: grid;
grid-template-columns: repeat(2, minmax(220px, 1fr));
gap: 16px;
}
/* --- Tablet tuning (keeps two columns) --- */
@media (max-width: 1024px){
.accessories-cat img{
width: clamp(380px, 40vw, 620px);
}
.accessories-buttons .hero-products{
grid-template-columns: repeat(2, minmax(190px, 1fr));
gap: 14px;
}
}
/* --- Mobile: Header → Subtext → Cat → Buttons --- */
@media (max-width: 768px){
.accessories-grid{
grid-template-columns: 1fr;
grid-template-areas:
"sub"
"cat"
"buttons";
row-gap: 18px;
}
/* center text on mobile */
.accessories-head{ text-align: center; }
.accessories-subheader{
text-align: center;
margin: 0 auto;
}
/* cat centered and sized for mobile */
.accessories-cat{ justify-self: center; }
.accessories-cat img{
width: min(82vw, 520px);
}
}
/* XS phones: keep two-up without overflow */
@media (max-width: 380px){
.accessories-buttons .hero-products{
grid-template-columns: repeat(2, minmax(128px, 1fr));
gap: 8px;
}
}
/*Blog section*/
/* =========================
Blog Carousel – FULL CSS (Best Sellers style reused)
========================= */
/* Section */
/* =========================
Blog Carousel – FULL CSS (Best Sellers style + fixed mobile)
========================= */
/* Section */
.c9-blog-section{
background: linear-gradient(to bottom, var(--c9-fakepink) 0%, var(--c9-cream) 100%);
padding: 1rem 1rem 3rem;
text-align: center;
position: relative;
}
.c9-container{
max-width: 1200px;
margin: 0 auto;
}
.c9-section-title{
margin: 10px 0 24px;
color: var(--c9-cream);
font-size: clamp(2.3rem, 6vw, 3.5rem);
font-weight: 800;
line-height: 1;
letter-spacing: -2.8px;
margin-bottom: 55px;
}
.c9-blog-link{
display: block;
text-decoration: none;
color: inherit;
}
/* -------- Viewport (clips) -------- */
.c9-blog-carousel-wrapper{
position: relative;
max-width: 1200px;
margin: 0 auto;
padding: 0 3rem; /* space reserved for arrows */
overflow: hidden; /* CLIP at edges */
}
/* Edge masks (hide belt under arrows) */
.c9-blog-carousel-wrapper::before,
.c9-blog-carousel-wrapper::after{
content: "";
position: absolute;
top: 0; bottom: 0;
width: 3rem;
z-index: 2;
pointer-events: none;
}
.c9-blog-carousel-wrapper::before{ left: 0; }
.c9-blog-carousel-wrapper::after { right: 0; }
/* -------- Moving belt -------- */
.c9-blog-carousel-track{
display: flex;
gap: 16px;
align-items: stretch; /* key: equal-height items */
will-change: transform;
z-index: 0;
transition: transform .35s ease;
}
/* Each slide */
.c9-blog-carousel-item{
flex: 0 0 calc((100% - 2*16px)/3); /* 3-up default */
display: flex; /* key: allow equal height */
}
/* Card styling (fixed heights / no overlap) */
.c9-blog-card{
background: var(--c9-lpink);
border-radius: 12px;
overflow: hidden;
box-shadow: -8px 6px hwb(343 88% 1%);
display: flex;
flex-direction: column;
width: 100%;
height: 100%; /* key */
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.c9-blog-card:hover{
transform: translateY(-4px);
box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
.c9-blog-card img{
width: 100%;
height: 200px; /* fixed so cards don’t jump */
object-fit: cover;
display: block;
}
.c9-blog-content{
padding: 20px;
text-align: left;
flex: 1; /* key: equal height bottoms */
display: flex;
flex-direction: column;
gap: 8px;
}
.c9-blog-content h3{
font-size: 1.25rem;
margin: 0;
color: #333;
}
.c9-blog-content p{
font-size: 0.95rem;
color: #555;
line-height: 1.5;
margin: 0;
}
/* -------- Arrows (overlay) -------- */
.c9-blog-carousel-arrow{
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 3;
width: 45px; height: 45px;
background: #FFF3E0;
border: 2px solid #2F3655;
border-radius: 999px;
box-shadow: 2px 2px 0 #2F3655;
cursor: pointer;
transition: transform .2s ease, opacity .2s ease;
}
.c9-blog-carousel-arrow:hover{
transform: translateY(-50%) scale(1.1);
}
.c9-blog-carousel-arrow.left { left: .5rem; }
.c9-blog-carousel-arrow.right { right: .5rem; }
/* CSS chevrons (so no broken-image squares) */
.c9-blog-carousel-arrow::before{
width: 10px;
height: 10px;
border-right: 3px solid #2F3655;
border-bottom: 3px solid #2F3655;
}
.c9-blog-carousel-arrow.left::before { transform: rotate(135deg); }
.c9-blog-carousel-arrow.right::before { transform: rotate(-45deg); }
.c9-blog-carousel-arrow.is-disabled{
opacity: 0.35;
pointer-events: none;
}
/* =========================
Responsive breakpoints
========================= */
/* ≤ 1170px: keep 3-up, tighten */
@media (max-width: 1170px){
.c9-blog-carousel-wrapper{ padding: 0 2rem; }
.c9-blog-carousel-wrapper::before,
.c9-blog-carousel-wrapper::after{ width: 2rem; }
.c9-blog-carousel-track{ gap: 12px; }
.c9-blog-carousel-item{ flex: 0 0 calc((100% - 2*12px)/3); }
.c9-blog-carousel-arrow{ width: 40px; height: 40px; }
.c9-blog-carousel-arrow::before{ width: 9px; height: 9px; }
.c9-blog-card img{ height: 170px; }
}
/* ≤ 800px: 2-up (your requirement), NO overlap */
@media (max-width: 800px){
.c9-blog-carousel-item{ flex: 0 0 calc((100% - 1*12px)/2); }
.c9-blog-card img{ height: 140px; }
.c9-blog-content{ padding: 12px; }
.c9-blog-content h3{ font-size: 1rem; }
.c9-blog-content p{ font-size: 0.85rem; line-height: 1.3; }
}
/* ≤ 650px: still 2-up, but don’t use the 45% hack (that’s what caused overlap) */
@media (max-width: 650px){
.c9-blog-carousel-track{
gap: 12px;
align-items: stretch;
}
.c9-blog-carousel-item{
flex: 0 0 calc((100% - 12px)/2);
}
.c9-blog-card img{
height: 120px;
}
.c9-blog-carousel-arrow{ width: 30px; height: 30px; }
.c9-blog-carousel-arrow::before{ width: 8px; height: 8px; }
}
/* sign up section */
.signup-section {
background-color: var(--c9-cream);
padding: 55px 20px 65px;
text-align: center;
}
#signup-section{
scroll-margin-top: 180px; /* adjust to your header height */
}
.signup-content {
max-width: 720px;
margin: 0 auto;
padding: 0 10px;
}
.signup-section h2 {
color: var(--c9-purple);
font-size: clamp(1.6rem, 5vw, 2.4rem);
margin-bottom: 0.9rem;
}
.signup-subtext {
font-size: clamp(0.95rem, 2.4vw, 1.15rem);
color: #333;
line-height: 1.6;
margin: 0 auto 1.4rem;
max-width: 52ch;
}
.signup-perks {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 1.7rem;
}
.signup-perks span {
font-size: 0.95rem;
color: #333;
background: rgba(255, 255, 255, 0.55);
border: 1px solid rgba(0, 0, 0, 0.08);
padding: 8px 14px;
border-radius: 999px;
}
.signup-link {
text-decoration: none;
}
.signup-button {
background-color: var(--c9-purple);
color: #fff;
border: none;
padding: 0.95rem 2.4rem;
font-size: clamp(0.95rem, 2.6vw, 1.1rem);
border-radius: 999px;
cursor: pointer;
transition: transform 0.2s ease, background-color 0.25s ease;
}
.signup-button:hover {
background-color: #e93e78;
transform: translateY(-1px);
}
.signup-button:active {
transform: translateY(0px);
}
.signup-microtext {
margin-top: 1rem;
font-size: 0.9rem;
color: rgba(0, 0, 0, 0.55);
}
@media (max-width: 500px) {
.signup-section {
padding: 45px 16px 55px;
}
.signup-perks span {
font-size: 0.9rem;
padding: 7px 12px;
}
}
/* ===============================
POLICY PAGE: Shipping + Returns
=============================== */
/* Page wrapper */
.policy-page{
max-width: 1200px;
margin: 0 auto;
padding: 0 24px 60px;
}
/* Hero */
.policy-hero{
margin-top: 24px;
margin-bottom: 18px;
}
.policy-hero-inner{
background: linear-gradient(to bottom, rgba(244, 87,131,.18) 0%, rgba(247, 229, 214, 0.35) 100%);
border-radius: 18px;
padding: clamp(18px, 3vw, 34px);
box-shadow: 0 6px 24px rgba(0,0,0,.06);
overflow: hidden;
position: relative;
}
.policy-hero-inner h1{
margin: 0 0 10px;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--c9-navy);
font-size: clamp(1.8rem, 4.2vw, 3rem);
line-height: 1.05;
}
.policy-intro{
margin: 0;
max-width: 70ch;
color: var(--c9-navy);
opacity: 0.88;
line-height: 1.55;
font-size: clamp(0.98rem, 1.2vw, 1.12rem);
}
/* Highlight pills */
.policy-highlights{
margin-top: 16px;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.policy-pill{
display: inline-block;
padding: 9px 12px;
border-radius: 999px;
background: rgba(255,255,255,0.70);
border: 1px solid rgba(0,0,0,0.10);
color: var(--c9-navy);
font-weight: 800;
font-size: 0.95rem;
box-shadow: 2px 2px 0 rgba(47,54,85,0.15);
}
/* Section spacing */
.policy-section{
margin-top: 18px;
}
/* Card container */
.policy-card{
background: white;
border-radius: 18px;
padding: clamp(16px, 2.3vw, 26px);
box-shadow: 0 6px 24px rgba(0,0,0,.06);
overflow: hidden;
}
.policy-card h2{
margin: 0 0 12px;
color: var(--c9-navy);
font-weight: 800;
letter-spacing: -0.02em;
font-size: clamp(1.3rem, 2.6vw, 1.9rem);
line-height: 1.1;
}
.policy-lead{
margin: 0 0 18px;
max-width: 75ch;
color: var(--c9-navy);
opacity: 0.86;
line-height: 1.55;
font-size: clamp(0.95rem, 1.1vw, 1.05rem);
}
/* 2-column blocks grid (matches your style) */
.policy-grid{
--gap: clamp(0.9rem, 2vw, 1.4rem);
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--gap);
align-items: stretch;
margin-top: 10px;
}
.policy-block{
background: rgba(255, 251, 248, 0.55);
border: 1px solid rgba(0,0,0,0.08);
border-radius: 18px;
padding: clamp(14px, 2vw, 18px);
}
.policy-block h3{
margin: 0 0 8px;
color: var(--c9-navy);
font-weight: 800;
font-size: clamp(1rem, 1.6vw, 1.2rem);
}
.policy-block p{
margin: 0;
color: var(--c9-navy);
opacity: 0.9;
line-height: 1.5;
font-size: clamp(0.92rem, 1.1vw, 1.02rem);
}
.policy-block a{
color: var(--c9-navy);
font-weight: 800;
text-decoration: none;
border-bottom: 2px solid rgba(47,54,85,0.25);
}
.policy-block a:hover{
border-bottom-color: rgba(47,54,85,0.55);
}
/* Split section (returns rules / refunds info) */
.policy-split{
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(0.9rem, 2vw, 1.4rem);
margin-top: 14px;
}
.policy-panel{
background: rgba(247, 229, 214, 0.25);
border: 1px solid rgba(0,0,0,0.08);
border-radius: 18px;
padding: clamp(14px, 2vw, 18px);
}
.policy-panel--tint{
background: rgba(130,194,246,.18);
}
.policy-panel h3{
margin: 0 0 8px;
color: var(--c9-navy);
font-weight: 800;
font-size: clamp(1.05rem, 1.6vw, 1.25rem);
}
.policy-panel p{
margin: 0 0 14px;
color: var(--c9-navy);
opacity: 0.9;
line-height: 1.55;
font-size: clamp(0.92rem, 1.1vw, 1.02rem);
}
.policy-panel p:last-child{
margin-bottom: 0;
}
/* Lists */
.policy-list{
margin: 0 0 14px;
padding-left: 1.1rem;
color: var(--c9-navy);
opacity: 0.92;
line-height: 1.55;
font-size: clamp(0.92rem, 1.1vw, 1.02rem);
}
.policy-list li{
margin: 0 0 8px;
}
/* Note / micro text */
.policy-note{
margin: 0;
padding: 10px 12px;
border-radius: 14px;
background: rgba(255,255,255,0.60);
border: 1px dashed rgba(0,0,0,0.16);
color: var(--c9-navy);
opacity: 0.9;
line-height: 1.45;
font-size: 0.95rem;
}
/* Responsive */
@media (max-width: 970px){
.policy-grid{
grid-template-columns: 1fr;
}
.policy-split{
grid-template-columns: 1fr;
}
}
@media (max-width: 670px){
.policy-page{
padding: 0 18px 50px;
}
.policy-hero-inner{
padding: 18px;
}
}
/* donations page/*
/* ==========================
DONATIONS PAGE (donations.html)
Cute + boutique premium
========================== */
.donate-main{
max-width: 1200px;
margin: 0 auto;
padding: 0 24px 60px;
}
/* HERO */
.donate-hero{
margin-top: 24px;
margin-bottom: 18px;
}
.donate-hero-inner{
background: linear-gradient(to bottom, rgba(255,255,255,0.60) 0%, rgba(247, 229, 214, 0.34) 100%);
border-radius: 18px;
padding: clamp(18px, 3vw, 34px);
box-shadow: 0 6px 24px rgba(0,0,0,.06);
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: clamp(14px, 2vw, 22px);
align-items: start;
}
.donate-hero-copy h1{
margin: 0 0 10px;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--c9-navy);
font-size: clamp(1.8rem, 4.2vw, 3rem);
line-height: 1.05;
}
.donate-sub{
margin: 0;
max-width: 70ch;
color: var(--c9-navy);
opacity: 0.90;
line-height: 1.55;
font-size: clamp(0.98rem, 1.2vw, 1.12rem);
}
.donate-micro{
margin-top: 10px;
color: var(--c9-navy);
opacity: 0.75;
font-size: 0.95rem;
line-height: 1.45;
}
/* Badges */
.donate-badges{
margin-top: 14px;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.donate-badge{
display: inline-block;
padding: 9px 12px;
border-radius: 999px;
background: rgba(255,255,255,0.70);
border: 1px solid rgba(0,0,0,0.10);
color: var(--c9-navy);
font-weight: 800;
font-size: 0.95rem;
box-shadow: 2px 2px 0 rgba(47,54,85,0.14);
}
/* CTA */
.donate-cta-row{
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 16px;
}
.donate-cta{
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 14px;
border-radius: 999px;
background: rgba(247, 229, 214, 0.92);
border: 2px solid #2F3655;
box-shadow: 2px 2px 0 #2F3655;
color: #2F3655;
font-weight: 900;
font-size: 0.95rem;
text-decoration: none;
white-space: nowrap;
transition: transform .2s ease, box-shadow .2s ease;
}
.donate-cta:hover{ transform: translateY(-1px); }
.donate-cta:active{ transform: translateY(0); box-shadow: 1px 1px 0 #2F3655; }
.donate-cta--ghost{
background: rgba(255,255,255,0.70);
}
.donate-cta--small{
width: fit-content;
margin-top: 6px;
padding: 10px 14px;
}
/* Right summary card */
.donate-hero-card{
background: rgba(255,255,255,0.68);
border: 1px solid rgba(0,0,0,0.10);
border-radius: 18px;
padding: 14px;
box-shadow: 0 6px 24px rgba(0,0,0,.06);
}
.donate-stat{
border-radius: 16px;
background: rgba(255,255,255,0.70);
border: 1px solid rgba(0,0,0,0.08);
padding: 12px 12px;
margin-bottom: 10px;
}
.donate-stat:last-child{ margin-bottom: 0; }
.donate-stat-top{
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 6px;
}
.donate-icon{
font-size: 1.15rem;
display: inline-flex;
width: 34px;
height: 34px;
border-radius: 12px;
align-items: center;
justify-content: center;
background: rgba(254, 104, 146, 0.14);
border: 1px solid rgba(47,54,85,0.12);
}
.donate-stat h3{
margin: 0;
color: var(--c9-navy);
font-weight: 900;
font-size: 1rem;
}
.donate-stat p{
margin: 0;
color: var(--c9-navy);
opacity: 0.88;
line-height: 1.45;
}
/* Sections */
.donate-section{
margin-top: 18px;
}
.donate-card{
background: white;
border-radius: 18px;
padding: clamp(16px, 2.3vw, 26px);
box-shadow: 0 6px 24px rgba(0,0,0,.06);
overflow: hidden;
}
.donate-card--tint{
background: linear-gradient(to bottom, rgba(130,194,246,.16) 0%, rgba(255,255,255,0.75) 100%);
}
.donate-card--faq{
background: linear-gradient(to bottom, rgba(244, 87,131,.12) 0%, rgba(255,255,255,0.76) 100%);
}
.donate-card h2{
margin: 0 0 12px;
color: var(--c9-navy);
font-weight: 900;
letter-spacing: -0.02em;
font-size: clamp(1.3rem, 2.6vw, 1.9rem);
line-height: 1.1;
}
.donate-lead{
margin: 0 0 18px;
max-width: 75ch;
color: var(--c9-navy);
opacity: 0.88;
line-height: 1.55;
font-size: clamp(0.95rem, 1.1vw, 1.05rem);
}
.donate-note{
margin-top: 14px;
padding: 10px 12px;
border-radius: 14px;
background: rgba(255,255,255,0.60);
border: 1px dashed rgba(0,0,0,0.16);
color: var(--c9-navy);
opacity: 0.9;
line-height: 1.45;
font-size: 0.95rem;
}
/* Steps */
.donate-steps{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(10px, 1.6vw, 14px);
}
.donate-steps--two{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.donate-step{
border-radius: 18px;
background: rgba(255, 251, 248, 0.55);
border: 1px solid rgba(0,0,0,0.08);
padding: 14px;
box-shadow: 0 6px 18px rgba(0,0,0,.05);
transition: transform .2s ease, box-shadow .2s ease;
}
.donate-step:hover{
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(0,0,0,.08);
}
.donate-step-top{
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.donate-step-icon{
width: 34px;
height: 34px;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(143,239,164,.22);
border: 1px solid rgba(47,54,85,0.12);
font-weight: 900;
}
.donate-step h3{
margin: 0;
color: var(--c9-navy);
font-weight: 900;
font-size: 1.05rem;
}
.donate-step p{
margin: 0;
color: var(--c9-navy);
opacity: 0.88;
line-height: 1.5;
}
/* Highlights row */
.donate-highlight-row{
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(10px, 1.6vw, 14px);
margin-top: 10px;
}
.donate-highlight{
border-radius: 18px;
background: rgba(255,255,255,0.70);
border: 1px solid rgba(0,0,0,0.08);
padding: 14px;
}
.donate-highlight h3{
margin: 0 0 8px;
color: var(--c9-navy);
font-weight: 900;
font-size: 1.05rem;
}
.donate-highlight p{
margin: 0;
color: var(--c9-navy);
opacity: 0.88;
line-height: 1.5;
}
.donate-highlight ul{
margin: 0;
padding-left: 1.1rem;
color: var(--c9-navy);
opacity: 0.9;
line-height: 1.55;
}
.donate-highlight li{
margin: 0 0 6px;
}
/* FAQ */
.donate-faq details{
background: rgba(255,255,255,0.70);
border: 1px solid rgba(0,0,0,0.10);
border-radius: 16px;
padding: 12px 14px;
margin-bottom: 10px;
}
.donate-faq details:last-child{ margin-bottom: 0; }
.donate-faq summary{
cursor: pointer;
list-style: none;
font-weight: 900;
color: var(--c9-navy);
}
.donate-faq summary::-webkit-details-marker{ display: none; }
.donate-faq summary::after{
content: "▾";
float: right;
opacity: 0.8;
}
.donate-faq details[open] summary::after{
content: "▴";
}
.donate-faq-body{
padding-top: 10px;
color: var(--c9-navy);
opacity: 0.9;
line-height: 1.55;
}
.donate-faq-body a{
color: var(--c9-navy);
font-weight: 900;
text-decoration: none;
border-bottom: 2px solid rgba(47,54,85,0.25);
}
.donate-faq-body a:hover{
border-bottom-color: rgba(47,54,85,0.55);
}
/* Responsive */
@media (max-width: 970px){
.donate-hero-inner{
grid-template-columns: 1fr;
}
.donate-steps{
grid-template-columns: 1fr;
}
.donate-steps--two{
grid-template-columns: 1fr;
}
.donate-highlight-row{
grid-template-columns: 1fr;
}
}
@media (max-width: 670px){
.donate-main{
padding: 0 18px 50px;
}
}
/* ==========================
DONATIONS: Impact section
========================== */
.donate-card--impact{
background: linear-gradient(to bottom, rgba(143,239,164,.14) 0%, rgba(255,255,255,0.80) 100%);
}
.impact-head{
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
.impact-badges{
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.impact-grid{
margin-top: 10px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(10px, 1.6vw, 14px);
}
.impact-card{
background: rgba(255,255,255,0.72);
border: 1px solid rgba(0,0,0,0.10);
border-radius: 18px;
overflow: hidden;
box-shadow: 0 6px 18px rgba(0,0,0,.06);
transition: transform .2s ease, box-shadow .2s ease;
}
.impact-card:hover{
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(0,0,0,.09);
}
.impact-img{
width: 100%;
height: clamp(160px, 18vw, 220px);
object-fit: cover;
display: block;
}
.impact-body{
padding: 14px;
}
.impact-body h3{
margin: 0 0 8px;
color: var(--c9-navy);
font-weight: 900;
font-size: 1.05rem;
}
.impact-body p{
margin: 0;
color: var(--c9-navy);
opacity: 0.88;
line-height: 1.5;
}
.impact-footer{
margin-top: 14px;
}
/* Responsive */
@media (max-width: 970px){
.impact-grid{
grid-template-columns: 1fr;
}
.impact-img{
height: 200px;
}
}
/*Cookies*/
/* =========================
Cookie banner (Cloud9)
========================= */
.c9-cookie{
position: fixed;
left: 16px;
right: 16px;
bottom: 16px;
z-index: 9999;
}
.c9-cookie[hidden]{ display: none; }
.c9-cookie__card{
max-width: 980px;
margin: 0 auto;
background: rgba(255,255,255,0.92);
border: 1px solid rgba(0,0,0,0.10);
border-radius: 18px;
box-shadow: 0 10px 28px rgba(0,0,0,0.14);
padding: 16px 16px;
display: grid;
grid-template-columns: 1fr auto;
gap: 14px;
align-items: center;
backdrop-filter: blur(8px);
}
.c9-cookie__text h3{
margin: 0 0 6px;
color: var(--c9-navy);
font-weight: 900;
font-size: 1.05rem;
}
.c9-cookie__text p{
margin: 0;
color: var(--c9-navy);
opacity: 0.9;
line-height: 1.45;
font-size: 0.95rem;
}
.c9-cookie__links{
margin-top: 8px;
}
.c9-cookie__links a{
color: var(--c9-navy);
font-weight: 900;
text-decoration: none;
border-bottom: 2px solid rgba(47,54,85,0.25);
}
.c9-cookie__links a:hover{
border-bottom-color: rgba(47,54,85,0.55);
}
.c9-cookie__actions{
display: flex;
gap: 10px;
flex-wrap: wrap;
justify-content: flex-end;
}
.c9-cookie__btn{
border-radius: 999px;
padding: 10px 14px;
border: 2px solid #2F3655;
box-shadow: 2px 2px 0 #2F3655;
background: rgba(247, 229, 214, 0.92);
color: #2F3655;
font-weight: 900;
cursor: pointer;
transition: transform .2s ease, box-shadow .2s ease;
}
.c9-cookie__btn:hover{ transform: translateY(-1px); }
.c9-cookie__btn:active{ transform: translateY(0); box-shadow: 1px 1px 0 #2F3655; }
.c9-cookie__btn--ghost{
background: rgba(255,255,255,0.75);
}
/* Mobile: stack nicely */
@media (max-width: 720px){
.c9-cookie__card{
grid-template-columns: 1fr;
}
.c9-cookie__actions{
justify-content: flex-start;
}
}