/* =================================================================== GUTO DECORACOES - FOLHA DE ESTILOS (CSS) Cada bloco tem um comentario em portugues explicando o que faz, porque quem le este codigo esta aprendendo agora. Ordem do arquivo: 1. Variaveis de cor 7. Secoes de conteudo 2. Reset basico 8. Sobre 3. Rolagem suave 9. Segmentos 4. Tipografia / body 10. Portfolio (galerias) 5. Cabecalho e menu 11. Contato 6. Topo (apresentacao) 12. Rodape 13. Responsivo (celular) =================================================================== */ /* ------------------------------------------------------------------- 1. VARIAVEIS DE COR Guardamos as cores em variaveis dentro de :root (a raiz do site). Para mudar a identidade visual inteira, basta editar aqui. Usamos cada cor com a funcao var(--nome). ------------------------------------------------------------------- */ :root { color-scheme: light; /* este e o tema claro */ --cor-fundo: #ffffff; /* fundo geral */ --cor-superficie: #f4f0ea; /* fundo de faixas, cartoes e cabecalho */ --cor-texto: #1b1b1b; /* texto principal */ --cor-texto-suave: #5f5b54; /* texto secundario */ --cor-primaria: #a97c3f; /* cor de destaque (dourado/bronze da marca) */ --cor-primaria-hover: #8a6330; /* mesma cor mais escura, para o hover */ --cor-borda: #e4ddd2; /* linhas e contornos */ --cor-branco-fixo: #ffffff; /* branco que nao muda com o tema (cracha da logo) */ --sombra: 0 10px 30px rgba(0, 0, 0, 0.08); --largura-maxima: 1080px; /* limite de largura do conteudo */ --altura-cabecalho: 72px; /* usado para reservar espaco ao rolar */ } /* Quando tem data-theme="dark", estas cores substituem as de cima. So precisamos redefinir o que muda. */ [data-theme="dark"] { color-scheme: dark; --cor-fundo: #121212; --cor-superficie: #1c1c1e; --cor-texto: #f5f2ec; --cor-texto-suave: #b0aaa0; --cor-primaria: #d4a45f; --cor-primaria-hover: #e6bd80; --cor-borda: #33322f; --sombra: 0 10px 30px rgba(0, 0, 0, 0.45); } /* ------------------------------------------------------------------- 2. RESET BASICO Zera margens/paddings que os navegadores aplicam por padrao e faz o box-sizing contar borda e padding DENTRO da largura do elemento. ------------------------------------------------------------------- */ * { margin: 0; padding: 0; box-sizing: border-box; } img { display: block; /* remove um espaco em branco que a imagem cria embaixo */ max-width: 100%; /* nunca deixa a imagem estourar a largura do pai */ height: auto; } ul { list-style: none; /* tira as bolinhas das listas */ } a { color: inherit; /* links herdam a cor do texto por padrao */ text-decoration: none; } /* ------------------------------------------------------------------- 3. ROLAGEM SUAVE scroll-behavior: smooth faz a pagina deslizar ao clicar num link de ancora (#secao) em vez de "pular". O @media respeita quem configurou o sistema para ter menos animacoes (acessibilidade). ------------------------------------------------------------------- */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* ------------------------------------------------------------------- 4. TIPOGRAFIA / BODY Define a fonte, aplica as cores das variaveis e cria uma transicao suave quando o tema muda de claro para escuro. ------------------------------------------------------------------- */ body { font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; background-color: var(--cor-fundo); color: var(--cor-texto); line-height: 1.7; transition: background-color 0.3s, color 0.3s; } h1, h2, h3 { line-height: 1.2; font-weight: 700; } /* "Olho" = aquele texto pequeno em maiusculas acima dos titulos */ .olho { display: inline-block; margin-bottom: 14px; color: var(--cor-primaria); font-size: 0.75rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; } /* ------------------------------------------------------------------- 5. CABECALHO E MENU position: sticky mantem o cabecalho preso no topo ao rolar. z-index alto garante que ele fique acima do restante do conteudo. ------------------------------------------------------------------- */ .cabecalho { position: sticky; top: 0; z-index: 100; background-color: var(--cor-superficie); border-bottom: 1px solid var(--cor-borda); } /* .nav usa flexbox para alinhar logo, links e botoes na mesma linha */ .nav { max-width: var(--largura-maxima); margin: 0 auto; /* centraliza */ padding: 10px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } /* A logo tem letras claras num bloco preto e a palavra DECORACOES em preto sobre fundo transparente. Para ela funcionar no tema claro E no escuro, colocamos sobre um "cracha" branco fixo. */ .nav-logo { display: inline-flex; background-color: var(--cor-branco-fixo); padding: 8px 14px; border-radius: 8px; } .nav-logo img { height: 40px; width: auto; } /* Lista de links (no computador ficam lado a lado) */ .nav-links { display: flex; gap: 28px; margin-left: auto; /* empurra os links para a direita */ } .nav-links a { font-size: 0.8rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--cor-texto-suave); transition: color 0.2s; } .nav-links a:hover { color: var(--cor-primaria); } /* Area da direita: botao de tema + botao hamburguer */ .nav-acoes { display: flex; align-items: center; gap: 10px; } /* Botao que alterna o tema */ .botao-tema { background: transparent; border: 1px solid var(--cor-borda); border-radius: 6px; padding: 6px 10px; font-size: 1rem; line-height: 1; cursor: pointer; color: var(--cor-texto); } /* Botao hamburguer: escondido no computador (display: none). Ele so aparece na regra @media do final do arquivo. */ .menu-toggle { display: none; flex-direction: column; justify-content: space-between; width: 28px; height: 20px; background: transparent; border: none; padding: 0; cursor: pointer; } /* Cada vira um dos tres risquinhos */ .menu-toggle span { display: block; width: 100%; height: 3px; border-radius: 2px; background-color: var(--cor-texto); } /* ------------------------------------------------------------------- 6. TOPO (APRESENTACAO) Ocupa quase a tela inteira. Tem uma foto de fundo, uma camada escura por cima (vinheta) e o texto acima de tudo. ------------------------------------------------------------------- */ .topo { position: relative; /* referencia para as camadas absolutas */ min-height: 88vh; display: flex; align-items: center; padding: 120px 20px 80px; overflow: hidden; } /* Camada 1: a foto de fundo */ .topo-fundo { position: absolute; inset: 0; /* mesmo que top/right/bottom/left: 0 */ background: url("img/fachada-loja.jpg") center / cover no-repeat; } /* Camada 2: escurece a foto para o texto branco ficar legivel */ .topo-vinheta { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 10, 10, 0.55), rgba(10, 10, 10, 0.85)); } /* Camada 3: o conteudo, sempre acima das outras (z-index maior) */ .topo-conteudo { position: relative; z-index: 1; max-width: var(--largura-maxima); margin: 0 auto; width: 100%; color: #f7f5f1; /* texto claro fixo: o fundo aqui e sempre escuro */ } .topo-conteudo .olho { color: #e6c777; } .topo-conteudo h1 { font-size: clamp(2rem, 5vw, 3.4rem); margin-bottom: 20px; max-width: 720px; } .topo-conteudo h1 em { font-style: normal; color: #e6c777; /* destaca "alto padrao" */ } .topo-conteudo p { max-width: 560px; margin-bottom: 32px; color: #d9d5cd; } /* Numeros de destaque abaixo do botao */ .topo-numeros { display: flex; flex-wrap: wrap; gap: 40px; margin-top: 48px; } .topo-numeros strong { display: block; font-size: 2rem; color: #e6c777; } .topo-numeros span { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; color: #cfcbc2; } /* ------------------------------------------------------------------- 7. BOTOES .botao e a aparencia base; .botao-primario adiciona a cor de destaque. O :hover muda quando o mouse passa por cima. ------------------------------------------------------------------- */ .botao { display: inline-block; padding: 14px 30px; border-radius: 4px; font-weight: 700; font-size: 0.82rem; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; } .botao-primario { background-color: var(--cor-primaria); color: #ffffff; transition: background-color 0.2s, transform 0.2s; } .botao-primario:hover { background-color: var(--cor-primaria-hover); transform: translateY(-2px); } /* ------------------------------------------------------------------- 8. SECOES DE CONTEUDO .secao e o container padrao de cada bloco da pagina. scroll-margin-top reserva um espaco no topo ao rolar ate a secao, para o cabecalho fixo nao cobrir o titulo. .secao-alt so troca a cor de fundo, alternando o ritmo visual. ------------------------------------------------------------------- */ .secao { max-width: var(--largura-maxima); margin: 0 auto; padding: 90px 20px; scroll-margin-top: var(--altura-cabecalho); } /* .secao-alt continua sendo um container centralizado normal; a faixa de fundo "vaza" para as laterais com um truque de box-shadow bem largo, recortado no topo/base por clip-path. Assim os filhos nao precisam de nenhum ajuste especial de alinhamento. */ .secao-alt { background-color: var(--cor-superficie); box-shadow: 0 0 0 100vmax var(--cor-superficie); clip-path: inset(0 -100vmax); } .secao h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); margin-bottom: 16px; } /* Texto de introducao logo abaixo do titulo da secao */ .secao-intro { max-width: 620px; margin-bottom: 40px; color: var(--cor-texto-suave); } /* ------------------------------------------------------------------- 9. SOBRE Grid de duas colunas: texto a esquerda, foto a direita. No celular vira uma coluna so (ver secao 13). ------------------------------------------------------------------- */ .sobre-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 50px; align-items: center; } .sobre-texto p + p { margin-top: 16px; /* espaco entre dois paragrafos seguidos */ } /* Assinatura do fundador (foto redonda + nome) */ .assinatura { display: flex; align-items: center; gap: 16px; margin-top: 32px; } .assinatura img { width: 72px; height: 72px; border-radius: 50%; /* deixa a foto redonda */ object-fit: cover; /* recorta sem distorcer */ object-position: top; /* prioriza o topo da foto (o rosto) */ border: 2px solid var(--cor-primaria); } .assinatura strong { display: block; } .assinatura span { font-size: 0.85rem; color: var(--cor-texto-suave); } .sobre-foto img { width: 100%; border-radius: 6px; box-shadow: var(--sombra); } /* ------------------------------------------------------------------- 10. SEGMENTOS grid com colunas que se ajustam sozinhas: cada cartao tem no minimo 240px; o navegador cria quantas colunas couberem na largura. ------------------------------------------------------------------- */ .segmentos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; } .segmentos-grid li { background-color: var(--cor-fundo); border: 1px solid var(--cor-borda); border-radius: 8px; padding: 24px; transition: transform 0.2s, border-color 0.2s; } .segmentos-grid li:hover { transform: translateY(-4px); border-color: var(--cor-primaria); } .seg-num { display: block; margin-bottom: 8px; font-size: 1.2rem; font-weight: 700; color: var(--cor-primaria); } .segmentos-grid h3 { font-size: 1rem; margin-bottom: 6px; } .segmentos-grid p { font-size: 0.85rem; color: var(--cor-texto-suave); } /* ------------------------------------------------------------------- 11. PORTFOLIO (GALERIAS) Para cada grupo ha um titulo e uma .galeria. A galeria e um grid de colunas automaticas; cada foto tem altura fixa e usa object-fit: cover para preencher sem distorcer. ------------------------------------------------------------------- */ .grupo-titulo { margin: 44px 0 18px; padding-bottom: 10px; border-bottom: 1px solid var(--cor-borda); font-size: 1rem; letter-spacing: 1px; text-transform: uppercase; color: var(--cor-primaria); } .grupo-titulo:first-of-type { margin-top: 0; } .galeria { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; } .galeria a { display: block; overflow: hidden; /* o zoom da imagem no hover nao "vaza" */ border-radius: 6px; border: 1px solid var(--cor-borda); } .galeria img { width: 100%; height: 240px; object-fit: cover; transition: transform 0.4s; } .galeria a:hover img { transform: scale(1.06); /* leve zoom ao passar o mouse */ } /* ------------------------------------------------------------------- 12. CONTATO Lista simples: rotulo em cima, informacao (link) embaixo. ------------------------------------------------------------------- */ .contato-lista { display: flex; flex-wrap: wrap; gap: 28px; margin-bottom: 36px; } .contato-lista li { min-width: 200px; } .contato-rotulo { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1px; color: var(--cor-texto-suave); margin-bottom: 4px; } .contato-lista a { font-size: 1.05rem; color: var(--cor-primaria); word-break: break-word; /* e-mail longo quebra a linha em vez de estourar */ } .contato-lista a:hover { text-decoration: underline; } /* ------------------------------------------------------------------- 13. RODAPE ------------------------------------------------------------------- */ .rodape { border-top: 1px solid var(--cor-borda); background-color: var(--cor-superficie); text-align: center; padding: 40px 20px; } .rodape img { height: 42px; width: auto; margin: 0 auto 12px; background-color: var(--cor-branco-fixo); /* mesmo cracha branco da logo do topo */ padding: 8px 14px; border-radius: 8px; } .rodape p { font-size: 0.8rem; color: var(--cor-texto-suave); } /* ------------------------------------------------------------------- 14. RESPONSIVO (CELULAR) Tudo aqui dentro so vale em telas de ate 860px de largura. E aqui que o menu vira "tres risquinhos". ------------------------------------------------------------------- */ @media (max-width: 860px) { /* O cabecalho vira referencia de posicao para o menu que abre abaixo dele */ .nav { position: relative; } /* Mostra o botao hamburguer (estava escondido) */ .menu-toggle { display: flex; } /* Esconde os links e prepara o menu vertical colado abaixo do cabecalho */ .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; background-color: var(--cor-superficie); border-bottom: 1px solid var(--cor-borda); } /* Quando o script.js adiciona a classe "aberto", o menu aparece */ .nav-links.aberto { display: flex; } .nav-links li { text-align: center; } .nav-links a { display: block; /* a area clicavel ocupa a linha toda */ padding: 16px; border-top: 1px solid var(--cor-borda); } /* Sobre passa a ter uma coluna so, com a foto acima do texto */ .sobre-grid { grid-template-columns: 1fr; gap: 32px; } .sobre-foto { order: -1; /* joga a foto para cima do texto */ } /* Fotos da galeria um pouco mais baixas no celular */ .galeria img { height: 200px; } }