/* Componentes. So consome var() de tokens.css: nenhum px solto de espacamento, * o teste tests/test_css.php barra. */ /* ============================================================ site header */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--c-forest-700); border-bottom: 1px solid var(--c-border); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding-block: var(--header-pad-y); } .site-header__logo { display: block; flex: none; } .site-header__logo-img { width: auto; height: var(--header-logo-h); } .site-header__toggle { display: none; flex: none; width: 44px; height: 44px; padding: 0; background: transparent; border: 1px solid var(--c-border); border-radius: var(--radius-sm); cursor: pointer; } .site-header__bars, .site-header__bars::before, .site-header__bars::after { display: block; width: 20px; height: 2px; margin-inline: auto; background: var(--c-accent); transition: transform 0.25s var(--ease-out), opacity 0.25s var(--ease-out); } .site-header__bars::before, .site-header__bars::after { content: ''; position: relative; } .site-header__bars::before { top: -6px; } .site-header__bars::after { top: 4px; } [aria-expanded='true'] .site-header__bars { background: transparent; } [aria-expanded='true'] .site-header__bars::before { transform: translateY(6px) rotate(45deg); } [aria-expanded='true'] .site-header__bars::after { transform: translateY(-4px) rotate(-45deg); } .site-nav { display: flex; align-items: center; gap: clamp(var(--space-4), 2.5vw, var(--space-7)); } .site-nav__list { display: flex; align-items: center; gap: clamp(var(--space-3), 1.8vw, var(--space-5)); list-style: none; } .site-nav__link { position: relative; display: inline-block; padding-block: var(--space-2); font-size: var(--step--1); font-weight: 400; text-decoration: none; color: var(--c-ink); white-space: nowrap; transition: color 0.2s var(--ease-out); } .site-nav__link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--c-accent); transform: scaleX(0); transform-origin: left; transition: transform 0.28s var(--ease-out); } .site-nav__link:hover { color: var(--c-accent); } .site-nav__link:hover::after { transform: scaleX(1); } .site-nav__actions { display: flex; align-items: center; gap: var(--space-4); } .site-nav__phone { font-size: var(--step--1); font-weight: 500; color: var(--c-accent); text-decoration: none; white-space: nowrap; } .site-nav__book { padding: var(--space-3) var(--space-5); min-height: 44px; font-size: var(--step--1); } /* Mobile: a classe .js-nav so entra no quando nav.js roda. Sem JS o * menu fica visivel, empilhado, e continua utilizavel. */ @media (max-width: 64em) { .site-header__inner { flex-wrap: wrap; } .js-nav .site-header__toggle { display: block; } .site-nav { flex-direction: column; align-items: stretch; gap: var(--space-4); width: 100%; padding-block: var(--space-4); } .js-nav .site-nav { display: none; } /* ⛔ Celular DEITADO: o menu pede 405px de altura e a janela tem 390px. * * O header e position: sticky, entao o menu gruda junto: rolar a pagina NAO * traz o resto para a tela. O ultimo link terminava em 473px numa janela de * 390px, ou seja, telefone e "Book Your Cleaning" ficavam inalcancaveis. * Medido, nao deduzido. * * dvh e nao vh: no celular a barra do navegador recolhe e vh congela no * valor da barra aberta. O vh fica como piso para quem nao tem dvh. */ .js-nav .site-nav.is-open { display: flex; max-height: calc(100vh - var(--header-h)); max-height: calc(100dvh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain; } .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; } .site-nav__link { padding-block: var(--space-3); border-bottom: 1px solid var(--c-border); font-size: var(--step-0); } .site-nav__actions { flex-direction: column; align-items: stretch; gap: var(--space-3); padding-top: var(--space-2); } /* No menu aberto o telefone e alvo de DEDO, nao de mouse: 22px de altura * era metade do minimo confortavel. O texto nao muda de tamanho, so a area * de toque. */ .site-nav__phone { display: flex; align-items: center; justify-content: center; min-height: 44px; text-align: center; } } /* ==================================================================== hero */ .hero { position: relative; /* Altura da tela do aparelho, menos o header, para a dobra ocupar * exatamente o que se ve ao abrir. dvh e nao vh: no celular a barra do * navegador recolhe e vh congela no valor da barra aberta. min-height, e * nao height, para o conteudo poder crescer quando a tela e baixa. */ min-height: calc(100vh - var(--header-h)); min-height: calc(100dvh - var(--header-h)); display: grid; align-content: center; /* ⚠️ O respiro do hero vem da ALTURA DA TELA, nao do ritmo das dobras. * Com os 128px do ritmo normal, o texto (741px) mais 256px de padding dava * 997px numa tela util de 811px: a dobra passava de uma tela e o pedido era * justamente caber em uma. Agora o padding e pequeno e quem da o respiro e * o min-height com o conteudo centrado. Em celular o texto sozinho ja passa * da tela, e ai a dobra cresce: cortar texto da cliente nao e opcao. */ padding-block: clamp(var(--space-5), 3.5vh, var(--space-8)); overflow: hidden; background: radial-gradient(120% 90% at 82% 8%, rgba(195, 158, 101, 0.16), transparent 62%), var(--c-bg); } .hero__inner { display: grid; /* A coluna da foto ganha um pouco de largura: 0.95fr virou 1fr. */ grid-template-columns: 1.05fr 1fr; /* stretch, e nao center, e o que faz a coluna da foto ter a MESMA altura da * coluna de texto. Com center sobrava fundo verde em cima e embaixo da foto. */ align-items: stretch; gap: clamp(var(--space-6), 5vw, var(--space-9)); } /* Quando a foto for a mais alta das duas (tela larga com texto curto), o texto * volta a ficar centrado na faixa, que era o comportamento antigo. */ .hero__text { align-self: center; } /* 20ch deixa "Luxury Home Care," e "Inspired by Nature." em duas linhas, que e * o formato que o cliente pediu. Com 14ch quebrava em tres e a linha ficava * curta demais para o peso que o titulo precisa ter. */ .hero__heading { font-size: var(--step-6); max-width: 20ch; letter-spacing: -0.015em; } .hero__lead { margin-top: var(--space-5); font-size: var(--step-1); font-weight: 300; line-height: var(--leading-snug); color: var(--c-accent); max-width: 34ch; } .hero__body { margin-top: var(--space-5); color: var(--c-ink-muted); } .hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-7); } /* Corrente de altura: o item do grid estica, o ocupa o que sobra e a * preenche. Feito com flex de proposito: altura percentual dentro de * depende de o pai ter altura definitiva, flex nao depende. */ .hero__media { position: relative; display: flex; flex-direction: column; /* Centra a sobra quando o teto de corte entra em acao. Sem isto a folga * inteira cai embaixo da foto e o desalinhamento fica pior que o original. */ justify-content: center; height: 100%; container-type: inline-size; } .hero__media > picture { display: flex; flex: 1 1 auto; min-height: 0; /* Cresce ate a altura do texto ao lado, mas nunca alem do teto de corte. */ max-height: var(--media-frame-cap); } .hero__image { width: 100%; height: 100%; min-height: 0; /* cover recorta, nunca distorce. A foto e quadrada e a moldura do hero fica * em pe, entao o que se perde e a lateral: o assunto tem que estar no meio. */ object-fit: cover; object-position: center; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } @media (max-width: 53.75em) { .hero__inner { grid-template-columns: 1fr; } .hero__media { order: -1; } .hero__heading { max-width: none; } .hero__lead { max-width: none; } /* Em coluna unica nao ha altura de irma para acompanhar: a foto volta a ter a * proporcao natural, inteira, sem recorte nenhum. */ .hero__media { display: block; height: auto; } .hero__media > picture { display: block; max-height: none; } .hero__image { height: auto; } } /* ============================================================ prose block */ .prose-block__inner { max-width: var(--measure); } .prose-block--center .prose-block__inner { margin-inline: auto; text-align: center; } .prose-block__ornament { display: flex; justify-content: center; margin-bottom: var(--space-6); } .ornament-img { width: clamp(180px, 26vw, 280px); height: auto; opacity: 0.85; } .prose-block__heading { font-size: var(--step-3); text-wrap: balance; } .prose-block__body { margin-top: var(--space-5); color: var(--c-ink-muted); } .prose-block__closing { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-6); list-style: none; font-family: var(--font-display); font-size: var(--step-1); color: var(--c-accent); } /* ============================================================ feature row */ .feature-row__heading { font-size: var(--step-4); text-align: center; text-wrap: balance; max-width: 22ch; margin-inline: auto; } .feature-row__intro { max-width: 58ch; margin-top: var(--space-4); margin-inline: auto; text-align: center; color: var(--c-ink-muted); } .feature-row__list { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-8); list-style: none; } .feature-row__item { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); background: var(--c-wash); border: 1px solid var(--c-border); border-radius: var(--radius-md); } .feature-row__item-title { font-family: var(--font-body); font-size: var(--step-0); font-weight: 500; line-height: var(--leading-snug); color: var(--c-ink-strong); } .feature-row__item-body { font-size: var(--step--1); color: var(--c-ink-muted); } /* Variante "badges": as 3 credenciais do bloco 05, com marca de conferido. */ .feature-row__list--badges .feature-row__item { flex-direction: row; align-items: center; gap: var(--space-3); text-align: start; } .feature-row__list--badges .feature-row__item::before { content: ''; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-accent) 22%, transparent); } /* Variante "words": as quatro palavras soltas do bloco 08. */ .feature-row__list--words .feature-row__item { align-items: center; justify-content: center; padding-block: var(--space-7); text-align: center; background: transparent; border-color: color-mix(in srgb, var(--c-accent) 26%, transparent); } .feature-row__list--words .feature-row__item-title { font-family: var(--font-display); font-size: var(--step-2); font-weight: 600; color: var(--c-accent); } @media (max-width: 56.25em) { .feature-row__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 35em) { .feature-row__list { grid-template-columns: 1fr; } } /* ============================================================== cta block */ /* Um botao sozinho nao sustenta o respiro de uma secao inteira: com o padding * cheio, o que se ve e fundo vazio com um botao no meio. Por isso o template * emite `section section--tight`. * * ⛔ NAO define padding proprio aqui. Era esta regra que ganhava do * .section--tight do HTML (components.css carrega depois do base.css e as duas * tem a mesma especificidade): a classe dizia 64px e a tela desenhava 45px. * Quem decide o ritmo do cta agora e a classe que esta no HTML. */ .cta-block__inner { text-align: center; } .cta-block__heading { font-size: var(--step-3); text-wrap: balance; } .cta-block__body { max-width: 54ch; margin-top: var(--space-4); margin-inline: auto; color: var(--c-ink-muted); } .cta-block__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; margin-top: var(--space-5); } /* ============================================================ site footer */ .site-footer { padding-top: var(--section-y); background: var(--c-surface-deep); border-top: 1px solid var(--c-border); } .site-footer__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: clamp(var(--space-6), 4vw, var(--space-8)); } .site-footer__logo { width: auto; height: 44px; } .site-footer__tagline { margin-top: var(--space-4); font-family: var(--font-display); font-size: var(--step-1); color: var(--c-accent); } .site-footer__address, .site-footer__legal-entity { margin-top: var(--space-4); font-size: var(--step--1); font-style: normal; color: var(--c-ink-muted); } .site-footer__social { display: flex; gap: var(--space-4); margin-top: var(--space-5); list-style: none; font-size: var(--step--1); } .site-footer__social a { color: var(--c-accent); } .site-footer__title { font-family: var(--font-body); font-size: var(--step--1); font-weight: 500; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--c-accent); } .site-footer__links { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-5); list-style: none; font-size: var(--step--1); } .site-footer__links a { color: var(--c-ink-muted); text-decoration: none; transition: color 0.2s var(--ease-out); } .site-footer__links a:hover { color: var(--c-ink-strong); } .site-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--section-y-tight); padding-block: var(--space-5); border-top: 1px solid var(--c-border); font-size: var(--step--1); color: var(--c-ink-muted); } .site-footer__legal { display: flex; gap: var(--space-5); list-style: none; } .site-footer__legal a { color: var(--c-ink-muted); } .site-footer__copy { margin: 0; } @media (max-width: 56.25em) { .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 35em) { .site-footer__grid { grid-template-columns: 1fr; } .site-footer__bottom { justify-content: flex-start; } } /* ============================================================== trust bar * * ⛔ Nao e card, de proposito. Tres caixas aqui criavam a terceira grade * identica seguida da pagina, e o cliente apontou exatamente isso. Faixa com * fio em cima e embaixo, icone da marca ao lado do rotulo. */ /* ⚠️ O padding era var(--space-6), 32px travados: o unico valor vertical da * pagina que nao acompanhava a janela. Numa tela de 1920px toda dobra ao redor * ia para 128px e a faixa continuava com 32. Agora ela anda junto com o ritmo. */ /* ⚠️ A costura entre dobras do mesmo tom zera o padding de cima, e para esta * faixa isso esta errado: ela tem fio em cima E embaixo, ou seja, e uma REGUA * e nao uma dobra. Com o padding de cima zerado o conteudo encostava no * proprio fio e sobrava vao so embaixo. O !important e para nao depender da * ordem dos arquivos contra a regra de costura, que tem a mesma forca. */ .trust-bar.section--light, .trust-bar { padding-top: var(--section-y-hair) !important; } .trust-bar { display: flow-root; /* mesmo motivo do .section: prende a margem do filho */ padding-block: var(--section-y-hair); border-block: 1px solid var(--c-border); background: var(--c-inset); } .trust-bar__list { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-5) var(--space-7); list-style: none; } .trust-bar__item { display: flex; align-items: center; gap: var(--space-4); flex: 1 1 260px; } .trust-bar__icon { flex: none; display: block; width: var(--icon-md); } .trust-bar__icon img { width: 100%; height: auto; } .trust-bar__label { font-size: var(--step--1); font-weight: 500; letter-spacing: 0.01em; line-height: var(--leading-snug); color: var(--c-ink-strong); } /* ================================================================ showcase * * Dobra assimetrica: midia forte de um lado, lista com icone do outro. A lista * e lista, separada por fio, sem caixa nenhuma. */ .showcase__inner { display: grid; /* A midia ganha um pouco de largura: 0.85fr virou 0.9fr. Mais que isso e a * lista de dois itens por linha do lado direito comeca a espremer. */ grid-template-columns: 0.9fr 1.1fr; align-items: stretch; gap: clamp(var(--space-6), 5vw, var(--space-9)); } .showcase__content { align-self: center; } .showcase--media-right .showcase__media { order: 2; } /* Mesma corrente de altura do hero, com a legenda fora da conta: ela fica no pe * da figura e quem estica e a foto. */ .showcase__media { margin: 0; display: flex; flex-direction: column; justify-content: center; height: 100%; container-type: inline-size; } .showcase__media > picture { display: flex; flex: 1 1 auto; min-height: 0; max-height: var(--media-frame-cap); } .showcase__image { width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: center; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } .showcase__caption { flex: none; margin-top: var(--space-4); font-size: var(--step--1); font-style: italic; line-height: var(--leading-snug); color: var(--c-ink-muted); } .showcase__heading { font-size: var(--step-4); text-wrap: balance; max-width: 20ch; } .showcase__intro { max-width: 52ch; margin-top: var(--space-4); color: var(--c-ink-muted); } .showcase__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-6); margin-top: var(--space-6); list-style: none; } .showcase__item { display: flex; align-items: center; gap: var(--space-4); padding-block: var(--space-4); border-bottom: 1px solid var(--c-border); } .showcase__icon { flex: none; display: block; width: var(--icon-sm); } .showcase__icon img { width: 100%; height: auto; } /* --step--1 e a escala de LEGENDA (e a mesma de .showcase__caption). Rotulo * que a pessoa le como conteudo comeca em --step-0. Era esse o "muito * pequeno" do cliente. */ .showcase__label { font-size: var(--step-0); font-weight: 400; line-height: var(--leading-snug); color: var(--c-ink); } /* ---------------------------------------------- showcase, variante statements * * O mesmo esqueleto servindo texto de FRASE, nao de rotulo. A variante e * declarada no content.json, nunca deduzida do tamanho da string: deduzir * faria o layout mudar sozinho quando alguem editasse uma palavra. * * Uma coluna porque frase de 90 caracteres nao cabe em meia largura. Corpo em * --step-1 porque estas quatro linhas SAO o argumento da secao, entao pesam * mais que a intro. Icone em --icon-md porque agora ele responde por uma frase * inteira, e nao por um rotulo de uma linha. */ .showcase__list--statements { grid-template-columns: 1fr; max-width: 62ch; } .showcase__list--statements .showcase__item { /* alinha pelo topo: com texto de 2 linhas, centralizar joga o icone para o * meio do paragrafo e a lista perde a borda de leitura da esquerda */ align-items: flex-start; gap: var(--space-5); padding-block: var(--space-5); } .showcase__list--statements .showcase__item:last-child { border-bottom: 0; } .showcase__list--statements .showcase__icon { width: var(--icon-md); } .showcase__list--statements .showcase__label { font-size: var(--step-1); line-height: var(--leading-snug); color: var(--c-ink-strong); } @media (max-width: 56.25em) { .showcase__inner { grid-template-columns: 1fr; } .showcase--media-right .showcase__media { order: 0; } .showcase__heading { max-width: none; } /* Coluna unica: foto inteira, sem recorte, igual ao hero. */ .showcase__media { height: auto; } .showcase__media > picture { display: block; max-height: none; } .showcase__image { height: auto; } } @media (max-width: 35em) { .showcase__list { grid-template-columns: 1fr; } /* Em 360px sobram 324px de container. Com icone de 48px e gap de 24px a * coluna de texto cai para 252px: a --step-1 dariam ~26 caracteres por * linha e cada frase viraria 4 linhas, quase dobrando a altura da dobra. * Aqui o icone volta ao tamanho de rotulo e o corpo para --step-0, que * ainda e maior que o --step--1 de antes, que era a reclamacao. */ .showcase__list--statements .showcase__item { gap: var(--space-4); } .showcase__list--statements .showcase__icon { width: var(--icon-sm); } .showcase__list--statements .showcase__label { font-size: var(--step-0); } } /* =============================================================== statement * * A dobra de destaque. Existe UMA por pagina: se todas gritam, nenhuma grita. * Foto sangrando, texto display grande, palavras entrando em sequencia. */ .statement { position: relative; display: grid; place-items: center; min-height: min(78vh, 720px); padding-block: var(--section-y); overflow: hidden; isolation: isolate; } .statement__bg { position: absolute; inset: 0; z-index: -2; } .statement__bg img { width: 100%; height: 100%; object-fit: cover; } /* Veu escuro: sem ele o texto creme some no claro da foto. A verificacao de * contraste foi feita contra o verde profundo, nao contra a foto crua. */ .statement::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, color-mix(in srgb, var(--c-forest-900) 82%, transparent) 0%, color-mix(in srgb, var(--c-forest-900) 72%, transparent) 45%, color-mix(in srgb, var(--c-forest-900) 92%, transparent) 100%); } /* ⛔ Item de grid ou flex nasce com min-width: auto: ele se RECUSA a ficar * menor que o proprio conteudo. overflow-wrap nao resolve, porque ele deixa * quebrar a palavra mas nao muda a largura minima intrinseca da caixa. Com a * fonte do navegador em 200%, a palavra "Comfortable" em corpo display pedia * 402px e empurrava a dobra para 466px dentro de uma tela de 390px. * min-width: 0 e o que autoriza o item a encolher. Medido, nao deduzido. */ .statement__inner { min-width: 0; text-align: center; } .statement__heading { font-size: var(--step-4); text-wrap: balance; max-width: 20ch; margin-inline: auto; } .statement__intro { max-width: 54ch; margin-top: var(--space-4); margin-inline: auto; color: var(--c-ink); } .statement__words { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: var(--space-3) var(--space-6); margin-top: var(--space-8); } .statement__word { /* ⛔ Aqui NAO serve o break-word do body. * * Estas palavras moram num flex com align-items: baseline, entao cada caixa * tem largura de CONTEUDO, nao da tela. break-word deixa quebrar a palavra * mas nao muda a largura minima intrinseca, entao a caixa continuava sendo * pedida em 402px. Com a fonte do navegador em 200% a palavra "Comfortable" * sai em corpo 80px e empurrava a dobra inteira para fora da tela. * "anywhere" e a unica forma que reduz essa largura minima. Medido: 402px * viraram os 326px que a tela tem. */ overflow-wrap: anywhere; font-family: var(--font-display); font-size: var(--step-5); font-weight: 600; line-height: 1; color: var(--c-accent); } /* Ponto separador entre as palavras, no lugar de mais um card. */ .statement__word + .statement__word::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: var(--space-6); vertical-align: middle; border-radius: 50%; background: color-mix(in srgb, var(--c-accent) 55%, transparent); } @media (max-width: 35em) { .statement__words { flex-direction: column; gap: var(--space-4); } .statement__word + .statement__word::before { display: none; } }