/* ═══════════════════════════════════════════ AA NAILS & SPA — Main Stylesheet ═══════════════════════════════════════════ */ /* ─── Custom Properties ─────────────────── */ :root { --clr-bg: #0e0e18; --clr-bg-2: #13131f; --clr-bg-card: #1a1a2e; --clr-bg-card-2: #1f1f35; --clr-gold: #c9a96e; --clr-gold-light: #e2c99a; --clr-pink: #e8b4b8; --clr-pink-dark: #c97d84; --clr-text: #f0ece4; --clr-text-muted: #9990a8; --clr-border: rgba(201, 169, 110, 0.18); --clr-white: #ffffff; --gradient-gold: linear-gradient(135deg, #c9a96e 0%, #e8b4b8 100%); --gradient-dark: linear-gradient(180deg, #0e0e18 0%, #13131f 100%); --gradient-hero: linear-gradient(160deg, #1a0e2e 0%, #0e0e18 40%, #1a1020 100%); --font-heading: 'Cormorant Garamond', Georgia, serif; --font-body: 'Lato', system-ui, sans-serif; --radius: 12px; --radius-lg: 20px; --transition: 0.3s ease; --shadow: 0 8px 40px rgba(0, 0, 0, 0.45); --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.35); --container: 1200px; --nav-h: 72px; } /* ─── Reset & Base ───────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { background: var(--clr-bg); color: var(--clr-text); font-family: var(--font-body); font-weight: 400; line-height: 1.7; overflow-x: hidden; } img { max-width: 100%; display: block; } a { text-decoration: none; color: inherit; } ul { list-style: none; } button { cursor: pointer; border: none; background: none; } /* ─── Utilities ──────────────────────────── */ .container { max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 2.5rem); } .section { padding-block: clamp(4rem, 10vw, 7rem); } section[id] { scroll-margin-top: calc(var(--nav-h) + 8px); } .section__eyebrow { font-family: var(--font-body); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--clr-gold); margin-bottom: 0.75rem; } .section__title { font-family: var(--font-heading); font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 700; line-height: 1.1; margin-bottom: 1.2rem; color: var(--clr-white); } .section__title em { font-style: italic; background: var(--gradient-gold); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .section__sub { font-size: 1rem; color: var(--clr-text-muted); max-width: 540px; margin-bottom: 3rem; } /* ─── Scroll Reveal ──────────────────────── */ /* Elements are visible by default (no-JS / SEO / accessibility). JS adds .js-animate to , which enables the hidden state. IntersectionObserver then adds .visible to trigger the animation. */ .js-animate .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.6s ease, transform 0.6s ease; } .js-animate .reveal.visible { opacity: 1; transform: translateY(0); } .js-animate .service-card.reveal { transform: translateX(-18px); } .js-animate .service-card.reveal.visible { transform: translateX(0); } .js-animate .service-card.reveal.visible:hover { transform: translateX(5px); } /* Stagger children */ .js-animate .reveal:nth-child(2) { transition-delay: 0.1s; } .js-animate .reveal:nth-child(3) { transition-delay: 0.2s; } .js-animate .reveal:nth-child(4) { transition-delay: 0.3s; } .js-animate .reveal:nth-child(5) { transition-delay: 0.15s; } .js-animate .reveal:nth-child(6) { transition-delay: 0.25s; } /* ─── Reduced Motion ─────────────────────── */ @media (prefers-reduced-motion: reduce) { .js-animate .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } } /* ─── Buttons ────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 2rem; border-radius: 50px; font-family: var(--font-body); font-size: 0.9rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition); } .btn:hover { transform: translateY(-2px); } .btn--primary { background: var(--gradient-gold); color: #1a0e2e; box-shadow: 0 4px 24px rgba(201, 169, 110, 0.35); } .btn--primary:hover { box-shadow: 0 8px 32px rgba(201, 169, 110, 0.5); } .btn--ghost { background: transparent; color: var(--clr-text); border: 1.5px solid rgba(240, 236, 228, 0.3); } .btn--ghost:hover { border-color: var(--clr-gold); color: var(--clr-gold); } /* ═══════════════════════════════════════════ NAVIGATION ═══════════════════════════════════════════ */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 999; height: var(--nav-h); transition: background var(--transition), box-shadow var(--transition); } .site-header.scrolled { background: rgba(13, 13, 24, 0.95); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 2px 24px rgba(0,0,0,0.4); } .nav { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; } .nav__logo { font-family: var(--font-heading); font-size: 1.55rem; font-weight: 700; color: var(--clr-white); letter-spacing: 0.04em; } .nav__logo span { background: var(--gradient-gold); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .nav__links { display: flex; align-items: center; gap: 2rem; } .nav__links a { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(240, 236, 228, 0.75); transition: color var(--transition); position: relative; } .nav__links a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 1.5px; background: var(--gradient-gold); transition: width var(--transition); } .nav__links a:hover, .nav__links a.active { color: var(--clr-gold-light); } .nav__links a:hover::after, .nav__links a.active::after { width: 100%; } .nav__cta { background: var(--gradient-gold) !important; color: #1a0e2e !important; padding: 0.55rem 1.4rem; border-radius: 50px; font-size: 0.82rem !important; letter-spacing: 0.08em; } .nav__cta::after { display: none !important; } .nav__cta:hover { box-shadow: 0 4px 20px rgba(201, 169, 110, 0.4); transform: translateY(-1px); } .nav__social { display: flex; align-items: center; gap: 0.6rem; margin-left: auto; } .nav__social a { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(201, 169, 110, 0.28); border-radius: 50%; color: var(--clr-text); background: rgba(255, 255, 255, 0.04); transition: color var(--transition), border-color var(--transition), background var(--transition), transform var(--transition); } .nav__social a:hover { color: #1a0e2e; border-color: transparent; background: var(--gradient-gold); transform: translateY(-1px); } .nav__burger { display: none; align-items: center; justify-content: center; flex-direction: column; gap: 5px; width: 34px; height: 34px; padding: 0; border: 1px solid transparent; border-radius: 50%; flex-shrink: 0; position: relative; z-index: 1001; transition: background var(--transition), border-color var(--transition); } .nav__burger:hover, .nav__burger:focus-visible { background: rgba(255, 255, 255, 0.05); border-color: rgba(201, 169, 110, 0.32); outline: none; } .nav__burger span { display: block; width: 22px; height: 2px; background: var(--clr-text); border-radius: 2px; transition: transform var(--transition), opacity var(--transition); } /* ═══════════════════════════════════════════ HERO ═══════════════════════════════════════════ */ .hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; } .hero__bg { position: absolute; inset: 0; background: var(--gradient-hero); z-index: 0; } /* Decorative orbs */ .hero__bg::before { content: ''; position: absolute; top: -15%; right: -8%; width: min(800px, 90vw); height: min(800px, 90vw); background: radial-gradient(circle, rgba(201, 169, 110, 0.18) 0%, rgba(201,169,110,0.05) 45%, transparent 70%); border-radius: 50%; } .hero__bg::after { content: ''; position: absolute; bottom: 0%; left: -5%; width: min(600px, 70vw); height: min(600px, 70vw); background: radial-gradient(circle, rgba(232, 180, 184, 0.13) 0%, transparent 65%); border-radius: 50%; } /* Decorative right-side art element */ .hero::before { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 42%; height: 80%; background: radial-gradient(ellipse at 80% 30%, rgba(201,169,110,0.22) 0%, transparent 55%), radial-gradient(ellipse at 60% 70%, rgba(232,180,184,0.15) 0%, transparent 50%); border-radius: 50% 0 0 50%; z-index: 1; pointer-events: none; } /* Subtle grid pattern overlay */ .hero::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(201,169,110,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(201,169,110,0.03) 1px, transparent 1px); background-size: 60px 60px; z-index: 1; pointer-events: none; } .hero__overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 55%, var(--clr-bg) 100%); z-index: 1; } /* Two-column hero layout */ .hero__layout { position: relative; z-index: 2; padding-top: var(--nav-h); display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 3rem; min-height: calc(100svh - var(--nav-h)); } .hero__content { /* left column */ } .hero__eyebrow { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--clr-gold); margin-bottom: 1rem; transition-delay: 0.05s; } .hero__title { font-family: var(--font-heading); font-size: clamp(3.5rem, 10vw, 7.5rem); font-weight: 700; line-height: 1.0; color: var(--clr-white); margin-bottom: 1.5rem; transition-delay: 0.1s; } .hero__title em { font-style: italic; background: var(--gradient-gold); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero__sub { font-size: clamp(1rem, 2vw, 1.2rem); color: rgba(240, 236, 228, 0.7); margin-bottom: 2.5rem; max-width: 480px; transition-delay: 0.2s; } .hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; transition-delay: 0.3s; } .hero__scroll { position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; } .hero__scroll-line { display: block; width: 1.5px; height: 60px; background: linear-gradient(to bottom, var(--clr-gold), transparent); animation: scrollLine 2s ease-in-out infinite; } @keyframes scrollLine { 0% { transform: scaleY(0); transform-origin: top; opacity: 1; } 50% { transform: scaleY(1); transform-origin: top; opacity: 1; } 100% { transform: scaleY(1); transform-origin: top; opacity: 0; } } /* ─── Hero Visual (right side) ───────────── */ .hero__visual { position: relative; height: 520px; display: flex; align-items: center; justify-content: center; } /* Central glow */ .hero__visual::before { content: ''; position: absolute; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(201,169,110,0.2) 0%, rgba(232,180,184,0.12) 45%, transparent 70%); top: 50%; left: 50%; transform: translate(-50%, -50%); } .hero__card { position: absolute; border-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--clr-text-muted); border: 1px solid var(--clr-border); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform 0.4s ease, box-shadow 0.4s ease; } .hero__card i { font-size: 1.6rem; background: var(--gradient-gold); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Card positions & sizes — mimicking reference's overlapping image cluster */ .hero__card--1 { width: 140px; height: 140px; background: rgba(42, 16, 64, 0.85); top: 5%; left: 10%; animation: floatA 6s ease-in-out infinite; } .hero__card--2 { width: 160px; height: 160px; background: rgba(26, 32, 64, 0.85); top: 10%; right: 8%; animation: floatB 7s ease-in-out infinite; } .hero__card--3 { width: 120px; height: 120px; background: rgba(64, 26, 42, 0.85); top: 50%; left: 2%; transform: translateY(-50%); animation: floatC 5.5s ease-in-out infinite; } .hero__card--4 { width: 130px; height: 130px; background: rgba(16, 42, 64, 0.85); bottom: 12%; left: 28%; animation: floatA 6.5s ease-in-out infinite 1s; } .hero__card--5 { width: 150px; height: 150px; background: rgba(30, 20, 60, 0.85); bottom: 8%; right: 5%; animation: floatB 8s ease-in-out infinite 0.5s; } /* Floating info badge */ .hero__float-badge { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--gradient-gold); color: #1a0e2e; border-radius: 18px; padding: 1.2rem 1.8rem; text-align: center; box-shadow: 0 8px 32px rgba(201,169,110,0.4); animation: floatC 7s ease-in-out infinite; white-space: nowrap; } .hero__float-badge-num { display: block; font-family: var(--font-heading); font-size: 2.2rem; font-weight: 700; line-height: 1; } .hero__float-badge-txt { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.8; } @keyframes floatA { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-12px); } } @keyframes floatB { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(10px); } } @keyframes floatC { 0%, 100% { transform: translate(-50%, -50%) translateY(0px); } 50% { transform: translate(-50%, -50%) translateY(-8px); } } /* Mobile: hide the visual cluster, show only text */ @media (max-width: 900px) { .hero__layout { grid-template-columns: 1fr; } .hero__visual { display: none; } } /* ═══════════════════════════════════════════ STATS BAR ═══════════════════════════════════════════ */ .stats { background: var(--clr-bg-card); border-top: 1px solid var(--clr-border); border-bottom: 1px solid var(--clr-border); padding-block: 2.5rem; } .stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; text-align: center; } .stat-item { padding: 1rem; position: relative; } .stat-item:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 20%; height: 60%; width: 1px; background: var(--clr-border); } .stat-item__num { display: block; font-family: var(--font-heading); font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 700; color: var(--clr-white); line-height: 1; margin-bottom: 0.4rem; } .stat-item__num em { font-style: normal; background: var(--gradient-gold); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-size: 0.75em; } .stat-item__label { display: block; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--clr-text-muted); font-weight: 700; } @media (max-width: 640px) { .stats__grid { grid-template-columns: repeat(2, 1fr); } .stat-item:nth-child(2)::after { display: none; } } /* ═══════════════════════════════════════════ ABOUT ═══════════════════════════════════════════ */ .about { background: var(--clr-bg-2); } .about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; } .about__image-wrap { position: relative; } .about__image { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/5; background: var(--clr-bg-card); border: 1px solid var(--clr-border); } .about__img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #1f1430 0%, #2d1a45 40%, #1a2040 100%); font-size: 5rem; color: rgba(201, 169, 110, 0.35); position: relative; overflow: hidden; } /* Decorative circles inside placeholder */ .about__img-placeholder::before { content: ''; position: absolute; width: 260px; height: 260px; border-radius: 50%; border: 1px solid rgba(201,169,110,0.15); top: 50%; left: 50%; transform: translate(-50%, -50%); } .about__img-placeholder::after { content: ''; position: absolute; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(201,169,110,0.1) 0%, transparent 70%); top: 50%; left: 50%; transform: translate(-50%, -50%); } .about__badge { position: absolute; bottom: -1.5rem; right: -1.5rem; background: var(--gradient-gold); color: #1a0e2e; border-radius: var(--radius); padding: 1.2rem 1.5rem; text-align: center; box-shadow: var(--shadow); } .about__badge-num { display: block; font-family: var(--font-heading); font-size: 1.8rem; font-weight: 700; line-height: 1; } .about__badge-text { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75; } .about__desc { color: var(--clr-text-muted); margin-bottom: 1rem; font-size: 1.02rem; } .about__features { margin-top: 1.8rem; display: flex; flex-direction: column; gap: 0.75rem; } .about__features li { display: flex; align-items: center; gap: 0.75rem; font-size: 0.95rem; color: var(--clr-text); } .about__features li i { color: var(--clr-gold); font-size: 0.85rem; flex-shrink: 0; } /* ═══════════════════════════════════════════ SERVICES ═══════════════════════════════════════════ */ .services { background: var(--clr-bg); } .services .section__sub { margin-inline: 0; } .services__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; } .service-card { background: var(--clr-bg-card); border: 1px solid var(--clr-border); border-radius: var(--radius-lg); display: flex; flex-direction: column; overflow: hidden; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); } .service-card:hover { transform: translateX(5px); border-color: rgba(201, 169, 110, 0.4); box-shadow: 0 12px 40px rgba(201, 169, 110, 0.12); } .service-card__media { position: relative; aspect-ratio: 4 / 3; border-bottom: 1px solid var(--clr-border); overflow: visible; background: var(--clr-bg-card-2); } .service-card__img { width: 100%; height: 100%; object-fit: cover; border-bottom: 1px solid var(--clr-border); } .service-card__image-placeholder { position: relative; width: 100%; height: 100%; padding: 1rem; display: flex; align-items: flex-end; justify-content: flex-start; overflow: hidden; transition: transform var(--transition); } .service-card:hover .service-card__image-placeholder { transform: scale(1.03); } .service-card__image-placeholder::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.08), transparent 35%), repeating-linear-gradient(45deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 14px); } .service-card__image-placeholder span { position: relative; z-index: 1; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(245, 240, 235, 0.72); background: rgba(8, 8, 16, 0.48); border: 1px solid rgba(245, 240, 235, 0.1); border-radius: 999px; padding: 0.32rem 0.7rem; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .service-card__image-placeholder--manicure { background: linear-gradient(145deg, #2b1834 0%, #4b263b 55%, #1a1a2e 100%); } .service-card__image-placeholder--pedicure { background: linear-gradient(145deg, #102638 0%, #1c4b58 55%, #171a2f 100%); } .service-card__image-placeholder--acrylic { background: linear-gradient(145deg, #22153b 0%, #56346f 55%, #191628 100%); } .service-card__image-placeholder--dip { background: linear-gradient(145deg, #3a1425 0%, #7a3048 55%, #191628 100%); } .service-card__image-placeholder--gel { background: linear-gradient(145deg, #161f39 0%, #3b4770 55%, #171827 100%); } .service-card__image-placeholder--art { background: linear-gradient(145deg, #31133b 0%, #783260 55%, #181526 100%); } .service-card__image-placeholder--lashes { background: linear-gradient(145deg, #181929 0%, #3d3150 55%, #10101a 100%); } .service-card__image-placeholder--brow { background: linear-gradient(145deg, #21192c 0%, #5a3b48 55%, #13131f 100%); } .service-card__icon { position: absolute; left: 1.25rem; bottom: -26px; z-index: 2; width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(135deg, rgba(26,26,46,0.96), rgba(31,31,53,0.96)); display: flex; align-items: center; justify-content: center; font-size: 1.35rem; color: var(--clr-gold); border: 1px solid rgba(201,169,110,0.25); box-shadow: 0 8px 22px rgba(0,0,0,0.28); } .service-card h3 { font-family: var(--font-heading); font-size: 1.4rem; font-weight: 600; color: var(--clr-white); padding: 2.25rem 1.75rem 0; margin-bottom: 0.6rem; } .service-card p { font-size: 0.9rem; color: var(--clr-text-muted); line-height: 1.6; padding-inline: 1.75rem; margin-bottom: 1.2rem; } .service-card__price { display: flex; align-items: center; justify-content: center; min-height: 44px; font-size: 0.9rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: #1a0e2e; background: var(--gradient-gold); border: 1px solid rgba(232,180,184,0.4); border-radius: 999px; padding: 0.72rem 1rem; width: calc(100% - 3.5rem); margin: auto 1.75rem 1.5rem; box-shadow: 0 8px 24px rgba(201,169,110,0.18); } /* ═══════════════════════════════════════════ GALLERY BANNER ═══════════════════════════════════════════ */ .gallery-banner { background: var(--gradient-gold); padding-block: clamp(3rem, 6vw, 5rem); text-align: center; overflow: hidden; position: relative; } .gallery-banner::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .gallery-banner__text h2 { font-family: var(--font-heading); font-size: clamp(2.4rem, 6vw, 4.2rem); font-weight: 700; color: #1a0e2e; line-height: 1.1; position: relative; } .gallery-banner__text h2 em { font-style: italic; font-weight: 400; } /* ═══════════════════════════════════════════ GALLERY ═══════════════════════════════════════════ */ .gallery { background: var(--clr-bg-2); } .gallery__grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto; gap: 1rem; } .gallery__item { border-radius: var(--radius); overflow: hidden; aspect-ratio: 1; } .gallery__item--large { grid-column: span 1; grid-row: span 2; aspect-ratio: unset; } .gallery__item--wide { grid-column: span 2; } .gallery__placeholder { width: 100%; height: 100%; min-height: 200px; display: flex; align-items: flex-end; justify-content: flex-start; padding: 1rem; border-radius: var(--radius); transition: transform var(--transition); cursor: pointer; } .gallery__item:hover .gallery__placeholder { transform: scale(1.03); } .gallery__img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--radius); transition: transform var(--transition); } .gallery__item:hover .gallery__img { transform: scale(1.03); } .gallery__placeholder span { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.7); background: rgba(0,0,0,0.35); padding: 0.25rem 0.6rem; border-radius: 4px; backdrop-filter: blur(4px); } .gp--1 { background: linear-gradient(145deg, #3d1558 0%, #6b2680 40%, #3a1050 100%); box-shadow: inset 0 0 60px rgba(201,169,110,0.08); } .gp--2 { background: linear-gradient(145deg, #162244 0%, #1e3a6e 100%); } .gp--3 { background: linear-gradient(145deg, #4a0e25 0%, #7d2840 100%); box-shadow: inset 0 0 40px rgba(232,180,184,0.1); } .gp--4 { background: linear-gradient(145deg, #0e2232 0%, #1a4a60 100%); } .gp--5 { background: linear-gradient(145deg, #2a1040 0%, #52288a 100%); } .gp--6 { background: linear-gradient(145deg, #1e0d38 0%, #3d1f6a 50%, #1a0f2e 100%); box-shadow: inset 0 0 80px rgba(201,169,110,0.06); } /* ═══════════════════════════════════════════ TESTIMONIALS ═══════════════════════════════════════════ */ .testimonials { background: var(--clr-bg); text-align: center; } .testimonials .section__title, .testimonials .section__eyebrow { text-align: center; } .testimonials__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; margin-top: 3rem; text-align: left; } .testimonial-card { background: var(--clr-bg-card); border: 1px solid var(--clr-border); border-radius: var(--radius-lg); padding: 2rem 1.75rem; position: relative; transition: transform var(--transition), border-color var(--transition); } .testimonial-card:hover { transform: translateY(-4px); border-color: rgba(201,169,110,0.35); } .testimonial-card::before { content: '\201C'; font-family: var(--font-heading); font-size: 5rem; line-height: 1; color: rgba(201,169,110,0.15); position: absolute; top: 0.5rem; left: 1.5rem; } .testimonial-card__stars { display: flex; gap: 3px; margin-bottom: 1rem; color: var(--clr-gold); font-size: 0.85rem; } .testimonial-card__text { font-size: 0.97rem; line-height: 1.7; color: var(--clr-text-muted); margin-bottom: 1.5rem; font-style: italic; } .testimonial-card__author { display: flex; align-items: center; gap: 0.85rem; } .testimonial-card__avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--gradient-gold); color: #1a0e2e; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1rem; flex-shrink: 0; } .testimonial-card__author strong { display: block; font-size: 0.9rem; color: var(--clr-text); } .testimonial-card__author span { font-size: 0.78rem; color: var(--clr-text-muted); } /* ═══════════════════════════════════════════ CONTACT ═══════════════════════════════════════════ */ .contact { background: var(--clr-bg-2); } .contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; } .contact__items { display: flex; flex-direction: column; gap: 1.5rem; margin-block: 2rem; } .contact__item { display: flex; align-items: flex-start; gap: 1rem; } .contact__item-icon { width: 44px; height: 44px; border-radius: 12px; background: rgba(201,169,110,0.1); border: 1px solid rgba(201,169,110,0.2); display: flex; align-items: center; justify-content: center; color: var(--clr-gold); font-size: 1rem; flex-shrink: 0; } .contact__item strong { display: block; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--clr-gold); margin-bottom: 0.25rem; } .contact__item p { font-size: 0.95rem; color: var(--clr-text-muted); line-height: 1.6; } .contact__item a { color: var(--clr-text); transition: color var(--transition); } .contact__item a:hover { color: var(--clr-gold); } .contact__social { display: flex; gap: 0.75rem; } .contact__social a { width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--clr-border); display: flex; align-items: center; justify-content: center; color: var(--clr-text-muted); font-size: 0.95rem; transition: all var(--transition); } .contact__social a:hover { border-color: var(--clr-gold); color: var(--clr-gold); background: rgba(201,169,110,0.08); transform: translateY(-2px); } .contact__map { border-radius: var(--radius-lg); overflow: hidden; height: 420px; border: 1px solid var(--clr-border); background: var(--clr-bg-card); } /* ═══════════════════════════════════════════ FOOTER ═══════════════════════════════════════════ */ .footer { background: #080810; border-top: 1px solid var(--clr-border); } .footer__inner { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 3rem; padding-block: 3.5rem; align-items: start; } .footer__logo { font-family: var(--font-heading); font-size: 1.6rem; font-weight: 700; color: var(--clr-white); display: block; margin-bottom: 0.75rem; } .footer__logo em { font-style: italic; background: var(--gradient-gold); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .footer__brand p { font-size: 0.88rem; color: var(--clr-text-muted); line-height: 1.6; } .footer__links { display: flex; flex-direction: column; gap: 0.75rem; } .footer__links a { font-size: 0.88rem; color: var(--clr-text-muted); transition: color var(--transition); letter-spacing: 0.04em; } .footer__links a:hover { color: var(--clr-gold); } .footer__contact p { display: flex; align-items: center; gap: 0.6rem; font-size: 0.88rem; color: var(--clr-text-muted); margin-bottom: 0.6rem; line-height: 1.5; } .footer__contact i { color: var(--clr-gold); font-size: 0.8rem; flex-shrink: 0; } .footer__contact a { color: var(--clr-text-muted); transition: color var(--transition); } .footer__contact a:hover { color: var(--clr-gold); } .footer__bottom { border-top: 1px solid rgba(255,255,255,0.06); padding-block: 1.25rem; text-align: center; } .footer__bottom p { font-size: 0.8rem; color: var(--clr-text-muted); letter-spacing: 0.04em; } /* ═══════════════════════════════════════════ RESPONSIVE — TABLET ═══════════════════════════════════════════ */ @media (max-width: 900px) { .about__grid { grid-template-columns: 1fr; } .about__image-wrap { max-width: 420px; margin-inline: auto; } .about__badge { right: 0; } .contact__grid { grid-template-columns: 1fr; } .contact__map { height: 320px; } .footer__inner { grid-template-columns: 1fr 1fr; } } /* ═══════════════════════════════════════════ RESPONSIVE — MOBILE ═══════════════════════════════════════════ */ @media (max-width: 640px) { .nav { gap: 0.75rem; } .nav__logo { font-size: 1.25rem; } .nav__social { gap: 0.45rem; margin-left: auto; } .nav__social a { width: 31px; height: 31px; font-size: 0.85rem; } .gallery__grid { grid-template-columns: 1fr 1fr; } .gallery__item--large { grid-column: span 2; grid-row: span 1; aspect-ratio: 3/2; } .gallery__item--wide { grid-column: span 2; } .footer__inner { grid-template-columns: 1fr; gap: 2rem; } .hero__actions { flex-direction: column; align-items: flex-start; } .services__grid { display: flex; gap: 1rem; margin-inline: calc(clamp(1.25rem, 5vw, 2.5rem) * -1); padding: 0 clamp(1.25rem, 5vw, 2.5rem) 0.6rem; overflow-x: auto; overscroll-behavior-inline: contain; scroll-padding-inline: 0; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .services__grid::-webkit-scrollbar { display: none; } .service-card { flex: 0 0 min(82vw, 320px); scroll-snap-align: center; scroll-snap-stop: always; } .testimonials__grid { grid-template-columns: 1fr; } } @media (max-width: 1020px) { .nav__links { position: fixed; inset: var(--nav-h) 0 0 0; z-index: 998; width: 100%; min-height: calc(100svh - var(--nav-h)); padding: clamp(2.25rem, 9vh, 4.5rem) 1.5rem 2rem; background: rgba(10, 10, 20, 0.98); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); flex-direction: column; align-items: center; justify-content: flex-start; gap: 1.6rem; font-size: 1.1rem; transform: translateX(100%); transition: transform 0.35s ease; overflow-y: auto; } .nav__links.open { transform: translateX(0); } .nav__links a { display: inline-flex; justify-content: center; width: auto; max-width: 100%; padding: 0.2rem 0; line-height: 1.2; text-align: center; word-break: normal; } .nav__links a::after { content: none; } .nav__links .nav__cta { width: min(190px, 100%); max-width: 100%; display: inline-flex; align-items: center; justify-content: center; padding: 0.65rem 1.35rem; line-height: 1; text-align: center; white-space: nowrap; overflow: hidden; } .nav__burger { display: flex; } .nav__burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav__burger.open span:nth-child(2) { opacity: 0; } .nav__burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } }