/* Peaky Barbers: design tokens e componentes compartilhados. Mobile-first, base é mobile, min-width escala pra desktop. */ /* Fontes (Cinzel, Oswald, Work Sans) carregadas via no de cada página, não via @import aqui: @import bloqueia descoberta antecipada pelo preload scanner e atrasa o LCP. */ :root { --color-bg: #000000; --color-bg-alt: #303030; --color-accent: #ECBA69; --color-whatsapp: #25D366; --color-text: #FFFFFF; --color-text-muted: #B8B8B8; --font-display: 'Cinzel', serif; --font-nav: 'Oswald', sans-serif; --font-body: 'Work Sans', sans-serif; --grid-unit: 8px; --chanfro: 10px; } * { margin: 0; padding: 0; box-sizing: border-box; } body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); line-height: 1.6; padding-bottom: 64px; /* espaço pra barra fixa mobile */ } img { max-width: 100%; display: block; } .eyebrow { font-family: var(--font-nav); font-weight: 400; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-accent); font-size: 0.8rem; } h1, h2, h3 { font-family: var(--font-display); font-weight: 600; } .section { padding: calc(var(--grid-unit) * 7) calc(var(--grid-unit) * 2.5); max-width: 1200px; margin: 0 auto; } .section-title { font-size: clamp(1.6rem, 6vw, 2.8rem); margin-bottom: calc(var(--grid-unit) * 2); } @media (min-width: 769px) { body { padding-bottom: 0; } .section { padding: calc(var(--grid-unit) * 10) calc(var(--grid-unit) * 3); } } /* --- Botões --- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-nav); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.85rem; padding: 14px 24px; text-decoration: none; clip-path: polygon(var(--chanfro) 0, 100% 0, 100% calc(100% - var(--chanfro)), calc(100% - var(--chanfro)) 100%, 0 100%, 0 var(--chanfro)); transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease; cursor: pointer; border: none; width: 100%; } .btn--outline { background: transparent; color: var(--color-accent); border: 2px solid var(--color-accent); } .btn--outline:hover, .btn--outline:focus-visible { background: var(--color-accent); color: #000000; } .btn--book { background: transparent; color: var(--color-whatsapp); border: 2px solid var(--color-whatsapp); } .btn--book:hover, .btn--book:focus-visible { background: var(--color-whatsapp); color: #FFFFFF; } .btn--book-gold { background: transparent; color: #FFFFFF; border: 2px solid #FFFFFF; } .btn--book-gold:hover, .btn--book-gold:focus-visible { background: var(--color-accent); border-color: var(--color-accent); color: #000000; } .btn__icon { width: 18px; height: 18px; flex-shrink: 0; } .btn--whatsapp { background: var(--color-whatsapp); color: #000000; } .btn--whatsapp:hover, .btn--whatsapp:focus-visible { transform: translateY(-2px); filter: brightness(0.92); box-shadow: 0 6px 18px rgba(37, 211, 102, 0.35); } @media (min-width: 769px) { .btn { width: auto; font-size: 0.9rem; padding: 14px 28px; } } /* --- Header / Nav --- */ .site-header { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: calc(var(--grid-unit)) calc(var(--grid-unit) * 2); background: rgba(0, 0, 0, 0.94); border-bottom: 1px solid var(--color-bg-alt); } .site-header .logo-mark { height: 72px; width: auto; } .nav-desktop { display: none; } .nav-mobile-toggle { display: block; background: none; border: none; color: var(--color-accent); font-size: 1.6rem; cursor: pointer; line-height: 1; } .nav-mobile { display: none; flex-direction: column; gap: calc(var(--grid-unit) * 2); padding: calc(var(--grid-unit) * 3) calc(var(--grid-unit) * 2); background: var(--color-bg); border-bottom: 1px solid var(--color-bg-alt); position: fixed; top: 89px; left: 0; right: 0; bottom: 0; z-index: 49; overflow-y: auto; } .nav-mobile.is-open { display: flex; } .nav-mobile a { font-family: var(--font-nav); color: var(--color-text); text-decoration: none; text-transform: uppercase; letter-spacing: 0.05em; } .nav-mobile a:hover { color: var(--color-accent); } .mobile-bottom-bar { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; background: var(--color-bg-alt); padding: calc(var(--grid-unit)) calc(var(--grid-unit) * 1.5); gap: calc(var(--grid-unit) * 1.5); border-top: 1px solid rgba(236, 186, 105, 0.2); } @media (min-width: 769px) { .site-header { padding: calc(var(--grid-unit)) calc(var(--grid-unit) * 4); } .site-header .logo-mark { height: 120px; } .nav-desktop { display: flex; gap: calc(var(--grid-unit) * 4); align-items: center; } .nav-desktop a { font-family: var(--font-nav); color: var(--color-text); text-decoration: none; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.05em; } .nav-desktop a:not(.btn):hover { color: var(--color-accent); } .nav-mobile-toggle, .nav-mobile { display: none !important; } .mobile-bottom-bar { display: none; } } /* --- Hero --- */ .hero { position: relative; z-index: 0; background: #FFFFFF; color: #111111; padding: calc(var(--grid-unit) * 2) calc(var(--grid-unit) * 2.5) calc(var(--grid-unit) * 4); overflow: hidden; } .hero .eyebrow { color: #8A6A2E; } .hero__watermark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 900px; max-width: 170%; aspect-ratio: 361 / 480; opacity: 0.06; z-index: -1; pointer-events: none; user-select: none; } .hero__founder-chip { display: flex; align-items: center; gap: calc(var(--grid-unit)); width: fit-content; margin: calc(var(--grid-unit) * 1.5) 0 calc(var(--grid-unit) * 2); padding: calc(var(--grid-unit) * 0.75) calc(var(--grid-unit) * 1.5) calc(var(--grid-unit) * 0.75) calc(var(--grid-unit) * 0.75); border: 1px solid #E3E1DB; border-radius: 999px; font-family: var(--font-nav); font-size: 0.8rem; color: #111111; } .hero__founder-chip img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; } .hero__founder-chip__icon { width: 18px; height: 18px; color: var(--color-accent); flex-shrink: 0; } .hero__founder-chip em { color: #888888; font-style: normal; } .hero__grid { display: grid; grid-template-columns: 1fr; gap: calc(var(--grid-unit) * 4); align-items: center; } .hero--simple .hero__lead a { color: var(--color-accent); } .hero--simple .hero__grid { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; text-align: center; } .hero--simple .hero__copy { text-align: center; max-width: none; width: 100%; } .hero--simple .hero__lead { max-width: none; width: 100%; margin-left: auto; margin-right: auto; } .hero__badge { display: inline-flex; align-items: center; gap: calc(var(--grid-unit)); font-family: var(--font-nav); font-weight: 400; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; color: #555555; border: 1px solid #E3E1DB; border-radius: 999px; padding: calc(var(--grid-unit) * 0.75) calc(var(--grid-unit) * 1.5); margin-bottom: calc(var(--grid-unit) * 1.5); } .hero__badge-dot { width: 13px; height: 13px; color: var(--color-accent); flex-shrink: 0; } @media (max-width: 768px) { .hero__badge--compact { font-size: 0.6rem; } .hero__headline.hero__headline--compact { font-size: 1.4rem; } .hero__headline.hero__headline--compact-sm { font-size: 1.3rem; } } .hero__headline { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.75rem, 7.5vw, 3.6rem); line-height: 1.1; margin-bottom: calc(var(--grid-unit) * 2); } .hero__headline-light { display: block; font-weight: 400; color: #9A948A; } .hero__headline { color: #111111; } .hero__lead { color: #55504A; font-size: 1.05rem; max-width: 480px; margin-bottom: calc(var(--grid-unit) * 3.5); } .hero__cta-row { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--grid-unit) * 2); } .hero__cta-pill { display: inline-flex; align-items: center; gap: calc(var(--grid-unit) * 1.25); background: var(--color-whatsapp); color: #FFFFFF; text-decoration: none; font-family: var(--font-nav); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.85rem; padding: calc(var(--grid-unit) * 0.75) calc(var(--grid-unit) * 2.5) calc(var(--grid-unit) * 0.75) calc(var(--grid-unit) * 0.75); border-radius: 999px; transition: background 0.2s ease, transform 0.2s ease; } .hero__cta-pill:hover, .hero__cta-pill:focus-visible { filter: brightness(0.92); color: #FFFFFF; transform: translateY(-2px); } .hero__cta-avatars { display: flex; } .hero__cta-avatars img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid #000000; transition: border-color 0.2s ease; } .hero__cta-pill:hover .hero__cta-avatars img, .hero__cta-pill:focus-visible .hero__cta-avatars img { border-color: var(--color-accent); } .hero__cta-avatars img:nth-child(2) { margin-left: -14px; } .hero__cta-whatsapp-icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #FFFFFF; } .hero__cta-whatsapp-icon svg { width: 18px; height: 18px; fill: var(--color-whatsapp); } .hero__cta-link { font-family: var(--font-nav); font-size: 0.85rem; letter-spacing: 0.03em; color: #111111; text-decoration: none; border-bottom: 1px solid var(--color-accent); padding-bottom: 2px; } .hero__cta-link:hover { color: var(--color-accent); } .hero__stack { position: relative; width: 100%; max-width: 380px; aspect-ratio: 1 / 0.85; margin: calc(var(--grid-unit) * 2) auto 0; } .hero__stack-wrap { position: absolute; width: 68%; aspect-ratio: 4 / 3; opacity: 0; animation: hero-stack-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .hero__stack-wrap--back { top: 0; left: 8%; --rot: -7deg; z-index: 1; animation-delay: 0.15s; } .hero__stack-wrap--mid { top: 6%; right: 0; left: auto; --rot: 4deg; z-index: 2; animation-delay: 0.3s; } .hero__stack-wrap--front { bottom: 0; left: 24%; --rot: -2deg; z-index: 3; animation-delay: 0.45s; } .hero__stack--single { max-width: 560px; aspect-ratio: 4 / 2.7; } .hero__stack-wrap--solo { width: 100%; top: 50%; left: 50%; --rot: -2deg; z-index: 1; transform: translate(-50%, -50%) rotate(var(--rot)); animation: hero-stack-in-solo 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: 0.15s; } .hero__stack-wrap--solo .hero__stack-img { transform: none; } @keyframes hero-stack-in-solo { from { opacity: 0; } to { opacity: 1; } } .hero__stack-img { width: 100%; height: 100%; object-fit: cover; clip-path: polygon(0 4%, 96% 0, 100% 96%, 4% 100%); box-shadow: 0 20px 40px rgba(0,0,0,0.18); transform: rotate(var(--rot)); animation: hero-stack-float 6s ease-in-out infinite; } .hero__stack-img--top { object-position: top center; } .hero__stack-wrap--mid .hero__stack-img { animation-delay: -2s; } .hero__stack-wrap--front .hero__stack-img { animation-delay: -4s; } @keyframes hero-stack-in { from { opacity: 0; transform: translateY(28px) scale(0.94); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes hero-stack-float { 0%, 100% { transform: rotate(var(--rot)) translateY(0); } 50% { transform: rotate(var(--rot)) translateY(-10px); } } .hero__founder-chip, .hero__badge, .hero__headline, .hero__lead, .hero__cta-row, .hero__trustbar { opacity: 0; animation: hero-fade-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .hero__founder-chip { animation-delay: 0s; } .hero__badge { animation-delay: 0.1s; } .hero__headline { animation-delay: 0.18s; } .hero__lead { animation-delay: 0.26s; } .hero__cta-row { animation-delay: 0.34s; } .hero__trustbar { animation-delay: 0.5s; } @keyframes hero-fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .hero__founder-chip, .hero__badge, .hero__headline, .hero__lead, .hero__cta-row, .hero__trustbar, .hero__stack-wrap, .hero__stack-img { animation: none; opacity: 1; transform: none; } .hero__stack-img { transform: rotate(var(--rot)); } .hero__stack-wrap--solo { transform: translate(-50%, -50%) rotate(var(--rot)); } } .hero__trustbar { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--grid-unit) * 2.5); margin-top: calc(var(--grid-unit) * 5); padding-top: calc(var(--grid-unit) * 3); } .hero__trust-avatars { display: flex; } .hero__trust-google-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #FFFFFF; border: 2px solid #FFFFFF; box-shadow: 0 0 0 1px #E3E1DB; } .hero__trust-google-icon svg { width: 18px; height: 18px; } .hero__trust-rating { display: flex; align-items: center; gap: calc(var(--grid-unit)); font-family: var(--font-nav); font-size: 0.8rem; color: #555555; } .hero__trust-stars { color: var(--color-accent); letter-spacing: 1px; } .hero__trust-badge { font-family: var(--font-nav); font-size: 0.8rem; color: #111111; text-decoration: none; border-left: 1px solid #E3E1DB; padding-left: calc(var(--grid-unit) * 2.5); } .hero__trust-badge small { display: block; color: #888888; font-size: 0.7rem; text-transform: none; letter-spacing: 0; } .hero__trust-badge:hover { color: var(--color-accent); } .hero__copy { text-align: center; } .hero__badge { margin-left: auto; margin-right: auto; } .hero__lead { margin-left: auto; margin-right: auto; } .hero__cta-row { align-items: center; } .hero__trustbar { justify-content: center; } @media (min-width: 769px) { .hero { padding: calc(var(--grid-unit) * 6) calc(var(--grid-unit) * 6) calc(var(--grid-unit) * 5); } .hero__grid { grid-template-columns: 1fr 1.05fr; gap: calc(var(--grid-unit) * 6); } .hero__copy { max-width: 560px; text-align: left; } .hero__badge { margin-left: 0; margin-right: 0; } .hero__lead { margin-left: 0; margin-right: 0; } .hero__cta-row { flex-direction: row; align-items: center; } .hero__trustbar { justify-content: flex-start; } .hero__stack { max-width: 620px; } .hero__stack--single { max-width: 680px; } } /* --- Diferenciais --- */ .diff-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--color-bg-alt); } .diff-card { background: var(--color-bg); padding: calc(var(--grid-unit) * 3.5); } .diff-card h3 { color: var(--color-accent); font-size: 1.2rem; margin-bottom: calc(var(--grid-unit)); } .diff-card p { color: var(--color-text-muted); } @media (min-width: 769px) { .diff-grid { grid-template-columns: repeat(3, 1fr); } } .diff-card .eyebrow { display: block; margin-bottom: calc(var(--grid-unit) * 0.75); } @media (min-width: 600px) { .diff-grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .diff-grid--4 { grid-template-columns: repeat(4, 1fr); } } .unit-card__actions { display: flex; flex-direction: column; align-items: center; gap: calc(var(--grid-unit) * 1.5); } @media (min-width: 769px) { .unit-card__actions { flex-direction: row; } .unit-card__actions .btn { flex: 1; } } /* --- Product cards (fotos reais por item) --- */ .section-intro { color: var(--color-text-muted); max-width: 60ch; margin-bottom: calc(var(--grid-unit) * 3); } .section-intro--after { margin-top: calc(var(--grid-unit) * 3); margin-bottom: 0; } .product-grid { display: grid; grid-template-columns: 1fr; gap: calc(var(--grid-unit) * 2); } .section-cta { display: flex; justify-content: center; margin-top: calc(var(--grid-unit) * 4); } .section-cta .btn { width: auto; min-width: 220px; } .product-card { background: var(--color-bg-alt); overflow: hidden; } .product-card__photo { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; } .product-card__photo-link { display: block; position: relative; } .product-card__photo-link:hover .product-card__photo { filter: brightness(0.85); transition: filter 0.2s ease; } .product-card__body { padding: calc(var(--grid-unit) * 2); } .product-card__body h3 { font-size: 1.05rem; margin-bottom: calc(var(--grid-unit) * 0.5); } .product-card__body .eyebrow { display: block; margin-bottom: calc(var(--grid-unit) * 0.75); font-size: 0.7rem; } .product-card__body p:last-child { color: var(--color-text-muted); font-size: 0.9rem; } @media (min-width: 600px) { .product-grid--4 { grid-template-columns: repeat(2, 1fr); } .product-grid--2 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .product-grid--4 { grid-template-columns: repeat(4, 1fr); } .product-grid--2 { max-width: 720px; } } /* --- Serviços (heading dominante + lista ícone+texto) --- */ .services-feature__intro { margin-bottom: calc(var(--grid-unit) * 4); } .services-feature__title { font-size: clamp(2rem, 8vw, 3.4rem); line-height: 1.05; margin: calc(var(--grid-unit) * 1.5) 0 calc(var(--grid-unit) * 3); } .services-feature__title-light { display: block; font-weight: 400; color: var(--color-text-muted); } .services-feature__lead { color: var(--color-text-muted); max-width: 46ch; margin-top: calc(var(--grid-unit)); } .services-feature__collage { position: relative; width: 100%; max-width: 480px; aspect-ratio: 4/3.6; margin-top: calc(var(--grid-unit) * 3); } .services-feature__collage-img { position: absolute; object-fit: cover; clip-path: polygon(0 4%, 96% 0, 100% 96%, 4% 100%); box-shadow: 0 16px 32px rgba(0,0,0,0.35); transition: transform 0.3s ease, z-index 0s; } .services-feature__collage-img--1 { top: 0; left: 0; width: 56%; aspect-ratio: 3/4; transform: rotate(-5deg); z-index: 1; } .services-feature__collage-img--2 { top: 2%; right: 0; width: 46%; aspect-ratio: 3/4; transform: rotate(4deg); z-index: 2; } .services-feature__collage-img--3 { bottom: 0; left: 10%; width: 44%; aspect-ratio: 1/1; transform: rotate(-3deg); z-index: 3; } .services-feature__collage-img--4 { bottom: 2%; right: 4%; width: 50%; aspect-ratio: 4/3; transform: rotate(3deg); z-index: 4; } .services-feature__collage-img--3, .services-feature__collage-img--4 { filter: saturate(1.2) contrast(1.1) brightness(0.96); } .services-feature__collage-img:hover { transform: rotate(0deg) scale(1.05); z-index: 5; } .services-list { list-style: none; display: flex; flex-direction: column; } .services-list__item { position: relative; display: flex; align-items: center; gap: calc(var(--grid-unit) * 2); padding: calc(var(--grid-unit) * 2.5) 0; border-bottom: 1px solid var(--color-bg-alt); } .services-list__icon { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--color-accent); display: flex; align-items: center; justify-content: center; color: var(--color-accent); flex-shrink: 0; } .services-list__icon svg { width: 20px; height: 20px; } .services-list__item h3 { color: var(--color-text); font-size: 1.1rem; margin-bottom: 4px; } .services-list__item p { color: var(--color-text-muted); font-size: 0.88rem; margin: 0; } .services-list__link { margin-left: auto; color: var(--color-accent); font-family: var(--font-nav); text-decoration: none; font-size: 1.3rem; flex-shrink: 0; } .services-list__link::after { content: ""; position: absolute; inset: 0; } .services-list__arrow { display: inline-block; transition: translate 0.2s ease; } .services-list__item:hover .services-list__arrow { translate: 4px 0; } @media (min-width: 769px) { .services-feature { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--grid-unit) * 6); align-items: center; } .services-feature__intro { position: sticky; top: 140px; margin-bottom: 0; align-self: start; } } /* --- Produtos --- */ .products-feature { position: relative; z-index: 0; overflow: hidden; background: #F3E6CC; color: #211D16; display: grid; grid-template-columns: 1fr; gap: calc(var(--grid-unit) * 3); align-items: center; } .products-feature__watermark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 640px; max-width: 150%; aspect-ratio: 361 / 480; opacity: 0.07; z-index: -1; pointer-events: none; user-select: none; } .products-feature .eyebrow { color: #9C7A2E; } .products-feature .section-title { color: #211D16; } .products-feature__photo { width: 100%; aspect-ratio: 4/5; object-fit: cover; clip-path: polygon(0 4%, 96% 0, 100% 96%, 4% 100%); box-shadow: 0 20px 40px rgba(33,29,22,0.18); } .products-feature__lead { color: #6B6152; margin-bottom: calc(var(--grid-unit) * 2.5); max-width: 40ch; } .products-feature .btn--outline { color: #211D16; border-color: #211D16; } .products-feature .btn--outline:hover, .products-feature .btn--outline:focus-visible { background: #211D16; color: #F3E6CC; } @media (min-width: 769px) { .products-feature { grid-template-columns: 1fr 1fr; gap: calc(var(--grid-unit) * 6); } .products-feature__photo { aspect-ratio: 4/4.5; } } /* --- Horário por unidade --- */ .hours-grid { display: grid; grid-template-columns: 1fr; gap: calc(var(--grid-unit) * 2); } .hours-unit { background: var(--color-bg-alt); padding: calc(var(--grid-unit) * 3); } .hours-unit__title { font-family: var(--font-display); font-weight: 600; font-size: 1.17em; color: var(--color-accent); margin-bottom: calc(var(--grid-unit) * 2); } .hours-unit dl { display: grid; grid-template-columns: auto 1fr; gap: calc(var(--grid-unit)) calc(var(--grid-unit) * 2); } .hours-unit dt { font-family: var(--font-nav); text-transform: uppercase; color: var(--color-text-muted); font-size: 0.85rem; } .hours-unit dd { margin: 0; color: var(--color-text); font-weight: 500; } .hours-unit dd a { color: inherit; text-decoration: none; border-bottom: 1px dashed var(--color-accent); transition: color 0.2s ease; } .hours-unit dd a:hover { color: var(--color-accent); } @media (min-width: 769px) { .hours-grid { grid-template-columns: repeat(2, 1fr); gap: calc(var(--grid-unit) * 3); } } /* --- Horário, painel claro --- */ .hours-panel { background: #000000; } .hours-panel .section-title { color: #FFFFFF; } .hours-panel .hours-panel__intro { color: var(--color-text-muted); } .hours-panel .hours-unit { background: var(--color-bg-alt); border-left: 3px solid var(--color-accent); } .hours-panel .hours-unit__title { color: var(--color-accent); } .hours-panel .hours-unit dt { color: var(--color-text-muted); } .hours-panel .hours-unit dd { color: #FFFFFF; } .hours-panel__intro { color: #55504A; max-width: 52ch; margin-bottom: calc(var(--grid-unit) * 3); } .hours-unit--single { max-width: 480px; } .hours-panel__grid { display: grid; grid-template-columns: 1fr; gap: calc(var(--grid-unit) * 4); align-items: start; margin-top: calc(var(--grid-unit) * 3); } .hours-panel__map { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--color-accent); } .hours-panel__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .hours-panel__waze-btn { margin-top: calc(var(--grid-unit) * 2); display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--grid-unit) * 1.25); width: 100%; } .hours-panel__waze-icon { width: 18px; height: 18px; flex-shrink: 0; } @media (min-width: 769px) { .hours-panel__grid { grid-template-columns: 1fr 1fr; gap: calc(var(--grid-unit) * 6); } } /* --- Editorial split (quebra de texto+foto, com forma orgânica decorativa) --- */ .editorial-split { position: relative; display: grid; grid-template-columns: 1fr; gap: calc(var(--grid-unit) * 3); align-items: center; } .editorial-split::before { content: ''; position: absolute; width: 340px; height: 340px; background: radial-gradient(circle, rgba(236,186,105,0.16) 0%, rgba(236,186,105,0) 70%); border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%; top: -60px; left: -100px; z-index: 0; pointer-events: none; } .editorial-split__col { display: contents; } .editorial-split__header { position: relative; z-index: 1; order: 1; } .editorial-split__header h2 { margin-bottom: 0; } .editorial-split__body { position: relative; z-index: 1; order: 3; } .editorial-split__body p { color: var(--color-text-muted); margin-bottom: calc(var(--grid-unit) * 3); } .editorial-split__body a { color: var(--color-accent); } .editorial-split__media { position: relative; z-index: 1; order: 2; margin: calc(var(--grid-unit) * 2.5) 0; } .editorial-split__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center; clip-path: polygon(0 4%, 96% 0, 100% 96%, 4% 100%); } .editorial-split__media--portrait img { aspect-ratio: 3 / 4; object-position: top center; } .editorial-split__media img.editorial-split__media-img--top { object-position: top center; } .editorial-split__media img.editorial-split__media-img--contain { object-fit: contain; background: #ffffff; aspect-ratio: 1 / 1; clip-path: none; } .editorial-split--reverse .editorial-split__media { order: 2; } @media (min-width: 769px) { .editorial-split { grid-template-columns: 1fr 1fr; gap: calc(var(--grid-unit) * 5); align-items: center; } .editorial-split__col { display: flex; flex-direction: column; justify-content: center; order: 1; } .editorial-split__header h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); } .editorial-split__media { order: 2; margin: 0; width: 100%; max-width: 400px; justify-self: end; } .editorial-split__body p { font-size: 1.08rem; } .editorial-split--reverse .editorial-split__col { order: 2; } .editorial-split--reverse .editorial-split__media { order: 1; justify-self: start; } } .history-cta { display: flex; justify-content: center; padding: 0 calc(var(--grid-unit) * 2.5) calc(var(--grid-unit) * 8); } /* --- Editorial split, variante destaque (dourado) --- */ .editorial-split--highlight { background: var(--color-accent); padding: calc(var(--grid-unit) * 4) calc(var(--grid-unit) * 3); } .editorial-split--highlight::before { display: none; } .editorial-split--highlight .eyebrow { color: #000000; opacity: 0.65; } .editorial-split--highlight h2 { color: #000000; } .editorial-split--highlight p { color: #1a1a1a; } .editorial-split--highlight .btn--outline { border-color: #000000; color: #000000; } .editorial-split--highlight .btn--outline:hover { background: #000000; color: var(--color-accent); } /* --- Editorial split, variante dourado-creme --- */ .editorial-split--cream { background: #F3E6CC; padding: calc(var(--grid-unit) * 7) calc(var(--grid-unit) * 2.5); } .editorial-split--cream::before { display: none; } .editorial-split--cream .eyebrow { color: #9C7A2E; } .editorial-split--cream h2 { color: #211D16; } .editorial-split--cream p { color: #6B6152; } .editorial-split--cream .btn--outline { color: #211D16; border-color: #211D16; } .editorial-split--cream .btn--outline:hover, .editorial-split--cream .btn--outline:focus-visible { background: #211D16; color: #F3E6CC; } @media (min-width: 769px) { .editorial-split--cream { padding: calc(var(--grid-unit) * 10) calc(var(--grid-unit) * 3); } } /* --- Time --- */ .team-block { display: grid; grid-template-columns: 1fr; gap: calc(var(--grid-unit) * 3); align-items: center; } .team-photo img { width: 100%; clip-path: polygon(0 4%, 96% 0, 100% 96%, 4% 100%); } .team-list { list-style: none; } .team-list li { font-family: var(--font-display); font-size: 1.2rem; padding: calc(var(--grid-unit) * 1.5) 0; border-bottom: 1px solid var(--color-bg-alt); } @media (min-width: 769px) { .team-block { grid-template-columns: 1fr 1fr; gap: calc(var(--grid-unit) * 4); } } /* --- Galeria --- */ .gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(var(--grid-unit)); } .gallery-grid img { aspect-ratio: 1; object-fit: cover; } @media (min-width: 769px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: calc(var(--grid-unit) * 1.5); } } /* --- Depoimento real: painel branco, carrossel horizontal --- */ .testimonial-panel { background: #FFFFFF; } .testimonial-panel .section-title { color: #111111; } .testimonial-panel .btn--outline { color: #111111; border-color: #111111; } .testimonial-panel .btn--outline:hover, .testimonial-panel .btn--outline:focus-visible { background: #111111; color: #FFFFFF; } .testimonial-track { display: flex; gap: calc(var(--grid-unit) * 2); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: calc(var(--grid-unit) * 2); -webkit-overflow-scrolling: touch; } .testimonial-track::-webkit-scrollbar { height: 6px; } .testimonial-track::-webkit-scrollbar-track { background: #eee; border-radius: 10px; } .testimonial-track::-webkit-scrollbar-thumb { background: var(--color-accent); border-radius: 10px; } .testimonial-card { scroll-snap-align: start; flex: 0 0 85%; display: block; background: #F7F7F5; padding: calc(var(--grid-unit) * 3); border-left: 3px solid var(--color-accent); text-decoration: none; color: inherit; transition: transform 0.2s ease, background 0.2s ease; } .testimonial-card:hover { transform: translateY(-4px); background: #EFEEEA; } .testimonial-card .stars { color: var(--color-accent); letter-spacing: 2px; margin-bottom: calc(var(--grid-unit)); } .testimonial-card p { color: #222222; font-style: italic; margin-bottom: calc(var(--grid-unit) * 1.5); } .testimonial-card cite { font-family: var(--font-nav); font-style: normal; text-transform: uppercase; font-size: 0.8rem; color: #777777; } @media (min-width: 600px) { .testimonial-card { flex: 0 0 calc(50% - 12px); } } @media (min-width: 1100px) { .testimonial-card { flex: 0 0 calc(25% - 18px); } } /* --- Grid de depoimentos estático (páginas de unidade, sem carrossel) --- */ .testimonial-grid { display: grid; grid-template-columns: 1fr; gap: calc(var(--grid-unit) * 2); } .testimonial-grid .testimonial-card { flex: none; } .testimonial-cta { display: flex; flex-direction: column; gap: calc(var(--grid-unit) * 1.5); max-width: 420px; margin: calc(var(--grid-unit) * 4) auto 0; } @media (min-width: 600px) { .testimonial-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 769px) { .testimonial-cta { flex-direction: row; justify-content: center; } .testimonial-cta .btn { width: auto; } } .testimonial-nav { display: flex; justify-content: center; gap: calc(var(--grid-unit) * 2); margin-top: calc(var(--grid-unit) * 3); } .testimonial-nav button { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--color-accent); background: #FFFFFF; color: var(--color-accent); cursor: pointer; font-size: 1.1rem; transition: background 0.2s ease, color 0.2s ease; } .testimonial-nav button:hover { background: var(--color-accent); color: #000000; } /* --- Footer --- */ .site-footer { background: var(--color-accent); padding: calc(var(--grid-unit) * 2.5) calc(var(--grid-unit) * 2.5) 15px; } .site-footer .footer-grid { display: grid; grid-template-columns: 1fr; gap: calc(var(--grid-unit) * 4); max-width: 1200px; margin: 0 auto; text-align: center; } .footer-brand { display: flex; flex-direction: column; align-items: center; } .site-footer .logo-mark { height: 100px; margin: 0 auto calc(var(--grid-unit)); } .footer-brand__tagline { font-size: 1.05rem; font-family: var(--font-display); font-weight: 700; } .site-footer h3 { color: #000000; font-size: 1rem; margin: 0; font-weight: 700; } .site-footer p { color: #000000; } .site-footer a { color: #000000; text-decoration: none; } .site-footer a:hover { color: #FFFFFF; } .footer-unit__title { display: block; margin-bottom: calc(var(--grid-unit) * 1.5); } .footer-unit__title:hover h3 { color: #FFFFFF; } .footer-unit__address { display: block; margin-bottom: calc(var(--grid-unit) * 2); font-size: 0.9rem; } .footer-links { display: flex; flex-direction: column; } .footer-links h3 { margin-bottom: calc(var(--grid-unit) * 1.5); } .footer-links a { display: block; color: #000000; text-decoration: none; font-size: 0.9rem; margin-bottom: calc(var(--grid-unit)); } .footer-links a:hover { color: #FFFFFF; } .footer-unit__icons { display: flex; gap: calc(var(--grid-unit) * 2); justify-content: center; } .footer-icon-link { display: flex; } .footer-icon-link svg { width: 22px; height: 22px; } .footer-copyright { text-align: center; color: #000000; font-size: 0.8rem; margin-top: calc(var(--grid-unit) * 4); } @media (min-width: 769px) { .footer-copyright__break-mobile { display: none; } } @media (min-width: 769px) { .site-footer { padding: calc(var(--grid-unit) * 3) calc(var(--grid-unit) * 3) 15px; } .site-footer .footer-grid { grid-template-columns: 1.2fr 1fr 1fr 0.8fr; text-align: left; } .footer-brand { align-items: flex-start; } .site-footer .logo-mark { margin: 0 0 calc(var(--grid-unit)); } .footer-unit__icons { justify-content: flex-start; } } /* --- Scroll reveal --- */ [data-reveal] { opacity: 0; transform: translateY(8px); transition: opacity 0.6s ease, transform 0.6s ease; } [data-reveal].is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } } /* --- Stagger genérico (cards, timeline, faq entrando em cascata) --- */ .stagger-item { opacity: 0; transform: translateY(6px); transition: opacity 0.6s ease, transform 0.6s ease; } [data-reveal].is-visible .stagger-item { opacity: 1; transform: translateY(0); } .stagger-item:nth-child(1) { transition-delay: 0.05s; } .stagger-item:nth-child(2) { transition-delay: 0.12s; } .stagger-item:nth-child(3) { transition-delay: 0.19s; } .stagger-item:nth-child(4) { transition-delay: 0.26s; } .stagger-item:nth-child(5) { transition-delay: 0.33s; } .stagger-item:nth-child(6) { transition-delay: 0.4s; } .stagger-item:nth-child(7) { transition-delay: 0.47s; } .stagger-item:nth-child(8) { transition-delay: 0.54s; } .stagger-item:nth-child(9) { transition-delay: 0.61s; } .stagger-item:nth-child(10) { transition-delay: 0.68s; } @media (prefers-reduced-motion: reduce) { .stagger-item { opacity: 1; transform: none; transition: none; } } /* --- Reveal com blur→nítido (títulos de seção, citação em destaque) --- */ [data-reveal-blur] { opacity: 0; filter: blur(10px); transform: translateY(6px); transition: opacity 0.8s ease, filter 0.8s ease, transform 0.8s ease; } [data-reveal-blur].is-visible { opacity: 1; filter: blur(0); transform: translateY(0); } @media (prefers-reduced-motion: reduce) { [data-reveal-blur] { opacity: 1; filter: none; transform: none; transition: none; } } /* --- Unidades: showcase upgrade --- */ .unit-grid { display: grid; grid-template-columns: 1fr; gap: calc(var(--grid-unit) * 3); margin-bottom: calc(var(--grid-unit) * 4); overflow: hidden; padding: 2px; } .unit-card { background: var(--color-bg-alt); overflow: hidden; transform-origin: center center; transition: transform 0.08s linear; will-change: transform; } @media (prefers-reduced-motion: reduce) { .unit-card { transition: none; transform: none !important; } } .unit-card__photo-wrap { display: block; position: relative; overflow: hidden; --tilt: 0deg; transform: rotate(var(--tilt)); transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1); } .unit-card:nth-child(2) .unit-card__photo-wrap { --tilt: 2deg; } .unit-card__photo-wrap:hover { transform: rotate(0deg) scale(1.05); z-index: 2; } .unit-card__photo { width: 100%; aspect-ratio: 4/3; object-fit: cover; clip-path: polygon(0 4%, 96% 0, 100% 96%, 4% 100%); } .unit-card__reveal { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.4); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .unit-card__photo-wrap:hover .unit-card__reveal { opacity: 1; } .unit-card__reveal span { background: var(--color-accent); color: #000000; font-family: var(--font-nav); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.78rem; padding: 10px 22px; border-radius: 999px; } .unit-card__body { padding: calc(var(--grid-unit) * 3); text-align: center; } .unit-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--grid-unit)); margin-bottom: calc(var(--grid-unit) * 2); } .unit-badge { font-family: var(--font-nav); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 6px 12px; border: 1px solid var(--color-accent); color: var(--color-accent); border-radius: 999px; } .unit-badge--gold { background: var(--color-accent); color: #000000; } .unit-card h3 { color: var(--color-text); font-size: 1.4rem; margin-bottom: calc(var(--grid-unit)); } .unit-card__address { color: var(--color-text-muted); font-size: 0.92rem; margin-bottom: calc(var(--grid-unit) * 0.5); } .unit-card__hours { color: var(--color-accent); font-family: var(--font-nav); font-size: 0.82rem; margin-bottom: calc(var(--grid-unit) * 2); } @media (min-width: 769px) { .unit-grid { grid-template-columns: repeat(2, 1fr); } } /* --- Horário, painel embutido dentro de Unidades --- */ .unit-hours { background: #FFFFFF; padding: calc(var(--grid-unit) * 3); } .unit-hours__title { color: #111111; font-family: var(--font-nav); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.9rem; margin-bottom: calc(var(--grid-unit) * 2); } .unit-hours .hours-unit { background: #F7F7F5; border-left: 3px solid var(--color-accent); } .unit-hours .hours-unit__title { color: #111111; } .unit-hours .hours-unit dt { color: #888888; } .unit-hours .hours-unit dd { color: #222222; } @media (min-width: 769px) { .unit-hours { padding: calc(var(--grid-unit) * 4); } } /* --- Depoimento em destaque (citação grande) --- */ .quote-feature { position: relative; background: var(--color-bg-alt); padding: calc(var(--grid-unit) * 8) calc(var(--grid-unit) * 2.5); text-align: center; overflow: hidden; } .quote-feature__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.3; filter: grayscale(0.25); } .quote-feature__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.8), rgba(48,48,48,0.92)); } .quote-feature__content { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; } .quote-feature blockquote { font-family: var(--font-display); font-size: clamp(1.3rem, 4.5vw, 2.1rem); line-height: 1.4; color: #FFFFFF; margin: 0 0 calc(var(--grid-unit) * 3); } .quote-feature cite { font-family: var(--font-nav); font-style: normal; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.85rem; color: var(--color-accent); } @media (min-width: 769px) { .quote-feature { padding: calc(var(--grid-unit) * 12) calc(var(--grid-unit) * 4); } } /* --- Timeline (fundida em Nossa história) --- */ .timeline-list { list-style: none; margin-top: calc(var(--grid-unit) * 3); display: flex; flex-direction: column; gap: calc(var(--grid-unit) * 1.5); } .timeline-item { background: var(--color-bg-alt); border-left: 3px solid var(--color-accent); transition: background 0.2s ease; } .timeline-item:hover { background: #3d3d3d; } .timeline-item__link { display: flex; align-items: center; gap: calc(var(--grid-unit) * 1.5); padding: calc(var(--grid-unit) * 1.5); color: inherit; text-decoration: none; } .timeline-item img { width: 56px; height: 56px; object-fit: cover; border-radius: 4px; flex-shrink: 0; } .timeline-item__year { font-family: var(--font-nav); color: var(--color-accent); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; display: block; margin-bottom: 2px; } .timeline-item p { color: var(--color-text-muted); font-size: 1rem; margin: 0; } /* --- FAQ accordion --- */ .faq-panel { text-align: center; } .faq-list { display: flex; flex-direction: column; gap: calc(var(--grid-unit) * 1.5); max-width: 800px; margin: 0 auto; text-align: left; } .faq-item__heading { font-weight: 400; } .faq-item { width: 100%; display: flex; align-items: center; gap: calc(var(--grid-unit) * 1.5); background: transparent; border: 1px solid var(--color-bg-alt); color: var(--color-text); text-align: left; padding: calc(var(--grid-unit) * 2); font-family: var(--font-body); cursor: pointer; transition: border-color 0.2s ease; } .faq-item:hover, .faq-item.is-open { border-color: var(--color-accent); } .faq-item__num { font-family: var(--font-nav); color: var(--color-accent); font-size: 0.85rem; flex-shrink: 0; } .faq-item__q { flex: 1; font-family: var(--font-nav); font-size: 0.95rem; } .faq-item__icon { font-size: 1.2rem; color: var(--color-accent); transition: transform 0.3s ease; flex-shrink: 0; } .faq-item.is-open .faq-item__icon { transform: rotate(45deg); } .faq-item__a { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; } .faq-item__a p { color: var(--color-text-muted); padding: calc(var(--grid-unit) * 1.5) calc(var(--grid-unit) * 2) 0; } /* --- CTA final + wordmark --- */ .cta-final { position: relative; z-index: 0; background: #FFFFFF; color: #111111; text-align: center; padding: calc(var(--grid-unit) * 8) calc(var(--grid-unit) * 2.5) calc(var(--grid-unit) * 3); overflow: hidden; } .cta-final__watermark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 700px; max-width: 140%; aspect-ratio: 361 / 480; opacity: 0.05; z-index: -1; pointer-events: none; user-select: none; } .cta-final .eyebrow { color: #8A6A2E; } .cta-final__title { color: #111111; font-size: clamp(1.8rem, 7vw, 3.2rem); margin: calc(var(--grid-unit) * 2) 0 calc(var(--grid-unit) * 4); } .cta-final__title-light { display: block; font-weight: 400; color: #9A948A; } .cta-final__actions { display: flex; flex-direction: column; gap: calc(var(--grid-unit) * 1.5); max-width: 420px; margin: 0 auto; } .cta-final .btn--book-gold { color: #111111; border-color: #111111; } .cta-final .btn--book-gold:hover, .cta-final .btn--book-gold:focus-visible { background: var(--color-accent); border-color: var(--color-accent); color: #000000; } @media (min-width: 769px) { .cta-final__actions { flex-direction: row; justify-content: center; } .cta-final__actions .btn { width: auto; } } /* --- Formulários (Contato, Trabalhe conosco, Parcerias) --- */ .form-card { max-width: 640px; margin: 0 auto; } .site-form { display: flex; flex-direction: column; gap: calc(var(--grid-unit) * 2.5); } .site-form__row { display: flex; flex-direction: column; gap: calc(var(--grid-unit)); } .site-form__row label { font-family: var(--font-nav); text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.05em; color: var(--color-accent); } .site-form__row input, .site-form__row textarea, .site-form__row select { background: var(--color-bg-alt); border: 1px solid rgba(236, 186, 105, 0.25); color: var(--color-text); font-family: var(--font-body); font-size: 1rem; padding: calc(var(--grid-unit) * 1.5); border-radius: 0; } .site-form__row input::placeholder, .site-form__row textarea::placeholder { color: var(--color-text-muted); opacity: 1; } .site-form__row input:focus, .site-form__row textarea:focus, .site-form__row select:focus { outline: none; border-color: var(--color-accent); } .site-form__row input[type="file"] { padding: calc(var(--grid-unit)); cursor: pointer; } .site-form button[type="submit"] { align-self: flex-start; } .site-form__status { font-size: 0.9rem; min-height: 1.2em; } .site-form__status--ok { color: #7CD98A; } .site-form__status--error { color: #E77C7C; } /* --- Texto legal (Política de Privacidade) --- */ .legal-text { max-width: 760px; margin: 0 auto; color: var(--color-text-muted); } .legal-text h2 { color: var(--color-text); font-family: var(--font-display); font-size: 1.3rem; margin: calc(var(--grid-unit) * 4) 0 calc(var(--grid-unit) * 1.5); } .legal-text h2:first-child { margin-top: 0; } .legal-text p { margin-bottom: calc(var(--grid-unit) * 2); line-height: 1.6; } .legal-text ul { margin: 0 0 calc(var(--grid-unit) * 2); padding-left: calc(var(--grid-unit) * 2.5); } .legal-text li { margin-bottom: calc(var(--grid-unit)); line-height: 1.6; } .legal-text a { color: var(--color-accent); } .footer-copyright a { color: inherit; text-decoration: underline; }