/* ============================================================ LA CASSA WELLNESS — Main Stylesheet Design: Sanctuary Threshold — Biophilic Minimalism Version: 1.0.0 ============================================================ */ /* ── Google Fonts are loaded via functions.php wp_enqueue_style ── */ /* ── CSS Custom Properties ── */ :root { --parchment: #F8F2E8; --navy: #1A2535; --teak: #C4834A; --forest: #243028; --brass: #B5924E; --cream: #F0E8D8; --sage: #8A9E8C; --charcoal: #2C2C2C; --font-cinzel: 'Cinzel', serif; --font-cormorant: 'Cormorant Garamond', serif; --font-jost: 'Jost', sans-serif; --radius: 0; } /* ── Reset & Base ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background-color: var(--parchment); color: var(--navy); font-family: var(--font-jost); font-weight: 300; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.6; } img { max-width: 100%; height: auto; display: block; } a { cursor: pointer; text-decoration: none; } button { cursor: pointer; background: none; border: none; font-family: inherit; } /* ── Container ── */ .container { width: 100%; margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; } @media (min-width: 640px) { .container { padding-left: 2rem; padding-right: 2rem; } } @media (min-width: 1024px) { .container { padding-left: 4rem; padding-right: 4rem; max-width: 1440px; } } /* ── Typography Utilities ── */ .font-cinzel { font-family: var(--font-cinzel); } .font-cormorant { font-family: var(--font-cormorant); } .font-jost { font-family: var(--font-jost); } /* ── Brass Rule Divider ── */ .brass-rule { width: 100%; height: 1px; background-color: var(--brass); opacity: 0.4; } .brass-rule-short { width: 60px; height: 1px; background-color: var(--brass); opacity: 0.6; } /* ── Section Label ── */ .section-label { display: block; font-family: var(--font-cinzel); font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--brass); margin-bottom: 1rem; } /* ── Scroll Reveal Animation ── */ /* Default: visible. JS adds .js-reveal-ready to to enable animations. */ .reveal { opacity: 1; transform: none; transition: opacity 0.9s ease, transform 0.9s ease; } /* Only hide when JS is confirmed loaded */ body.js-reveal-ready .reveal { opacity: 0; transform: translateY(24px); } body.js-reveal-ready .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: 0.1s; } .reveal-delay-2 { transition-delay: 0.2s; } .reveal-delay-3 { transition-delay: 0.3s; } .reveal-delay-4 { transition-delay: 0.4s; } /* ── Navigation ── */ .lc-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: background-color 0.5s ease, border-color 0.5s ease, padding 0.5s ease; padding: 1.5rem 0; } .lc-nav.scrolled { background-color: var(--parchment); border-bottom: 1px solid rgba(181, 146, 78, 0.2); padding: 1rem 0; } .lc-nav .nav-inner { display: flex; align-items: center; justify-content: space-between; } .lc-logo { height: 72px; width: auto; transition: height 0.5s ease, filter 0.5s ease; filter: brightness(0) invert(1); } .lc-nav.scrolled .lc-logo { height: 60px; filter: brightness(0) saturate(100%) invert(13%) sepia(20%) saturate(800%) hue-rotate(180deg) brightness(90%); } .nav-links { display: none; align-items: center; gap: 2.5rem; list-style: none; } @media (min-width: 768px) { .nav-links { display: flex; } } .nav-link { font-family: var(--font-cinzel); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--parchment); position: relative; transition: color 0.3s ease; background: none; border: none; padding: 0; } .lc-nav.scrolled .nav-link { color: var(--navy); } .nav-link::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px; background-color: var(--brass); transition: width 0.3s ease; } .nav-link:hover::after { width: 100%; } .nav-link:hover { color: var(--brass); } /* ── Hamburger ── */ .hamburger { display: flex; flex-direction: column; gap: 6px; padding: 0.5rem; background: none; border: none; cursor: pointer; } @media (min-width: 768px) { .hamburger { display: none; } } .hamburger span { display: block; width: 24px; height: 1px; background-color: var(--parchment); transition: all 0.3s ease; } .lc-nav.scrolled .hamburger span { background-color: var(--navy); } .hamburger.open span:nth-child(1) { transform: rotate(45deg) translateY(8px); } .hamburger.open span:nth-child(2) { opacity: 0; } .hamburger.open span:nth-child(3) { transform: rotate(-45deg) translateY(-8px); } /* ── Mobile Menu ── */ .mobile-menu { position: fixed; inset: 0; z-index: 40; background-color: var(--navy); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.5rem; opacity: 0; pointer-events: none; transition: opacity 0.5s ease; } .mobile-menu.open { opacity: 1; pointer-events: auto; } .mobile-menu .nav-link { font-size: 1.25rem; letter-spacing: 0.3em; color: var(--parchment); } .mobile-menu .nav-link:hover { color: var(--brass); } /* ── Hero Section ── */ .hero-section { position: relative; height: 100vh; min-height: 600px; display: flex; align-items: flex-end; overflow: hidden; } .hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.04); } .hero-overlay { position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(26, 37, 53, 0.45) 0%, rgba(26, 37, 53, 0.1) 35%, rgba(26, 37, 53, 0.75) 100% ); } .hero-content { position: relative; padding-bottom: 5rem; } @media (min-width: 768px) { .hero-content { padding-bottom: 7rem; } } .hero-title { font-family: var(--font-cormorant); font-weight: 300; color: var(--parchment); font-size: 65px; line-height: 1.05; margin-bottom: 2rem; } @media (max-width: 768px) { .hero-title { font-size: 2.5rem; } } .hero-divider { width: 100px; height: 1px; background-color: var(--brass); margin-bottom: 2rem; } /* ── Buttons ── */ .btn-primary { font-family: var(--font-cinzel); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; border: 1px solid var(--brass); color: var(--brass); padding: 0.875rem 2.5rem; background: transparent; transition: all 0.3s ease; display: inline-block; cursor: pointer; } .btn-primary:hover { background-color: var(--brass); color: var(--parchment); } .btn-primary-dark { border-color: var(--parchment); color: var(--parchment); } .btn-primary-dark:hover { background-color: var(--parchment); color: var(--navy); } .btn-outline-navy { font-family: var(--font-cinzel); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; border: 1px solid var(--navy); color: var(--navy); padding: 1rem 2rem; background: transparent; transition: all 0.3s ease; display: inline-block; cursor: pointer; } .btn-outline-navy:hover { background-color: var(--navy); color: var(--parchment); } .btn-outline-brass { font-family: var(--font-cinzel); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; border: 1px solid var(--brass); color: var(--brass); padding: 1rem 2.5rem; background: transparent; transition: all 0.3s ease; display: inline-block; cursor: pointer; } .btn-outline-brass:hover { background-color: var(--brass); color: var(--navy); } /* ── Philosophy Section ── */ .philosophy-section { padding: 7rem 0 10rem; background-color: var(--parchment); } @media (min-width: 768px) { .philosophy-section { padding: 10rem 0; } } .philosophy-heading { font-family: var(--font-cormorant); font-weight: 300; color: var(--navy); font-size: clamp(2rem, 5vw, 3.75rem); line-height: 1.1; margin-bottom: 2.5rem; } .philosophy-body { font-family: var(--font-jost); font-weight: 300; color: var(--charcoal); font-size: 14px; line-height: 1.9; max-width: 42rem; margin: 0 auto; } /* ── Principles Section ── */ .principles-section { padding: 6rem 0 9rem; background-color: #1a2535; border-top: 1px solid rgba(181, 146, 78, 0.15); } @media (min-width: 768px) { .principles-section { padding: 9rem 0; } } .principles-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; } @media (min-width: 768px) { .principles-grid { grid-template-columns: repeat(3, 1fr); } } .pillar-number { font-family: var(--font-cormorant); font-weight: 300; color: var(--brass); opacity: 0.5; font-size: 3rem; line-height: 1; margin-bottom: 1.5rem; display: block; } .pillar-divider { width: 40px; height: 1px; background-color: var(--brass); opacity: 0.5; margin-bottom: 1.5rem; } .pillar-title { font-family: var(--font-cormorant); font-weight: 500; color: #f1e8d8; font-size: 1.25rem; margin-bottom: 1rem; } .pillar-body { font-family: var(--font-jost); font-weight: 300; color: #f1e8d8; font-size: 0.875rem; line-height: 1.9; } /* ── Partners Section ── */ .partners-section { padding: 4rem 0 5rem; background-color: var(--cream); border-top: 1px solid rgba(181, 146, 78, 0.15); border-bottom: 1px solid rgba(181, 146, 78, 0.15); } @media (min-width: 768px) { .partners-section { padding: 5rem 0; } } .partners-logos-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; align-items: center; margin-bottom: 2.5rem; } @media (min-width: 768px) { .partners-logos-grid { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 1024px) { .partners-logos-grid { grid-template-columns: repeat(8, 1fr); gap: 2.5rem; } } .partner-logo-wrap { display: flex; align-items: center; justify-content: center; height: 40px; } .partner-logo { max-height: 100%; width: auto; max-width: 100%; object-fit: contain; opacity: 0.85; transition: opacity 0.5s ease; } .partner-logo:hover { opacity: 1; } .partners-desc-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 768px) { .partners-desc-grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; } } .partner-desc-card { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem 1.5rem; border-left: 1px solid rgba(181, 146, 78, 0.2); } .partner-desc-name { font-family: var(--font-cinzel); font-size: 0.875rem; letter-spacing: 0.25em; text-transform: uppercase; color: #3A3028; font-weight: 400; } .partner-desc-text { font-family: var(--font-jost); font-weight: 300; color: #2b3442; font-size: 12px; line-height: 1.7; } /* ── Spaces Intro ── */ .spaces-intro { background-color: var(--parchment); border-top: 1px solid rgba(181, 146, 78, 0.1); padding: 5rem 0 7rem; } @media (min-width: 768px) { .spaces-intro { padding: 7rem 0; } } /* ── Space Section (Cucina / Living / Wellness) — split layout ── */ .space-section { display: grid; grid-template-columns: 1fr; min-height: 85vh; } @media (min-width: 768px) { .space-section { grid-template-columns: repeat(2, 1fr); } } .space-image { position: relative; min-height: 50vh; overflow: hidden; } @media (min-width: 768px) { .space-image { min-height: 100%; } } .space-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .space-content { display: flex; flex-direction: column; justify-content: center; padding: 5rem 2.5rem; } @media (min-width: 768px) { .space-content { padding: 5rem 4rem; } } @media (min-width: 1024px) { .space-content { padding: 5rem 6rem; } } .space-heading { font-family: var(--font-cormorant); font-weight: 300; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; margin-bottom: 2rem; } .space-body { font-family: var(--font-jost); font-weight: 300; font-size: 0.875rem; line-height: 1.9; color: var(--charcoal); max-width: 24rem; margin-bottom: 1.5rem; } .space-logos { display: flex; gap: 1rem; align-items: center; margin-bottom: 2.5rem; } .space-logo { height: 22px; width: auto; opacity: 0.85; } /* ── SENTO Section ── */ .sento-section { background-color: var(--navy); } .sento-header { padding: 6rem 0 8rem; } @media (min-width: 768px) { .sento-header { padding: 8rem 0; } } .sento-title { font-family: var(--font-cinzel); font-weight: 400; color: var(--parchment); font-size: 60px; letter-spacing: 0.2em; margin-bottom: 2rem; } .sento-subtitle { font-family: var(--font-cormorant); font-style: italic; font-weight: 300; color: #F0E8D8; font-size: 25px; } .sento-body { font-family: var(--font-jost); font-weight: 300; color: #C8BFB0; font-size: 15px; line-height: 2; max-width: 42rem; margin: 0 auto 4rem; } .sento-pillars-label { font-family: var(--font-cinzel); color: var(--brass); font-size: 14px; letter-spacing: 0.3em; text-transform: uppercase; margin-bottom: 2.5rem; } .sento-pillars-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; max-width: 56rem; margin: 0 auto; } @media (min-width: 768px) { .sento-pillars-grid { grid-template-columns: repeat(5, 1fr); } } .sento-pillar { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.75rem; } .sento-pillar-line { width: 1px; height: 2rem; background-color: var(--brass); opacity: 0.5; } .sento-pillar-label { font-family: var(--font-jost); font-weight: 300; color: #F0E8D8; font-size: 12px; line-height: 1.5; } .sento-full-image { width: 100%; overflow: hidden; max-height: 90vh; } .sento-full-image img { width: 100%; object-fit: cover; object-position: center; max-height: 90vh; } .sento-caption { padding: 2rem 0; } .sento-caption-inner { display: flex; align-items: center; gap: 1rem; max-width: 32rem; } .sento-caption-line { width: 2rem; height: 1px; background-color: var(--brass); opacity: 0.5; flex-shrink: 0; } .sento-caption-text { font-family: var(--font-cinzel); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--parchment); opacity: 0.7; } .sento-bath-grid { display: grid; grid-template-columns: 1fr; } @media (min-width: 768px) { .sento-bath-grid { grid-template-columns: repeat(2, 1fr); } } .sento-bath-image { overflow: hidden; max-height: 75vh; } .sento-bath-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; max-height: 75vh; transition: transform 0.7s ease; } .sento-bath-image img:hover { transform: scale(1.02); } .sento-cta-row { padding: 4rem 0; } .sento-cta-inner { max-width: 80rem; margin: 0 auto; display: flex; flex-direction: column; gap: 2.5rem; } @media (min-width: 768px) { .sento-cta-inner { flex-direction: row; align-items: center; justify-content: space-between; } } /* ── About / Founder Section ── */ .about-section { padding: 7rem 0 10rem; background-color: var(--parchment); } @media (min-width: 768px) { .about-section { padding: 10rem 0; } } .about-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: start; margin-bottom: 3.5rem; } @media (min-width: 768px) { .about-grid { grid-template-columns: repeat(2, 1fr); } } .about-heading { font-family: var(--font-cormorant); font-weight: 300; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; margin-bottom: 1rem; } .about-subtitle { font-family: var(--font-cormorant); font-style: italic; color: var(--brass); font-size: 14px; font-weight: 400; margin-bottom: 2rem; } .about-bio { font-family: var(--font-jost); font-weight: 300; color: var(--charcoal); font-size: 0.875rem; line-height: 2; margin-bottom: 2.5rem; } .about-photo { width: 100%; object-fit: cover; object-position: center 15%; } @media (max-width: 767px) { .about-photo { height: 280px; max-width: 280px; margin: 0 auto; } } @media (min-width: 768px) { .about-photo { height: 520px; } } .credentials-box { border: 1px solid var(--teak); } .credentials-header { padding: 2rem 2rem 0.5rem; } .credentials-label { font-family: var(--font-cinzel); font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--teak); margin-bottom: 1.5rem; } .credentials-grid { display: grid; grid-template-columns: repeat(2, 1fr); } @media (min-width: 768px) { .credentials-grid { grid-template-columns: repeat(6, 1fr); } } .credential-item { padding: 0 2rem 2rem; } .credential-item:not(:last-child) { border-right: 1px solid rgba(181, 146, 78, 0.2); } .credential-item-label { font-family: var(--font-cinzel); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--teak); opacity: 0.7; margin-bottom: 0.5rem; } .credential-item-value { font-family: var(--font-jost); font-weight: 300; color: var(--navy); font-size: 0.75rem; line-height: 1.8; } /* ── Contact Section ── */ .contact-section { padding: 7rem 0 10rem; background-color: #1a2538; } @media (min-width: 768px) { .contact-section { padding: 10rem 0; } } .contact-heading { font-family: var(--font-cormorant); font-weight: 300; color: var(--parchment); font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; margin-bottom: 1.5rem; } .contact-form { display: flex; flex-direction: column; gap: 1.5rem; } .form-row { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 768px) { .form-row { grid-template-columns: repeat(2, 1fr); } } .form-group { display: flex; flex-direction: column; } .form-label { display: block; font-family: var(--font-cinzel); font-size: 0.55rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brass); margin-bottom: 0.5rem; } .form-input, .form-select, .form-textarea { width: 100%; background: transparent; border: none; border-bottom: 1px solid rgba(181, 146, 78, 0.3); padding: 0.75rem 0; font-family: var(--font-jost); font-weight: 300; font-size: 0.875rem; color: var(--parchment); outline: none; transition: border-color 0.3s ease; -webkit-appearance: none; } .form-select { color: #6B6B6B; } .form-select.has-value { color: var(--parchment); } .form-select option { background-color: #243028; color: var(--parchment); } .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--brass); } .form-textarea { resize: none; } .form-success { text-align: center; padding: 4rem 0; } .form-success-title { font-family: var(--font-cormorant); font-style: italic; color: var(--parchment); font-size: 1.5rem; margin-bottom: 1rem; } .form-success-body { font-family: var(--font-jost); font-weight: 300; color: #C8BFB0; font-size: 0.875rem; } /* ── Footer ── */ .lc-footer { padding: 4rem 0; background-color: var(--parchment); border-top: 1px solid rgba(181, 146, 78, 0.15); } .footer-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; margin-bottom: 3rem; } @media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(4, 1fr); } } .footer-logo { height: 90px; width: auto; margin-bottom: 1.5rem; } .footer-col-label { font-family: var(--font-cinzel); font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--brass); margin-bottom: 1rem; } .footer-text { font-family: var(--font-jost); font-weight: 300; color: #1a2539; font-size: 0.75rem; line-height: 2; } .footer-link { color: var(--brass); letter-spacing: 0.05em; transition: opacity 0.3s ease; } .footer-link:hover { opacity: 0.7; } .footer-nav-link { font-family: var(--font-jost); font-weight: 300; color: #1a2535; font-size: 0.75rem; display: block; margin-bottom: 0.75rem; cursor: pointer; transition: color 0.3s ease; background: none; border: none; padding: 0; text-align: left; } .footer-nav-link:hover { color: var(--brass); } .footer-instagram { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; transition: opacity 0.3s ease; } .footer-instagram:hover { opacity: 0.7; } .footer-instagram-label { font-family: var(--font-jost); font-weight: 300; color: var(--brass); font-size: 0.75rem; letter-spacing: 0.1em; } .footer-bottom { padding-top: 2rem; border-top: 1px solid rgba(181, 146, 78, 0.15); display: flex; flex-direction: column; gap: 1rem; } @media (min-width: 768px) { .footer-bottom { flex-direction: row; justify-content: space-between; align-items: center; } } .footer-trademark { font-family: var(--font-jost); font-weight: 300; color: var(--brass); font-size: 0.55rem; letter-spacing: 0.15em; } .footer-location { font-family: var(--font-jost); font-weight: 300; color: #4A4A4A; font-size: 0.55rem; letter-spacing: 0.15em; } /* ── Utility: text-center, grid helpers ── */ .text-center { text-align: center; } .max-w-2xl { max-width: 42rem; } .max-w-3xl { max-width: 48rem; } .max-w-4xl { max-width: 56rem; } .max-w-5xl { max-width: 64rem; } .mx-auto { margin-left: auto; margin-right: auto; } .mb-4 { margin-bottom: 1rem; } .mb-6 { margin-bottom: 1.5rem; } .mb-8 { margin-bottom: 2rem; } .mb-10 { margin-bottom: 2.5rem; } .mb-12 { margin-bottom: 3rem; } .mb-16 { margin-bottom: 4rem; } .mt-2 { margin-top: 0.5rem; } .mt-6 { margin-top: 1.5rem; } .flex { display: flex; min-height: 0; min-width: 0; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-center { justify-content: center; } .gap-4 { gap: 1rem; } .w-full { width: 100%; } .hidden { display: none; } /* ── Spaces Intro Section ── */ .spaces-intro-heading { font-family: var(--font-cormorant); font-weight: 300; color: var(--navy); font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.1; margin-bottom: 1.5rem; } .spaces-intro-body { font-family: var(--font-jost); font-weight: 300; color: var(--charcoal); font-size: 14px; line-height: 1.9; max-width: 36rem; margin: 0 auto 2.5rem; } /* ── 404 Page ── */ .error-404 { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background-color: var(--parchment); padding: 2rem; } .error-404-number { font-family: var(--font-cormorant); font-weight: 300; color: var(--brass); font-size: 8rem; line-height: 1; opacity: 0.4; margin-bottom: 1rem; } .error-404-title { font-family: var(--font-cormorant); font-weight: 300; color: var(--navy); font-size: 2rem; margin-bottom: 1.5rem; } .error-404-body { font-family: var(--font-jost); font-weight: 300; color: var(--charcoal); font-size: 0.875rem; margin-bottom: 2.5rem; } /* ── Responsive helpers ── */ @media (max-width: 767px) { .md\:hidden { display: none; } .order-1 { order: 1; } .order-2 { order: 2; } } @media (min-width: 768px) { .md\:order-1 { order: 1; } .md\:order-2 { order: 2; } }