/* ============================================= Kyle Wilhelmsen, CMT — Global Stylesheet ============================================= */ /* --- BASE RESET & FONTS --- */ /* Google Fonts loaded via tags in HTML for faster rendering */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #121212; color: #ffffff; font-family: 'Inter', sans-serif; line-height: 1.7; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; opacity: 1; transition: opacity 0.6s ease; } /* --- PAGE ENTRANCE FADE --- */ body.loading { opacity: 0; } /* --- SCROLL REVEAL ANIMATIONS --- */ .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } .reveal.visible { opacity: 1; transform: translateY(0); } h1, h2, h3 { font-family: 'Playfair Display', serif; font-weight: 400; letter-spacing: 0.5px; } img { max-width: 100%; height: auto; display: block; } /* --- SKIP NAVIGATION (Accessibility) --- */ .skip-link { position: absolute; top: -100%; left: 50%; transform: translateX(-50%); background: #6B8293; color: #121212; padding: 0.75rem 1.5rem; border-radius: 0 0 4px 4px; font-weight: 600; z-index: 9999; text-decoration: none; transition: top 0.2s ease; } .skip-link:focus { top: 0; } /* ============================================= NAVIGATION ============================================= */ #global-nav { position: relative; width: 100%; z-index: 100; background-color: #121212; } /* Home page: float nav over hero image */ .home-page #global-nav { position: absolute; top: 0; left: 0; background-color: transparent; } .modern-nav { display: flex; justify-content: space-between; align-items: center; padding: 2rem 5%; width: 100%; flex-wrap: wrap; } .brand-logo { font-family: 'Playfair Display', serif; font-size: 1.5rem; color: #fff; text-decoration: none; letter-spacing: 1px; } .nav-links { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; } .nav-links a { color: #ddd; text-decoration: none; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1.5px; transition: color 0.3s ease; } .nav-links a:hover { color: #6B8293; } /* Navbar phone number */ .nav-phone { font-family: 'Inter', sans-serif; font-size: 0.95rem; font-weight: 500; color: #6B8293 !important; letter-spacing: 1px; margin-right: 10px; } .nav-phone:hover { color: #fff !important; } /* ============================================= DROPDOWN BOOKING CTA ============================================= */ .nav-dropdown { position: relative; display: flex; align-items: center; } .nav-book-btn { background-color: #6B8293; color: #121212; padding: 10px 24px; border-radius: 4px; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1.5px; border: none; cursor: pointer; transition: background-color 0.3s ease; } .nav-book-btn:hover { background-color: #869BAA; transform: translateY(-2px); box-shadow: 0 4px 16px rgba(107, 130, 147, 0.3); } .dropdown-content { display: none; position: absolute; top: 100%; right: 0; background-color: #1a1a1a; min-width: 240px; box-shadow: 0 12px 24px rgba(0, 0, 0, 0.6); border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.08); margin-top: 15px; z-index: 1000; overflow: hidden; } .dropdown-content.show { display: block; } .dropdown-content a { color: #ccc; padding: 18px 20px; text-decoration: none; display: block; font-size: 0.9rem; text-align: left; border-bottom: 1px solid rgba(255, 255, 255, 0.05); text-transform: none; letter-spacing: 0.5px; } .dropdown-content a:last-child { border-bottom: none; } .dropdown-content a:hover { background-color: rgba(107, 130, 147, 0.15); color: #fff; } /* ============================================= HERO SECTION (Index Page) ============================================= */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 20px; background: url('../images/hero-bg.webp') center/cover no-repeat; } .hero-overlay { position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(18, 18, 18, 0.7) 0%, rgba(18, 18, 18, 0.4) 50%, rgba(18, 18, 18, 1) 100% ); z-index: 1; } .hero-content { position: relative; z-index: 2; max-width: 800px; margin-top: 4rem; } .hero h1 { font-size: 4rem; margin-bottom: 1rem; line-height: 1.1; } .hero .subtitle { font-size: 1.25rem; color: #ccc; font-weight: 300; margin-bottom: 3rem; font-family: 'Inter', sans-serif; } /* ============================================= CONTAINER (Sub-Pages) ============================================= */ .container { width: 100%; max-width: 750px; margin: 0 auto; padding: 5rem 2rem; text-align: center; } .subtitle { color: #ccc; font-weight: 300; font-family: 'Inter', sans-serif; } .divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(107, 130, 147, 0.4), transparent); width: 120px; margin: 3rem auto; } /* ============================================= REVIEWS SECTION (Index Page) ============================================= */ .reviews-section { background-color: #1a1a1a; padding: 7rem 0; border-top: none; position: relative; } .reviews-section::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 200px; height: 1px; background: linear-gradient(90deg, transparent, rgba(107, 130, 147, 0.4), transparent); } .reviews-section-heading { font-size: 2.2rem; margin-bottom: 0.5rem; color: #fff; font-family: 'Playfair Display', serif; } .reviews-container { width: 100%; max-width: 1000px; margin: 0 auto; padding: 0 2rem; text-align: center; } .reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; margin-top: 4rem; margin-bottom: 4rem; } .review-card { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 8px; padding: 2.5rem 2rem; text-align: left; transition: transform 0.3s ease, background 0.3s ease; } .review-card:hover { transform: translateY(-5px); background: rgba(255, 255, 255, 0.04); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); } .stars { color: #D4AF37; font-size: 1.2rem; margin-bottom: 1rem; letter-spacing: 3px; } .review-text { font-size: 0.95rem; color: #ccc; line-height: 1.7; margin-bottom: 1.5rem; font-style: italic; font-weight: 300; } .review-author { font-family: 'Playfair Display', serif; color: #6B8293; font-size: 1.1rem; margin: 0; letter-spacing: 0.5px; } /* ============================================= EXPERIENCE SECTION ============================================= */ .experience-section { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 12px; padding: 3rem; margin-bottom: 3.5rem; text-align: left; } .experience-section h2 { color: #6B8293; font-size: 1.8rem; margin-bottom: 0.5rem; } .experience-tagline { color: #6B8293; font-size: 1.15rem; font-style: italic; margin-bottom: 1rem; font-weight: 500; } .experience-text { color: #ccc; line-height: 1.7; font-weight: 300; margin-bottom: 2rem; } .experience-intro { color: #aaa; margin-bottom: 3rem; font-weight: 300; } /* "How It Works" subsection */ .how-it-works { margin-bottom: 2.5rem; border-top: none; padding-top: 1.5rem; position: relative; } .how-it-works::before { content: ''; position: absolute; top: 0; left: 0; width: 60px; height: 1px; background: linear-gradient(90deg, rgba(107, 130, 147, 0.4), transparent); } .how-it-works h3 { color: #fff; font-size: 1.1rem; margin-bottom: 1rem; font-family: 'Inter', sans-serif; font-weight: 500; } .how-it-works-list { list-style: none; padding-left: 0; color: #ccc; font-size: 0.95rem; line-height: 1.7; font-weight: 300; } .how-it-works-list li { margin-bottom: 0.8rem; } .how-it-works-list li:last-child { margin-bottom: 0; } .how-it-works-list strong { color: #6B8293; } /* Service area callout */ .service-area-callout { background: rgba(0, 0, 0, 0.2); padding: 1rem 1.5rem; border-left: 2px solid #6B8293; margin-bottom: 2rem; border-radius: 4px; } .service-area-callout p { margin: 0; font-size: 0.9rem; color: #ccc; line-height: 1.6; } .service-area-callout em { color: #aaa; } /* Booking action within a section */ .section-booking { text-align: left; margin-top: 1.5rem; } .section-booking .price-note { color: #ccc; font-size: 0.9rem; font-style: italic; margin-bottom: 0.75rem; } .section-booking .studio-note { text-align: left; margin-top: 1rem; margin-bottom: 0; } /* Trust badge section */ .trust-badge { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 8px; padding: 2.5rem; margin-bottom: 3rem; text-align: left; } .trust-badge h2 { margin-top: 0; font-size: 1.3rem; color: #fff; font-weight: 400; } .trust-badge p { color: #ddd; line-height: 1.6; font-size: 0.95rem; font-weight: 300; margin-bottom: 0; } /* ============================================= BUTTONS ============================================= */ .global-booking-nav { display: flex; gap: 20px; justify-content: center; align-items: center; margin-bottom: 1rem; margin-top: 1.5rem; } .btn-book-primary, .btn-book-secondary { display: inline-block; padding: 16px 36px; border-radius: 4px; font-family: 'Inter', sans-serif; font-weight: 500; font-size: 0.9rem; text-decoration: none; transition: all 0.3s ease; cursor: pointer; text-transform: uppercase; letter-spacing: 1.5px; } .btn-book-primary { background-color: #6B8293; color: #121212; border: 1px solid #6B8293; } .btn-book-primary:hover { background-color: #869BAA; border-color: #869BAA; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(107, 130, 147, 0.3); } .btn-book-secondary { background-color: transparent; color: #fff; border: 1px solid #fff; } .btn-book-secondary:hover { background-color: #6B8293; color: #121212; border-color: #6B8293; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(107, 130, 147, 0.3); } /* Reviews page variant */ .btn-book-secondary.btn-reviews { border-color: #6B8293; color: #6B8293; } .studio-note { font-size: 0.85rem; color: #ddd; font-weight: 400; margin-top: 1.5rem; display: block; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8); letter-spacing: 0.5px; } /* ============================================= ABOUT PAGE ============================================= */ .profile-img { width: 100%; height: auto; border-radius: 8px; margin-bottom: 2rem; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); display: block; } .bio-text { text-align: left; line-height: 1.6; color: #ddd; margin-bottom: 2rem; font-weight: 300; } .bio-tagline { color: #6B8293; font-size: 1.15rem; font-style: italic; margin-bottom: 1.5rem; font-weight: 500; } .bio-paragraph { margin-bottom: 1.5rem; } .bio-paragraph--spaced { margin-bottom: 2.5rem; } .bio-mission { margin-bottom: 2rem; font-size: 1.1rem; color: #fff; } /* ============================================= WHY MASSAGE PAGE ============================================= */ .page-intro { color: #aaa; margin-bottom: 3rem; font-weight: 300; font-size: 1.1rem; line-height: 1.6; text-align: left; } .page-intro p + br + p, .page-intro p + p { margin-top: 1em; } .closing-section { margin: 5rem auto 3rem; text-align: center; border-top: none; padding-top: 4rem; position: relative; } .closing-section::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 120px; height: 1px; background: linear-gradient(90deg, transparent, rgba(107, 130, 147, 0.4), transparent); } .closing-section h2 { font-family: 'Playfair Display', serif; font-size: 2.2rem; color: #6B8293; font-style: italic; margin-bottom: 1.5rem; font-weight: 400; } .closing-section p { color: #ccc; font-size: 1.15rem; font-weight: 300; line-height: 1.7; max-width: 680px; margin: 0 auto; } .why-massage-booking { margin-top: 3rem; } /* ============================================= HOMEPAGE BOOKING CTA (Below Reviews) ============================================= */ .homepage-cta { padding: 6rem 0 7rem; text-align: center; position: relative; } .homepage-cta::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 160px; height: 1px; background: linear-gradient(90deg, transparent, rgba(107, 130, 147, 0.35), transparent); } .homepage-cta-container { width: 100%; max-width: 700px; margin: 0 auto; padding: 0 2rem; } .homepage-cta h2 { font-size: 2.2rem; margin-bottom: 0.5rem; color: #fff; } .homepage-cta .price-note { color: #aaa; font-size: 1rem; font-weight: 300; margin-bottom: 2rem; letter-spacing: 0.5px; } /* ============================================= TESTIMONIAL CALLOUT (Experience Page) ============================================= */ .testimonial-callout { text-align: center; padding: 2.5rem 2rem; margin-bottom: 3rem; border-left: 2px solid #6B8293; border-right: 2px solid #6B8293; border-radius: 4px; } .testimonial-callout .review-text { font-size: 1.05rem; max-width: 600px; margin: 0 auto 1rem; } .testimonial-callout .stars { margin-bottom: 1.25rem; } .testimonial-callout .review-author { font-size: 1rem; } /* ============================================= INVITE PAGE ============================================= */ .welcome-box { background: rgba(107, 130, 147, 0.05); border: 1px solid #6B8293; border-radius: 8px; padding: 2.5rem; margin-bottom: 3rem; } .welcome-box p { font-size: 1.1rem; line-height: 1.6; color: #ddd; } .welcome-box p:first-child { margin-top: 0; } .welcome-box p:last-child { margin-bottom: 0; } .discount-highlight { display: flex; gap: 1.5rem; justify-content: center; margin: 1.5rem 0 0.5rem; } .discount-amount { font-family: 'Playfair Display', serif; font-size: 1.6rem; color: #6B8293; font-weight: 600; line-height: 1.2; } .discount-amount span { display: block; font-family: 'Inter', sans-serif; font-size: 0.8rem; font-weight: 400; color: #aaa; text-transform: uppercase; letter-spacing: 1px; margin-top: 4px; } .invite-intro { color: #aaa; margin-bottom: 2.5rem; font-weight: 300; line-height: 1.6; } /* ============================================= SLIDESHOW (Crossfade + Ken Burns) ============================================= */ .slideshow-wrapper { position: relative; max-width: 100%; aspect-ratio: 3/2; margin: 2rem 0; border-radius: 8px; overflow: hidden; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); } .slideshow-wrapper .slide-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; transform: scale(1); } .slideshow-wrapper .slide-img.active { opacity: 1; animation: kenBurns 6s ease forwards; } .slideshow-wrapper .slide-dots { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 10; } .slideshow-wrapper .slide-dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.4); cursor: pointer; transition: background 0.3s ease; } .slideshow-wrapper .slide-dots span.active { background: #fff; } /* Bottom gradient overlay for editorial look */ .slideshow-wrapper::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 40%; background: linear-gradient(to top, rgba(18, 18, 18, 0.6), transparent); z-index: 5; pointer-events: none; } @keyframes kenBurns { from { transform: scale(1); } to { transform: scale(1.06); } } /* ============================================= GLOBAL FOOTER ============================================= */ .site-footer { margin-top: 5rem; border-top: none; padding: 3rem 0 2rem; text-align: center; position: relative; } .site-footer::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 160px; height: 1px; background: linear-gradient(90deg, transparent, rgba(107, 130, 147, 0.35), transparent); } .footer-cta { color: #aaa; font-size: 0.95rem; margin: 0; font-weight: 300; } .footer-contact { margin-top: 0.5rem; margin-bottom: 2.5rem; display: flex; flex-direction: column; align-items: center; gap: 8px; } .footer-phone { color: #6B8293; text-decoration: none; font-size: 1.25rem; font-weight: bold; letter-spacing: 1px; } .footer-email { color: #ccc; text-decoration: none; font-size: 1rem; font-weight: 300; letter-spacing: 0.5px; transition: color 0.3s ease; } .footer-email:hover { color: #fff; } .footer-credentials { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; } .footer-amta-logo { max-width: 240px; height: auto; opacity: 0.6; filter: grayscale(100%); transition: opacity 0.3s ease; } .footer-amta-logo:hover { opacity: 1; } .footer-cert-label { color: #666; font-size: 0.85rem; letter-spacing: 1px; margin: 0 0 4px 0; text-transform: uppercase; } .footer-cert-link { color: #6B8293; font-size: 0.85rem; letter-spacing: 1px; text-decoration: none; } .footer-cert-link:hover { color: #869BAA; } .footer-location { margin-top: 2rem; color: #555; font-size: 0.8rem; letter-spacing: 2px; text-transform: uppercase; font-weight: 300; } /* ============================================= MOBILE RESPONSIVENESS ============================================= */ @media (max-width: 768px) { .modern-nav { flex-direction: column; align-items: center; padding: 1.5rem; gap: 15px; background: rgba(18, 18, 18, 0.15); border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .nav-links { justify-content: center; flex-direction: column; width: 100%; gap: 15px; } .nav-phone { margin-right: 0; margin-bottom: 5px; font-size: 1.05rem; } .nav-dropdown { width: 100%; flex-direction: column; margin-top: 5px; } .nav-book-btn { width: 100%; text-align: center; } .dropdown-content { position: static; width: 100%; margin-top: 10px; box-shadow: none; background-color: #1a1a1a; border: 1px solid rgba(255, 255, 255, 0.1); } .dropdown-content a { text-align: center; } .hero h1 { font-size: 2.5rem; } .hero-content { margin-top: 18rem; } .container { padding-top: 3rem; padding-left: 1.5rem; padding-right: 1.5rem; } .global-booking-nav { flex-direction: column; width: 100%; } .btn-book-primary, .btn-book-secondary { width: 100%; text-align: center; margin-bottom: 10px; } .experience-section { padding: 1.5rem; } .discount-highlight { flex-direction: column; gap: 1rem; align-items: center; } .homepage-cta { padding: 3rem 0 4rem; } .homepage-cta h2 { font-size: 1.8rem; } }