.elementor-kit-19{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-19 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ============================================================
ONEIRO STUDIO — SISTEMA DE DESIGN PARA ELEMENTOR
============================================================
Como usar:
1. Cole este CSS em: Elementor > Site Settings > Custom CSS
OU Aparência > Personalizar > CSS Adicional
2. Importe as fontes no Elementor:
Site Settings > Custom Code (head) ou via plugin:
3. Em cada widget do Elementor, vá em:
Avançado > Classes CSS → e adicione a(s) classe(s) desejadas
============================================================ */
/* ============================================================
1. VARIÁVEIS GLOBAIS (Tokens de Design)
Definem todas as cores, raios e espaçamentos do sistema.
Você não precisa aplicar isso manualmente — já está ativo.
============================================================ */
:root {
/* — Cores de fundo (do mais escuro ao mais claro) — */
--on-ink: #08071a; /* fundo mais profundo */
--on-deep: #0f0d2a; /* fundo base da página */
--on-void: #17133d; /* superfície elevada */
--on-dusk: #221a55; /* cards e módulos */
--on-mist: #2e2470; /* bordas visíveis */
--on-haze: #4a3a9a; /* bordas em hover */
/* — Cores de acento (laranja brasa → âmbar) — */
--on-flame: #e05c18; /* laranja principal — CTAs, destaques */
--on-ember: #f07c30; /* laranja médio — hover, subtítulos */
--on-amber: #f4a84a; /* âmbar — detalhes suaves */
--on-spark: #ffd080; /* quase amarelo — glow, brilho */
/* — Cores de texto — */
--on-chalk: #ede8f5; /* texto principal (branco lavanda) */
--on-ash: #9a90c0; /* texto secundário */
--on-smoke: #5a5280; /* texto fraco / placeholders */
--on-ghost: #2e2860; /* texto mínimo / decorativo */
/* — Raios de borda — */
--on-r-sm: 6px;
--on-r-md: 10px;
--on-r-lg: 16px;
--on-r-xl: 22px;
--on-r-pill:100px;
/* — Transições padrão — */
--on-ease: 0.25s ease;
}
/* ============================================================
2. RESET DE PÁGINA
Aplique .on-page no elemento ou no Section raiz.
No Elementor: Body > Tag HTML > Classe CSS ou via
Elementor > Site Settings > Body
============================================================ */
.on-page,
.on-page body {
font-family: 'DM Sans', sans-serif;
background-color: var(--on-deep);
color: var(--on-chalk);
font-size: 16px;
line-height: 1.65;
}
/* Grain global de giz — camada fixal sobre tudo */
.on-page::before {
content: '';
position: fixed;
inset: 0;
z-index: 9999;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.68' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)' opacity='1'/%3E%3C/svg%3E");
opacity: 0.045;
mix-blend-mode: screen;
}
/* ============================================================
3. BACKGROUNDS — CORES DE SEÇÃO
Use em containers/sections do Elementor.
Exemplo: adicione "on-bg-deep" em uma Section.
============================================================ */
/* Fundo mais escuro — para hero e seções de destaque */
.on-bg-ink { background-color: var(--on-ink) !important; }
/* Fundo base — padrão da maioria das seções */
.on-bg-deep { background-color: var(--on-deep) !important; }
/* Fundo levemente elevado */
.on-bg-void { background-color: var(--on-void) !important; }
/* Fundo de card/módulo */
.on-bg-dusk { background-color: var(--on-dusk) !important; }
/* Fundo com brilho laranja sutil (para seções CTA) */
.on-bg-glow {
background-color: var(--on-deep) !important;
position: relative;
overflow: hidden;
}
.on-bg-glow::before {
content: '';
position: absolute;
top: -20%; left: 50%;
transform: translateX(-50%);
width: 600px; height: 600px;
border-radius: 50%;
background: radial-gradient(circle, rgba(224,92,24,0.07) 0%, transparent 65%);
pointer-events: none;
}
/* Fundo com brilho índigo (para seções intermediárias) */
.on-bg-indigo-glow {
background-color: var(--on-deep) !important;
position: relative;
overflow: hidden;
}
.on-bg-indigo-glow::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(23,19,61,0.7) 0%, transparent 100%);
pointer-events: none;
}
/* ============================================================
4. TEXTURAS DE GIZ PASTEL
Adicione em qualquer container para obter a textura.
Podem ser combinadas com as classes de background.
============================================================ */
/* Textura leve (sutil, para seções inteiras) */
.on-grain-light {
position: relative;
overflow: hidden;
}
.on-grain-light::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)'/%3E%3C/svg%3E");
opacity: 0.04;
mix-blend-mode: screen;
}
/* Textura média (para cards e blocos) */
.on-grain-mid {
position: relative;
overflow: hidden;
}
.on-grain-mid::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");
opacity: 0.06;
mix-blend-mode: screen;
}
/* Textura forte (para elementos pequenos como botões e badges) */
.on-grain-heavy {
position: relative;
overflow: hidden;
}
.on-grain-heavy::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='60'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='60' filter='url(%23g)'/%3E%3C/svg%3E");
opacity: 0.09;
mix-blend-mode: multiply;
border-radius: inherit;
}
/* Garante que filhos fiquem sobre a textura */
.on-grain-light > *,
.on-grain-mid > *,
.on-grain-heavy > * { position: relative; z-index: 2; }
/* ============================================================
5. BORDAS DECORATIVAS
Use em containers para separar seções com elegância.
============================================================ */
/* Borda superior — linha índigo suave */
.on-border-top {
border-top: 1px solid rgba(46,36,112,0.45) !important;
}
/* Borda inferior — linha índigo suave */
.on-border-bottom {
border-bottom: 1px solid rgba(46,36,112,0.45) !important;
}
/* Borda completa — para cards */
.on-border {
border: 1px solid rgba(46,36,112,0.4) !important;
}
/* Borda hover laranja (use em cards clicáveis) */
.on-border-hover {
border: 1px solid rgba(46,36,112,0.4) !important;
transition: border-color var(--on-ease), transform var(--on-ease);
}
.on-border-hover:hover {
border-color: rgba(224,92,24,0.4) !important;
transform: translateY(-4px);
}
/* Linha decorativa superior laranja (chalk stroke) */
.on-accent-line {
position: relative;
}
.on-accent-line::before {
content: '';
position: absolute;
top: -1px; left: 0;
width: 60px; height: 2px;
background: var(--on-flame);
border-radius: 2px;
}
/* Linha gradiente decorativa (hero, separadores) */
.on-divider {
height: 1px;
background: linear-gradient(
90deg,
transparent,
rgba(224,92,24,0.3) 30%,
rgba(74,58,154,0.4) 60%,
transparent
) !important;
border: none !important;
}
/* Borda com brilho suave (para cards de destaque) */
.on-border-glow {
border: 1px solid rgba(224,92,24,0.3) !important;
box-shadow: 0 0 20px rgba(224,92,24,0.06),
inset 0 0 20px rgba(224,92,24,0.02);
}
/* ============================================================
6. ARREDONDAMENTO DE BORDAS (Border Radius)
Use em imagens, containers, botões.
============================================================ */
.on-r-sm { border-radius: var(--on-r-sm) !important; }
.on-r-md { border-radius: var(--on-r-md) !important; }
.on-r-lg { border-radius: var(--on-r-lg) !important; }
.on-r-xl { border-radius: var(--on-r-xl) !important; }
.on-r-pill { border-radius: var(--on-r-pill) !important; }
/* Forma orgânica de "mancha" — emula tinta/giz pastel */
.on-r-blob {
border-radius: 40% 60% 55% 45% / 50% 45% 55% 50% !important;
}
/* Variações de blob (para não ficarem iguais) */
.on-r-blob-2 { border-radius: 55% 45% 40% 60% / 45% 55% 45% 55% !important; }
.on-r-blob-3 { border-radius: 45% 55% 60% 40% / 55% 45% 55% 45% !important; }
/* ============================================================
7. TIPOGRAFIA
Use nos widgets de Título e Texto do Elementor.
============================================================ */
/* — Família Fraunces (display/títulos grandes) — */
.on-font-display {
font-family: 'Fraunces', serif !important;
font-weight: 700 !important;
letter-spacing: -0.025em !important;
line-height: 1.0 !important;
}
/* Versão itálica leve (para palavras de destaque) */
.on-font-display-italic {
font-family: 'Fraunces', serif !important;
font-style: italic !important;
font-weight: 300 !important;
letter-spacing: -0.02em !important;
}
/* — Família Syne (labels, navegação, botões) — */
.on-font-label {
font-family: 'Syne', sans-serif !important;
font-weight: 700 !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
font-size: 0.72rem !important;
}
/* — Família DM Sans (corpo de texto) — */
.on-font-body {
font-family: 'DM Sans', sans-serif !important;
font-weight: 400 !important;
line-height: 1.7 !important;
}
/* — Tamanhos de título responsivos — */
.on-text-hero {
font-family: 'Fraunces', serif !important;
font-size: clamp(3rem, 6.5vw, 6rem) !important;
font-weight: 700 !important;
line-height: 0.97 !important;
letter-spacing: -0.03em !important;
}
.on-text-section {
font-family: 'Fraunces', serif !important;
font-size: clamp(2.2rem, 4vw, 3.2rem) !important;
font-weight: 700 !important;
line-height: 1.05 !important;
letter-spacing: -0.025em !important;
}
.on-text-card {
font-family: 'Fraunces', serif !important;
font-size: 1.25rem !important;
font-weight: 700 !important;
letter-spacing: -0.01em !important;
}
.on-text-sub {
font-size: 1.05rem !important;
font-family: 'DM Sans', sans-serif !important;
line-height: 1.75 !important;
font-weight: 400 !important;
}
.on-text-small {
font-size: 0.82rem !important;
line-height: 1.65 !important;
}
/* — Efeito "chalk outline" — texto em contorno (sem preenchimento) — */
.on-text-outline {
color: transparent !important;
-webkit-text-stroke: 1.5px rgba(224,92,24,0.45) !important;
}
/* ============================================================
8. CORES DE TEXTO
Use nos widgets de texto/título para aplicar as cores do sistema.
============================================================ */
.on-text-chalk { color: var(--on-chalk) !important; }
.on-text-ash { color: var(--on-ash) !important; }
.on-text-smoke { color: var(--on-smoke) !important; }
.on-text-ghost { color: var(--on-ghost) !important; }
.on-text-flame { color: var(--on-flame) !important; }
.on-text-ember { color: var(--on-ember) !important; }
.on-text-amber { color: var(--on-amber) !important; }
/* ============================================================
9. BOTÕES
Use no widget Botão do Elementor.
Substitua o estilo padrão pelas classes abaixo.
============================================================ */
/* Botão principal — laranja brasa */
.on-btn-flame,
.on-btn-flame a,
a.on-btn-flame {
display: inline-block;
background: var(--on-flame) !important;
color: var(--on-ink) !important;
padding: 0.9rem 2rem !important;
border-radius: var(--on-r-pill) !important;
border: none !important;
font-family: 'Syne', sans-serif !important;
font-size: 0.88rem !important;
font-weight: 700 !important;
letter-spacing: 0.04em !important;
text-decoration: none !important;
transition: background var(--on-ease), transform var(--on-ease) !important;
position: relative !important;
overflow: hidden !important;
cursor: pointer;
}
/* Grain de giz sobre o botão */
.on-btn-flame::after,
.on-btn-flame a::after {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='60'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='60' filter='url(%23g)' opacity='1'/%3E%3C/svg%3E");
opacity: 0.1;
mix-blend-mode: multiply;
pointer-events: none;
border-radius: inherit;
}
.on-btn-flame:hover,
.on-btn-flame a:hover {
background: var(--on-ember) !important;
transform: translateY(-2px) !important;
color: var(--on-ink) !important;
}
/* Botão fantasma — borda índigo, texto cinza */
.on-btn-outline,
.on-btn-outline a,
a.on-btn-outline {
display: inline-block;
background: transparent !important;
color: var(--on-ash) !important;
padding: 0.9rem 2rem !important;
border-radius: var(--on-r-pill) !important;
border: 1px solid rgba(74,58,154,0.5) !important;
font-family: 'Syne', sans-serif !important;
font-size: 0.88rem !important;
font-weight: 400 !important;
letter-spacing: 0.04em !important;
text-decoration: none !important;
transition: border-color var(--on-ease), color var(--on-ease) !important;
cursor: pointer;
}
.on-btn-outline:hover,
.on-btn-outline a:hover {
border-color: var(--on-ember) !important;
color: var(--on-chalk) !important;
}
/* Botão link — apenas texto com seta */
.on-btn-link,
.on-btn-link a,
a.on-btn-link {
background: transparent !important;
border: none !important;
color: var(--on-flame) !important;
font-family: 'Syne', sans-serif !important;
font-size: 0.82rem !important;
font-weight: 700 !important;
letter-spacing: 0.06em !important;
text-decoration: none !important;
padding: 0 !important;
transition: color var(--on-ease) !important;
cursor: pointer;
}
.on-btn-link:hover,
.on-btn-link a:hover { color: var(--on-ember) !important; }
/* ============================================================
10. BADGES E TAGS
Use em Texto ou Ícone com Texto do Elementor.
============================================================ */
/* Badge de status (ex: "Disponível para projetos") */
.on-badge-status {
display: inline-flex !important;
align-items: center !important;
gap: 0.6rem !important;
padding: 0.45rem 1.1rem !important;
border-radius: var(--on-r-pill) !important;
border: 1px solid rgba(224,92,24,0.3) !important;
background: rgba(224,92,24,0.07) !important;
font-family: 'Syne', sans-serif !important;
font-size: 0.75rem !important;
font-weight: 700 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
color: var(--on-ember) !important;
}
/* Pontinho pulsante dentro do badge — adicione um vazio */
.on-badge-dot {
display: inline-block !important;
width: 6px !important;
height: 6px !important;
border-radius: 50% !important;
background: var(--on-flame) !important;
box-shadow: 0 0 6px rgba(224,92,24,0.7) !important;
animation: on-pulse 2s infinite !important;
}
@keyframes on-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.6; transform: scale(0.8); }
}
/* Badge de categoria (ex: "Landing Page") */
.on-badge-cat {
display: inline-block !important;
background: rgba(8,7,26,0.82) !important;
border: 1px solid rgba(224,92,24,0.25) !important;
color: var(--on-ember) !important;
font-family: 'Syne', sans-serif !important;
font-size: 0.65rem !important;
font-weight: 700 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
padding: 0.22rem 0.75rem !important;
border-radius: var(--on-r-pill) !important;
}
/* Tag técnica (ex: "WordPress", "Webhook") */
.on-tag {
display: inline-block !important;
font-size: 0.7rem !important;
padding: 0.22rem 0.7rem !important;
border-radius: var(--on-r-sm) !important;
background: rgba(224,92,24,0.07) !important;
color: rgba(240,124,48,0.75) !important;
border: 1px solid rgba(224,92,24,0.14) !important;
font-family: 'Syne', sans-serif !important;
letter-spacing: 0.04em !important;
}
/* Badge informativo em índigo */
.on-badge-info {
display: inline-block !important;
background: rgba(23,19,61,0.6) !important;
border: 1px solid rgba(46,36,112,0.45) !important;
color: var(--on-ash) !important;
font-family: 'Syne', sans-serif !important;
font-size: 0.75rem !important;
font-weight: 400 !important;
padding: 0.4rem 1rem !important;
border-radius: var(--on-r-md) !important;
}
/* Label de seção (linha + texto acima do título) */
.on-section-label {
display: flex !important;
align-items: center !important;
gap: 0.7rem !important;
color: var(--on-flame) !important;
font-family: 'Syne', sans-serif !important;
font-size: 0.68rem !important;
font-weight: 700 !important;
letter-spacing: 0.2em !important;
text-transform: uppercase !important;
}
.on-section-label::before {
content: '' !important;
display: inline-block !important;
width: 24px !important;
height: 2px !important;
background: var(--on-flame) !important;
border-radius: 2px !important;
}
/* ============================================================
11. CARDS
Aplicáveis em Containers do Elementor (inner sections).
============================================================ */
/* Card base — fundo deep com borda índigo */
.on-card {
background: var(--on-deep) !important;
border: 1px solid rgba(46,36,112,0.4) !important;
border-radius: var(--on-r-xl) !important;
overflow: hidden !important;
position: relative !important;
transition: border-color var(--on-ease), transform var(--on-ease) !important;
}
.on-card:hover {
border-color: rgba(224,92,24,0.35) !important;
transform: translateY(-4px) !important;
}
/* Card com textura de giz */
.on-card-chalk {
background: var(--on-deep) !important;
border: 1px solid rgba(46,36,112,0.4) !important;
border-radius: var(--on-r-xl) !important;
overflow: hidden !important;
position: relative !important;
transition: border-color var(--on-ease), transform var(--on-ease) !important;
}
.on-card-chalk::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
border-radius: var(--on-r-xl);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='400'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='320' height='400' filter='url(%23g)'/%3E%3C/svg%3E");
opacity: 0.04;
mix-blend-mode: screen;
}
.on-card-chalk > * { position: relative; z-index: 2; }
.on-card-chalk:hover {
border-color: rgba(224,92,24,0.35) !important;
transform: translateY(-4px) !important;
}
/* Card de expertise (fundo deep, hover void) */
.on-card-ex {
background: var(--on-deep) !important;
padding: 2.2rem 1.6rem !important;
position: relative !important;
overflow: hidden !important;
transition: background var(--on-ease) !important;
}
.on-card-ex::before {
content: '';
position: absolute; inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='200' filter='url(%23g)'/%3E%3C/svg%3E");
opacity: 0.04;
pointer-events: none;
mix-blend-mode: screen;
}
.on-card-ex:hover { background: var(--on-void) !important; }
.on-card-ex > * { position: relative; z-index: 1; }
/* Caixa de resultado / destaque verde */
.on-card-result {
background: rgba(76,175,125,0.05) !important;
border: 1px solid rgba(76,175,125,0.18) !important;
border-radius: var(--on-r-lg) !important;
padding: 1.2rem 1.5rem !important;
}
/* ============================================================
12. ÍCONES E FORMAS ORGÂNICAS (emula mancha de giz/tinta)
Use em containers quadrados (ex: 44x44px) no Elementor.
============================================================ */
/* Bolha de ícone — laranja */
.on-icon-flame {
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 40% 60% 55% 45% / 50% 45% 55% 50% !important;
background: rgba(224,92,24,0.1) !important;
border: 1px solid rgba(224,92,24,0.2) !important;
position: relative !important;
}
/* Segundo anel orgânico ao redor do ícone */
.on-icon-flame::after {
content: '' !important;
position: absolute !important;
inset: -2px !important;
border-radius: 45% 55% 50% 50% / 55% 45% 55% 45% !important;
border: 1px solid rgba(224,92,24,0.1) !important;
transform: rotate(8deg) !important;
}
/* Bolha de ícone — índigo */
.on-icon-indigo {
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 55% 45% 40% 60% / 45% 55% 45% 55% !important;
background: rgba(74,58,154,0.2) !important;
border: 1px solid rgba(74,58,154,0.3) !important;
}
/* Dot de resultado positivo (verde) */
.on-dot-green {
display: inline-block !important;
width: 5px !important;
height: 5px !important;
border-radius: 50% !important;
background: #4caf7d !important;
vertical-align: middle !important;
margin-right: 0.4rem !important;
}
/* Dot decorativo laranja */
.on-dot-flame {
display: inline-block !important;
width: 6px !important;
height: 6px !important;
border-radius: 50% !important;
background: var(--on-flame) !important;
box-shadow: 0 0 6px rgba(224,92,24,0.6) !important;
vertical-align: middle !important;
margin-right: 0.5rem !important;
}
/* ============================================================
13. GRID SEPARADO POR LINHA (grade de expertise)
Para o container interno do Elementor usar linhas de grade.
============================================================ */
/* Grade separada por linhas (tipo tabela) */
.on-grid-lines {
display: grid !important;
gap: 1px !important;
background: rgba(46,36,112,0.25) !important;
border: 1px solid rgba(46,36,112,0.25) !important;
border-radius: var(--on-r-lg) !important;
overflow: hidden !important;
}
/* Cada célula da grade */
.on-grid-cell {
background: var(--on-deep) !important;
transition: background var(--on-ease) !important;
}
.on-grid-cell:hover { background: var(--on-void) !important; }
/* ============================================================
14. NUMERAÇÃO DE ETAPAS (processo)
Use no widget de Título com o número da etapa.
============================================================ */
.on-step-num {
font-family: 'Fraunces', serif !important;
font-size: 2.8rem !important;
font-weight: 700 !important;
color: var(--on-ghost) !important;
line-height: 1 !important;
position: relative !important;
display: inline-block !important;
}
/* Mancha de giz atrás do número */
.on-step-num::before {
content: '' !important;
position: absolute !important;
top: 50%; left: 50% !important;
transform: translate(-50%,-50%) !important;
width: 52px; height: 52px !important;
border-radius: 40% 60% 55% 45% / 50% 55% 45% 50% !important;
background: rgba(224,92,24,0.06) !important;
pointer-events: none !important;
}
/* Container de etapa com borda direita */
.on-step {
border-right: 1px solid rgba(46,36,112,0.3) !important;
padding: 2rem 1.5rem !important;
position: relative !important;
}
.on-step:last-child { border-right: none !important; }
/* ============================================================
15. ESTATÍSTICAS (hero stats)
============================================================ */
/* Número grande da estatística */
.on-stat-num {
font-family: 'Fraunces', serif !important;
font-size: 2.4rem !important;
font-weight: 700 !important;
color: var(--on-ember) !important;
line-height: 1 !important;
}
/* Label da estatística */
.on-stat-label {
font-family: 'Syne', sans-serif !important;
font-size: 0.75rem !important;
font-weight: 400 !important;
color: var(--on-smoke) !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
margin-top: 0.3rem !important;
}
/* Container de stats com borda superior */
.on-stats-row {
border-top: 1px solid rgba(46,36,112,0.5) !important;
padding-top: 2rem !important;
position: relative !important;
}
.on-stats-row::before {
content: '' !important;
position: absolute !important;
top: -1px; left: 0 !important;
width: 80px; height: 2px !important;
background: var(--on-flame) !important;
}
/* ============================================================
16. EFEITOS DE FUNDO DECORATIVOS
Adicione em containers ou sections para elementos atmosféricos.
============================================================ */
/* Brilho radial laranja no canto superior direito */
.on-glow-top-right {
position: relative;
overflow: hidden;
}
.on-glow-top-right::before {
content: '';
position: absolute;
top: -10%; right: -5%;
width: 400px; height: 400px;
border-radius: 50%;
background: radial-gradient(circle, rgba(224,92,24,0.09) 0%, transparent 65%);
pointer-events: none;
}
/* Brilho radial índigo centralizado */
.on-glow-center {
position: relative;
overflow: hidden;
}
.on-glow-center::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 70% 50% at 50% 50%, rgba(23,19,61,0.7) 0%, transparent 90%);
pointer-events: none;
}
/* Anel orgânico decorativo (CTA) */
.on-glow-ring {
position: relative;
overflow: hidden;
}
.on-glow-ring::after {
content: '';
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
width: 700px; height: 700px;
border-radius: 45% 55% 50% 50% / 55% 45% 55% 45%;
border: 1px solid rgba(46,36,112,0.18);
pointer-events: none;
}
/* Smear de giz lateral direito (hero) */
.on-smear-right {
position: relative;
overflow: hidden;
}
.on-smear-right::after {
content: '';
position: absolute;
top: -10%; right: -5%;
width: 55%; height: 120%;
background: radial-gradient(ellipse 70% 60% at 55% 45%,
rgba(32,24,90,0.65) 0%,
rgba(23,19,61,0.35) 50%,
transparent 80%
);
filter: blur(40px);
pointer-events: none;
}
/* Linha gradiente inferior esquerda → laranja direita (separador hero) */
.on-chalk-line {
position: relative;
}
.on-chalk-line::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg,
transparent 5%,
rgba(74,58,154,0.18) 30%,
rgba(224,92,24,0.14) 65%,
transparent 95%
);
pointer-events: none;
}
/* ============================================================
17. ANIMAÇÕES DE ENTRADA (Scroll Reveal)
Adicione .on-reveal em qualquer elemento.
O JavaScript abaixo ativa a classe .on-visible ao scrollar.
============================================================ */
/* Estado inicial — invisível e deslocado */
.on-reveal {
opacity: 0 !important;
transform: translateY(24px) !important;
transition: opacity 0.65s ease, transform 0.65s ease !important;
}
/* Estado visível — ativado pelo JS */
.on-reveal.on-visible {
opacity: 1 !important;
transform: translateY(0) !important;
}
/* Atraso para elementos em sequência */
.on-reveal-delay-1 { transition-delay: 0.1s !important; }
.on-reveal-delay-2 { transition-delay: 0.2s !important; }
.on-reveal-delay-3 { transition-delay: 0.3s !important; }
.on-reveal-delay-4 { transition-delay: 0.4s !important; }
.on-reveal-delay-5 { transition-delay: 0.5s !important; }
/* Variação: entrar da esquerda */
.on-reveal-left {
opacity: 0 !important;
transform: translateX(-24px) !important;
transition: opacity 0.65s ease, transform 0.65s ease !important;
}
.on-reveal-left.on-visible {
opacity: 1 !important;
transform: translateX(0) !important;
}
/* Variação: entrar da direita */
.on-reveal-right {
opacity: 0 !important;
transform: translateX(24px) !important;
transition: opacity 0.65s ease, transform 0.65s ease !important;
}
.on-reveal-right.on-visible {
opacity: 1 !important;
transform: translateX(0) !important;
}
/* Fade simples (sem deslocamento) */
.on-reveal-fade {
opacity: 0 !important;
transition: opacity 0.7s ease !important;
}
.on-reveal-fade.on-visible { opacity: 1 !important; }
/* ============================================================
18. HOVER / MICRO-INTERAÇÕES
Adicione em imagens, links e ícones interativos.
============================================================ */
/* Zoom suave em imagens ao hover */
.on-img-zoom {
overflow: hidden !important;
border-radius: var(--on-r-lg) !important;
}
.on-img-zoom img,
.on-img-zoom .elementor-image {
transition: transform 0.4s ease !important;
display: block !important;
}
.on-img-zoom:hover img,
.on-img-zoom:hover .elementor-image {
transform: scale(1.06) !important;
}
/* Sobe levemente ao hover (lift) */
.on-lift {
transition: transform var(--on-ease) !important;
}
.on-lift:hover { transform: translateY(-4px) !important; }
/* Acende cor de texto ao hover */
.on-hover-flame { transition: color var(--on-ease) !important; }
.on-hover-flame:hover { color: var(--on-flame) !important; }
.on-hover-ember { transition: color var(--on-ease) !important; }
.on-hover-ember:hover { color: var(--on-ember) !important; }
/* ============================================================
19. SEPARADORES / DIVIDERS VISUAIS
============================================================ */
/* Linha laranja sólida (chalk stroke) */
.on-line-flame {
height: 2px !important;
background: var(--on-flame) !important;
border: none !important;
border-radius: 2px !important;
width: 60px !important;
}
/* Linha gradiente larga */
.on-line-gradient {
height: 1px !important;
border: none !important;
background: linear-gradient(90deg,
transparent,
rgba(224,92,24,0.35) 25%,
rgba(74,58,154,0.4) 60%,
transparent
) !important;
}
/* Linha índigo simples */
.on-line-indigo {
height: 1px !important;
background: rgba(46,36,112,0.45) !important;
border: none !important;
}
/* ============================================================
20. ESPAÇAMENTOS UTILITÁRIOS
Para ajuste fino de padding/margin em elementos Elementor.
============================================================ */
.on-pt-0 { padding-top: 0 !important; }
.on-pt-sm { padding-top: 2rem !important; }
.on-pt-md { padding-top: 4rem !important; }
.on-pt-lg { padding-top: 7rem !important; }
.on-pt-xl { padding-top: 9rem !important; }
.on-pb-sm { padding-bottom: 2rem !important; }
.on-pb-md { padding-bottom: 4rem !important; }
.on-pb-lg { padding-bottom: 7rem !important; }
.on-pb-xl { padding-bottom: 9rem !important; }
.on-gap-sm { gap: 1rem !important; }
.on-gap-md { gap: 1.5rem !important; }
.on-gap-lg { gap: 3rem !important; }
.on-max-text { max-width: 500px !important; }
.on-max-wide { max-width: 860px !important; }
/* ============================================================
21. UTILITÁRIOS DE EXIBIÇÃO
============================================================ */
.on-flex { display: flex !important; }
.on-flex-center { display: flex !important; align-items: center !important; justify-content: center !important; }
.on-flex-between{ display: flex !important; align-items: center !important; justify-content: space-between !important; }
.on-flex-gap-sm { gap: 0.5rem !important; }
.on-flex-gap-md { gap: 1rem !important; }
.on-flex-wrap { flex-wrap: wrap !important; }
.on-text-center { text-align: center !important; }
/* ============================================================
22. RESPONSIVIDADE
Classes que ajustam comportamento em telas menores.
============================================================ */
@media (max-width: 768px) {
.on-text-hero { font-size: clamp(2.5rem, 10vw, 4rem) !important; }
.on-text-section { font-size: clamp(1.8rem, 7vw, 2.5rem) !important; }
.on-pt-lg { padding-top: 4rem !important; }
.on-pt-xl { padding-top: 5rem !important; }
.on-pb-lg { padding-bottom: 4rem !important; }
.on-pb-xl { padding-bottom: 5rem !important; }
.on-step { border-right: none !important; border-bottom: 1px solid rgba(46,36,112,0.3) !important; }
}
/* ── THUMB DO CARD ── */
.on-proj-thumb {
height: 195px;
background: #17133d;
position: relative;
overflow: hidden;
}
.on-proj-thumb-img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
display: block;
}
.on-card-portfolio:hover .on-proj-thumb-img {
transform: scale(1.06);
}
.on-proj-badge {
position: absolute;
top: 12px; left: 12px;
z-index: 5;
}
/* ── CORPO DO CARD ── */
.on-proj-body { padding: 1.5rem; }
.on-proj-client {
font-size: .7rem; font-family: 'Syne', sans-serif;
letter-spacing: .1em; text-transform: uppercase;
color: #2e2860; margin-bottom: .3rem;
}
.on-proj-title {
font-family: 'Fraunces', serif !important;
font-size: 1.2rem !important; font-weight: 700 !important;
color: #ede8f5 !important;
margin-bottom: .6rem !important; line-height: 1.25 !important;
}
.on-proj-desc {
font-size: .82rem; color: #5a5280;
line-height: 1.65; margin-bottom: 1.2rem;
}
.on-proj-result {
font-size: .78rem; color: #5a5280;
display: flex; align-items: center; gap: .4rem;
}
.on-card-portfolio { cursor: pointer; }
/* ── FILTROS ── */
.on-filter-bar { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 3rem; }
.on-fbtn {
padding: .4rem 1.1rem; border-radius: 100px;
border: 1px solid rgba(46,36,112,.5); background: transparent;
color: #5a5280; font-size: .76rem;
font-family: 'Syne', sans-serif; cursor: pointer;
transition: all .2s; letter-spacing: .06em; text-transform: uppercase;
}
.on-fbtn:hover { border-color: #4a3a9a; color: #9a90c0; }
.on-fbtn.ativo,
.on-fbtn-active {
background: rgba(224,92,24,.1);
border-color: rgba(224,92,24,.4); color: #f07c30;
}
.on-card-portfolio.on-hidden { display: none !important; }
/* ── GRID RESPONSIVO ── */
.on-proj-grid .elementor-loop-container {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 1.5rem !important;
}
@media (max-width: 900px) {
.on-proj-grid .elementor-loop-container {
grid-template-columns: repeat(2,1fr) !important;
}
}
@media (max-width: 600px) {
.on-proj-grid .elementor-loop-container {
grid-template-columns: 1fr !important;
}
}
/* ── MODAL ── */
.on-modal-overlay {
display: none; position: fixed; inset: 0; z-index: 9999;
background: rgba(5,4,16,.88); backdrop-filter: blur(6px);
padding: 2rem; overflow-y: auto;
align-items: flex-start; justify-content: center;
}
.on-modal-overlay.on-open { display: flex; }
.on-modal {
background: #0f0d2a;
border: 1px solid rgba(74,58,154,.35);
border-radius: 22px; max-width: 740px; width: 100%;
margin: auto; overflow: hidden;
animation: onIn .28s ease;
}
@keyframes onIn {
from { opacity:0; transform:translateY(20px); }
to { opacity:1; transform:translateY(0); }
}
.on-modal-thumb {
height: 270px; background: #17133d;
position: relative; overflow: hidden;
display: flex; align-items: center; justify-content: center;
}
.on-modal-thumb img { width:100%; height:100%; object-fit:cover; }
.on-modal-ph {
display:flex; flex-direction:column;
align-items:center; gap:.5rem; color:#2e2860;
}
.on-modal-close {
position:absolute; top:14px; right:14px;
width:32px; height:32px; border-radius:50%;
background:rgba(8,7,26,.75); border:1px solid rgba(46,36,112,.5);
color:#9a90c0; font-size:1.2rem; cursor:pointer;
display:flex; align-items:center; justify-content:center;
transition:background .2s; z-index:5; line-height:1;
}
.on-modal-close:hover { background:rgba(224,92,24,.15); color:#e05c18; }
.on-modal-body { padding: 2rem; }
.on-modal-meta { display:flex; align-items:center; gap:.75rem; margin-bottom:1rem; }
.on-modal-client {
font-size:.75rem; font-family:'Syne',sans-serif;
color:#2e2860; text-transform:uppercase; letter-spacing:.08em;
}
.on-modal-title {
font-family:'Fraunces',serif; font-size:2rem; font-weight:700;
color:#ede8f5; margin-bottom:.8rem; letter-spacing:-.02em;
}
.on-modal-desc { color:#9a90c0; font-size:.9rem; line-height:1.75; margin-bottom:1.8rem; }
.on-modal-cols { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-bottom:1.8rem; }
.on-modal-col-h {
font-size:.68rem; font-family:'Syne',sans-serif; font-weight:700;
text-transform:uppercase; letter-spacing:.12em; color:#5a5280; margin-bottom:.8rem;
}
.on-modal-cols ul { list-style:none; }
.on-modal-cols ul li {
font-size:.82rem; color:#9a90c0; padding:.25rem 0;
display:flex; align-items:center; gap:.5rem;
}
.on-modal-cols ul li::before {
content:''; width:4px; height:4px; border-radius:50%;
background:#2e2470; flex-shrink:0;
}
.on-modal-result {
background:rgba(76,175,125,.05); border:1px solid rgba(76,175,125,.18);
border-radius:16px; padding:1.2rem 1.5rem; margin-bottom:1.8rem;
}
.on-modal-result-l {
font-size:.68rem; font-family:'Syne',sans-serif; font-weight:700;
text-transform:uppercase; letter-spacing:.12em; color:#4caf7d; margin-bottom:.4rem;
}
.on-modal-result p { font-size:.88rem; color:#9a90c0; line-height:1.7; }
.on-modal-actions { display:flex; gap:.75rem; flex-wrap:wrap; }
@media(max-width:600px) {
.on-modal-cols { grid-template-columns:1fr; }
.on-modal-title { font-size:1.5rem; }
}/* End custom CSS */