/* ============================================================ TIFFANY'S BEAUTY STUDIO — Main Stylesheet Luxury Lash & Brow Studio | Phoenix, AZ ============================================================ */ /* ── Google Fonts imported in HTML ── */ /* ── CSS Variables ── */ :root { --blush: #F4D0CB; --blush-dark: #E8B8B1; --beige: #F5EFE6; --cream: #FDFAF6; --black: #1A1A1A; --gold: #C9A96E; --gold-dark: #B8925A; --gray-light: #EDE7DF; --gray-mid: #CEC5BB; --gray-text: #6B6357; --white: #FFFFFF; --font-serif: 'Cormorant Garamond', Georgia, serif; --font-sans: 'Montserrat', sans-serif; --nav-height: 80px; --max-width: 1200px; --section-pad: 100px; --radius: 2px; --transition: 0.35s ease; } /* ── Reset & Base ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: var(--font-sans); background-color: var(--cream); color: var(--black); line-height: 1.7; -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } ul { list-style: none; } button { cursor: pointer; border: none; background: none; font-family: inherit; } /* ── Typography ── */ h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 400; line-height: 1.2; color: var(--black); } h1 { font-size: clamp(2.8rem, 6vw, 5.5rem); letter-spacing: -0.02em; } h2 { font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing: -0.01em; } h3 { font-size: clamp(1.4rem, 2.5vw, 2rem); } h4 { font-size: 1.2rem; } p { font-size: 1rem; color: var(--gray-text); line-height: 1.8; } .eyebrow { font-family: var(--font-sans); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 0.75rem; } /* ── Layout Utilities ── */ .container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 2rem; } .section { padding: var(--section-pad) 0; } .section--cream { background: var(--cream); } .section--beige { background: var(--beige); } .section--blush { background: var(--blush); } .section--black { background: var(--black); } .text-center { text-align: center; } .text-left { text-align: left; } .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; } .flex-center { display: flex; align-items: center; justify-content: center; } .flex-between { display: flex; align-items: center; justify-content: space-between; } /* ── Buttons ── */ .btn { display: inline-block; font-family: var(--font-sans); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; padding: 1rem 2.5rem; border-radius: var(--radius); transition: all var(--transition); cursor: pointer; white-space: nowrap; } .btn--gold { background: var(--gold); color: var(--white); } .btn--gold:hover { background: var(--gold-dark); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(201,169,110,0.35); } .btn--black { background: var(--black); color: var(--white); } .btn--black:hover { background: #333; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.2); } .btn--outline { background: transparent; color: var(--black); border: 1px solid var(--black); } .btn--outline:hover { background: var(--black); color: var(--white); } .btn--outline-white { background: transparent; color: var(--white); border: 1px solid var(--white); } .btn--outline-white:hover { background: var(--white); color: var(--black); } /* ── Services Dropdown Mega-Menu ── */ .nav__has-dropdown { position: relative; } .nav__dropdown { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(8px); background: var(--white); border: 1px solid var(--gray-light); border-top: 2px solid var(--gold); box-shadow: 0 24px 48px rgba(0,0,0,0.12); min-width: 230px; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s; z-index: 200; } /* Arrow tip */ .nav__dropdown::before { content: ''; position: absolute; top: -7px; left: 50%; transform: translateX(-50%); border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid var(--gold); } .nav__has-dropdown:hover .nav__dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .nav__dropdown a { display: flex; align-items: center; gap: 0.6rem; padding: 0.8rem 1.4rem; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--black); border-bottom: 1px solid var(--gray-light); transition: background 0.18s ease, color 0.18s ease, padding-left 0.18s ease; white-space: nowrap; } .nav__dropdown a:last-child { border-bottom: none; } .nav__dropdown a::before { content: '✦'; color: var(--gold); font-size: 0.55rem; flex-shrink: 0; opacity: 0; transition: opacity 0.18s ease; } .nav__dropdown a:hover { background: var(--beige); color: var(--gold); padding-left: 1.8rem; } .nav__dropdown a:hover::before { opacity: 1; } .nav__dropdown-divider { height: 1px; background: var(--gray-light); margin: 0.25rem 0; border-top: 1px solid var(--blush); } .dropdown-arrow { font-size: 0.6rem; margin-left: 2px; transition: transform 0.2s ease; display: inline-block; } .nav__has-dropdown:hover .dropdown-arrow { transform: rotate(180deg); } /* ── Navigation ── */ .nav { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-height); z-index: 1000; transition: background var(--transition), box-shadow var(--transition); } .nav.scrolled { background: rgba(253, 250, 246, 0.97); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--gray-light); } .nav__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 2rem; max-width: var(--max-width); margin: 0 auto; } .nav__logo { font-family: var(--font-serif); font-size: 1.4rem; font-weight: 400; letter-spacing: 0.05em; color: var(--black); transition: color var(--transition); } .nav__logo span { color: var(--gold); } .nav__links { display: flex; align-items: center; gap: 2.5rem; } .nav__links a { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--black); transition: color var(--transition); position: relative; } .nav__links a::after { content: ''; position: absolute; bottom: -3px; left: 0; right: 0; height: 1px; background: var(--gold); transform: scaleX(0); transition: transform var(--transition); } .nav__links a:hover { color: var(--gold); } .nav__links a:hover::after { transform: scaleX(1); } .nav__links a.active { color: var(--gold); } .nav__links a.active::after { transform: scaleX(1); } .nav__cta { margin-left: 1rem; } .nav__hamburger { display: none; flex-direction: column; gap: 5px; padding: 8px; cursor: pointer; } .nav__hamburger span { display: block; width: 24px; height: 1.5px; background: var(--black); transition: all var(--transition); } /* Mobile Menu */ .nav__mobile { display: none; position: fixed; top: var(--nav-height); left: 0; right: 0; background: var(--cream); border-top: 1px solid var(--gray-light); padding: 2rem; z-index: 999; flex-direction: column; gap: 1.5rem; box-shadow: 0 20px 40px rgba(0,0,0,0.08); } .nav__mobile.open { display: flex; } .nav__mobile a { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--black); padding: 0.5rem 0; border-bottom: 1px solid var(--gray-light); } .nav__mobile .btn { margin-top: 0.5rem; text-align: center; } /* ── Hero ── */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; } .hero__bg { position: absolute; inset: 0; z-index: 0; } .hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .hero__overlay { position: absolute; inset: 0; background: linear-gradient( 105deg, rgba(253,250,246,0.92) 0%, rgba(253,250,246,0.75) 50%, rgba(253,250,246,0.15) 100% ); z-index: 1; } .hero__content { position: relative; z-index: 2; max-width: 680px; padding-top: var(--nav-height); } .hero__tagline { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.75rem; } .hero__tagline::before { content: ''; display: inline-block; width: 32px; height: 1px; background: var(--gold); } .hero h1 { margin-bottom: 1.5rem; font-style: italic; } .hero h1 em { font-style: normal; color: var(--gold); } .hero__sub { font-size: 1.05rem; color: var(--gray-text); margin-bottom: 2.5rem; max-width: 500px; line-height: 1.8; } .hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; } .hero__scroll { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; font-size: 0.6rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gray-text); animation: bounce 2s infinite; } .hero__scroll::after { content: ''; display: block; width: 1px; height: 40px; background: var(--gold); } @keyframes bounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(6px); } } /* ── Section Intro ── */ .section-intro { max-width: 680px; margin: 0 auto 4rem; } .section-intro.text-left { margin-left: 0; } .section-intro h2 { margin-bottom: 1rem; } .section-intro p { font-size: 1.05rem; } /* ── Divider ── */ .divider { width: 48px; height: 1px; background: var(--gold); margin: 1.5rem auto; } .divider--left { margin-left: 0; } /* ── Service Cards ── */ .service-card { background: var(--white); border: 1px solid var(--gray-light); overflow: hidden; transition: transform var(--transition), box-shadow var(--transition); } .service-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(0,0,0,0.08); } .service-card__img { width: 100%; aspect-ratio: 4/3; overflow: hidden; } .service-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; } .service-card:hover .service-card__img img { transform: scale(1.05); } .service-card__body { padding: 2rem; } .service-card__body .eyebrow { margin-bottom: 0.5rem; } .service-card__body h3 { margin-bottom: 0.75rem; } .service-card__body p { margin-bottom: 1.5rem; font-size: 0.95rem; } .service-card__price { font-family: var(--font-serif); font-size: 1.6rem; color: var(--gold); margin-bottom: 1.5rem; display: block; } .service-card__price small { font-size: 0.85rem; font-family: var(--font-sans); color: var(--gray-text); margin-left: 0.25rem; } /* ── Trust / Stats ── */ .trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--gray-light); } .trust-item { padding: 2.5rem 2rem; text-align: center; border-right: 1px solid var(--gray-light); } .trust-item:last-child { border-right: none; } .trust-item__icon { font-size: 1.8rem; margin-bottom: 0.75rem; display: block; } .trust-item h4 { font-family: var(--font-serif); font-size: 2rem; color: var(--gold); margin-bottom: 0.25rem; } .trust-item p { font-size: 0.8rem; line-height: 1.5; } /* ── Gallery ── */ .gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .gallery-item { position: relative; overflow: hidden; aspect-ratio: 3/4; cursor: pointer; } .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; } .gallery-item:hover img { transform: scale(1.06); } .gallery-item__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(26,26,26,0.7) 0%, transparent 60%); opacity: 0; transition: opacity var(--transition); display: flex; align-items: flex-end; padding: 1.5rem; } .gallery-item:hover .gallery-item__overlay { opacity: 1; } .gallery-item__caption { color: var(--white); font-size: 0.85rem; line-height: 1.5; } .gallery-item__caption strong { display: block; font-weight: 600; margin-bottom: 0.2rem; font-size: 0.95rem; } /* Before/After Slider */ .ba-container { position: relative; overflow: hidden; cursor: col-resize; user-select: none; aspect-ratio: 4/3; } .ba-container img { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; } .ba-after { clip-path: inset(0 50% 0 0); transition: clip-path 0s; } .ba-slider-line { position: absolute; top: 0; left: 50%; width: 2px; height: 100%; background: var(--white); z-index: 3; transform: translateX(-50%); } .ba-slider-handle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; background: var(--white); z-index: 4; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 12px rgba(0,0,0,0.2); font-size: 0.8rem; font-weight: 700; color: var(--black); letter-spacing: -1px; } .ba-label { position: absolute; bottom: 12px; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--white); background: rgba(26,26,26,0.5); padding: 4px 10px; z-index: 3; } .ba-label--before { left: 12px; } .ba-label--after { right: 12px; } /* ── Testimonials ── */ .testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .testimonial-card { background: var(--white); padding: 2rem 2rem 1.75rem; border: 1px solid var(--gray-light); transition: box-shadow var(--transition); } .testimonial-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.07); } .testimonial-card__stars { color: var(--gold); font-size: 0.9rem; letter-spacing: 2px; margin-bottom: 1rem; } .testimonial-card__quote { font-family: var(--font-serif); font-size: 1.05rem; color: var(--black); line-height: 1.7; font-style: italic; margin-bottom: 1.5rem; position: relative; padding-top: 0.5rem; } .testimonial-card__quote::before { content: '\201C'; font-size: 3rem; color: var(--blush); font-family: var(--font-serif); line-height: 0; position: absolute; top: 0.5rem; left: -0.25rem; } .testimonial-card__author { display: flex; align-items: center; gap: 0.75rem; border-top: 1px solid var(--gray-light); padding-top: 1.25rem; } .testimonial-card__avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--blush); display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-size: 1.1rem; color: var(--black); flex-shrink: 0; } .testimonial-card__name { font-weight: 600; font-size: 0.85rem; color: var(--black); } .testimonial-card__loc { font-size: 0.75rem; color: var(--gray-text); } /* ── FAQ Accordion ── */ .faq-list { max-width: 800px; margin: 0 auto; } .faq-category-title { font-family: var(--font-sans); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold); padding: 0 0 0.75rem; margin: 3rem 0 0.5rem; border-bottom: 1px solid var(--gray-light); } .faq-category-title:first-child { margin-top: 0; } .faq-item { border-bottom: 1px solid var(--gray-light); overflow: hidden; } .faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.5rem 0; font-family: var(--font-serif); font-size: 1.1rem; color: var(--black); text-align: left; cursor: pointer; background: none; border: none; transition: color var(--transition); } .faq-question:hover { color: var(--gold); } .faq-question.open { color: var(--gold); } .faq-icon { flex-shrink: 0; width: 24px; height: 24px; border: 1px solid currentColor; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem; line-height: 1; transition: transform var(--transition); } .faq-question.open .faq-icon { transform: rotate(45deg); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s ease; } .faq-answer.open { max-height: 400px; padding-bottom: 1.5rem; } .faq-answer p { font-size: 0.95rem; line-height: 1.9; } .faq-answer a { color: var(--gold); font-weight: 600; } /* ── Blog Cards ── */ .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .blog-card { background: var(--white); border: 1px solid var(--gray-light); overflow: hidden; transition: transform var(--transition), box-shadow var(--transition); } .blog-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,0.07); } .blog-card__img { aspect-ratio: 16/10; overflow: hidden; } .blog-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; } .blog-card:hover .blog-card__img img { transform: scale(1.05); } .blog-card__body { padding: 1.75rem; } .blog-card__tag { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.6rem; display: block; } .blog-card__body h3 { font-size: 1.2rem; margin-bottom: 0.75rem; line-height: 1.3; } .blog-card__body p { font-size: 0.875rem; margin-bottom: 1.25rem; line-height: 1.7; } .blog-card__link { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--black); display: inline-flex; align-items: center; gap: 0.5rem; transition: color var(--transition), gap var(--transition); } .blog-card__link:hover { color: var(--gold); gap: 0.85rem; } .blog-card__link::after { content: '→'; } /* ── Contact Form ── */ .contact-layout { display: grid; grid-template-columns: 1fr 1.3fr; gap: 5rem; align-items: start; } .contact-info h2 { margin-bottom: 1rem; } .contact-info p { margin-bottom: 2rem; } .contact-detail { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.5rem; } .contact-detail__icon { width: 40px; height: 40px; background: var(--blush); display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; border-radius: 50%; } .contact-detail__text strong { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.2rem; } .contact-detail__text span, .contact-detail__text a { font-size: 0.95rem; color: var(--gray-text); transition: color var(--transition); } .contact-detail__text a:hover { color: var(--gold); } .contact-map { margin-top: 2rem; border: 1px solid var(--gray-light); overflow: hidden; height: 220px; } .contact-map iframe, .contact-map .map-placeholder { width: 100%; height: 100%; border: none; display: flex; align-items: center; justify-content: center; background: var(--beige); font-family: var(--font-sans); font-size: 0.8rem; color: var(--gray-text); text-align: center; } /* Form */ .contact-form { background: var(--white); padding: 3rem; border: 1px solid var(--gray-light); } .contact-form h3 { margin-bottom: 0.5rem; } .contact-form > p { margin-bottom: 2rem; font-size: 0.9rem; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .form-group { margin-bottom: 1.25rem; } .form-group label { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--black); margin-bottom: 0.5rem; } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 0.9rem 1rem; border: 1px solid var(--gray-light); background: var(--cream); font-family: var(--font-sans); font-size: 0.95rem; color: var(--black); border-radius: var(--radius); transition: border-color var(--transition), box-shadow var(--transition); outline: none; appearance: none; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,169,110,0.15); } .form-group textarea { resize: vertical; min-height: 120px; } .form-group select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B6357' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; } /* ── CTA Banner ── */ .cta-banner { padding: 6rem 0; text-align: center; background: var(--black); position: relative; overflow: hidden; } .cta-banner::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(201,169,110,0.12) 0%, transparent 70%); } .cta-banner .container { position: relative; z-index: 1; } .cta-banner h2 { color: var(--white); font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 1rem; } .cta-banner p { color: rgba(255,255,255,0.6); font-size: 1rem; margin-bottom: 2.5rem; max-width: 500px; margin-left: auto; margin-right: auto; } .cta-banner .btn { margin: 0 0.5rem; } /* ── Page Header ── */ .page-header { padding: calc(var(--nav-height) + 5rem) 0 4rem; background: var(--beige); text-align: center; position: relative; } .page-header::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 1px; height: 60px; background: var(--gold); } .page-header .eyebrow { display: block; margin-bottom: 0.75rem; } .page-header h1 { font-size: clamp(2.5rem, 5vw, 4rem); margin-bottom: 1rem; } .page-header p { max-width: 560px; margin: 0 auto; font-size: 1.05rem; } /* ── Services Page (Full) ── */ .service-full { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; padding: 5rem 0; border-bottom: 1px solid var(--gray-light); } .service-full:last-child { border-bottom: none; } .service-full--reverse .service-full__visual { order: -1; } .service-full__visual { position: relative; } .service-full__img { width: 100%; aspect-ratio: 4/5; object-fit: cover; } .service-full__badge { position: absolute; bottom: -1.5rem; right: -1.5rem; width: 100px; height: 100px; background: var(--gold); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--white); font-family: var(--font-serif); } .service-full__badge-price { font-size: 1.4rem; line-height: 1; } .service-full__badge-label { font-size: 0.55rem; font-family: var(--font-sans); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.85; } .service-full__content .eyebrow { margin-bottom: 0.5rem; } .service-full__content h2 { margin-bottom: 1rem; } .service-full__content p { margin-bottom: 1.5rem; } .service-benefits { margin: 1.5rem 0 2rem; } .service-benefits li { display: flex; gap: 0.75rem; align-items: flex-start; margin-bottom: 0.6rem; font-size: 0.9rem; color: var(--gray-text); } .service-benefits li::before { content: '✦'; color: var(--gold); font-size: 0.6rem; margin-top: 5px; flex-shrink: 0; } .pricing-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin: 1.5rem 0 2rem; } .pricing-mini__item { background: var(--beige); padding: 1rem 1.25rem; border-left: 2px solid var(--gold); } .pricing-mini__item strong { display: block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.25rem; } .pricing-mini__item span { font-family: var(--font-serif); font-size: 1.3rem; color: var(--gold); } /* ── Footer ── */ .footer { background: var(--black); color: rgba(255,255,255,0.6); padding: 5rem 0 2rem; } .footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 3rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 2rem; } .footer__brand .nav__logo { color: var(--white); display: block; margin-bottom: 1rem; font-size: 1.3rem; } .footer__brand p { color: rgba(255,255,255,0.5); font-size: 0.875rem; line-height: 1.8; margin-bottom: 1.5rem; } .footer__social { display: flex; gap: 0.75rem; } .footer__social a { width: 36px; height: 36px; border: 1px solid rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center; font-size: 0.85rem; color: rgba(255,255,255,0.6); transition: all var(--transition); } .footer__social a:hover { background: var(--gold); border-color: var(--gold); color: var(--white); } .footer__col h5 { font-family: var(--font-sans); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--white); margin-bottom: 1.25rem; } .footer__col ul li { margin-bottom: 0.6rem; } .footer__col ul li a { font-size: 0.875rem; color: rgba(255,255,255,0.5); transition: color var(--transition); } .footer__col ul li a:hover { color: var(--gold); } .footer__col address { font-style: normal; font-size: 0.875rem; line-height: 2; color: rgba(255,255,255,0.5); } .footer__bottom { display: flex; align-items: center; justify-content: space-between; font-size: 0.75rem; } /* ── Chatbot Widget ── */ .chatbot-toggle { position: fixed; bottom: 2rem; right: 2rem; width: 56px; height: 56px; border-radius: 50%; background: var(--gold); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; box-shadow: 0 4px 20px rgba(201,169,110,0.5); cursor: pointer; z-index: 900; transition: transform var(--transition), box-shadow var(--transition); border: none; } .chatbot-toggle:hover { transform: scale(1.08); box-shadow: 0 8px 28px rgba(201,169,110,0.6); } .chatbot-widget { position: fixed; bottom: 6rem; right: 2rem; width: 360px; max-height: 520px; background: var(--white); border: 1px solid var(--gray-light); border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,0.15); display: none; flex-direction: column; z-index: 900; overflow: hidden; } .chatbot-widget.open { display: flex; } .chatbot-header { background: var(--black); padding: 1rem 1.25rem; display: flex; align-items: center; gap: 0.75rem; } .chatbot-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--gold); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; } .chatbot-header__info strong { display: block; color: var(--white); font-size: 0.9rem; font-weight: 600; } .chatbot-header__info span { color: rgba(255,255,255,0.5); font-size: 0.75rem; } .chatbot-close { margin-left: auto; color: rgba(255,255,255,0.5); font-size: 1.2rem; background: none; border: none; cursor: pointer; transition: color var(--transition); } .chatbot-close:hover { color: var(--white); } .chatbot-messages { flex: 1; overflow-y: auto; padding: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; } .chat-msg { max-width: 88%; font-size: 0.875rem; line-height: 1.6; padding: 0.75rem 1rem; border-radius: 12px; } .chat-msg--bot { background: var(--beige); color: var(--black); border-bottom-left-radius: 2px; align-self: flex-start; } .chat-msg--user { background: var(--gold); color: var(--white); border-bottom-right-radius: 2px; align-self: flex-end; } .chatbot-quick-replies { padding: 0 1.25rem 0.75rem; display: flex; flex-wrap: wrap; gap: 0.5rem; } .quick-reply-btn { font-size: 0.72rem; font-weight: 600; padding: 0.4rem 0.85rem; border: 1px solid var(--gray-mid); border-radius: 20px; background: none; cursor: pointer; transition: all var(--transition); color: var(--black); white-space: nowrap; } .quick-reply-btn:hover { background: var(--blush); border-color: var(--blush-dark); } .chatbot-input { display: flex; border-top: 1px solid var(--gray-light); } .chatbot-input input { flex: 1; padding: 1rem; border: none; outline: none; font-family: var(--font-sans); font-size: 0.875rem; background: var(--white); } .chatbot-input button { padding: 1rem 1.25rem; background: var(--gold); color: var(--white); border: none; cursor: pointer; font-size: 1rem; transition: background var(--transition); } .chatbot-input button:hover { background: var(--gold-dark); } /* ── Animations ── */ .fade-in { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; } .fade-in.visible { opacity: 1; transform: translateY(0); } /* ── Page Transitions ── */ .page-transition { animation: fadeUp 0.5s ease forwards; } @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* ── Responsive ── */ @media (max-width: 1024px) { :root { --section-pad: 70px; } .grid-3 { grid-template-columns: repeat(2, 1fr); } .grid-4 { grid-template-columns: repeat(2, 1fr); } .trust-grid { grid-template-columns: repeat(2, 1fr); } .trust-item { border-right: none; border-bottom: 1px solid var(--gray-light); } .trust-item:nth-child(odd) { border-right: 1px solid var(--gray-light); } .trust-item:nth-last-child(-n+2) { border-bottom: none; } .testimonial-grid { grid-template-columns: repeat(2, 1fr); } .footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; } .contact-layout { gap: 3rem; } .service-full { gap: 3rem; } } @media (max-width: 768px) { :root { --section-pad: 55px; } .nav__links { display: none; } .nav__cta { display: none; } .nav__hamburger { display: flex; } .grid-2 { grid-template-columns: 1fr; } .grid-3 { grid-template-columns: 1fr; } .gallery-grid { grid-template-columns: repeat(2, 1fr); } .testimonial-grid { grid-template-columns: 1fr; } .service-full { grid-template-columns: 1fr; gap: 2rem; } .service-full--reverse .service-full__visual { order: unset; } .contact-layout { grid-template-columns: 1fr; gap: 3rem; } .footer__grid { grid-template-columns: 1fr; gap: 2rem; } .footer__bottom { flex-direction: column; gap: 0.5rem; text-align: center; } .hero__actions { flex-direction: column; align-items: flex-start; } .chatbot-widget { width: calc(100vw - 3rem); right: 1.5rem; } .form-row { grid-template-columns: 1fr; } .pricing-mini { grid-template-columns: 1fr; } .blog-grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { .gallery-grid { grid-template-columns: 1fr; } .trust-grid { grid-template-columns: 1fr; } .trust-item { border-right: none !important; } .contact-form { padding: 2rem 1.5rem; } }