/* ============================================================ CELLIV Design System — style.css Brand: Luxury science-led skincare | "Science. Skin. Longevity." NOTE: Tailwind is loaded via CDN for Phase 1 prototyping. Replace with a proper Tailwind build pipeline (PostCSS/Vite) before production deployment. ============================================================ */ /* --- Google Fonts are imported in each HTML --- */ /* ---- CSS Custom Properties (Brand Tokens) ---- */ :root { /* ---- Brand Palette (canonical tokens) ---- */ --color-butter-yellow: #FFF3C4; --color-champagne: #F7E7B7; --color-warm-beige: #F2E9D6; --color-soft-cream: #FFF8EC; --color-gold-accent: #D8B97A; --color-taupe: #AFA08A; --color-warm-grey: #C9C2B3; --color-deep-brown: #5A4A3A; /* ---- Semantic aliases (used throughout the theme) ---- */ --butter: var(--color-butter-yellow); --champagne: var(--color-champagne); --beige: var(--color-warm-beige); --cream: var(--color-soft-cream); --espresso: var(--color-deep-brown); /* Primary body text / logo */ --espresso-mid: #6B5A48; /* Secondary text */ --espresso-mute: var(--color-taupe); /* Muted / placeholder text */ --gold: var(--color-gold-accent); /* Accent borders, highlights */ --gold-light: #E8CE9C; /* Hover accents */ /* Typography */ --font-head: 'Playfair Display', Georgia, serif; --font-body: 'Montserrat', 'Lato', Arial, sans-serif; /* Shadows */ --shadow-soft: 0 4px 24px rgba(61, 43, 31, 0.07); --shadow-card: 0 2px 16px rgba(61, 43, 31, 0.10); --shadow-hover: 0 10px 36px rgba(61, 43, 31, 0.15); /* Spacing & Shape */ --radius-card: 16px; --radius-btn: 40px; --transition: all 0.32s cubic-bezier(0.4, 0, 0.2, 1); } /* ---- Base Reset ---- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); color: var(--espresso); background-color: var(--cream); line-height: 1.7; font-size: 15px; -webkit-font-smoothing: antialiased; } /* ---- Typography ---- */ h1, h2, h3, h4, h5 { font-family: var(--font-head); color: var(--espresso); line-height: 1.2; font-weight: 600; } h1 { font-size: clamp(2rem, 5vw, 3.5rem); } h2 { font-size: clamp(1.6rem, 3.5vw, 2.6rem); } h3 { font-size: clamp(1.2rem, 2.5vw, 1.8rem); } h4 { font-size: 1.15rem; } p { color: var(--espresso-mid); font-family: var(--font-body); font-size: 0.95rem; line-height: 1.8; } a { color: inherit; text-decoration: none; transition: var(--transition); } /* ---- Scrollbar ---- */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--cream); } ::-webkit-scrollbar-thumb { background: var(--champagne); border-radius: 3px; } /* ---- Focus States (Accessibility) ---- */ :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; } /* ============================================================ LOGO ============================================================ */ .celliv-logo { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; text-decoration: none; } .celliv-logo .wordmark { font-family: var(--font-head); font-size: 1.75rem; font-weight: 700; letter-spacing: 0.18em; color: var(--espresso); line-height: 1; display: flex; align-items: center; gap: 6px; } .celliv-logo .wordmark .sparkle { font-size: 1rem; color: var(--gold); display: inline-block; animation: sparkle-pulse 3s ease-in-out infinite; } .celliv-logo .tagline-sub { font-family: var(--font-body); font-size: 0.55rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--espresso-mute); font-weight: 500; padding-left: 2px; } /* ============================================================ NAVIGATION ============================================================ */ .site-nav { position: sticky; top: 0; z-index: 100; background: rgba(255, 248, 236, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--champagne); transition: var(--transition); } .nav-inner { max-width: 1280px; margin: 0 auto; padding: 0 2rem; height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 2rem; } .nav-links { display: flex; align-items: center; gap: 2rem; list-style: none; } .nav-links a { font-family: var(--font-body); font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--espresso-mid); font-weight: 500; position: relative; padding-bottom: 2px; } .nav-links a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px; background: var(--gold); transition: width 0.3s ease; } .nav-links a:hover, .nav-links a.active { color: var(--espresso); } .nav-links a:hover::after, .nav-links a.active::after { width: 100%; } /* Mobile hamburger */ .nav-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; background: none; border: none; } .nav-toggle span { display: block; width: 24px; height: 1.5px; background: var(--espresso); transition: var(--transition); } .nav-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav-toggle.open span:nth-child(2) { opacity: 0; } .nav-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* Mobile menu overlay */ .nav-mobile { display: none; position: fixed; inset: 72px 0 0 0; background: var(--cream); z-index: 99; padding: 2rem; flex-direction: column; gap: 1.5rem; border-top: 1px solid var(--champagne); } .nav-mobile.open { display: flex; } .nav-mobile a { font-family: var(--font-body); font-size: 1rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--espresso-mid); font-weight: 500; padding: 0.75rem 0; border-bottom: 1px solid var(--champagne); } .nav-mobile a:hover { color: var(--espresso); } @media (max-width: 768px) { .nav-links { display: none; } .nav-toggle { display: flex; } } /* ============================================================ BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--font-body); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; border-radius: var(--radius-btn); padding: 0.85rem 2.2rem; cursor: pointer; border: 1.5px solid transparent; transition: var(--transition); white-space: nowrap; } .btn-primary { background: var(--espresso); color: var(--cream); border-color: var(--espresso); } .btn-primary:hover { background: var(--espresso-mid); border-color: var(--espresso-mid); transform: translateY(-1px); box-shadow: var(--shadow-hover); } .btn-outline { background: transparent; color: var(--espresso); border-color: var(--espresso); } .btn-outline:hover { background: var(--espresso); color: var(--cream); transform: translateY(-1px); box-shadow: var(--shadow-hover); } .btn-gold { background: var(--gold); color: var(--cream); border-color: var(--gold); } .btn-gold:hover { background: var(--gold-light); border-color: var(--gold-light); transform: translateY(-1px); box-shadow: var(--shadow-hover); } /* ============================================================ IMAGE PLACEHOLDERS ============================================================ */ .img-placeholder { background: linear-gradient(135deg, var(--champagne) 0%, var(--beige) 60%, var(--butter) 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; border-radius: var(--radius-card); color: var(--espresso-mute); font-family: var(--font-body); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; text-align: center; padding: 2rem; position: relative; overflow: hidden; } .img-placeholder::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 20%, rgba(255,243,196,0.6) 0%, transparent 60%), radial-gradient(ellipse at 70% 80%, rgba(247,231,183,0.4) 0%, transparent 50%); } .img-placeholder .ph-icon { font-size: 2rem; opacity: 0.5; position: relative; z-index: 1; } .img-placeholder span { position: relative; z-index: 1; font-weight: 500; } .img-placeholder .ph-label { font-size: 0.65rem; color: var(--espresso-mute); font-style: italic; position: relative; z-index: 1; } /* ============================================================ CARDS ============================================================ */ .product-card { background: var(--cream); border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); transition: var(--transition); border: 1px solid var(--champagne); } .product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); } .product-card .card-image { aspect-ratio: 4/5; overflow: hidden; } .product-card .card-image .img-placeholder { width: 100%; height: 100%; border-radius: 0; } .product-card .card-body { padding: 1.5rem; } .product-card .card-name { font-family: var(--font-head); font-size: 1.1rem; color: var(--espresso); margin-bottom: 0.4rem; } .product-card .card-desc { font-size: 0.82rem; color: var(--espresso-mute); line-height: 1.6; margin-bottom: 1rem; } .product-card .card-price { font-family: var(--font-body); font-size: 0.78rem; color: var(--espresso-mid); letter-spacing: 0.08em; margin-bottom: 1.2rem; font-weight: 600; } /* ============================================================ TRUST ICONS BAR ============================================================ */ .trust-bar { background: var(--beige); border-top: 1px solid var(--champagne); border-bottom: 1px solid var(--champagne); } .trust-item { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; text-align: center; } .trust-item .trust-icon { width: 48px; height: 48px; border-radius: 50%; background: var(--cream); border: 1px solid var(--champagne); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; box-shadow: var(--shadow-soft); } .trust-item .trust-label { font-family: var(--font-body); font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--espresso-mid); font-weight: 600; } /* ============================================================ SECTION LAYOUT HELPERS ============================================================ */ .section { padding: 5rem 2rem; } .section-sm { padding: 3rem 2rem; } .container { max-width: 1200px; margin: 0 auto; } .container-narrow { max-width: 780px; margin: 0 auto; } .section-label { font-family: var(--font-body); font-size: 0.65rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); font-weight: 600; display: block; margin-bottom: 0.75rem; } .divider-gold { width: 48px; height: 1.5px; background: var(--gold); margin: 1.25rem 0; } .divider-gold.centered { margin-left: auto; margin-right: auto; } /* ============================================================ ACCORDION ============================================================ */ .accordion-item { border-bottom: 1px solid var(--champagne); } .accordion-trigger { width: 100%; background: none; border: none; cursor: pointer; padding: 1.25rem 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-family: var(--font-body); font-size: 0.9rem; font-weight: 600; color: var(--espresso); text-align: left; transition: var(--transition); } .accordion-trigger:hover { color: var(--espresso-mid); } .accordion-trigger .acc-icon { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--champagne); display: flex; align-items: center; justify-content: center; font-size: 0.85rem; color: var(--gold); transition: var(--transition); } .accordion-trigger[aria-expanded="true"] .acc-icon { transform: rotate(45deg); background: var(--butter); } .accordion-panel { display: none; padding-bottom: 1.25rem; } .accordion-panel.open { display: block; } .accordion-panel p { font-size: 0.88rem; color: var(--espresso-mid); line-height: 1.8; } /* ============================================================ HERO ============================================================ */ .hero { background: linear-gradient( 160deg, var(--cream) 0%, var(--butter) 40%, var(--champagne) 100% ); position: relative; overflow: hidden; min-height: 85vh; display: flex; align-items: center; } .hero::before { content: ''; position: absolute; top: -100px; right: -100px; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(247,231,183,0.5) 0%, transparent 70%); pointer-events: none; } .hero::after { content: ''; position: absolute; bottom: -80px; left: -80px; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle, rgba(255,248,236,0.7) 0%, transparent 70%); pointer-events: none; } /* ============================================================ TAGLINE BANNER ============================================================ */ .tagline-banner { background: var(--espresso); color: var(--champagne); text-align: center; padding: 2.5rem 2rem; } .tagline-banner .banner-text { font-family: var(--font-head); font-size: clamp(1.2rem, 3vw, 2rem); color: var(--champagne); font-weight: 400; font-style: italic; letter-spacing: 0.06em; } .tagline-banner .banner-sub { font-family: var(--font-body); font-size: 0.65rem; letter-spacing: 0.35em; text-transform: uppercase; color: var(--gold); margin-top: 0.75rem; font-weight: 500; } /* ============================================================ FOOTER ============================================================ */ .site-footer { background: var(--espresso); color: var(--champagne); padding: 4rem 2rem 2rem; } .footer-inner { max-width: 1200px; margin: 0 auto; } .footer-logo .wordmark { color: var(--cream); } .footer-logo .tagline-sub { color: var(--espresso-mute); } .footer-logo .sparkle { color: var(--gold); } .footer-heading { font-family: var(--font-body); font-size: 0.65rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-bottom: 1rem; } .footer-links { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; } .footer-links a { font-size: 0.82rem; color: var(--espresso-mute); transition: var(--transition); } .footer-links a:hover { color: var(--cream); } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); margin-top: 3rem; padding-top: 1.5rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-size: 0.72rem; color: var(--espresso-mute); letter-spacing: 0.05em; } /* ============================================================ INGREDIENT BADGE ============================================================ */ .ingredient-badge { display: flex; align-items: flex-start; gap: 1rem; padding: 1.25rem; background: var(--cream); border-radius: 12px; border: 1px solid var(--champagne); transition: var(--transition); } .ingredient-badge:hover { border-color: var(--gold-light); box-shadow: var(--shadow-soft); } .ingredient-badge .badge-icon { flex-shrink: 0; width: 44px; height: 44px; background: var(--butter); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; border: 1px solid var(--champagne); } .ingredient-badge .badge-name { font-family: var(--font-head); font-size: 0.95rem; color: var(--espresso); margin-bottom: 0.25rem; } .ingredient-badge .badge-desc { font-size: 0.8rem; color: var(--espresso-mute); line-height: 1.6; } /* ============================================================ FORM ELEMENTS ============================================================ */ .form-field { display: flex; flex-direction: column; gap: 0.4rem; } .form-label { font-family: var(--font-body); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--espresso-mid); font-weight: 600; } .form-input, .form-textarea, .form-select { font-family: var(--font-body); font-size: 0.9rem; color: var(--espresso); background: var(--cream); border: 1.5px solid var(--champagne); border-radius: 10px; padding: 0.85rem 1.1rem; width: 100%; transition: var(--transition); outline: none; } .form-input:focus, .form-textarea:focus, .form-select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.12); } .form-input::placeholder, .form-textarea::placeholder { color: var(--espresso-mute); } .form-textarea { resize: vertical; min-height: 130px; } /* ============================================================ PLACEHOLDER NOTICE BANNER ============================================================ */ .ph-notice { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--butter); border: 1px dashed var(--gold); border-radius: 8px; padding: 0.5rem 1rem; font-size: 0.72rem; color: var(--espresso-mid); font-family: var(--font-body); font-weight: 500; } /* ============================================================ ANIMATIONS ============================================================ */ @keyframes sparkle-pulse { 0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); } 50% { opacity: 0.7; transform: scale(1.15) rotate(20deg); } } @keyframes fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } .animate-fade-up { animation: fade-up 0.7s ease forwards; } .animate-fade-in { animation: fade-in 0.6s ease forwards; } .delay-1 { animation-delay: 0.1s; } .delay-2 { animation-delay: 0.2s; } .delay-3 { animation-delay: 0.35s; } .delay-4 { animation-delay: 0.5s; } /* ============================================================ LEGAL PAGE ============================================================ */ .legal-body h2 { font-size: 1.3rem; margin-top: 2.5rem; margin-bottom: 0.75rem; } .legal-body h3 { font-size: 1.05rem; margin-top: 1.5rem; margin-bottom: 0.5rem; } .legal-body p { margin-bottom: 1rem; } .legal-body ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1rem; } .legal-body ul li { font-size: 0.9rem; color: var(--espresso-mid); line-height: 1.8; margin-bottom: 0.3rem; } /* ============================================================ RESPONSIVE UTILITIES ============================================================ */ .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } @media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .section { padding: 3.5rem 1.25rem; } .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .nav-inner { padding: 0 1.25rem; } .site-footer { padding: 3rem 1.25rem 1.5rem; } }