/* ========================================================================= BLONDE FAITH — DESIGN SYSTEM Direction: Boho Editorial Hybrid FONT NOTE: @font-face rules go here once Olivia has the licensed files. Until then, --font-display / --font-body / --font-script fall back to clean system stacks so proportions stay correct when fonts swap in. ========================================================================= */ /* ========================================================================= BLONDE FAITH — DESIGN SYSTEM Direction: Boho Editorial Hybrid Fonts: Playfair Display / Instrument Sans / Caveat — loaded via Google Fonts in index.html . No @font-face needed here. ========================================================================= */ :root { /* ---- Color ---- */ --cream: #F6F0E8; --cream-deep: #EFE6D8; --saddle: #3A271E; --saddle-soft: #55392B; --terracotta: #B56E55; --turquoise: #5BAAA7; --dusty-rose: #D48A9E; --brass: #B78943; /* ---- Type ---- */ --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-body: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --font-script: 'Caveat', 'Segoe Script', cursive; /* ---- Layout ---- */ --container: 1240px; --section-pad: clamp(64px, 9vw, 140px); --edge-pad: clamp(20px, 5vw, 64px); /* ---- Motion ---- */ --ease: cubic-bezier(.22,.61,.36,1); } /* ---- Reset ---- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } body { margin: 0; background: var(--cream); color: var(--saddle); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; margin: 0; padding: 0; } h1, h2, h3 { margin: 0; font-weight: 400; } .skip-link { position: absolute; left: -999px; top: 0; background: var(--saddle); color: var(--cream); padding: 12px 20px; z-index: 999; } .skip-link:focus { left: 12px; top: 12px; } /* Visible focus states everywhere */ a:focus-visible, button:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; } /* ---- Shared type styles ---- */ .eyebrow { font-family: var(--font-body); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--terracotta); font-weight: 600; margin: 0 0 14px; } .eyebrow.center { text-align: center; } .editorial-heading { font-family: var(--font-display); font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.12; letter-spacing: -0.025em; color: var(--saddle); } .editorial-heading.center { text-align: center; } .script-accent { font-family: var(--font-script); font-weight: 400; color: var(--terracotta); font-size: 1.08em; line-height: 1; } .text-link { display: inline-block; font-size: 0.85rem; letter-spacing: 0.01em; text-transform: uppercase; font-weight: 600; color: var(--saddle); border-bottom: 1px solid var(--terracotta); padding-bottom: 3px; transition: color .25s var(--ease), border-color .25s var(--ease); } .text-link:hover { color: var(--terracotta); } .btn { display: inline-block; font-family: var(--font-body); font-size: 0.8rem; letter-spacing: 0.02em; text-transform: uppercase; font-weight: 600; padding: 17px 34px; border-radius: 2px; transition: transform .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease); } .btn-primary { background: var(--terracotta); color: var(--cream); } .btn-primary:hover { background: #a15c44; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(58,39,30,0.25); } /* Placeholder image blocks — clearly marked, never disguised as real content */ .placeholder-image { position: relative; background: repeating-linear-gradient(45deg, #e7ddcd, #e7ddcd 12px, #ddd0ba 12px, #ddd0ba 24px); border: 1px dashed var(--saddle-soft); display: flex; align-items: center; justify-content: center; min-height: 220px; } .placeholder-label { background: var(--cream); color: var(--saddle-soft); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; text-align: center; padding: 8px 14px; border: 1px solid var(--saddle-soft); font-family: var(--font-body); line-height: 1.5; } /* ========================================================================= HEADER / NAV ========================================================================= */ .site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 100; padding: clamp(16px, 3vw, 30px) 0; transition: background .35s var(--ease), padding .35s var(--ease), box-shadow .35s var(--ease); } .site-header.is-scrolled { position: fixed; background: rgba(246, 240, 232, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 10px 0; box-shadow: 0 4px 20px rgba(58,39,30,0.08); } .site-header.is-scrolled .nav-logo img { filter: none; } .site-header.is-scrolled .primary-nav a { color: var(--saddle); } .site-header.is-scrolled .nav-toggle span { background: var(--saddle); } .nav-wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--edge-pad); display: flex; align-items: center; gap: clamp(20px, 4vw, 48px); } .nav-logo { flex-shrink: 0; margin-right: auto; } .nav-logo img { height: 42px; width: auto; } .primary-nav ul { display: flex; gap: clamp(18px, 2.4vw, 34px); } .primary-nav a { font-size: 0.78rem; letter-spacing: 0.02em; text-transform: uppercase; font-weight: 500; color: var(--cream); text-shadow: 0 1px 6px rgba(0,0,0,0.25); transition: opacity .2s var(--ease); } .primary-nav a:hover { opacity: 0.7; } .nav-cta.btn { padding: 12px 22px; font-size: 0.72rem; } .nav-toggle { display: none; background: none; border: none; width: 30px; height: 22px; padding: 0; cursor: pointer; flex-direction: column; justify-content: space-between; } .nav-toggle span { display: block; height: 2px; background: var(--cream); border-radius: 2px; transition: background .3s var(--ease); } /* ========================================================================= HERO ========================================================================= */ .hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; } .hero-media { position: absolute; inset: 0; } .hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 32% center; } .hero-scrim { position: absolute; inset: 0; /* Gradient sits on the RIGHT (open landscape) side only, per brand direction — keeps Aubree + Wrangler on the left fully visible and unobscured. */ background: linear-gradient(90deg, rgba(58,39,30,0) 0%, rgba(58,39,30,0) 42%, rgba(58,39,30,0.30) 58%, rgba(58,39,30,0.62) 78%, rgba(58,39,30,0.72) 100%); } .hero-content { position: relative; z-index: 2; width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--edge-pad); display: flex; justify-content: flex-end; } .hero-headline { max-width: 580px; text-align: right; font-family: var(--font-display); font-size: clamp(2.4rem, 6vw, 4.4rem); line-height: 1.1; letter-spacing: -0.03em; color: var(--cream); text-shadow: 0 4px 30px rgba(0,0,0,0.25); } .hero-headline .script-accent { font-family: var(--font-script); color: var(--dusty-rose); letter-spacing: 0; font-weight: 600; font-size: 1.5em; line-height: 1; vertical-align: -0.06em; text-shadow: 0 4px 20px rgba(0,0,0,0.35); } .hero-sub { max-width: 420px; margin-left: auto; text-align: right; color: var(--cream); font-size: 1.02rem; margin-top: 20px; margin-bottom: 34px; text-shadow: 0 2px 12px rgba(0,0,0,0.3); } .hero-content .btn { margin-left: auto; display: block; width: fit-content; } .scroll-cue { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); z-index: 2; width: 26px; height: 42px; border: 1.5px solid rgba(246,240,232,0.7); border-radius: 20px; } .scroll-cue span { position: absolute; top: 8px; left: 50%; width: 4px; height: 8px; background: var(--cream); border-radius: 2px; transform: translateX(-50%); animation: scrollcue 1.8s infinite; } @keyframes scrollcue { 0% { opacity: 1; top: 8px; } 70% { opacity: 0; top: 20px; } 100% { opacity: 0; top: 20px; } } @media (prefers-reduced-motion: reduce) { .scroll-cue span { animation: none; } } /* ========================================================================= INTRO ========================================================================= */ .intro { padding: var(--section-pad) 0 calc(var(--section-pad) * 0.6); background: var(--cream); } .intro-inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--edge-pad); display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(40px, 6vw, 90px); align-items: center; } .intro-text { font-size: 1.08rem; max-width: 46ch; margin: 22px 0 26px; color: var(--saddle-soft); } .intro-signoff { font-size: 1.6rem; } .intro-image { aspect-ratio: 4 / 5; transform: rotate(-2deg); box-shadow: 0 20px 50px rgba(58,39,30,0.18); } .texture-divider { height: 40px; margin-top: var(--section-pad); background: linear-gradient(180deg, var(--cream) 0%, var(--cream-deep) 100%); clip-path: polygon(0 40%, 4% 60%, 9% 35%, 14% 65%, 19% 30%, 24% 58%, 29% 38%, 34% 62%, 39% 32%, 44% 60%, 49% 36%, 54% 64%, 59% 34%, 64% 60%, 69% 38%, 74% 62%, 79% 32%, 84% 58%, 89% 36%, 94% 62%, 100% 40%, 100% 100%, 0 100%); } /* ========================================================================= SERVICES ========================================================================= */ .services { padding: var(--section-pad) var(--edge-pad); background: var(--cream-deep); } .services-grid { max-width: var(--container); margin: clamp(40px, 6vw, 72px) auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 44px); } .service-card--offset { margin-top: 56px; } .service-image { aspect-ratio: 3 / 4; margin-bottom: 22px; } .service-index { font-family: var(--font-display); color: var(--brass); font-size: 0.95rem; margin: 0 0 6px; } .service-name { font-family: var(--font-display); font-size: 1.7rem; letter-spacing: -0.02em; margin-bottom: 10px; } .service-desc { color: var(--saddle-soft); font-size: 0.96rem; max-width: 32ch; margin: 0 0 16px; } /* ========================================================================= BRAND STATEMENT ========================================================================= */ .statement { background: var(--saddle); padding: clamp(90px, 14vw, 180px) var(--edge-pad); text-align: center; } .statement-heading { font-family: var(--font-display); font-size: clamp(2.4rem, 7vw, 5rem); line-height: 1.14; letter-spacing: -0.03em; color: var(--cream); max-width: 900px; margin: 0 auto; } .statement-heading .script-accent { color: var(--dusty-rose); } /* ========================================================================= MEET AUBREE ========================================================================= */ .meet { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; background: var(--cream); } .meet-image { aspect-ratio: 4 / 5; min-height: 380px; } .meet-copy { padding: clamp(48px, 7vw, 100px) clamp(28px, 6vw, 90px); display: flex; flex-direction: column; justify-content: center; } .meet-text { font-size: 1.05rem; color: var(--saddle-soft); max-width: 42ch; margin: 20px 0 24px; } /* ========================================================================= REVIEWS ========================================================================= */ .reviews { padding: var(--section-pad) var(--edge-pad); background: var(--dusty-rose); } .reviews .eyebrow { color: var(--saddle); } .reviews-grid { max-width: var(--container); margin: clamp(40px, 6vw, 64px) auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .review-card { min-height: 200px; padding: 28px; margin: 0; } /* ========================================================================= PHOTO STRIP ========================================================================= */ .photo-strip { padding: clamp(50px, 7vw, 90px) 0; background: var(--cream-deep); overflow-x: auto; scrollbar-width: none; } .photo-strip::-webkit-scrollbar { display: none; } .strip-track { display: flex; gap: 16px; padding: 0 var(--edge-pad); width: max-content; } .strip-image { width: clamp(190px, 26vw, 280px); aspect-ratio: 3 / 4; flex-shrink: 0; } /* ========================================================================= FINAL CTA ========================================================================= */ .final-cta { padding: clamp(90px, 13vw, 160px) var(--edge-pad); text-align: center; background: var(--terracotta); } .final-cta .editorial-heading { color: var(--cream); margin-bottom: 32px; } .final-cta .script-accent { color: var(--saddle); } .final-cta .btn-primary { background: var(--saddle); } .final-cta .btn-primary:hover { background: #2a1c15; } /* ========================================================================= FOOTER ========================================================================= */ .site-footer { background: var(--saddle); padding: 64px var(--edge-pad) 100px; } .footer-inner { max-width: var(--container); margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 22px; } .footer-logo { height: 40px; width: auto; } .footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 26px; } .footer-nav a { color: var(--cream); font-size: 0.8rem; letter-spacing: 0.02em; text-transform: uppercase; opacity: 0.85; } .footer-nav a:hover { opacity: 1; } .footer-meta { color: var(--cream); opacity: 0.75; font-size: 0.88rem; line-height: 1.7; } .footer-social { display: flex; gap: 20px; } .footer-social a { color: var(--cream); font-size: 0.78rem; letter-spacing: 0.02em; text-transform: uppercase; opacity: 0.75; } .footer-social a:hover { opacity: 1; } .footer-copyright { color: var(--cream); opacity: 0.5; font-size: 0.75rem; margin-top: 10px; } /* ========================================================================= MOBILE STICKY BAR ========================================================================= */ .sticky-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 90; background: rgba(58,39,30,0.96); backdrop-filter: blur(8px); padding: 10px var(--edge-pad); padding-bottom: max(10px, env(safe-area-inset-bottom)); align-items: stretch; gap: 10px; box-shadow: 0 -4px 20px rgba(0,0,0,0.2); } .sticky-bar a { flex: 1; text-align: center; color: var(--cream); font-size: 0.74rem; letter-spacing: 0.02em; text-transform: uppercase; font-weight: 600; padding: 13px 8px; border: 1px solid rgba(246,240,232,0.35); border-radius: 2px; } .sticky-bar-book { background: var(--terracotta); border-color: var(--terracotta) !important; } /* ========================================================================= RESPONSIVE — MOBILE FIRST BREAKPOINTS ========================================================================= */ @media (max-width: 900px) { .primary-nav, .nav-cta { display: none; } .nav-toggle { display: flex; } .site-header.nav-open { background: rgba(58,39,30,0.98); padding-bottom: 20px; } .site-header.nav-open .primary-nav { display: block; } .site-header.nav-open .primary-nav ul { flex-direction: column; gap: 18px; padding: 20px var(--edge-pad) 6px; } .site-header.nav-open .primary-nav a { color: var(--cream); } .site-header.nav-open .nav-cta { display: block; margin: 6px var(--edge-pad) 0; text-align: center; } .hero-content { justify-content: center; } .hero-headline, .hero-sub { text-align: center; } .hero-sub { margin-left: 0; margin-right: 0; } .hero-content .btn { margin-left: auto; margin-right: auto; } .hero-scrim { background: linear-gradient(180deg, rgba(58,39,30,0.15) 0%, rgba(58,39,30,0.35) 55%, rgba(58,39,30,0.75) 100%); } .intro-inner { grid-template-columns: 1fr; } .intro-image { order: -1; max-width: 320px; margin: 0 auto; } .services-grid { grid-template-columns: 1fr; max-width: 420px; } .service-card--offset { margin-top: 0; } .meet { grid-template-columns: 1fr; } .meet-image { min-height: 300px; } .reviews-grid { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; } .sticky-bar { display: flex; } .site-footer { padding-bottom: 110px; } } @media (max-width: 600px) { .hero-headline { font-size: clamp(2.1rem, 9vw, 2.8rem); } }