/*-----------------------------------*\ #style.css - JacqueCostura \*-----------------------------------*/ /* As fontes Google sao carregadas no do HTML com preconnect. Um @import aqui bloquearia o render em cascata (CSS -> import -> fonte). */ :root { /* Cores base */ --bg-main: #FAF6F0; /* Creme aconchegante */ --bg-card: #FFFDFB; /* Branco suave */ --text-main: #2D2522; /* Charcoal quente */ --text-muted: #5C524E; /* Marrom acinzentado suave */ --accent: #D06F53; /* Terracota/Coral elegante */ --accent-hover: #B55A3F; --sage-green: #7C8B80; /* Verde sálvia */ --stitch-color: #D1C7BD; /* Cor da linha pesponto */ --white: #ffffff; /* Fontes */ --ff-heading: 'Lora', Georgia, serif; --ff-body: 'Nunito Sans', system-ui, sans-serif; /* Medidas e Outros */ --section-padding: 100px; --transition: 0.3s cubic-bezier(0.25, 1, 0.5, 1); --shadow: 0 10px 30px rgba(45, 37, 34, 0.04); --shadow-hover: 0 15px 40px rgba(45, 37, 34, 0.08); --radius: 12px; } /*-----------------------------------*\ #RESET \*-----------------------------------*/ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } li { list-style: none; } a { text-decoration: none; color: inherit; transition: var(--transition); } img, span, input, button, textarea, ion-icon { display: block; } img { width: 100%; height: auto; } input, button, textarea { background: none; border: none; font: inherit; color: inherit; } input, textarea { width: 100%; } button { cursor: pointer; } ion-icon { pointer-events: none; font-size: 2.2rem; } address { font-style: normal; } html { font-family: var(--ff-body); font-size: 62.5%; /* 1rem = 10px */ scroll-behavior: smooth; } body { background-color: var(--bg-main); color: var(--text-main); font-size: 1.6rem; line-height: 1.8; letter-spacing: 0.1px; overflow-x: hidden; -webkit-font-smoothing: antialiased; } /*-----------------------------------*\ #SCROLLBAR \*-----------------------------------*/ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background-color: var(--bg-main); } ::-webkit-scrollbar-thumb { background-color: var(--stitch-color); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background-color: var(--sage-green); } /*-----------------------------------*\ #REUSED STYLE \*-----------------------------------*/ .container { max-width: 1200px; margin-inline: auto; padding-inline: 24px; } .section { padding-block: var(--section-padding); position: relative; } .section-subtitle { color: var(--accent); font-family: var(--ff-body); font-weight: 600; text-transform: uppercase; font-size: 1.3rem; letter-spacing: 2px; margin-block-end: 12px; display: flex; align-items: center; gap: 8px; } .section-subtitle::before { content: ""; display: inline-block; width: 20px; height: 1px; border-top: 1px dashed var(--accent); } .h1, .h2, .h3, .h4 { font-family: var(--ff-heading); font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; color: var(--text-main); } .h1 { font-size: 4.8rem; font-weight: 400; } .h2 { font-size: 3.6rem; font-weight: 400; margin-block-end: 20px; } .h3 { font-size: 2.4rem; } .section-text { color: var(--text-muted); max-width: 600px; margin-block-end: 40px; } /* Detalhes de Costura (Pesponto/Stitch) */ .stitch-border { border: 1px dashed var(--stitch-color); padding: 8px; border-radius: var(--radius); } .stitch-card { border: 1px dashed var(--stitch-color); border-radius: var(--radius); background-color: var(--bg-card); padding: 32px; transition: var(--transition); } .stitch-card:hover { border-color: var(--accent); box-shadow: var(--shadow-hover); transform: translateY(-4px); } .stitch-line-divider { width: 100%; height: 1px; border-top: 1px dashed var(--stitch-color); margin-block: 60px; } /* Botões */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: 50px; font-weight: 500; font-size: 1.5rem; transition: var(--transition); } .btn-primary { background-color: var(--accent); color: var(--white); } .btn-primary:hover { background-color: var(--accent-hover); box-shadow: 0 8px 20px rgba(208, 111, 83, 0.25); transform: translateY(-2px); } .btn-secondary { border: 1px solid var(--text-main); color: var(--text-main); } .btn-secondary:hover { background-color: var(--text-main); color: var(--white); transform: translateY(-2px); } .btn-icon { font-size: 1.8rem; } /*-----------------------------------*\ #HEADER \*-----------------------------------*/ .header { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; background-color: rgba(250, 246, 240, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-block-end: 1px solid rgba(209, 199, 189, 0.3); transition: var(--transition); } .header.active { padding-block: 15px; box-shadow: var(--shadow); } .header .container { display: flex; justify-content: space-between; align-items: center; gap: 24px; height: 100px; } .header-action { flex-shrink: 0; } .header .logo { display: flex; align-items: center; justify-content: flex-start; flex-shrink: 0; height: 84px; overflow: hidden; } .logo img { height: 78px; width: auto; object-fit: contain; } .header .logo img { width: 200px; height: auto; max-width: none; } .navbar { display: flex; align-items: center; } .navbar-list { display: flex; gap: 32px; } .navbar-link { font-size: 1.5rem; font-weight: 500; color: var(--text-muted); position: relative; padding-block: 8px; } .navbar-link::after { content: ""; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; border-bottom: 1px dashed var(--accent); transition: var(--transition); } .navbar-link:hover, .navbar-link.active { color: var(--accent); } .navbar-link:hover::after, .navbar-link.active::after { width: 100%; } .nav-toggle-btn { display: none; flex-direction: column; gap: 6px; padding: 8px; } .nav-toggle-btn .line { width: 24px; height: 2px; background-color: var(--text-main); transition: var(--transition); } .nav-toggle-btn.active .line-1 { transform: translateY(8px) rotate(45deg); } .nav-toggle-btn.active .line-2 { opacity: 0; } .nav-toggle-btn.active .line-3 { transform: translateY(-8px) rotate(-45deg); } /*-----------------------------------*\ #HERO \*-----------------------------------*/ .hero { padding-block-start: 180px; padding-block-end: 100px; overflow: hidden; } .hero .container { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .hero-content { display: flex; flex-direction: column; align-items: flex-start; } .hero-title { margin-block: 20px 24px; } .hero-title span { font-family: var(--ff-heading); display: block; font-style: italic; color: var(--accent); } .hero-text { font-size: 1.8rem; color: var(--text-muted); margin-block-end: 32px; } .hero-actions { display: flex; gap: 16px; margin-block-end: 48px; } .hero-badge-list { display: flex; gap: 32px; border-block-start: 1px dashed var(--stitch-color); padding-block-start: 24px; width: 100%; } .hero-badge { display: flex; align-items: center; gap: 12px; } .hero-badge .icon-box { background-color: rgba(124, 139, 128, 0.1); color: var(--sage-green); width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; border-radius: 50%; } .hero-badge .title { font-weight: 600; font-size: 1.4rem; } .hero-badge .subtitle { font-size: 1.2rem; color: var(--text-muted); } .hero-banner { position: relative; display: flex; justify-content: center; align-items: center; } .hero-banner .main-img { width: 100%; height: 580px; object-fit: cover; object-position: center top; border-radius: 20px; box-shadow: 0 20px 40px rgba(45, 37, 34, 0.12); } .hero-banner .floating-card { position: absolute; top: 30px; left: -20px; background-color: var(--bg-card); padding: 22px 26px; border-radius: var(--radius); box-shadow: var(--shadow-hover); display: flex; align-items: center; gap: 18px; border: 1px dashed var(--stitch-color); animation: floatCard 4s ease-in-out infinite alternate; width: 360px; max-width: 360px; } .hero-banner .floating-card .img-box { width: 104px; height: 104px; object-fit: cover; border-radius: 8px; flex-shrink: 0; } @keyframes floatCard { 0% { transform: translateY(0); } 100% { transform: translateY(-10px); } } /*-----------------------------------*\ #SOBRE \*-----------------------------------*/ .sobre .container { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 80px; align-items: center; } .sobre-banner { position: relative; display: flex; justify-content: center; align-items: center; } .sobre-banner .sobre-foto { position: relative; z-index: 2; width: 82%; aspect-ratio: 2 / 3; object-fit: cover; object-position: center top; border-radius: var(--radius); box-shadow: var(--shadow-hover); } .sobre-banner .bg-pattern { position: absolute; top: 5%; left: 5%; width: 90%; height: 90%; background-image: url('../images/bg-pattern.png'); background-size: 300px; opacity: 0.07; border-radius: 50%; z-index: 1; } .sobre-content { display: flex; flex-direction: column; } .sobre-text { font-size: 1.7rem; color: var(--text-muted); margin-block-end: 24px; } .sobre-highlight { font-family: var(--ff-heading); font-size: 2.4rem; line-height: 1.5; color: var(--accent); border-inline-start: 2px dashed var(--accent); padding-inline-start: 20px; margin-block: 24px 32px; } /*-----------------------------------*\ #SERVIÇOS \*-----------------------------------*/ .servicos-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; } .form-note { margin-block-start: 10px; font-size: 1.3rem; font-style: italic; color: var(--accent); } /* Mapa */ .mapa-wrapper { position: relative; width: 100%; aspect-ratio: 16 / 7; min-height: 320px; border-radius: 12px; overflow: hidden; border: 1px solid var(--stitch-color); } .mapa-wrapper iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Aviso que substitui o mapa ate o visitante o pedir */ .mapa-aviso { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; padding: 32px 24px; background-color: var(--bg-main); background-image: repeating-linear-gradient( 45deg, rgba(208, 111, 83, 0.04) 0, rgba(208, 111, 83, 0.04) 10px, transparent 10px, transparent 20px ); } .mapa-aviso-icone { font-size: 3.6rem; color: var(--accent); } .mapa-aviso-titulo { font-family: var(--ff-body); font-size: 1.8rem; font-weight: 700; color: var(--text-main); } .mapa-aviso-texto { font-size: 1.4rem; line-height: 1.6; color: var(--text-muted); max-width: 440px; margin-block-end: 8px; } .mapa-aviso .btn { cursor: pointer; border: none; } .servico-card { display: flex; flex-direction: column; align-items: flex-start; height: 100%; } .servico-card .icon-box { width: 90px; height: 90px; background-color: var(--bg-main); border-radius: 50%; display: flex; justify-content: center; align-items: center; margin-block-end: 24px; border: 1px dashed var(--stitch-color); padding: 15px; } .servico-card .icon-box .servico-icon { width: 100%; height: 100%; color: var(--accent); transition: var(--transition); } .servico-card:hover .icon-box .servico-icon { transform: scale(1.08); } .servico-title { margin-block-end: 16px; font-size: 2.4rem; } .servico-text { font-size: 1.5rem; color: var(--text-muted); margin-block-end: 24px; flex-grow: 1; } .servico-features { margin-block-end: 24px; display: flex; flex-direction: column; gap: 8px; width: 100%; } .servico-features li { display: flex; align-items: center; gap: 8px; font-size: 1.4rem; color: var(--text-main); } .servico-features ion-icon { color: var(--sage-green); font-size: 1.6rem; } .servico-card .btn-link { font-weight: 600; font-size: 1.4rem; text-transform: uppercase; letter-spacing: 1px; color: var(--accent); display: inline-flex; align-items: center; gap: 6px; } .servico-card .btn-link:hover { color: var(--accent-hover); } /*-----------------------------------*\ #COMO FUNCIONA \*-----------------------------------*/ .como-funciona { background-color: var(--bg-card); } .process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; position: relative; } /* Linha pontilhada removida: o processo tem agora várias linhas de passos */ .process-card { position: relative; z-index: 2; text-align: center; display: flex; flex-direction: column; align-items: center; } .process-number { width: 60px; height: 60px; background-color: var(--accent); color: var(--white); font-size: 2.2rem; font-family: var(--ff-heading); display: flex; justify-content: center; align-items: center; border-radius: 50%; margin-block-end: 20px; box-shadow: 0 4px 10px rgba(208, 111, 83, 0.2); border: 4px solid var(--bg-card); } .process-title { margin-block-end: 12px; font-size: 2rem; } .process-text { font-size: 1.4rem; color: var(--text-muted); } /*-----------------------------------*\ #GALERIA \*-----------------------------------*/ .galeria-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .galeria-card { position: relative; overflow: hidden; border-radius: var(--radius); aspect-ratio: 4 / 5; box-shadow: var(--shadow); margin: 0; } .galeria-card img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); } /* Veu de gradiente: mantem o bloco de detalhe legivel sobre a fotografia */ .galeria-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient( to top, rgba(45, 37, 34, 0.93) 0%, rgba(45, 37, 34, 0.80) 30%, rgba(45, 37, 34, 0.28) 58%, rgba(45, 37, 34, 0) 80% ); z-index: 1; transition: var(--transition); } .galeria-content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 26px 24px 24px; z-index: 2; color: var(--white); } .galeria-content .category { font-size: 1.3rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: #E8A18A; margin-block-end: 4px; } .galeria-content .title { font-family: var(--ff-heading); font-size: 2.4rem; line-height: 1.2; margin-block-end: 12px; color: var(--white); } /* Bloco de detalhe de cada peca */ .galeria-content .detalhe { font-size: 1.35rem; line-height: 1.6; color: rgba(255, 255, 255, 0.9); padding-block-start: 12px; border-block-start: 1px dashed rgba(255, 255, 255, 0.35); } .galeria-content .detalhe-label { display: block; font-family: var(--ff-body); font-size: 1.1rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #E8A18A; margin-block-end: 4px; } .galeria-card:hover img { transform: scale(1.06); } /*-----------------------------------*\ #POR QUE ESCOLHER \*-----------------------------------*/ .diferenciais-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .diferenciais-banner { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; } .diferenciais-banner img { border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; height: 340px; object-fit: cover; object-position: center top; } .diferenciais-banner img:nth-child(2) { transform: translateY(30px); } .diferenciais-list { display: grid; grid-template-columns: 1fr; gap: 24px; } .diferencial-item { display: flex; gap: 20px; } .diferencial-item .icon-box { background-color: rgba(208, 111, 83, 0.1); color: var(--accent); width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; border-radius: 50%; flex-shrink: 0; } .diferencial-title { font-size: 2rem; font-family: var(--ff-body); font-weight: 600; margin-block-end: 8px; } .diferencial-text { font-size: 1.4rem; color: var(--text-muted); } /*-----------------------------------*\ #CTA DESTAQUE \*-----------------------------------*/ .cta-destaque { position: relative; overflow: hidden; background-color: var(--text-main); color: var(--white); text-align: center; } /* Mosaico de fotografias dos trabalhos, em fundo */ .cta-mosaico { position: absolute; inset: 0; z-index: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); grid-auto-rows: 170px; background-color: var(--text-main); } .cta-mosaico img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Veu escuro: garante o contraste do texto sobre as fotografias */ .cta-destaque::after { content: ""; position: absolute; inset: 0; z-index: 1; background-color: rgba(45, 37, 34, 0.86); } .cta-destaque .container { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; } .cta-destaque .h2 { color: var(--white); font-size: 4rem; max-width: 700px; margin-block-end: 20px; } .cta-destaque .section-subtitle { color: var(--accent); } .cta-destaque .section-subtitle::before { border-top-color: var(--accent); } .cta-destaque .section-text { color: var(--stitch-color); margin-block-end: 32px; } /*-----------------------------------*\ #CONTACTO \*-----------------------------------*/ .contacto .container { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; } .contacto-info { display: flex; flex-direction: column; } .contacto-list { display: flex; flex-direction: column; gap: 32px; margin-block-end: 40px; } .contacto-item { display: flex; gap: 20px; } .contacto-item .icon-box { background-color: rgba(124, 139, 128, 0.1); color: var(--sage-green); width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; border-radius: 50%; flex-shrink: 0; } .contacto-title { font-size: 1.4rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-block-end: 4px; } .contacto-link { font-size: 1.6rem; font-weight: 500; } .contacto-link:hover { color: var(--accent); } .horario-nota { margin-block-start: 16px; padding: 16px; border-inline-start: 3px solid var(--accent); background-color: rgba(208, 111, 83, 0.05); font-size: 1.4rem; color: var(--text-muted); } /* Formulário */ .contacto-form { background-color: var(--bg-card); padding: 40px; border-radius: var(--radius); border: 1px dashed var(--stitch-color); box-shadow: var(--shadow); } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-block-end: 20px; } .input-wrapper { position: relative; } .input-label { display: block; font-size: 1.3rem; font-weight: 600; color: var(--text-muted); margin-block-end: 8px; } .input-field { background-color: var(--bg-main); border: 1px solid rgba(209, 199, 189, 0.5); padding: 14px 18px; border-radius: 8px; font-size: 1.5rem; transition: var(--transition); } .input-field:focus { outline: none; border-color: var(--accent); background-color: var(--white); } textarea.input-field { height: 120px; resize: none; } .submit-btn { width: 100%; justify-content: center; } /*-----------------------------------*\ #FOOTER \*-----------------------------------*/ .footer { background-color: var(--text-main); color: var(--white); padding-block-start: 80px; padding-block-end: 40px; } .footer .container { display: grid; grid-template-columns: 1.5fr 1fr 1.5fr; gap: 60px; margin-block-end: 60px; } .footer-brand .logo { display: block; width: 100%; max-width: 240px; height: auto; overflow: visible; margin-block-end: 20px; } /* O logo.webp ja vem recortado (881x339), por isso nao leva as margens negativas que compensavam o vazio transparente do antigo logo.png. */ .footer-brand .logo img { display: block; filter: brightness(0) invert(1); width: 100%; height: auto; max-width: none; } .footer-brand-text { color: var(--stitch-color); font-size: 1.4rem; max-width: 300px; } .footer-list-title { font-family: var(--ff-body); font-size: 1.6rem; font-weight: 600; margin-block-end: 24px; text-transform: uppercase; letter-spacing: 1px; } .footer-list { display: flex; flex-direction: column; gap: 12px; } .footer-link { font-size: 1.4rem; color: var(--stitch-color); } .footer-link:hover { color: var(--accent); } .social-list { display: flex; gap: 16px; margin-block-start: 16px; } .social-link { background-color: rgba(255, 255, 255, 0.05); width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; border-radius: 50%; color: var(--white); transition: var(--transition); } .social-link:hover { background-color: var(--accent); transform: translateY(-3px); } .footer-bottom { /* O .footer .container e uma grelha de varias colunas e apanha tambem este segundo contentor. Sem o span, o bloco ficava preso na primeira coluna e encostado a esquerda em vez de centrado na pagina. */ grid-column: 1 / -1; border-block-start: 1px dashed rgba(209, 199, 189, 0.1); padding-block-start: 30px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; text-align: center; font-size: 1.3rem; color: var(--stitch-color); } /*-----------------------------------*\ #WHATSAPP FLUTUANTE \*-----------------------------------*/ .whatsapp-float { position: fixed; bottom: 30px; right: 30px; background-color: #25D366; color: var(--white); width: 60px; height: 60px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 3.2rem; box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4); z-index: 99; transition: var(--transition); } .whatsapp-float:hover { background-color: #20BA5A; transform: scale(1.08) translateY(-4px); } /*-----------------------------------*\ #RESPONSIVIDADE (MEDIA QUERIES) \*-----------------------------------*/ @media (max-width: 1024px) { .h1 { font-size: 4.6rem; } .h2 { font-size: 3.6rem; } .hero .container, .sobre .container, .contacto .container { grid-template-columns: 1fr; gap: 50px; } .hero-banner { order: -1; max-width: 500px; margin-inline: auto; } .sobre-banner { max-width: 400px; margin-inline: auto; } .servicos-grid { grid-template-columns: repeat(2, 1fr); } .process-grid { grid-template-columns: repeat(2, 1fr); } .galeria-grid { grid-template-columns: repeat(2, 1fr); } .diferenciais-grid { grid-template-columns: 1fr; gap: 40px; } .footer .container { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: span 2; } } @media (max-width: 768px) { :root { --section-padding: 80px; } .h1 { font-size: 3.8rem; } .h2 { font-size: 3.0rem; } .header .container { height: 70px; } .header .logo { height: 60px; } .header .logo img { width: 150px; } .nav-toggle-btn { display: flex; } .navbar { position: fixed; top: 70px; left: -100%; width: 100%; height: calc(100vh - 70px); background-color: var(--bg-main); padding: 30px; border-block-start: 1px solid rgba(209, 199, 189, 0.3); transition: var(--transition); align-items: flex-start; } .navbar.active { left: 0; } .navbar-list { flex-direction: column; width: 100%; gap: 20px; } .navbar-link { font-size: 1.8rem; width: 100%; } .hero { padding-block-start: 130px; } .hero-actions { flex-direction: column; width: 100%; } .hero-actions .btn { width: 100%; justify-content: center; } .hero-badge-list { flex-direction: column; gap: 16px; } .servicos-grid, .process-grid, .galeria-grid { grid-template-columns: 1fr; } .form-grid { grid-template-columns: 1fr; gap: 15px; } .contacto-form { padding: 24px; } .footer .container { grid-template-columns: 1fr; gap: 40px; } .footer-brand { grid-column: span 1; } .footer-bottom { gap: 8px; } /* Esconde o botão "Agendar Hora" no header no mobile */ .header-action { display: none; } /* Floating card do hero fica oculto no mobile para não sobrecarregar */ .hero-banner .floating-card { display: none; } /* Ajuste do CTA de destaque no mobile */ .cta-destaque .h2 { font-size: 3.2rem; } /* Mosaico do CTA com celulas mais pequenas no mobile */ .cta-mosaico { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); grid-auto-rows: 110px; } /* Galeria ocupa espaço completo no mobile, mantendo o enquadramento vertical */ .galeria-card { aspect-ratio: 4 / 5; } } /*-----------------------------------*\ #SELECT FIELD STYLING \*-----------------------------------*/ select.input-field { cursor: pointer; background-color: var(--bg-main); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235C524E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-inline-end: 40px; appearance: none; -webkit-appearance: none; } select.input-field:focus { outline: none; border-color: var(--accent); } /*-----------------------------------*\ #FOCUS VISIBLE (ACESSIBILIDADE) \*-----------------------------------*/ :focus-visible { outline: 2px dashed var(--accent); outline-offset: 4px; } ::placeholder { color: var(--stitch-color); } /*-----------------------------------* #PAGINAS LEGAIS \*-----------------------------------*/ .legal { padding-block-start: 160px; padding-block-end: 80px; } .legal .container { max-width: 820px; } .legal-meta { font-size: 1.4rem; color: var(--text-muted); margin-block-end: 40px; padding-block-end: 20px; border-block-end: 1px dashed var(--stitch-color); } .legal h2 { font-family: var(--ff-heading); font-size: 2.6rem; color: var(--text-main); margin-block-start: 44px; margin-block-end: 14px; } .legal h3 { font-family: var(--ff-body); font-size: 1.8rem; font-weight: 600; color: var(--text-main); margin-block-start: 28px; margin-block-end: 10px; } .legal p, .legal li { font-size: 1.6rem; line-height: 1.75; color: var(--text-muted); } .legal p { margin-block-end: 16px; } .legal ul { list-style: disc; padding-inline-start: 22px; margin-block-end: 16px; } .legal li { margin-block-end: 8px; } .legal a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .legal-destaque { padding: 22px 24px; margin-block: 24px; border-inline-start: 3px solid var(--accent); background-color: rgba(208, 111, 83, 0.06); border-radius: 0 8px 8px 0; } .legal-destaque p:last-child { margin-block-end: 0; } /* Tabelas de cookies: rolam dentro da propria caixa em ecras pequenos */ .legal-tabela { overflow-x: auto; margin-block: 20px 28px; border: 1px solid var(--stitch-color); border-radius: 8px; } .legal-tabela table { width: 100%; min-width: 620px; border-collapse: collapse; } .legal-tabela th, .legal-tabela td { padding: 14px 16px; text-align: left; font-size: 1.4rem; line-height: 1.6; border-block-end: 1px solid var(--stitch-color); vertical-align: top; } .legal-tabela th { font-family: var(--ff-body); font-weight: 700; color: var(--text-main); background-color: rgba(208, 111, 83, 0.06); } .legal-tabela td { color: var(--text-muted); } .legal-tabela tr:last-child td { border-block-end: none; } @media (max-width: 768px) { .legal { padding-block-start: 120px; } .legal h2 { font-size: 2.2rem; } } /*-----------------------------------*\ #PROTECAO DE IMAGENS \*-----------------------------------*/ img, picture { -webkit-user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; user-select: none; pointer-events: none; } a img, button img { pointer-events: auto; } /*-----------------------------------* #BANNER DE COOKIES \*-----------------------------------*/ .cookie-banner { position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 200; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; max-width: 940px; margin-inline: auto; padding: 24px 28px; background-color: var(--bg-card, #fff); border: 1px dashed var(--stitch-color); border-radius: var(--radius); box-shadow: var(--shadow-hover); opacity: 0; transform: translateY(16px); visibility: hidden; transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s; } .cookie-banner.ativo { opacity: 1; transform: translateY(0); visibility: visible; } .cookie-banner-texto { flex: 1 1 380px; } .cookie-banner-titulo { font-family: var(--ff-body); font-size: 1.7rem; font-weight: 700; color: var(--text-main); margin-block-end: 6px; } .cookie-banner-texto p { font-size: 1.4rem; line-height: 1.6; color: var(--text-muted); } .cookie-banner-texto a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } /* Aceitar e recusar tem o mesmo peso visual: sem padroes enganadores */ .cookie-banner-acoes { display: flex; gap: 12px; flex-shrink: 0; } .cookie-banner-acoes .btn { padding: 12px 28px; font-size: 1.5rem; cursor: pointer; border: none; } @media (max-width: 768px) { .cookie-banner { left: 12px; right: 12px; bottom: 12px; padding: 20px; gap: 16px; } .cookie-banner-acoes { width: 100%; } .cookie-banner-acoes .btn { flex: 1; justify-content: center; } } /* Nao tapar o botao flutuante do WhatsApp enquanto o banner esta visivel */ @media (max-width: 480px) { .cookie-banner.ativo ~ .whatsapp-float { display: none; } } /*-----------------------------------*\ #FAQ \*-----------------------------------*/ .faq-lista { max-width: 1100px; margin-inline: auto; display: grid; grid-template-columns: repeat(2, 1fr); /* Cada cartao fica com a sua altura propria: sem isto, abrir um
esticaria tambem o vizinho da mesma linha da grelha. */ align-items: start; gap: 16px 24px; } .faq-item { background: var(--bg-card); border: 1px solid var(--stitch-color); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; transition: var(--transition); } .faq-item:hover { box-shadow: var(--shadow-hover); } .faq-item[open] { border-color: var(--accent); } .faq-pergunta { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px; cursor: pointer; list-style: none; } /* Esconde o marcador nativo do
em todos os motores */ .faq-pergunta::-webkit-details-marker { display: none; } .faq-pergunta::marker { content: ""; } .faq-pergunta h3 { font-family: var(--ff-heading); font-size: 1.9rem; font-weight: 600; color: var(--text-main); line-height: 1.4; } .faq-pergunta:hover h3 { color: var(--accent); } .faq-icone { flex-shrink: 0; font-size: 2.2rem; color: var(--accent); transition: var(--transition); } .faq-item[open] .faq-icone { transform: rotate(180deg); } .faq-resposta { padding: 0 24px 24px; } .faq-resposta p { font-size: 1.6rem; line-height: 1.75; color: var(--text-muted); } .faq-pergunta:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } @media (max-width: 768px) { .faq-lista { grid-template-columns: 1fr; max-width: 640px; } } @media (max-width: 575px) { .faq-pergunta { padding: 18px 18px; } .faq-pergunta h3 { font-size: 1.7rem; } .faq-resposta { padding: 0 18px 20px; } }