/* ========================================================== ARTISTRY BY GS — SHARED STYLESHEET ========================================================== Palette: warm mocha background, ivory/cream text, gold accents. Fonts: - Playfair Display -> headings, "GS" in the logo - Alex Brush -> "Artistry by" in the logo (cursive) - Cormorant Garamond -> italic quotes / eyebrows - Jost -> body copy, nav, buttons, forms FILE MAP (search for these markers to jump around): 1. Variables & base reset 2. Typography 3. Nav / header 4. Buttons 5. Scroll-reveal animation 6. Hero (shared by ALL pages — same height everywhere) 7. Hero split layout (home page only: text left / photo right) 8. Homepage marquee carousel ("Recent Looks" strip) 9. Large portfolio carousel (3-4 big slides) 10. Instagram feed preview grid 11. Sections / bands / dividers 12. Services grid 13. About page (photo frame, stats, pull-quote, Amazon box) 14. Testimonials 15. FAQ accordion 16. Social CTA band 17. Contact page (availability strip, form, split layout) 18. Footer 19. Responsive overrides ========================================================== */ /* ===== 1. VARIABLES & BASE RESET ===== */ :root{ --mocha:#9B7B6C; --mocha-deep:#6B4E42; --espresso:#3F2A22; --ivory:#FFFBF3; --cream-soft:#F3E7DC; --gold:#C9A66B; --gold-soft:#E4CDA0; --blush:#E8CFC2; --max-w:1240px; --section-pad: clamp(64px, 10vw, 140px); /* Unified hero height — matches what was previously only on interior pages. Change this ONE value to resize the hero on every page at once. */ --hero-height: 56vh; /* Fixed height of the solid header bar (1 inch), used both for the header itself and as top padding on so content clears it. */ --nav-height: 1in; } *{box-sizing:border-box; margin:0; padding:0;} html{scroll-behavior:smooth;} body{ font-family:'Jost', sans-serif; font-weight:500; color: var(--cream-soft); background: var(--mocha); overflow-x:hidden; -webkit-font-smoothing:antialiased; padding-top: var(--nav-height); } img{max-width:100%; display:block;} a{color:inherit; text-decoration:none;} ul{list-style:none;} :focus-visible{outline:2px solid var(--gold); outline-offset:3px;} /* ===== 2. TYPOGRAPHY ===== */ h1,h2,h3,.display{ font-family:'Playfair Display', serif; color: var(--ivory); font-weight:700; line-height:1.08; letter-spacing:0.01em; } .italic-serif{ font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:500; } .eyebrow{ font-family:'Cormorant Garamond', serif; font-style:italic; color: var(--gold); font-size: clamp(1.1rem, 1.6vw, 1.4rem); letter-spacing:0.04em; } .container{max-width: var(--max-w); margin:0 auto; padding:0 clamp(20px, 5vw, 60px);} .wide{max-width:1400px; margin:0 auto; padding:0 clamp(20px, 5vw, 60px);} /* ===== 3. NAV / HEADER ===== Always-solid 1in-tall bar (not transparent) so header text stays readable over any hero image, at any scroll position. Since the nav is fixed, --nav-height is also used as top padding on so page content (including hero images) starts below the bar instead of hiding behind it. */ header.site-nav{ position:fixed; top:0; left:0; right:0; z-index:100; height: var(--nav-height); display:flex; align-items:center; background: var(--espresso); transition: box-shadow 0.3s ease; } header.site-nav.scrolled{ box-shadow: 0 4px 24px rgba(0,0,0,0.25); } .nav-inner{width:100%; display:flex; align-items:center; justify-content:space-between; max-width: var(--max-w); margin:0 auto; padding: 0 clamp(20px,5vw,60px);} /* Logo: "GS" stays bold Playfair Display gold. "Artistry by" is now cursive (Alex Brush) via the .logo-script span — swap the font-family below if a different option from the comparison preview is preferred later. */ .logo{ font-family:'Playfair Display', serif; font-weight:700; font-size: 1.2rem; /* slightly smaller than before, per request */ color: var(--ivory); letter-spacing:0.03em; display:inline-flex; align-items:baseline; gap:6px; } .logo-script{ font-family:'Alex Brush', cursive; font-weight:400; font-size: 1.55em; /* Alex Brush reads small at equal font-size, scaled up to match visual weight */ color: var(--ivory); line-height:1; } .logo span{color:var(--gold);} nav.links{display:flex; gap: clamp(16px, 2.6vw, 34px); align-items:center;} nav.links a{font-size:0.8rem; text-transform:uppercase; letter-spacing:0.1em; color: var(--cream-soft); position:relative; padding-bottom:4px;} nav.links a.current{color:var(--gold-soft);} nav.links a::after{content:''; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--gold); transition:width 0.3s ease;} nav.links a:hover::after, nav.links a.current::after{width:100%;} .nav-cta{border:1px solid var(--gold); padding:9px 20px; border-radius:2px; font-size:0.76rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--ivory) !important; transition: all 0.3s ease;} .nav-cta:hover{background:var(--gold); color:var(--espresso) !important;} .nav-cta::after{display:none;} .menu-toggle{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; z-index:110;} .menu-toggle span{width:26px; height:1.5px; background:var(--ivory); display:block;} @media (max-width: 900px){ nav.links{position:fixed; inset:0; background:var(--espresso); flex-direction:column; justify-content:center; align-items:center; gap:32px; transform: translateX(100%); transition: transform 0.4s ease;} nav.links.open{transform: translateX(0);} nav.links a{font-size:1rem;} .menu-toggle{display:flex;} } /* ===== 4. BUTTONS ===== */ .btn{display:inline-block; font-family:'Jost', sans-serif; font-size:0.8rem; text-transform:uppercase; letter-spacing:0.14em; padding:16px 38px; border:1px solid var(--gold); color:var(--ivory); border-radius:2px; transition: all 0.35s ease;} .btn:hover{background:var(--gold); color:var(--espresso); letter-spacing:0.16em;} .btn.filled{background:var(--gold); color:var(--espresso);} .btn.filled:hover{background:var(--gold-soft); border-color:var(--gold-soft);} .btn.outline-dark{border-color:var(--espresso); color:var(--espresso);} .btn.outline-dark:hover{background:var(--espresso); color:var(--ivory);} /* ===== 5. SCROLL-REVEAL ===== */ .reveal{opacity:0; transform:translateY(28px); transition: opacity 0.9s ease, transform 0.9s ease;} .reveal.visible{opacity:1; transform:translateY(0);} /* ===== 6. HERO — shared by every page, same height everywhere ===== All four pages use this exact same block: desert illustration background, brown gradient tint at 90% image opacity, --hero-height controls the height globally (see variable at the top of this file). */ .hero{ position:relative; min-height: var(--hero-height); display:flex; align-items:center; justify-content:center; padding: 50px clamp(20px,5vw,60px) 60px; overflow:hidden; } .hero-bg-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; filter: saturate(0.9); opacity:0.9; } .hero::after{ content:''; position:absolute; inset:0; z-index:-1; background: linear-gradient(180deg, rgba(63,42,34,0.35) 0%, rgba(63,42,34,0.15) 40%, rgba(63,42,34,0.85) 100%); } /* Centered content pattern — used on About / Portfolio / Contact */ .hero-content{max-width: 680px; text-align:center; position:relative; z-index:2;} /* Per feedback: gold/yellow is hard to read over the busy hero photo, so hero eyebrows use ivory instead (gold is still used everywhere else — section eyebrows, accents — where it sits on a flat mocha background and reads fine). */ .hero .eyebrow{display:block; margin-bottom:16px; color: var(--ivory); font-weight:600;} .hero h1{font-size: clamp(2.2rem, 5vw, 3.4rem);} .hero p.sub{ font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:600; font-size: clamp(1.5rem, 1.8vw, 1.3rem); color: var(--ivory); max-width:560px; margin: 16px auto 0; line-height:1.5; } /* ===== 7. HERO SPLIT LAYOUT — homepage only ===== A true 1x2 grid, centered as a block on the page (not stretched edge-to-edge) — text left, framed photo right. Falls back to stacked (photo above text) on narrow screens — see responsive section. */ .hero-split .hero-content{ max-width: 1000px; margin: 0 auto; width:100%; text-align:left; display:grid; grid-template-columns: 1fr 1fr; align-items:center; gap: clamp(30px, 5vw, 70px); } .hero-split .hero-text{flex: 1 1 480px; max-width:560px;} .hero-split .hero-text p.sub{margin: 16px 0 0;} .hero-split .hero-photo{ flex: 0 0 auto; width: clamp(300px, 36vw, 500px); border:1px solid var(--gold); padding:10px; position:relative; } .hero-split .hero-photo::before{ content:''; position:absolute; top:-10px; left:-10px; right:10px; bottom:10px; border:1px solid var(--gold); z-index:-1; } .hero-split .hero-photo img{width:100%; height:clamp(400px, 45vw, 620px); object-fit:cover; object-position:50% 20%;} /* Portfolio hero variant: cream "mat" box instead of the gold-line frame, fixed 3:5 ratio, and a larger Instagram line + bordered Book Now button in place of the usual eyebrow/h1/sub stack. */ .hero-portfolio .hero-photo{ border:none; background: var(--mocha-deep); padding:12px; width: clamp(240px, 28vw, 340px); } .hero-portfolio .hero-photo::before{display:none;} .hero-portfolio .hero-photo img{width:100%; aspect-ratio:3/5; height:auto; object-fit:cover; object-position:50% 25%;} .hero-portfolio .ig-line{ font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:600; font-size: clamp(1.3rem, 2.2vw, 1.65rem); color:var(--ivory); line-height:1.6; margin-top:18px; max-width:480px; } .hero-portfolio .ig-line a{text-decoration:underline; color:var(--gold-soft);} .hero-portfolio .book-now-outline{margin-top:30px;} /* ===== 8. HOMEPAGE MARQUEE CAROUSEL ("Recent Looks") ===== HOW TO ADD / REMOVE / REORDER IMAGES: Open index.html, find