/* ==========================================================================
Pindérica Website - Estilos Otimizados
Versão melhorada com foco em performance, responsividade e acessibilidade
========================================================================== */
/* ==========================================================================
1. Variáveis CSS e Reset
========================================================================== */
/* Reset e base */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Remove o highlight azul no toque em mobile */
* {
-webkit-tap-highlight-color: transparent;
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
scroll-snap-type: y mandatory;
font-size: 100%;
}
html.is-pre-scrolled main#main-content > .section {
/* Usamos 'visibility' em vez de 'display: none' para que as dimensões
dos elementos possam ser calculadas pelo script, mesmo que invisíveis. */
visibility: hidden;
}
body {
font-family: var(--font-family-main);
font-size: var(--font-text-size);
line-height: var(--line-height-base);
overflow-x: hidden;
background: var(--color-background-dark);
color: var(--color-text-light);
overscroll-behavior-y: contain;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Variáveis CSS */
:root {
/* Cores principais */
--color-primary: #FF008E;
--color-primary-dark: #e7007f;
--color-primary-light: #ff4da6;
--color-text-light: #ffffff;
--color-text-dark: #B60E54;
--color-background-dark: #000000;
--color-background-light: #ffffff;
--color-white: #ffffff;
--color-black: #000000;
--color-accent: #64C3A3;
--color-erro: #ff6b6b;
--header-nav-hover-color: var(--color-primary);
/* Gradientes */
--gradient-primary: linear-gradient(135deg, #FF008E 0%, #e7007f 100%);
--gradient-secondary: linear-gradient(135deg, #FF008E 0%, #f5576c 100%);
--gradient-accent: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
/* Cores de contacto */
--color-contact-background: #f8f9fa;
--color-contact-border: #e9ecef;
--color-contact-text: #B60E54;
--color-contact-small-text: #777;
/* Tipografia */
--font-family-main: 'Open Sans', sans-serif;
--font-size-base: 1rem;
--font-size-small: 0.875rem;
--font-size-large: 1.25rem;
--line-height-base: 1.4;
--line-height-tight: 1.2;
--font-title: 'Montserrat', sans-serif;
--font-title-size: clamp(1.5rem, 5vw, 3rem);
--font-subtitle: 'Open Sans', sans-serif;
--font-subtitle-size: clamp(0.85rem, 1.5vw, 1rem);
--font-text: 'Open Sans', sans-serif;
--font-text-size: clamp(0.75rem, 1.4vw, 1rem);
/* Sombras */
--shadow-light: 0 2px 10px rgba(0, 0, 0, 0.1);
--shadow-medium: 0 4px 20px rgba(0, 0, 0, 0.15);
--shadow-heavy: 0 8px 30px rgba(0, 0, 0, 0.25);
/* Espaçamentos */
--spacing-xs: 0.5rem;
--spacing-sm: 1rem;
--spacing-md: 1.5rem;
--spacing-lg: 2rem;
--spacing-xl: 3rem;
--spacing-xxl: 4rem;
--max-content-width: 75rem;
/* Breakpoints */
--breakpoint-xs: 20rem;
/* 320px */
--breakpoint-sm: 30rem;
/* 480px */
--breakpoint-md: 48rem;
/* 768px */
--breakpoint-lg: 62rem;
/* 992px */
--breakpoint-xl: 75rem;
/* 1200px */
/* Animações */
--ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--transition-fast: 0.2s;
--transition-normal: 0.3s;
--transition-slow: 0.5s;
--transition-long: 3s;
--transition-xlong: 5s;
/* Z-index scale */
--z-background: 1;
--z-content: 10;
--z-floating: 50;
--z-header: 1000;
--z-menu: 999;
--z-modal: 1000;
/* Border radius */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 20px;
--radius-xxl: 50px;
}
/* ==========================================================================
2. Utilitários e Classes de Acessibilidade
========================================================================== */
/* Screen reader only */
.sr-only {
position: absolute !important;
width: 0.0625rem !important;
height: 0.0625rem !important;
padding: 0 !important;
margin: -0.0625rem !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* Skip link para acessibilidade */
.skip-link {
position: absolute;
top: -5rem;
left: 0.375rem;
background: var(--color-primary);
color: var(--color-white);
padding: 0.5rem;
text-decoration: none;
border-radius: var(--radius-sm);
z-index: var(--z-modal);
transition: top var(--transition-fast);
font-weight: 600;
}
.skip-link:focus {
top: -5rem;
}
/* Focus styles para acessibilidade */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
outline: 0.1875rem solid var(--color-primary);
outline-offset: 0.125rem;
border-radius: 0.125rem;
}
.hidden {
display: none !important;
}
/* ==========================================================================
3. Layout Base e Containers
========================================================================== */
.section {
position: relative;
height: 100dvh;
min-height: 100dvh;
max-height: 100dvh;
width: 100%;
overflow: hidden;
display: grid;
align-items: center;
justify-content: center;
scroll-snap-align: start;
padding: var(--spacing-lg);
contain: layout style paint;
}
.section__background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100dvh;
background-size: cover;
background-position: center center;
z-index: var(--z-background);
}
.bg-image {
width: 100%;
height: 100%;
min-height: 100dvh;
object-fit: cover;
object-position: center center;
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
transform: translateZ(0);
will-change: transform;
}
.content-wrapper {
position: relative;
z-index: var(--z-content);
width: 100%;
max-width: 75rem;
margin: 0 auto;
display: grid;
gap: var(--spacing-lg);
align-items: center;
}
/* ==========================================================================
4. Tipografia e Elementos de Texto
========================================================================== */
.main-title {
font-family: var(--font-title);
font-size: var(--font-title-size);
font-weight: 700;
text-transform: uppercase;
line-height: var(--line-height-tight);
}
.subtitle {
font-family: var(--font-subtitle);
font-size: var(--font-subtitle-size);
font-weight: 300;
text-transform: uppercase;
line-height: var(--line-height-tight);
margin: var(--spacing-xs) 0;
}
.quote {
font-family: var(--font-text);
font-size: var(--font-text-size);
font-weight: 300;
line-height: var(--line-height-base);
margin: var(--spacing-md) 0;
}
.emphasis {
color: var(--color-primary);
font-weight: 600;
}
/* ==========================================================================
5. Header e Navegação
========================================================================== */
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: var(--z-header);
padding: var(--spacing-lg) clamp(1.5rem, 7vw, 8rem) var(--spacing-md);
display: flex;
justify-content: space-between;
align-items: end;
transition: background-color var(--transition-normal) ease,
backdrop-filter var(--transition-normal) ease;
background: transparent;
}
.header--scrolled {
background: rgba(0, 0, 0, 0);
}
.header__logo {
display: block;
transition: transform var(--transition-normal) ease;
margin-right: auto;
}
.header__logo:hover {
transform: scale(1.05);
}
.header__logo-img {
height: clamp(3.125rem, 8dvh, 5rem);
width: auto;
display: block;
}
.header__hamburger {
background: none;
display: none;
border: none;
cursor: pointer;
z-index: calc(var(--z-menu) + 1);
padding: var(--spacing-sm) 0;
border-radius: var(--radius-sm);
transition: background-color var(--transition-normal) ease;
}
.header__hamburger span {
display: block;
width: 1.5625rem;
height: 0.1875rem;
background: var(--color-text-light);
margin: 0.3125rem 0;
transition: transform var(--transition-normal) var(--ease-out-cubic),
opacity var(--transition-normal) var(--ease-out-cubic);
}
.header__hamburger.active span:nth-child(1) {
transform: translateY(0.5rem) rotate(45deg);
}
.header__hamburger.active span:nth-child(2) {
opacity: 0;
}
.header__hamburger.active span:nth-child(3) {
transform: translateY(-0.5rem) rotate(-45deg);
}
.header__nav {
display: block;
}
.header__nav-list {
display: flex;
list-style: none;
gap: 0.9375rem;
margin: 0;
padding: 0;
align-items: center;
}
.header__nav-link {
color: var(--color-text-light);
text-decoration: none;
font-size: var(--font-subtitle-size);
font-weight: 500;
padding: var(--spacing-xs) 0 0 var(--spacing-sm);
border-radius: 0.375rem;
transition: all var(--transition-normal) ease;
position: relative;
display: inline-flex;
/* Para que o ícone fique ao lado do texto e não quebre a linha */
align-items: center;
/* Para alinhar verticalmente o texto e os ícones */
z-index: calc(var(--z-menu) + 10);
letter-spacing: 0.03125rem;
}
.header__nav-link:hover,
.header__nav-link:focus,
.header__nav-link.active {
color: var(--color-primary);
background: transparent;
/* remove a caixa */
text-decoration: none;
/* garante que não há underline */
}
.header__nav-link::after {
content: '';
position: absolute;
bottom: -0.125rem;
left: 50%;
width: 0;
height: 0.125rem;
background: var(--color-primary);
transition: all var(--transition-normal) ease;
transform: translateX(-50%);
display: block;
/* Mudar para block para ser visível quando width muda */
z-index: calc(var(--z-menu) + 1);
}
.header__nav-link.active {
color: var(--color-primary);
}
/* Estilos para o item do menu que tem um dropdown */
.header__nav-item--has-dropdown {
position: relative;
/* Essencial para posicionar o menu dropdown */
}
/* Container dos ícones - onde os SVGs se sobrepõem e são posicionados */
.icon-container {
position: absolute;
/* Posiciona o container de ícones relativo ao header__nav-link */
right: -1.5rem;
/* Alinha o container de ícones ao final (lado direito) do header__nav-link */
top: 50%;
transform: translateY(-10%);
/* Centraliza verticalmente o container de ícones */
width: 1.7em;
/* Define a largura fixa para o container dos ícones relativa ao pai*/
height: 1.7em;
/* Define a altura fixa para o container dos ícones */
overflow: hidden;
/* Garante que qualquer parte do SVG que saia dos limites do container seja cortada */
display: block;
/* Garante que o container ocupe seu espaço mesmo quando os SVGs estão absolutos */
}
/* Estilos para os ícones SVG dentro do icon-container */
.dropdown-arrow,
.dropdown-flower {
position: absolute;
/* Posiciona os dois ícones para se sobreporem dentro do icon-container */
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.5);
/* Centraliza os ícones DENTRO do icon-container e reduz */
width: 100%;
/* Ocupa a largura total do icon-container */
height: 100%;
/* Ocupa a altura total do icon-container */
vertical-align: middle;
/* Não é estritamente necessário com absolute, mas bom para consistência */
color: var(--color-text-light);
pointer-events: none;
/* Garante que os SVGs não atrapalhem eventos de clique no link pai */
}
/* Estilos iniciais da seta (visível por padrão) */
.dropdown-arrow {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) scale(0.5);
/* Posição inicial da seta */
transition:
transform var(--transition-normal) ease,
opacity var(--transition-normal) ease;
}
/* Estilos iniciais da flor (invisível e rotacionada/afastada para o efeito de "subir") */
.dropdown-flower {
opacity: 0;
color: var(--color-primary);
transform: translate(-50%, -50%) rotate(180deg) scale(0.6);
/* Ajuste o translateY (0%) para mais ou menos, ex: +20% para começar mais abaixo */
transition:
transform var(--transition-normal) ease,
opacity var(--transition-normal) ease;
transition-delay: var(--transition-normal);
/* A flor começa a animar depois que a seta termina */
}
/* ========================================================================= */
/* Efeitos de Hover/Focus (Quando o dropdown está "aberto") */
/* ========================================================================= */
/* Quando o pai (.header__nav-item--has-dropdown) está com hover ou foco */
.header__nav-item--has-dropdown:hover .icon-container .dropdown-arrow,
.header__nav-item--has-dropdown:focus-within .icon-container .dropdown-arrow {
opacity: 0;
/* Seta desaparece */
transform: translate(-50%, -50%) rotate(180deg) scale(0.8);
/* Gira e aumenta ligeiramente antes de desaparecer */
transition-delay: 0s;
/* Remove o delay para a seta desaparecer imediatamente ao hover */
color: var(--color-primary);
}
.header__nav-item--has-dropdown:hover .icon-container .dropdown-flower,
.header__nav-item--has-dropdown:focus-within .icon-container .dropdown-flower {
opacity: 1;
/* Flor aparece */
transform: translate(-50%, -50%) rotate(360deg) scale(0.9);
/* Retorna à posição original e aumenta para o tamanho final */
transition-delay: var(--transition-normal);
/* A flor começa a animar *depois* da seta */
color: var(--color-primary);
}
/* ========================================================================= */
/* Reset para quando o hover/focus termina - para animação de saída sequencial */
/* ========================================================================= */
/* Ao sair do hover/focus, a flor desaparece primeiro (sem delay) */
.header__nav-item--has-dropdown:not(:hover):not(:focus-within) .icon-container .dropdown-flower {
transition-delay: 0s;
}
/* Ao sair do hover/focus, a seta aparece depois que a flor sumiu (com delay) */
.header__nav-item--has-dropdown:not(:hover):not(:focus-within) .icon-container .dropdown-arrow {
transition-delay: var(--transition-normal);
}
/* Estilos para o container do menu dropdown */
.header__dropdown-menu {
position: absolute;
top: 100%;
left: 0%;
list-style: none;
margin: 0;
padding: var(--spacing-xs) 0;
background: transparent;
/* GARANTIDO: Fundo transparente */
backdrop-filter: blur(0.3rem);
/* Mantido para legibilidade. Se quiser *absolutamente nenhum* efeito, remova esta linha e a de -webkit-backdrop-filter. */
-webkit-backdrop-filter: blur(0.3rem);
border-radius: var(--radius-md);
box-shadow: none;
/* CORRIGIDO: Remove completamente a sombra que dava a aparência de caixa/cor */
width: 120%;
z-index: var(--z-menu);
/* Propriedades para o efeito "descer por baixo" */
max-height: 0;
/* Oculta por padrão */
overflow: hidden;
/* Garante que o conteúdo não vaze */
opacity: 0;
/* Oculta por padrão */
visibility: hidden;
/* Oculta por padrão */
pointer-events: none;
/* Impede interações quando oculto */
/* Ajuste a transição para incluir max-height e outros */
transition: max-height var(--transition-normal) ease,
opacity var(--transition-normal) ease,
visibility var(--transition-normal) ease;
}
/* Remove margens padrão dos itens de lista dentro do dropdown */
.header__dropdown-menu li {
margin: 0;
}
/* Estilos para os links dentro do dropdown */
.header__dropdown-link {
display: block;
/* Ocupa a largura total do item de lista */
padding: var(--spacing-xs) var(--spacing-sm);
color: var(--color-text-light);
text-decoration: none;
font-size: var(--font-subtitle-size);
/* Um pouco menor que os links do menu principal */
white-space: nowrap;
/* Impede que o texto quebre linha */
transition: background-color var(--transition-normal) ease, color var(--transition-normal) ease;
}
/* Efeito hover/focus para os links do dropdown */
.header__dropdown-link:hover,
.header__dropdown-link:focus {
background: transparent;
/* CORRIGIDO: Fundo transparente no hover, tal como nos links principais */
color: var(--color-primary);
/* Já estava correto para o rosa */
}
/* Mostra o dropdown quando o item pai é "hovered" ou "focused" */
.header__nav-item--has-dropdown:hover>.header__dropdown-menu,
.header__nav-item--has-dropdown:focus-within>.header__dropdown-menu {
max-height: 18.75rem;
/* altura máxima esperada do sub-menu */
opacity: 1;
visibility: visible;
pointer-events: auto;
/* Permite interações */
}
/* Menu Fullscreen */
.fullscreen-menu {
position: fixed;
top: 0;
right: 0;
width: 80vw;
min-width: 12.5rem;
height: 100dvh;
background: linear-gradient(to left,
rgba(0, 12, 51, 1) 0%,
rgba(0, 12, 51, 0.95) 80%,
rgba(0, 12, 51, 0.5) 90%,
rgba(0, 12, 51, 0.3) 95%,
transparent 100%);
z-index: var(--z-menu);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity var(--transition-slow) ease,
visibility var(--transition-slow) ease;
}
.fullscreen-menu__content {
width: 90%;
max-width: var(--max-content-width);
box-sizing: border-box;
/* Garante que padding e border não aumentam a largura */
display: flex;
/* Torne também este contentor flexbox */
flex-direction: column;
/* Organiza os itens (a lista) numa coluna */
align-items: center;
justify-content: center;
}
.fullscreen-menu.active {
opacity: 1;
visibility: visible;
}
.fullscreen-menu__list {
list-style: none;
text-align: left;
height: 80dvh;
width: 50dvh;
display: flex;
flex-direction: column;
justify-content: center;
/*Alinha os itens verticalmente ao centro dentro de .fullscreen-menu__list */
align-items: stretch;
/* Faz com que as ocupem 100% da largura disponível do .fullscreen-menu__list */
}
.fullscreen-menu__list li {
transform: translateY(1.25rem);
opacity: 0;
transition: transform var(--transition-slow) var(--ease-out-cubic),
opacity var(--transition-slow) var(--ease-out-cubic);
}
.fullscreen-menu.active .fullscreen-menu__list li {
transform: translateY(0);
opacity: 1;
}
.fullscreen-menu.active .fullscreen-menu__list li:nth-child(1) {
transition-delay: 0.1s;
}
.fullscreen-menu.active .fullscreen-menu__list li:nth-child(2) {
transition-delay: 0.2s;
}
.fullscreen-menu.active .fullscreen-menu__list li:nth-child(3) {
transition-delay: 0.3s;
}
.fullscreen-menu.active .fullscreen-menu__list li:nth-child(4) {
transition-delay: 0.4s;
}
.fullscreen-menu.active .fullscreen-menu__list li:nth-child(5) {
transition-delay: 0.5s;
}
.fullscreen-menu__list a {
color: var(--color-text-light);
text-decoration: none;
font-size: clamp(1.5rem, 1.5vw, 3rem);
font-weight: 300;
transition: color var(--transition-normal) ease,
transform var(--transition-normal) ease;
display: flex;
padding: var(--spacing-sm) var(--spacing-sm) 0 35%;
/* top, right, bottom, left */
}
.fullscreen-menu__list a:hover,
.fullscreen-menu__list a.active {
color: var(--color-primary);
transform: scale(1.05);
background: none;
}
.fullscreen-menu .menu-item-wrapper {
/* linha dos serviços e seta */
display: flex;
align-items: center;
justify-content: flex-start;
gap: var(--spacing-xs);
}
/* Ajustes para o link "Serviços" para que não pareça um botão */
.fullscreen-menu .menu-item-wrapper a {
/* linha dos serviços > "serviços"*/
padding: var(--spacing-sm) var(--spacing-sm) 0 35%;
background: none;
border-radius: 0;
}
/* Estilos para o sub-menu no fullscreen-menu */
.fullscreen-menu .submenu {
list-style: none;
padding-left: 35%;
margin-top: var(--spacing-xs);
max-height: 0;
overflow: hidden;
opacity: 1;
text-align: left;
visibility: hidden;
pointer-events: none;
transition: max-height 0.4s ease-out, opacity 0.4s ease-out, visibility 0.4s ease-out;
/* Transição suave */
}
.fullscreen-menu .has-submenu.submenu-open .submenu {
max-height: 31.25rem;
/* Altura suficiente para mostrar todos os sub-itens */
opacity: 1;
/* Torna o sub-menu visível */
visibility: visible;
/* Torna o sub-menu visível */
pointer-events: auto;
/* Permite interação do rato */
}
/* Ajuste no margin do item da lista principal para acomodar o sub-menu quando aberto */
.fullscreen-menu__list li.has-submenu.submenu-open {
margin-bottom: var(--spacing-lg);
/* Ajuste o espaçamento abaixo do item pai quando o sub-menu está aberto */
}
/* Estilos dos links dentro do sub-menu */
.fullscreen-menu .submenu li a {
font-size: clamp(1rem, 1.5vw, 1.5rem);
font-weight: 200;
padding: var(--spacing-sm) var(--spacing-sm) 0;
margin-bottom: 0;
/* Remova as transformações de translateY e opacity que vêm do .fullscreen-menu__list li */
transform: none;
opacity: 1;
transition: color var(--transition-normal) ease, transform var(--transition-normal) ease;
/* Mantém as transições do link */
}
/* Estilos para o botão de alternar sub-menu */
.fullscreen-menu .submenu-toggle {
/* seta */
background: none;
border: none;
color: var(--color-text-light);
font-size: clamp(1rem, 1.5vw, 1.5rem);
cursor: pointer;
padding: var(--spacing-xs);
display: flex;
align-items: center;
justify-content: center;
transition: transform var(--transition-normal) ease;
outline: none;
}
.fullscreen-menu .dropdown-arrow-FM:hover {
/* seta */
color: var(--color-primary);
}
/* Container dos ícones - onde os SVGs se sobrepõem e são posicionados */
.fullscreen-menu .icon-container-FM {
position: absolute;
/* Posiciona o container de ícones relativo ao header__nav-link */
width: 1.7em;
/* Define a largura fixa para o container dos ícones */
height: 1.7em;
/* Define a altura fixa para o container dos ícones */
overflow: hidden;
/* Garante que qualquer parte do SVG que saia dos limites do container seja cortada */
display: block;
/* Garante que o container ocupe seu espaço mesmo quando os SVGs estão absolutos */
}
/* Estilos para os ícones SVG dentro do icon-container */
.fullscreen-menu .dropdown-arrow-FM,
.fullscreen-menu .dropdown-flower-FM {
position: absolute;
/* Posiciona os dois ícones para se sobreporem dentro do icon-container */
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.5);
/* Centraliza os ícones DENTRO do icon-container e reduz */
width: 100%;
/* Ocupa a largura total do icon-container */
height: 100%;
/* Ocupa a altura total do icon-container */
vertical-align: middle;
/* Não é estritamente necessário com absolute, mas bom para consistência */
color: var(--color-text-light);
pointer-events: none;
/* Garante que os SVGs não atrapalhem eventos de clique no link pai */
transition:
transform var(--transition-normal) ease,
opacity var(--transition-normal) ease;
}
/* Estilos iniciais da seta (visível por padrão) */
.fullscreen-menu .dropdown-arrow-FM {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) scale(0.5);
/*transition-delay: var(--transition-normal); /* A seta "espera" a flor desaparecer para aparecer */
}
/* Estilos iniciais da flor (invisível e rotacionada/afastada para o efeito de "subir") */
.fullscreen-menu .dropdown-flower-FM {
opacity: 0;
color: var(--color-primary);
transform: translate(-50%, -50%) rotate(180deg) scale(0.6);
/* Ajuste o translateY (0%) para mais ou menos, ex: +20% para começar mais abaixo */
transition:
transform var(--transition-normal) ease,
opacity var(--transition-normal) ease;
}
/* Efeitos de Hover/Focus (Quando o dropdown está "aberto") */
.fullscreen-menu .submenu-toggle[aria-expanded="true"] .dropdown-arrow-FM {
opacity: 0;
/* Seta desaparece */
transform: translate(-50%, -50%) rotate(180deg) scale(0.8);
/* Gira e aumenta ligeiramente antes de desaparecer */
transition-delay: 0s;
/* Desaparece imediatamente ao expandir */
color: var(--color-primary);
}
.fullscreen-menu .submenu-toggle[aria-expanded="true"] .dropdown-flower-FM {
opacity: 1;
/* Flor aparece */
transform: translate(-50%, -50%) rotate(360deg) scale(0.9);
/* Retorna à posição original e aumenta para o tamanho final */
color: var(--color-primary);
}
/* Opcional: Se quiser que o botão mude de cor ao ser ativado/expandido */
.fullscreen-menu .submenu-toggle[aria-expanded="true"] {
color: var(--color-primary);
}
/* Ajustar a animação dos itens da lista principal para que o botão também apareça */
.fullscreen-menu.active .fullscreen-menu__list li {
transform: translateY(0);
opacity: 1;
}
/* ==========================================================================
footer: CTA Button , Ícones Sociais e Scroll Down icon
========================================================================== */
.footer {
z-index: var(--z-header);
}
/* As @property são essenciais para animar gradientes e outras propriedades customizadas.
Esta secção permanece inalterada. */
@supports (background: paint(worklet)) {
@property --gradient-angle {
syntax: "";
initial-value: 0deg;
inherits: false;
}
@property --gradient-angle-offset {
syntax: "";
initial-value: 0deg;
inherits: false;
}
@property --gradient-percent {
syntax: "";
initial-value: 5%;
inherits: false;
}
@property --gradient-shine {
syntax: "";
initial-value: white;
inherits: false;
}
}
/* Estilo principal do botão UNIFICADO */
.cta-button {
position: fixed;
right: var(--spacing-md);
bottom: var(--spacing-sm);
z-index: var(--z-floating);
display: flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
border-radius: var(--radius-xxl);
border: 0.125rem solid transparent;
cursor: pointer;
text-decoration: none;
line-height: 1.2;
outline-offset: 0.25rem;
color: var(--cta-text-light);
background:
linear-gradient(var(--color-primary-dark), var(--color-primary-dark)) padding-box,
/* Fundo interior */
conic-gradient(from var(--gradient-angle, 0deg),
transparent,
var(--color-primary) 20%,
var(--gradient-shine, green) 40%,
transparent 60%) border-box;
/* Borda brilhante */
background-clip: padding-box, border-box;
/* Mantido por segurança */
background-color: var(--color-primary-dark);
box-shadow: 0 0.625rem 1.875rem rgba(0, 0, 0, 0.3);
/*box-shadow: 0 0 0.5rem 0.1rem var(--color-primary);*/
overflow: hidden;
transition: all 0.6s var(--ease-in-out);
will-change: transform, opacity, width;
/*contain: layout paint;
/*
* ANIMAÇÃO ESTADO NORMAL:
* Declaração limpa usando a propriedade abreviada 'animation'.
* As duas animações são separadas por uma vírgula.
*/
animation:
gradient-angle var(--transition-xlong) linear infinite,
cta-float var(--transition-long) ease-in-out infinite;
}
/* ---------- Pseudo-elements DOTS & Shimmer ---------- */
.cta-button::before,
.cta-button::after {
content: "";
position: absolute;
inset-inline-start: 50%;
inset-block-start: 50%;
translate: -50% -50%;
pointer-events: none;
z-index: -1;
}
/* Dots Pattern */
.cta-button::before {
--size: calc(100% + 0.375rem);
--position: 0.125rem;
--space: calc(var(--position) * 2);
width: var(--size);
height: var(--size);
/* Cria os pontos */
background: radial-gradient(
circle at var(--position) var(--position),
white calc(var(--position) / 2),
transparent 0);
background-size: var(--space) var(--space);
background-repeat: space;
mask-image: conic-gradient(
/* Cria a máscara que gira */
from calc(var(--gradient-angle) + 150deg),
black,
transparent 10% 90%,
black);
border-radius: inherit;
opacity: 0.4;
}
/* Inner shimmer = brilho por cima dos pontos */
.cta-button::after {
width: 120%;
aspect-ratio: 1;
background: linear-gradient(
/* Cria o reflexo */
var(--gradient-angle),
transparent 50%,
var(--color-primary-dark),
transparent);
mask-image: radial-gradient(circle at bottom, transparent 60%, black);
/* Suaviza a forma do reflexo */
opacity: 0.9;
}
/* ===========================
Fallback só para Safari iOS
=========================== */
@supports (-webkit-touch-callout: none) {
.cta-button::before {
/* Safari não suporta calc() no conic-gradient */
-webkit-mask-image: conic-gradient(
from var(--gradient-angle, 0deg),
black,
transparent 10% 90%,
black
);
mask-image: conic-gradient(
from var(--gradient-angle, 0deg),
black,
transparent 10% 90%,
black
);
/* Simula o offset de +150deg */
transform: rotate(150deg);
}
.cta-button::after {
/* Safari também não gosta de var() em linear-gradient(angle) */
background: linear-gradient(
0deg,
transparent 50%,
var(--color-primary-dark),
transparent
);
/* Mantém a máscara */
-webkit-mask-image: radial-gradient(circle at bottom, transparent 60%, black);
mask-image: radial-gradient(circle at bottom, transparent 60%, black);
/* Aplica rotação para compensar o offset */
transform: rotate(150deg);
}
/* Animação de fallback para iOS (rotação do pseudo-elemento inteiro) */
.cta-button::before,
.cta-button::after {
animation: spin-ios var(--transition-xlong) linear infinite;
}
@keyframes spin-ios {
from { transform: rotate(150deg); }
to { transform: rotate(510deg); } /* 360 + 150 */
}
}
/*
* GESTÃO DE ANIMAÇÃO SINCRONIZADA
* Aplicamos a animação de rotação aos pseudo-elementos aqui.
* Isto garante que eles também recebem a animação e que o hover funciona.
*/
.cta-button::before,
.cta-button::after {
animation: gradient-angle var(--transition-xlong) linear infinite;
}
/*
* ESTADO HOVER/FOCUS:
* Sobrepomos a animação em TODOS os elementos para garantir a sincronização.
*/
.cta-button:is(:hover, :focus-visible),
.cta-button:is(:hover, :focus-visible)::before,
.cta-button:is(:hover, :focus-visible)::after {
animation-name: gradient-angle-reverse;
}
/* ---------- Icon & Text (Inalterado) ---------- */
.cta-button .cta-icon {
width: 1.5rem;
height: 1.5rem;
flex-shrink: 0;
transition: transform 0.6s ease-in-out;
}
.cta-button span {
font-weight: 500;
font-size: var(--font-subtitle-size);
white-space: nowrap;
max-width: 0;
margin-left: 0;
opacity: 0;
transition:
max-width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
margin-left 0.5s 0.1s cubic-bezier(0.34, 1.56, 0.64, 1),
opacity 0.5s 0.15s ease-in-out;
}
/* ---------- Hover & Focus States (Inalterado) ---------- */
.cta-button:hover,
.cta-button:focus-visible {
width: 12rem;
border-radius: 2rem;
justify-content: flex-start;
padding-left: 0.75rem;
background-color: var(--color-primary-dark);
box-shadow: 0 0.375rem 1.3rem rgba(0, 0, 0, 0.3);
}
.cta-button:hover .cta-icon,
.cta-button:focus-visible .cta-icon {
transform: rotate(-360deg);
}
.cta-button:hover span,
.cta-button:focus-visible span {
max-width: 6.3rem;
margin-left: 0.5rem;
opacity: 1;
}
.cta-button:focus-visible {
outline: 0.125rem solid var(--color-primary-light);
outline-offset: 0.1875rem;
box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.1);
}
/* ---------- Keyframes (Inalterado) ---------- */
@keyframes cta-float {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-0.6rem);
}
}
@keyframes gradient-angle {
from {
--gradient-angle: 0deg;
}
to {
--gradient-angle: 360deg;
}
}
@keyframes gradient-angle-reverse {
from {
--gradient-angle: 0deg;
}
to {
--gradient-angle: -360deg;
}
}
/* Animação não utilizada no código original, mas mantida caso seja necessária.
Se não for usada, pode ser removida. */
@keyframes breathe {
from,
to {
scale: 1;
}
50% {
scale: 1.2;
}
}
/* para fazer desaparecer no ultimo silde */
.cta-button.hidden {
opacity: 0;
transform: translateY(1rem);
pointer-events: none;
transition:
opacity 0.5s ease,
transform 0.5s ease,
visibility 0s 0.5s;
visibility: hidden;
}
/* Animação botão "Vamos conversar" */
.cta-button.bubble-pop {
animation: bubble-pop 0.6s ease-out forwards;
}
@keyframes bubble-pop {
0% {
transform: scale(1) translateY(0);
opacity: 1;
}
50% {
transform: scale(1.2) translateY(-0.6rem);
opacity: 0.6;
}
100% {
transform: scale(0.6) translateY(1.3rem);
opacity: 0;
}
}
/* Fallback para navegadores que não suportam @property (como o Safari) */
@supports not (animation: gradient-angle 1s) {
.cta-button {
position: relative;
overflow: hidden;
/* Usa uma borda estática bonita como base */
border: 2px solid var(--color-primary-light);
background-clip: padding-box;
}
/* Remove as animações que não funcionam */
.cta-button::before,
.cta-button::after {
display: none;
}
/* Novo pseudo-elemento para criar um efeito de brilho que se move */
.cta-button::after {
display: block;
/* Garante que este after seja usado */
content: "";
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: conic-gradient(transparent,
rgba(255, 255, 255, 0.4),
transparent 30%);
animation: safari-shine 4s linear infinite;
z-index: 1;
}
/* Animação de rotação para o brilho */
@keyframes safari-shine {
to {
transform: rotate(360deg);
}
}
/* Garante que o conteúdo do botão fique por cima do brilho */
.cta-button .cta-icon,
.cta-button span {
position: relative;
z-index: 2;
}
}
/* Scroll Down icon */
.scroll-indicator {
position: fixed;
bottom: var(--spacing-sm);
left: 50%;
transform: translateX(-50%);
height: 3rem;
display: flex;
/* Adiciona flexbox */
align-items: center;
/* Centraliza verticalmente os itens filhos */
justify-content: center;
/* Centraliza horizontalmente os itens filhos */
z-index: var(--z-content);
}
/* Esta classe será adicionada pelo JavaScript para esconder o elemento */
.scroll-indicator.hide {
opacity: 0;
pointer-events: none;
/* Impede que seja clicável quando invisível */
}
#mouse_body {
border: 0.125rem solid rgb(255, 255, 255, 0.6);
border-radius: 2rem;
width: clamp(0.9rem, 1.4vw, 1.2rem);
height: clamp(1.5rem, 2.5vw, 2.2rem);
margin: 0;
}
#mouse_wheel {
border: 0.125rem solid #F8B805;
border-radius: var(--radius-md);
background-color: #F8B805;
position: relative;
height: clamp(0.15rem, 0.3vw, 0.2rem);
width: clamp(0.15rem, 0.3vw, 0.2rem);
margin: 0 auto;
animation: wheel_animation 1.5s linear infinite;
}
@keyframes wheel_animation {
0% {
opacity: 0;
top: 0.15rem;
}
50% {
opacity: 1;
top: 50%;
}
100% {
opacity: 0;
top: 1.5rem;
}
}
/* Aplica em todos os tamanhos de ecrã */
.social-icons-fixed {
position: fixed;
height: 3rem;
bottom: var(--spacing-sm);
right: auto;
padding: 0 clamp(3rem, 7vw, 8rem);
display: flex;
align-items: center;
justify-content: center;
gap: 1.2rem;
z-index: var(--z-floating);
}
/* Ícones */
.social-icons-fixed a img {
display: block;
width: clamp(0.9rem, 2.3vw, 1rem);
height: clamp(0.9rem, 2.3vw, 1rem);
transition: transform 0.3s ease, filter 0.3s ease;
}
.social-icons-fixed a:hover img,
.social-icons-fixed a:focus img {
transform: scale(1.3);
}
/* Botão Mute no Footer - ESTILO ATUALIZADO */
.social-icons-fixed #mute-button {
background: none;
border: none;
cursor: pointer;
color: var(--color-text-light);
transition: transform var(--transition-normal) ease;
padding: 0 0 0 var(--spacing-sm);
display: flex;
justify-content: center;
align-items: center;
height: clamp(0.9rem, 2.3vw, 1rem);
/* Força a altura a ser igual aos outros ícones */
overflow: hidden;
}
.social-icons-fixed #mute-button .mute-icon,
.social-icons-fixed #mute-button .unmute-icon {
width: clamp(1.8rem, 2.3vw, 2rem);
height: auto;
transition: transform 0.3s ease, filter 0.3s ease;
}
.social-icons-fixed #mute-button:hover {
transform: scale(1.3);
}
.social-icons-fixed #mute-button .hidden {
display: none;
}
/* Animações para as ondas som ATIVO*/
.sound-toggle:not(.is-muted) .sound-wave-1 {
animation: soundWave1 1.5s infinite ease-in-out;
}
.sound-toggle:not(.is-muted) .sound-wave-2 {
animation: soundWave2 1.5s infinite ease-in-out;
}
@keyframes soundWave1 {
0% {
transform: translateY(0);
opacity: 1;
}
50% {
transform: translateY(-2px);
opacity: 0.7;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
@keyframes soundWave2 {
0% {
transform: translateY(0);
opacity: 0.4;
}
50% {
transform: translateY(2px);
opacity: 0.8;
}
100% {
transform: translateY(0);
opacity: 0.4;
}
}
/* ==========================================================================
7. Secções Específicas
========================================================================== */
/* Home Section */
.home-section {
background: #BA729C;
}
.home-section .content-wrapper {
grid-template-areas:
"title quotes";
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
gap: 10rem;
align-items: flex-start;
padding: var(--spacing-sm) var(--spacing-md);
height: 100%;
min-height: 40dvh;
max-height: 60dvh;
width: 90vw;
z-index: var(--z-content);
}
.home-section .title-block {
grid-area: title;
text-align: left;
align-self: center;
margin-top: 0rem;
}
.home-section .quotes-block {
grid-area: quotes;
text-align: right;
align-self: center;
justify-self: end;
margin-top: 3rem;
z-index: var(--z-content);
}
.home-section__scenery {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: var(--z-background);
pointer-events: none;
}
/* Elementos decorativos da home */
.water-container {
position: absolute;
left: 0;
width: 100%;
bottom: 0;
height: 30dvh;
overflow: hidden;
}
.water {
position: absolute;
width: 100%;
height: 100%;
bottom: 0;
will-change: transform;
animation: water-movement 8s ease-in-out infinite;
}
@keyframes water-movement {
0%,
100% {
transform: scaleY(1) translateY(0);
}
50% {
transform: scaleY(1.05) translateY(0.6rem);
}
}
/* para reduzir a carga de animação em dispositivos móveis */ /*
@supports (-webkit-touch-callout: none) {
.tree,
.water,
.character,
.characterflutuante,
.leaf,
.petala4 {
animation: none !important;
will-change: auto !important;
}
}
/* Otimizações específicas para Safari */ /*
@media screen and (-webkit-min-device-pixel-ratio: 1) {
.tree,
.water,
.character,
.characterflutuante,
.leaf,
.petala4 {
animation-duration: 12s !important;
/* Reduz frequência das animações *//*
will-change: transform;
}
.tree-container {
/* Garante que o container se comporta como esperado *//*
display: block;
position: absolute;
}
.tree {
/* Força a posição e transformação de forma explícita para o Safari *//*
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
/* Reescreva a animação especificamente para webkit para evitar conflitos *//*
@-webkit-keyframes tree-sway-safari {
0%,
100% {
-webkit-transform: translateX(-50%) rotate(-1.5deg);
}
50% {
-webkit-transform: translateX(-50%) rotate(1.5deg);
}
}
.tree {
-webkit-animation: tree-sway-safari 8s ease-in-out infinite;
animation: none;
/* Desativa a animação padrão *//*
}
}
/* Reduzir animações em dispositivos com pouca bateria */
@media (prefers-reduced-motion: reduce) {
/* .tree,
.water,
.character,
.characterflutuante,*/
.leaf,
.petala4 {
animation: none !important;
}
}
.tree-container {
position: absolute;
bottom: 24dvh;
left: 50%;
transform: translateX(-50%);
/* Correção específica para Safari */
-webkit-transform: translateX(-50%);
}
.ramo1,
.ramo2 {
display: none;
}
.land {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
height: clamp(5rem, 20dvh, 15rem);
width: auto;
filter: drop-shadow(0 0.6rem 1.3rem rgba(0, 0, 0, 0.3));
}
.tree {
position: relative;
bottom: clamp(4rem, 17dvh, 13rem);
height: clamp(13.12rem, 52dvh, 50rem);
width: auto;
filter: drop-shadow(0 0.6rem 1.3rem rgba(0, 0, 0, 0.3));
will-change: transform;
transform-origin: bottom center;
-webkit-transform-origin: bottom center;
animation: tree-sway 8s ease-in-out infinite; /* Animação única */
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
@keyframes tree-sway {
0%, 100% {
-webkit-transform: rotate(-1.5deg) translateZ(0);
transform: rotate(-1.5deg) translateZ(0);
}
25% {
-webkit-transform: rotate(0.5deg) translateZ(0);
transform: rotate(0.5deg) translateZ(0);
}
50% {
-webkit-transform: rotate(1.5deg) translateZ(0);
transform: rotate(1.5deg) translateZ(0);
}
75% {
-webkit-transform: rotate(-0.5deg) translateZ(0);
transform: rotate(-0.5deg) translateZ(0);
}
}
/* Folhas a cair */
.leaves-container {
position: absolute;
bottom: clamp(10rem, 36dvh, 35rem);
/* dependo do tamanho da arvore e do monte */
left: 50%;
transform: translateX(-60%);
height: clamp(6rem, 25dvh, 20rem);
width: clamp(6rem, 25dvh, 20rem);
pointer-events: none;
z-index: var(--z-content);
}
.leaf {
position: absolute;
width: clamp(0.37rem, 1.5dvh, 0.75rem);
height: clamp(0.37rem, 1.5dvh, 0.75rem);
background: #e18dd6;
border-radius: 0 50% 0 50%;
will-change: transform;
}
.falling-branch {
position: absolute;
z-index: 5;
max-width: 10dvh;
max-height: 10dvh;
pointer-events: none;
}
.character-container {
position: absolute;
bottom: 3%;
right: 25%;
width: 30dvh;
max-width: 12.5rem;
z-index: var(--z-floating);
}
.character-wrapper {
will-change: transform;
}
.character {
height: 36dvh;
width: auto;
filter: drop-shadow(0 0.6rem 1.3rem rgba(0, 0, 0, 0.3));
animation: character-movement 8s ease-in-out infinite;
will-change: transform;
z-index: var(--z-floating);
}
@keyframes character-movement {
0%, 100% {
transform: scale(1) translateY(0);
}
50% {
transform: scale(1.02) translateY(-0.8rem);
}
}
/* ==================================================================
Sobre Section
===============================================================*/
.sobre-section {
background: #000C33;
}
.sobre-section .content-wrapper {
grid-template-areas:
". ."
"quotes title";
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
column-gap: 3rem;
padding: var(--spacing-sm) var(--spacing-md);
align-items: center;
height: 100%;
min-height: 40dvh;
max-height: 60dvh;
width: 90vw;
/* align-items: flex-start; /* ALTERADO: Alinha os itens ao topo do contentor */
z-index: var(--z-content);
}
.sobre-section .title-block {
position: relative;
bottom: 10%;
grid-area: title;
margin-top: clamp(5dvh, 25%, 20dvh);
text-align: right;
justify-self: end;
}
.sobre-section .quotes-block {
grid-area: quotes;
text-align: left;
align-self: center;
justify-self: start;
margin-top: clamp(5dvh, 25%, 20dvh);
}
.elementos-container {
position: absolute;
bottom: 0;
width: 100%;
height: 55dvh;
z-index: var(--z-content);
overflow: hidden;
pointer-events: none;
}
.petala1,
.petala2,
.petala3,
.petala4 {
position: absolute;
filter: drop-shadow(0 0.6rem 1.3rem rgba(0, 0, 0, 0.3));
will-change: transform;
opacity: 0.8;
z-index: var(--z-floating);
}
.petala4 {
left: 40%;
bottom: 10dvh;
height: 15dvh;
width: auto;
animation: petala-movement 10s ease-in-out infinite;
}
@keyframes petala-movement {
0%,
100% {
transform: scale(1) rotate(0deg);
}
50% {
transform: scale(1.1) rotate(5deg) translateY(-0.3rem);
}
}
/*==========================================================================
Serviços Section
========================================================================== */
.servicos-section {
background: #000C33;
}
.servicos-section .content-wrapper {
display: grid;
grid-template-areas:
"title quotes";
grid-template-columns: auto 1fr;
grid-template-rows: auto;
gap: 2.5rem;
align-items: flex-start;
padding: var(--spacing-sm) var(--spacing-md);
height: 100%;
min-height: 40dvh;
max-height: 60dvh;
width: 90vw;
z-index: var(--z-content);
}
.servicos-section .title-block {
grid-area: title;
text-align: left;
align-self: start;
}
.servicos-section .quotes-block {
grid-area: quotes;
width: 80%;
min-width: 12.5rem;
text-align: justify;
/* Opcional: Para controlar a última linha */
align-self: start;
justify-self: end;
}
.services__tags {
display: flex;
flex-wrap: wrap;
justify-content: left;
gap: var(--spacing-xs);
margin-top: var(--spacing-md);
font-family: var(--font-subtitle);
font-size: var(--font-subtitle-size);
font-weight: 400;
text-transform: uppercase;
line-height: var(--line-height-tight);
list-style-type: none; /* Remove os marcadores redondos */
padding-left: 0; /* Remove o recuo padrão do lado esquerdo da lista */
}
/* Estilo para os links das tags de serviço */
.services__tags .service-tag-link {
color: #64C3A3;
text-decoration: none;
transition: color 0.3s ease;
white-space: nowrap;
}
.services__tags li:not(:last-child)::after {
content: " | ";
color: #64C3A3;
white-space: nowrap;
}
/* Efeito hover para os links das tags de serviço */
.services__tags .service-tag-link:hover,
.services__tags .service-tag-link:focus {
color: #F8B805;
}
.servicos-button {
display: block;
margin-top: var(--spacing-md);
z-index: var(--z-floating);
}
.servicos-button a {
display: inline-block;
padding: var(--spacing-sm) var(--spacing-xl);
background: transparent;
border: 0.03125rem solid var(--color-contact-border);
color: var(--color-text-light);
text-decoration: none;
border-radius: var(--radius-xxl);
font-weight: normal;
font-size: var(--font-text-size);
box-shadow: 0 0.625rem 1.875rem rgba(0, 0, 0, 0.3);
transition: transform var(--transition-normal) ease,
box-shadow var(--transition-normal) ease;
will-change: transform;
}
.servicos-button a:hover,
.servicos-button a:focus {
background: none !important;
background-color: #B60E54 !important;
border: none;
color: #ffffff !important;
transform: translateY(-0.1875rem);
box-shadow:
0 0.75rem 1.5625rem rgba(255, 0, 140, 0.158),
0 0.5rem 0.9375rem rgba(255, 0, 142, 0.2);
}
.characterflutuante-container {
position: absolute;
bottom: 5dvh;
right: 30%;
width: 25dvh;
max-width: 12.5rem;
z-index: var(--z-floating);
pointer-events: none;
}
.characterflutuante {
height: 30dvh;
width: auto;
filter: drop-shadow(0 0.625rem 1.25rem rgba(0, 0, 0, 0.3));
will-change: transform;
animation: character-float 10s ease-in-out infinite;
}
@keyframes character-float {
0%,
100% {
transform: scale(1) translateY(0);
}
50% {
transform: scale(1.03) translateY(0.9375rem);
}
}
/* ==========================================================================
8. Portfólio Section - Carrossel Otimizado
========================================================================== */
.portfolio-section {
background: #000C33;
height: 100dvh;
padding: var(--spacing-lg) var(--spacing-md);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.portfolio-section .content-wrapper {
display: grid;
grid-template-areas:
"title"
"quotes"
"carousel";
grid-template-rows: auto auto 1fr;
grid-template-columns: 1fr;
gap: var(--spacing-xs);
width: 100%;
max-width: var(--max-content-width);
height: 80dvh;
padding: calc(clamp(1.6rem, 3dvh, 3.8rem) + var(--spacing-sm) + var(--spacing-md)) var(--spacing-md) calc(var(--spacing-sm) + 1rem);
text-align: center;
}
.portfolio-section .title-block {
grid-area: title;
}
.portfolio-section .main-title {
font-size: clamp(1.4rem, 3vw, 2.1rem);
}
.portfolio-section .quotes-block {
grid-area: quotes;
}
.portfolio-section .quote {
font-size: var(--font-text-size);
/*font-size: clamp(1rem, 2.5vw, 1rem);
/* não faz sentido! sempre 1rem! verificar */
line-height: var(--line-height-base);
margin: 0;
}
/* Carrossel Container */
.portfolio__carousel-wrapper {
grid-area: carousel;
width: 100%;
height: 100%;
max-height: 50dvh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
position: relative;
perspective: var(--breakpoint-xl);
}
.swiper {
width: 100%;
height: 100%;
}
.swiper-slide {
height: clamp(18.8rem, 45dvh, 37.5rem);
max-height: 95%;
aspect-ratio: 5 / 6;
/* para imagens de 1000x1200 */
width: auto;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transform-style: preserve-3d;
backface-visibility: hidden;
overflow: hidden;
border-radius: var(--radius-lg);
cursor: pointer;
}
/* Card do Projeto */
.carousel-item {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
overflow: hidden;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-heavy);
font-size: calc(0.9vw + 0.6rem);
/* Forçar camada GPU */
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.carousel-item__inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.6s ease-in-out;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
display: flex;
flex-direction: column;
/* Forçar camada GPU */
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.carousel-item.flipped .carousel-item__inner {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
/* Correção principal para Safari - Frente e Verso das Cards */
.carousel-item__front,
.carousel-item__back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
border-radius: var(--radius-lg);
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
overflow: hidden;
/* Forçar renderização em camadas separadas */
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-perspective: 1000px;
perspective: 1000px;
}
.carousel-item__front {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
backdrop-filter: blur(0.95rem);
-webkit-backdrop-filter: blur(0.95rem);
border: none;
/* Garantir que está na frente */
z-index: 2;
-webkit-transform: rotateY(0deg) translateZ(1px);
transform: rotateY(0deg) translateZ(1px);
}
.carousel-item__back {
background: rgb(11, 11, 11);
/* backdrop-filter: blur(0.95rem);
-webkit-backdrop-filter: blur(0.95rem); */
border: none;
align-items: center;
justify-content: center;
padding: var(--spacing-md);
/* Garantir que está atrás */
z-index: 1;
-webkit-transform: rotateY(180deg) translateZ(1px);
transform: rotateY(180deg) translateZ(1px);
}
/* Correções específicas para Safari/iOS */
@supports (-webkit-touch-callout: none) {
/* Desativar animações intensivas em dispositivos touch */
.tree,
.water,
.character,
.characterflutuante,
.leaf,
.petala4 {
animation: none !important;
will-change: auto !important;
}
/* Simplificar cards para dispositivos touch */
.carousel-item__inner {
transition: transform 0.3s ease-out;
}
.carousel-item__front,
.carousel-item__back {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.carousel-item__back {
-webkit-transform: rotateY(180deg) translateZ(0);
transform: rotateY(180deg) translateZ(0);
}
}
/* Correções específicas para Safari desktop */
@media screen and (-webkit-min-device-pixel-ratio: 1) and (min-width: 768px) {
.carousel-item__inner {
-webkit-perspective: 1000px;
perspective: 1000px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.carousel-item.flipped .carousel-item__inner {
-webkit-transform: rotateY(180deg) translateZ(0);
transform: rotateY(180deg) translateZ(0);
}
.carousel-item__front {
-webkit-transform: rotateY(0deg) translateZ(2px);
transform: rotateY(0deg) translateZ(2px);
}
.carousel-item__back {
-webkit-transform: rotateY(180deg) translateZ(2px);
transform: rotateY(180deg) translateZ(2px);
}
}
/* Imagem do Projeto */
.carousel-item__image {
width: 100%;
height: 60%;
/* ALTERADO: Reduzido de 70% para 65% */
overflow: hidden;
flex-shrink: 0;
flex-grow: 1;
display: flex;
justify-content: center;
align-items: center;
}
.carousel-item__image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transition: transform var(--transition-slow);
}
.carousel-item:hover .carousel-item__image img {
transform: scale(1.05);
}
/* Conteúdo do Card */
.carousel-item__content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 40%;
max-height: 10rem;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
text-align: center;
padding: 0 var(--spacing-sm);
background: linear-gradient(to top,
rgba(0, 20, 40, 0.95) 0%,
rgba(0, 20, 40, 0.95) 20%,
rgba(0, 20, 40, 0.85) 40%,
rgba(0, 20, 40, 0.3) 80%,
transparent 100%);
z-index: var(--z-modal);
}
.carousel-item__title {
max-height: 3.4rem;
font-size: clamp(0.6rem, 4.5vw, 1rem);
padding: 0.1875rem 0;
overflow: hidden;
line-height: 1.2;
white-space: normal;
text-overflow: ellipsis;
flex-grow: 0;
color: var(--color-white);
font-weight: 700;
text-transform: uppercase;
/* ADICIONADO: Para que o texto fique todo em maiúsculas */
}
.carousel-item__category {
flex-grow: 1;
flex-shrink: 1;
line-height: 1;
overflow: hidden;
/* Mantido para evitar scroll */
color: var(--color-accent);
margin: var(--spacing-xs) 0;
font-size: clamp(0.75rem, 3.5vw, 1rem);
/* AJUSTADO: Mínimo de 12px para boa leitura */
text-overflow: ellipsis;
/* Para que o texto cortado mostre "..." */
white-space: nowrap;
/* Garante que o ellipsis funciona em linha única */
/* NOVAS PROPRIEDADES PARA A CATEGORIA: */
font-weight: 300;
/* ADICIONADO: Para que seja "light" */
}
.btn-view-project {
flex-shrink: 0;
flex-grow: 0;
background: var(--gradient-primary);
color: var(--color-white);
border: none;
padding: var(--spacing-xs);
border-radius: var(--radius-xl);
font-weight: 300;
font-size: var(--font-text-size);
cursor: pointer;
transition: all var(--transition-normal);
gap: var(--spacing-xs);
/* margin-top: auto; */
/* REMOVA ESTA LINHA */
margin-bottom: 1rem;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
min-height: 2rem;
}
.btn-view-project:hover,
.btn-view-project:focus {
transform: translateY(-0.125rem);
box-shadow: var(--shadow-medium);
}
/* Conteúdo do Verso */
.carousel-item__back-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
max-height: 100%;
display: flex;
/* ESSENCIAL para layout flexível */
flex-direction: column;
/* ESSENCIAL para empilhar verticalmente */
justify-content: space-between;
align-items: center;
text-align: center;
padding: var(--spacing-md);
z-index: var(--z-modal);
overflow: hidden;
}
.carousel-item__back-title {
height: auto;
font-size: clamp(0.875rem, 3.5vw, 1.125rem);
padding: 0.1875rem 0;
overflow: hidden;
line-height: 1.2;
white-space: normal;
text-overflow: ellipsis;
flex-grow: 0;
color: var(--color-primary);
font-weight: 600;
/* Mantido como semibold */
/* text-transform (se estiver aqui, manter como definido na interação anterior) */
}
.carousel-item__back-description {
font-size: clamp(0.9rem, 2vw, 1rem);
/* AJUSTADO: Reduzido de (1rem, 2.2vw, 1.1rem) para ser mais compacto */
flex-grow: 1;
flex-shrink: 1;
line-height: 1.3;
overflow: hidden;
display: -webkit-box;
--webkit-line-clamp: 4;
/* Manter limite de linhas, ajuste se necessário */
--webkit-box-orient: vertical;
color: var(--color-white);
margin: var(--spacing-xs) 0;
font-weight: 300;
overflow-y: auto;
-webkit-overflow-scrolling: touch; /* Ativa o scroll nativo e fluído no iOS */
/* Opcional, mas recomendado: impede que o Swiper capture eventos de toque nesta área */
touch-action: pan-y; /* Informa o navegador que este elemento só deve responder a gestos de scroll vertical */
}
.carousel-item__back-description::-webkit-scrollbar {
display: none;
}
.carousel-item__back-description {
scrollbar-width: none;
}
.carousel-item__back-link {
flex-shrink: 0;
flex-grow: 0;
background: var(--gradient-primary);
/**background: var(--gradient-secondary);*/
color: var(--color-white);
border: none;
padding: var(--spacing-xs);
border-radius: var(--radius-xl);
font-weight: 300;
font-size: 0.8rem;
cursor: pointer;
transition: all var(--transition-normal);
gap: var(--spacing-xs) var(--spacing-xs);
text-decoration: none;
margin-bottom: 0.5rem;
justify-content: center;
align-items: center;
text-align: center;
max-height: 2rem;
}
.carousel-item__back-link:hover,
.carousel-item__back-link:focus {
transform: translateY(-0.125rem);
box-shadow: var(--shadow-medium);
}
.btn-flip-back {
background: transparent;
margin-bottom: 0.125rem;
color: var(--color-white);
border: 0.125rem solid var(--color-white);
gap: var(--spacing-xs) var(--spacing-xs);
padding: var(--spacing-xs) var(--spacing-md);
border-radius: var(--radius-xl);
font-weight: 400;
cursor: pointer;
transition: all var(--transition-normal);
max-height: 2rem;
}
.btn-flip-back:hover,
.btn-flip-back:focus {
background: var(--color-white);
color: var(--color-black);
}
/* Navegação do Swiper */
.swiper-button-next,
.swiper-button-prev {
color: var(--color-primary);
/* Mantém a cor da seta */
width: 3.125rem;
height: 3.125rem;
border-radius: 0;
/* Altere para 0 para remover as bordas arredondadas */
background: transparent;
/* Altere para transparente para remover o fundo */
backdrop-filter: none;
/* Remova ou defina como none */
-webkit-backdrop-filter: none;
/* Remova ou defina como none */
border: none;
/* Remova a borda */
transition: all var(--transition-normal);
}
/* Os estilos de hover podem ser mantidos ou ajustados, conforme desejar */
.swiper-button-next:hover,
.swiper-button-prev:hover {
background: transparent;
/* Mantenha transparente no hover se não quiser fundo */
transform: scale(1.5);
/* Mantém o efeito de escala no hover */
}
.swiper-button-next::after,
.swiper-button-prev::after {
font-size: 1.5rem !important;
}
/* Paginação do Swiper */
.swiper-pagination {
position: absolute;
bottom: -3rem;
left: 50%;
transform: translateX(-50%);
z-index: var(--z-modal);
display: flex;
gap: 0.5rem;
justify-content: center;
align-items: center;
width: auto;
}
.swiper-pagination-bullet {
background: rgba(255, 255, 255, 0.4);
opacity: 1;
transition: all var(--transition-fast);
}
.swiper-pagination-bullet-active {
background: var(--color-primary);
transform: scale(1.2);
}
/* ==========================================================================
9. Contactos Section
========================================================================== */
.contactos-section {
background: #000C33;
min-height: 100dvh;
position: relative;
padding-bottom: 6rem;
}
.contactos-section .contact__container {
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: var(--z-content);
display: grid;
grid-template-areas:
"form title"
"form contacto";
grid-template-columns: auto auto;
grid-template-rows: min-content 1fr;
/* /* 'min-content' para a primeira linha, '1fr' para a segunda ocupar o resto do espaço. */
column-gap: var(--spacing-lg);
/* tamanhos diferentes para o gap das linhas, mais pequeno */
row-gap: var(--spacing-xs);
max-width: var(--breakpoint-xl);
width: 100%;
height: Auto;
padding: 0 var(--spacing-lg);
margin: 0;
}
/* css do titulo */
.contactos-section .content-wrapper {
grid-area: title;
text-align: left;
align-self: start;
padding: 0 var(--spacing-sm) 0 0;
}
.contactos-section .content-wrapper .main-title {
margin-bottom: var(--spacing-xs);
}
.contactos-section .content-wrapper .subtitle {
margin-top: 0;
}
/* css do Informações de contacto */
.contactos-section .contact__info {
grid-area: contacto;
text-align: left;
display: grid;
gap: 0;
padding: 0;
padding: 0 var(--spacing-sm) 0 0;
}
.contactos-section .contact__info .info-item {
font-style: normal;
padding: 0;
gap: 0;
margin: 0;
max-height: 15dvh;
}
.contactos-section .contact__info .info-item a {
color: var(--color-text-light);
text-decoration: none;
display: block;
margin: 0;
gap: 0;
padding: 0 0 var(--spacing-sm);
}
.contactos-section .contact__info .info-item a:hover,
.contactos-section .contact__info .info-item a:focus {
color: var(--color-primary-light);
background: rgba(255, 255, 255, 0.05);
padding-left: var(--spacing-xs);
}
.contactos-section .contact__info .info-item small {
font-size: var(--font-text-size);
color: rgba(255, 255, 255, 0.8);
display: block;
margin-top: 0.125rem;
}
.contactos-section .contact__info .contact-icon {
width: 1em;
height: 1em;
vertical-align: middle;
margin-right: 0.25em;
color: var(--color-primary);
}
/* css do Formulário */
.contactos-section .contact__form-wrapper {
grid-area: form;
justify-self: end;
width: 30vw;
max-width: 29rem;
min-width: 15rem;
padding: 0 0 var(--spacing-xs) var(--spacing-md);
}
.contactos-section .contact__form-wrapper fieldset {
border: none;
margin: 0;
padding: 0;
}
.contactos-section .contact__form-wrapper .form-group {
margin-bottom: var(--spacing-xs);
}
.contactos-section .contact__form-wrapper .form-group input,
.contactos-section .contact__form-wrapper .form-group textarea {
width: 100%;
padding: var(--spacing-xs);
border: 0.125rem solid rgba(255, 255, 255, 0.2);
border-radius: var(--radius-xxl);
font-size: var(--font-text-size);
font-family: inherit;
background: var(--color-contact-background);
transition: border-color var(--transition-normal) ease,
box-shadow var(--transition-normal) ease,
background var(--transition-normal) ease;
}
.contactos-section .contact__form-wrapper .form-group textarea {
min-height: 5rem;
resize: vertical;
border-radius: var(--radius-xl);
}
.contactos-section .contact__form-wrapper .form-group input::placeholder,
.contactos-section .contact__form-wrapper .form-group textarea::placeholder {
color: var(--color-text-dark);
}
.contactos-section .contact__form-wrapper .form-group input:focus,
.contactos-section .contact__form-wrapper .form-group textarea:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 0.19rem rgba(255, 0, 142, 0.2);
background: rgba(255, 255, 255, 0.15);
color: rgb(255, 255, 255);
}
.form-errors {
padding: 0 1rem 0.5rem;
font-family: inherit;
font-size: var(--font-text-size);
color: var(--color-erro);
text-align: left;
}
.form-errors[hidden] {
display: none !important;
}
#contact-form button {
background: var(--gradient-primary);
color: var(--color-text-light);
border: none;
padding: 1rem 1.5rem;
/* altura confortável */
height: auto;
/* deixa o padding controlar */
border-radius: var(--radius-xxl);
font-size: 1rem;
font-weight: normal;
cursor: pointer;
transition: transform var(--transition-normal) ease,
box-shadow var(--transition-normal) ease;
width: 100%;
will-change: transform;
}
#contact-form button:hover,
#contact-form button:focus {
background: none !important;
background-color: #B60E54 !important;
color: #ffffff !important;
transform: translateY(-0.125rem);
box-shadow:
0 0.75rem 1.5625rem rgba(255, 0, 140, 0.158),
0 0.5rem 0.9375rem rgba(255, 0, 142, 0.2);
}
#contact-form button:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
/* bolhas */
.contactos-section .bolhas_container {
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
width: 100%;
height: 100%;
z-index: var(--z-background);
overflow: hidden;
pointer-events: none;
}
.bolha1,
.bolha2,
.bolha3,
.bolha4 {
position: absolute;
filter: drop-shadow(0 0.625rem 1.25rem rgba(0, 0, 0, 0.3));
opacity: 0;
will-change: transform, opacity;
}
.floating-Bubble {
position: absolute;
z-index: 5;
pointer-events: none;
}
/* Terms */
.terms__text {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: var(--spacing-sm);
margin-top: auto;
padding-bottom: 1rem;
text-align: center;
font-size: clamp(0.6rem, 2vw, 0.75rem);
color: var(--color-text-light);
line-height: 1.6;
min-width: 18.75rem;
z-index: 1;
}
.terms__text a {
color: var(--color-primary-light);
text-decoration: none;
transition: color var(--transition-normal) ease;
}
.terms__text a:hover,
.terms__text a:focus {
color: var(--color-primary);
}
/* ==========================================================================
10. Animações e Estados
========================================================================== */
.anim-text,
/* para depois o script transformar*/
.anim-fade {
opacity: 0;
transform: translateY(5rem);
will-change: transform, opacity;
}
.anim-text.animated,
.anim-fade.animated {
opacity: 1;
transform: translateY(0);
}
/* ==========================================================================
11. Responsividade e Media Queries
========================================================================== */
/* Tablet 992px 62rem */
@media (max-width: 62rem) {
:root {
--spacing-md: 1rem;
--spacing-lg: 1.5rem;
--spacing-xl: 2rem;
--spacing-xxl: 2.5rem;
}
.section {
padding: 0 var(--spacing-md);
height: 100dvh;
min-height: 100dvh;
}
.content-wrapper {
gap: 0 var(--spacing-md);
}
}
/* Mobile -- 48rem 768px */
/* Em ecrãs estreitos, desloca para a direita */
@media (max-width: 48rem) {
.sobre-section,
.servicos-section,
.portfolio-section,
.contactos-section {
background-position: calc(50% - 8rem) center;
}
.bg-image:not(.home-section .bg-image) {
object-position: calc(50% - 8rem) center;
}
}
/* Em ecrãs muito baixos, volta a centrar para garantir cobertura */
@media (max-width: 48rem) and (max-height: 35.2rem) {
.sobre-section,
.servicos-section,
.portfolio-section,
.contactos-section {
background-position: center center !important;
}
.bg-image:not(.home-section .bg-image) {
object-position: center center !important;
}
}
/* Mobile -- 48rem 768px */
@media (max-width: 48rem
/*var(--breakpoint-md)*/
) {
:root {
--spacing-sm: 0.75rem;
--spacing-md: 1rem;
--spacing-lg: 1.25rem;
--spacing-xl: 1.5rem;
--spacing-xxl: 2rem;
/*
--font-title-size: clamp(1.5rem, 4vw, 3rem);
--font-subtitle-size: clamp(0.5rem, 2.5vw, 1rem);
--font-text-size: clamp(0.8rem, 2vw, 1rem); */
}
/* Mostrar menu em linha em ecrãs maiores */
.header__nav {
display: none;
}
.header__hamburger {
display: block;
}
.section {
padding: clamp(4.1rem, 15dvh, 9rem) var(--spacing-sm) var(--spacing-sm);
}
.header {
align-items: start;
}
.header__logo-img {
height: clamp(2.5rem, 6dvh, 3.8rem);
}
/* Social icons à esquerda e alto */
.social-icons-fixed {
position: fixed;
bottom: var(--spacing-sm);
right: auto;
height: auto;
transform: translateY(-5%);
flex-direction: column;
align-items: center;
padding: 0 clamp(1.5rem, 7vw, 8rem);
gap: 1.2rem;
}
.social-icons-fixed #mute-button {
padding: 0;
/*height: clamp(0.9rem, 2.3vw, 1rem); /* Força a altura a ser igual aos outros ícones */
}
.characterflutuante-container {
width: 15dvh;
}
.characterflutuante {
height: 25dvh;
}
.character-container {
width: 25dvh;
}
.character {
height: 30dvh;
}
.portfolio-section .content-wrapper {
padding: 0 var(--spacing-xl) calc(var(--spacing-sm) + 3rem);
}
}
/* Mobile /* 584px*/
@media (max-width: 36.5rem) {
/*
.characterflutuante-container {
position: absolute; /* Mantém o posicionamento absoluto */
/* bottom: 10dvh; /* Ajuste a altura a partir do fundo */
/* right: auto; /* Remove a posição da direita */
/* left: 50%; /* Define a posição esquerda a 50% */
/* transform: translateX(-50%); /* Centra o elemento horizontalmente */
/* width: 20dvh; /* Reduz a largura para ecrãs mais pequenos */
/* max-width: 10rem;
z-index: var(--z-floating);
pointer-events: none;
display: block; /* Garante que o elemento está visível */
/* }
/* Corrigir espaçamentos nos slides no mobile */
.section {
display: flex;
align-items: center;
justify-content: center;
min-height: 100%;
}
.home-section .content-wrapper,
.sobre-section .content-wrapper,
.servicos-section .content-wrapper {
gap: var(--spacing-sm);
}
.home-section .quotes-block,
.sobre-section .quotes-block,
.servicos-section .quotes-block {
margin-top: var(--spacing-md);
}
.home-section .title-block,
.sobre-section .title-block,
.servicos-section .title-block {
margin-top: 0;
}
.servicos-section .content-wrapper {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--spacing-md);
min-height: auto;
height: auto;
width: 100%;
padding: 0 var(--spacing-sm);
transform: translateY(-26%);
}
/* Redefine os blocos de texto para o mobile */
.servicos-section .title-block,
.servicos-section .quotes-block {
grid-area: auto;
text-align: center;
align-self: center;
justify-self: center;
width: 100%;
margin-top: 0;
}
.servicos-section .quotes-block {
width: 90%;
}
/* Centraliza as tags e os botões */
.services__tags {
justify-content: center;
margin-top: var(--spacing-lg);
}
.servicos-button {
text-align: center;
margin-top: var(--spacing-lg);
}
.terms__text {
text-align: center;
padding-bottom: 0px !important;
}
}
/* Mobile pequeno 480px 30rem*/
@media (max-width: 30rem) {
/*.leaves-container,
.elementos-container .petala1,
.elementos-container .petala2,
.elementos-container .petala3 {
display: none;
}*/
.info-item a {
padding: var(--spacing-xs) 0 0;
}
.home-section .content-wrapper {
position: relative;
top: auto;
left: auto;
transform: none;
margin: 0 auto;
height: auto;
min-height: auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
/* centraliza verticalmente dentro do flex */
text-align: center;
gap: calc(var(--spacing-xxl) * 3);
width: 100%;
padding: var(--spacing-lg) var(--spacing-sm);
}
.home-section .character-container {
right: 5%;
}
.sobre-section {
align-items: start;
}
.sobre-section .content-wrapper {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: clamp(5rem, 28dvh, 35rem);
min-height: auto;
height: auto;
padding: 0 var(--spacing-sm);
width: 100%;
/* Use 100% em vez de 100vw para evitar scroll horizontal */
top: auto
}
/* Regras comuns para os blocos de texto */
.home-section .title-block,
.home-section .quotes-block,
.sobre-section .title-block,
.sobre-section .quotes-block {
text-align: center;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
margin: 0;
/* Remove todas as margens por padrão */
}
/* Regras específicas para o "Sobre" */
.sobre-section .title-block {
position: static;
bottom: auto;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.sobre-section .quotes-block {
margin-top: 0.1dvh;
/* Espaço entre o título e as quotes, como definimos anteriormente */
}
/* Corrigir largura e margens do formulário no responsivo */
.contactos-section .contact__container {
display: grid;
grid-template-areas:
"title"
"form"
"contacto";
grid-template-columns: 1fr;
grid-template-rows: auto auto 1fr;
gap: 0rem;
align-items: start;
justify-items: center;
top: 5.6rem;
transform: translateY(-90%);
left: 50%;
transform: translateX(-50%);
}
.contactos-section .content-wrapper {
grid-area: title;
text-align: center;
padding-right: var(--spacing-xs);
}
.contactos-section .contact__form-wrapper {
grid-area: form;
width: clamp(17rem, 80%, 29rem);
justify-self: center;
text-align: center;
padding: 0;
}
.contactos-section .contact__info {
grid-area: contacto;
text-align: center;
padding: var(--spacing-sm);
}
.form-group input,
.form-group textarea {
padding: 0 var(--spacing-xs);
}
.form-group textarea {
min-height: 2.5rem;
max-height: 3.8rem;
}
#contact-form button {
min-height: 2.5rem;
max-height: 2.5rem;
padding: 0;
}
}
/* ==========================================================================
12. Preferências de Acessibilidade
========================================================================== */
/* Movimento reduzido */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
animation-delay: -0.0001s !important;
}
.water,
.tree,
.character,
.characterflutuante,
.petala4,
.leaf {
animation: none !important;
}
}
/* Contraste alto */
@media (prefers-contrast: more) {
:root {
--color-primary: #ff0099;
--color-text-light: #ffffff;
--color-text-dark: #000000;
}
.form-group input,
.form-group textarea {
border-color: var(--color-text-light);
background: rgba(0, 0, 0, 0.8);
}
}
/* ==========================================================================
13. Print Styles
========================================================================== */
@media print {
.header,
.fullscreen-menu,
.cta-button,
.social-icons-fixed,
.swiper-button-next,
.swiper-button-prev,
.swiper-pagination,
.home-section__scenery,
.elementos-container,
.characterflutuante-container,
.bolhas_container {
display: none !important;
}
.section {
min-height: auto;
page-break-inside: avoid;
padding: 1rem;
}
.main-title,
.subtitle,
.quote {
color: #000 !important;
text-shadow: none !important;
}
.bg-image {
display: none;
}
}
/* ==========================================================================
14. Responsividade Vertical Otimizada - Todos os Slides
========================================================================== */
/**
* Estratégia:
* 1. Dividir em faixas de altura lógicas
* 2. Criar uma hierarquia clara de ajustes
* 3. Reduzir repetição de código
* 4. Garantir consistência entre seções
*/
/* ----------------------------
Variáveis de Altura para Media Queries
---------------------------- */
:root {
--vh-threshold-large: 37.5rem;
/* 600px - landscape médio */
--vh-threshold-medium: 31.25rem;
/* 500px */
--vh-threshold-small: 28.125rem;
/* 450px */
--vh-threshold-xsmall: 25rem;
/* 400px - mobile landscape pequeno */
}
/* ----------------------------
Estilos Base para Telas Verticais Pequenas
---------------------------- */
@media (max-height: 37.5rem
/* 600px - landscape médio */
) {
:root {
/* Espaçamentos reduzidos proporcionalmente */
--spacing-xs: 0.25rem;
--spacing-sm: 0.5rem;
--spacing-md: 0.75rem;
--spacing-lg: 1rem;
--spacing-xl: 1.25rem;
--spacing-xxl: 1.5rem;
}
/* -- Estrutura Comum -- */
.header {
padding: var(--spacing-xs) var(--spacing-md);
min-height: 3.8rem;
}
.header__logo-img {
height: clamp(2.2rem, 8dvh, 3.125rem);
}
.header__nav-link {
padding: var(--spacing-xs) var(--spacing-sm);
font-size: clamp(0.8rem, 2.5dvh, 1rem);
}
.section {
height: 100dvh;
min-height: 100dvh;
padding: calc(3.8rem + var(--spacing-sm)) var(--spacing-md) var(--spacing-sm);
}
/* -- Elementos Fixos -- */
.social-icons-fixed {
bottom: var(--spacing-sm);
padding: var(--spacing-xs) var(--spacing-md);
/*left: var(--spacing-sm)
a {
width: clamp(2rem, 5dvh, 2.5rem);
height: clamp(2rem, 5dvh, 2.5rem);*/
}
.cta-button {
bottom: var(--spacing-sm);
right: var(--spacing-sm);
}
.cta-button a {
padding: var(--spacing-xs) var(--spacing-sm);
font-size: clamp(0.8rem, 2dvh, 0.9rem);
}
.scroll-indicator {
bottom: var(--spacing-sm);
width: clamp(1.5rem, 4dvh, 2rem);
height: clamp(1.5rem, 4dvh, 2rem);
}
/* -- Tipografia Responsiva -- */
.portfolio-section .main-title,
.main-title {
font-size: clamp(1.5rem, 5dvh, 2.5rem);
line-height: 1.1;
margin-bottom: var(--spacing-xs);
}
.subtitle {
font-size: clamp(0.9rem, 3dvh, 1.2rem);
margin-bottom: var(--spacing-xs);
}
.quote {
/*font-size: clamp(0.85rem, 2.5dvh, 1.1rem);*/
line-height: 1.3;
}
.sobre-section .content-wrapper {
gap: clamp(1rem, 9dvh, 35rem);
}
}
/* ==========================================================
Estilos Loading Page com SVG
========================================================== */
/* Loader base */
#loader-wrapper {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom right, #002052, #000C33);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 9999;
transform: scale(1);
opacity: 1;
will-change: transform, opacity;
backface-visibility: hidden;
}
#loader-wrapper.zoom-out {
animation: loaderZoomOut 1.2s ease-in-out forwards;
}
@keyframes loaderZoomOut {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(2); /* ou 1.6 se quiseres menos agressivo */
opacity: 0;
}
}
/* Garante que logo/texto ficam acima do painel */
/*#pinderica-loader-icon,
.loader-text {
position: relative;
z-index: 2;
}*/
/* Esconde todas as pétalas por defeito */
#pinderica-loader-icon path {
opacity: 0.1;
transition: opacity 0.8s ease-in-out,
transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* Classe para mostrar uma pétala */
#pinderica-loader-icon path.visible {
opacity: 1;
/* Termina com 100% de opacidade */
}
.loader-text {
margin-top: 20px;
color: var(--color-primary);
font-family: var(--font-subtitle);
font-size: var(--font-subtitle-size);
text-transform: uppercase;
letter-spacing: 2px;
font-weight: bold;
}
/* Classe para esconder o loader */
/*#loader-wrapper.hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}*/
/* NOVO: Estilo para a marca d'água */
.loader-watermark {
position: absolute;
line-height: 1;
color: white;
opacity: 0.05;
bottom: 5vh;
left: 50%;
transform: translateX(-50%);
pointer-events: none;
user-select: none;
z-index: -1;
white-space: nowrap;
width: clamp(15rem, 60vw, 40rem);
height: auto;
}
/* Camada que vai deslizar para revelar o site */
/*#loader-wrapper::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom right, #002052, #000C33);
z-index: 1; /* 👉 atrás do logo/texto mas acima do site */
/*transform: translateY(0);
transition: transform 1s ease-in-out;
}*/
/* Quando loader termina, fundo desliza para cima */
/*#loader-wrapper.slide-up::after {
transform: translateY(-100%);
}*/