/* ============================================================================= Kerite — Design system "Midnight Indigo" (redesign do site público) TASK-ra / FTR-redesign-site-fundacao-visual - Dark-first: os tokens em :root são o tema ESCURO (padrão). - Tema claro: html.k-theme-light sobrescreve os tokens. - Tudo que PINTA (fundo, cor, fonte) é escopado em .k-site / html:has(.k-site), para NÃO afetar os painéis administrativos (/adm, /kerite) que rodam no mesmo App.razor. - Os tokens em :root são inertes fora de .k-site (nenhum CSS de painel os referencia). ========================================================================== */ :root { /* superfícies */ --k-bg: oklch(0.115 0.031 277); --k-fg: oklch(0.93 0.013 256); --k-card: oklch(0.183 0.052 279); --k-card-fg: oklch(0.96 0.008 256); --k-elevated: oklch(0.225 0.068 279); /* destaque (índigo) — igual nos dois temas */ --k-primary: oklch(0.512 0.229 275.5); --k-primary-fg: oklch(0.99 0 0); /* texto secundário */ --k-muted-fg: oklch(0.715 0.035 257); --k-subtle-fg: oklch(0.58 0.035 257); /* linhas / bordas */ --k-border: oklch(0.278 0.096 278); --k-accent: oklch(0.278 0.096 278); /* semânticos */ --k-success: oklch(0.75 0.16 160); --k-destructive: oklch(0.62 0.22 25); /* raios */ --k-radius: 1rem; --k-radius-sm: calc(var(--k-radius) - 4px); --k-radius-lg: calc(var(--k-radius) + 4px); --k-radius-2xl: calc(var(--k-radius) + 8px); --k-radius-3xl: calc(var(--k-radius) + 12px); --k-radius-4xl: calc(var(--k-radius) + 16px); /* sombras */ --k-shadow-glow: 0 18px 60px -20px color-mix(in oklab, var(--k-primary) 55%, transparent); --k-shadow-panel: 0 24px 70px -40px oklch(0 0 0 / 0.9); /* movimento */ --k-ease-expo: cubic-bezier(0.16, 1, 0.3, 1); /* tipografia */ --k-font-display: "Sora", "Segoe UI", ui-sans-serif, system-ui, sans-serif; --k-font-body: "Manrope", "Segoe UI", ui-sans-serif, system-ui, sans-serif; } html.k-theme-light { --k-bg: oklch(0.985 0.004 270); --k-fg: oklch(0.19 0.038 274); --k-card: oklch(1 0 0); --k-card-fg: oklch(0.19 0.038 274); --k-elevated: oklch(0.955 0.012 272); --k-muted-fg: oklch(0.46 0.03 272); --k-subtle-fg: oklch(0.58 0.025 272); --k-border: oklch(0.9 0.018 272); --k-accent: oklch(0.93 0.028 273); --k-success: oklch(0.6 0.14 160); --k-destructive: oklch(0.55 0.21 25); --k-shadow-glow: 0 18px 50px -24px color-mix(in oklab, var(--k-primary) 45%, transparent); --k-shadow-panel: 0 20px 60px -40px oklch(0.19 0.038 274 / 0.35); } /* Pinta o fundo do só nas páginas de marketing (evita branco no overscroll) sem tocar nos painéis, que nunca contêm .k-site. */ html:has(.k-site) { background-color: var(--k-bg); } /* ---------- Base da casca ---------- */ .k-site { background-color: var(--k-bg); color: var(--k-fg); font-family: var(--k-font-body); min-height: 100dvh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .k-site h1, .k-site h2, .k-site h3, .k-site h4 { font-family: var(--k-font-display); letter-spacing: -0.03em; line-height: 1.08; color: var(--k-fg); } .k-site a { color: inherit; text-decoration: none; } .k-site *, .k-site *::before, .k-site *::after { border-color: var(--k-border); } .k-site ::selection { background-color: color-mix(in oklab, var(--k-primary) 40%, transparent); } .k-site img { max-width: 100%; } /* ---------- Utilitários ---------- */ .k-shell { margin-inline: auto; width: 100%; max-width: 80rem; padding-inline: 1.25rem; } .k-eyebrow { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--k-primary); } .k-panel { background-color: var(--k-card); border: 1px solid var(--k-border); border-radius: var(--k-radius-3xl); transition: border-color 0.35s var(--k-ease-expo), transform 0.35s var(--k-ease-expo); } .k-panel:hover { border-color: color-mix(in oklab, var(--k-primary) 55%, transparent); } .k-grid-veil { background-image: linear-gradient(to right, color-mix(in oklab, var(--k-border) 60%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in oklab, var(--k-border) 60%, transparent) 1px, transparent 1px); background-size: 72px 72px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000, transparent 75%); } .k-text-glow { color: var(--k-primary); text-shadow: 0 0 40px color-mix(in oklab, var(--k-primary) 45%, transparent); } /* ---------- Botões ---------- */ .k-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border: 1px solid transparent; border-radius: var(--k-radius-lg); padding: 0.9rem 1.85rem; font-family: var(--k-font-body); font-size: 1rem; font-weight: 700; line-height: 1; cursor: pointer; transition: filter 0.25s var(--k-ease-expo), background-color 0.25s var(--k-ease-expo), border-color 0.25s var(--k-ease-expo), transform 0.25s var(--k-ease-expo); } /* Cor dos botões prefixada com .k-site (especificidade 0,2,0) para vencer ".k-site a { color: inherit }" (0,1,1) — mesmo problema já corrigido em .k-nav__login-link acima: sem isso o texto do botão herda a cor de texto padrão em vez da cor definida aqui (ficava ilegível no tema claro). */ .k-site .k-btn-primary { background-color: var(--k-primary); color: var(--k-primary-fg); box-shadow: var(--k-shadow-glow); } .k-site .k-btn-primary:hover { filter: brightness(1.1); } .k-site .k-btn-ghost { background-color: color-mix(in oklab, var(--k-card) 60%, transparent); border-color: var(--k-border); color: var(--k-fg); } .k-site .k-btn-ghost:hover { background-color: var(--k-elevated); } .k-btn-link { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; font-size: 0.875rem; } .k-site .k-btn-link { color: var(--k-primary); } .k-btn-link:hover { filter: brightness(1.25); } /* ---------- Animação reveal-on-scroll ---------- */ @keyframes k-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } .k-reveal { opacity: 0; } .k-reveal[data-k-visible="true"] { animation: k-rise 0.75s var(--k-ease-expo) forwards; } /* ---------- Alternador de tema ---------- */ .k-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border: 1px solid var(--k-border); border-radius: var(--k-radius-lg); background-color: var(--k-card); color: var(--k-muted-fg); font-size: 0.95rem; cursor: pointer; transition: color 0.25s var(--k-ease-expo), border-color 0.25s var(--k-ease-expo); } .k-theme-toggle:hover { color: var(--k-fg); border-color: color-mix(in oklab, var(--k-primary) 45%, transparent); } .k-theme-toggle__icon { display: inline-flex; } .k-theme-toggle__icon--light { display: none; } html.k-theme-light .k-theme-toggle__icon--light { display: inline-flex; } html.k-theme-light .k-theme-toggle__icon--dark { display: none; } /* ---------- Acessibilidade: menos movimento ---------- */ @media (prefers-reduced-motion: reduce) { .k-site *, .k-site *::before, .k-site *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } .k-reveal { opacity: 1; } } /* ============================================================================= Cascas — navbar + rodapé (TASK-rb) Base compartilhada por MainLayout (plataforma) e MainLayoutImobiliaria (editorial). Estrutura Bootstrap (navbar / collapse / toggler) preservada — só a pele muda. ========================================================================== */ /* ---------- Logo: troca por tema, sem JS ---------- */ .k-site .k-logo { height: 30px; width: auto; display: block; } .k-site .k-logo--on-light { display: none; } html.k-theme-light .k-site .k-logo--on-light { display: block; } html.k-theme-light .k-site .k-logo--on-dark { display: none; } /* ---------- Navbar ---------- */ .k-site .k-nav { background-color: color-mix(in oklab, var(--k-bg) 85%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid color-mix(in oklab, var(--k-border) 70%, transparent); padding-block: 0.25rem; z-index: 100; } .k-site .k-nav__bar { display: flex; align-items: center; gap: 1rem; max-width: 82rem; margin-inline: auto; min-height: 4rem; } .k-site .k-nav__brand { display: inline-flex; align-items: center; gap: 0.65rem; padding: 0; } .k-site .k-nav__seg { border-left: 1px solid var(--k-border); padding-left: 0.65rem; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--k-primary); } .k-site .k-nav__collapse { align-items: center; gap: 1.75rem; } .k-site .k-nav__list { display: flex; align-items: center; gap: 1.75rem; margin: 0; padding: 0; list-style: none; } .k-site .k-nav__list .nav-item { padding: 0; } .k-site .k-nav__link { color: var(--k-muted-fg); font-family: var(--k-font-body); font-size: 0.9375rem; font-weight: 500; padding: 0.4rem 0; transition: color 0.2s var(--k-ease-expo); } .k-site .k-nav__link:hover, .k-site .k-nav__link.active { color: var(--k-fg); } .k-site .k-nav__actions { display: flex; align-items: center; gap: 0.75rem; margin-left: auto; } /* "Login" fica ao lado do CTA (dentro de .k-nav__actions), como link e não botão. Cor na família dos itens de menu, porém em evidência (--k-fg + peso 600) — antes o .text-dark do Bootstrap (com !important) o deixava quase invisível na barra escura. */ .k-site .k-nav__login-link { color: var(--k-fg); font-family: var(--k-font-body); font-size: 0.9375rem; font-weight: 600; padding: 0.4rem 0.25rem; white-space: nowrap; transition: color 0.2s var(--k-ease-expo); } .k-site .k-nav__login-link:hover, .k-site .k-nav__login-link:focus-visible, .k-site .k-nav__login-link.active { color: var(--k-primary); } .k-site .k-nav__cta { padding: 0.6rem 1.35rem; font-size: 0.875rem; border-radius: 999px; } /* ícone do hambúrguer claro no tema escuro (o de app.css é escuro demais) */ .k-site .navbar-toggler { border: 1px solid var(--k-border); border-radius: var(--k-radius-sm); padding: 0.35rem 0.5rem; } .k-site .navbar-toggler:focus { box-shadow: none; } .k-site .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(229,231,235,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } html.k-theme-light .k-site .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(33,37,41,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } @media (max-width: 991.98px) { .k-site .k-nav__collapse { border-top: 1px solid var(--k-border); margin-top: 0.5rem; padding-block: 0.75rem; } .k-site .k-nav__list { flex-direction: column; align-items: flex-start; gap: 0.25rem; width: 100%; } .k-site .k-nav__link { display: block; padding: 0.65rem 0; width: 100%; } .k-site .k-nav__actions { margin-left: 0; margin-top: 0.75rem; width: 100%; flex-wrap: wrap; } .k-site .k-nav__login-link { width: 100%; padding: 0.65rem 0; } .k-site .k-nav__cta { flex: 1 1 auto; text-align: center; } } /* ---------- Conteúdo ---------- */ .k-site .page { position: relative; display: flex; flex-direction: column; } .k-site .content { padding-top: 0; } /* ---------- Rodapé (só repintura — layout/grid fica com app.css) ---------- */ .k-site footer { background-color: var(--k-card); color: var(--k-muted-fg); border-top: 1px solid var(--k-border); font-family: var(--k-font-body); } .k-site footer #rdp-links span { color: var(--k-muted-fg); } .k-site footer #rdp-copyright { color: var(--k-subtle-fg); } /* "K" do rodapé por tema (TASK-sl) — mesma lógica de .k-logo--on-light/on-dark da navbar. O app.css escurece o "K" por padrão; aqui, nas cascas .k-site, o tema ESCURO usa o arquivo claro como está, e só o tema claro volta a escurecer. Vence o app.css por especificidade (id #rdp-links + classes a mais). */ .k-site footer #rdp-links .k-rdp-logo { filter: none; } html.k-theme-light .k-site footer #rdp-links .k-rdp-logo { filter: brightness(0) saturate(100%); } .k-site footer a { color: var(--k-muted-fg); } .k-site footer a:hover { color: var(--k-fg); } /* ============================================================================= Variante editorial — MainLayoutImobiliaria (k-site--editorial) ========================================================================== */ .k-site--editorial .k-nav { border-bottom: 1px solid var(--k-border); background-color: color-mix(in oklab, var(--k-bg) 95%, transparent); } .k-site--editorial .k-nav__link, .k-site--editorial .k-nav__login-link { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; } .k-site--editorial .k-nav__cta { border-radius: 0; border-bottom: 2px solid var(--k-primary); background: transparent; box-shadow: none; color: var(--k-fg); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.35rem 0 0.2rem; } .k-site--editorial .k-nav__cta:hover { filter: none; color: var(--k-primary); } /* ---------- Primitivas editoriais (compartilhadas pelas páginas da Imobiliária) ---------- */ .ki-kicker { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--k-primary); } .ki-sec { padding-block: 4rem; border-bottom: 1px solid var(--k-border); } .ki-sec--tint { background-color: color-mix(in oklab, var(--k-card) 45%, transparent); } .ki-sec__title { margin-top: 1.25rem; max-width: 44rem; font-family: var(--k-font-display); font-size: clamp(1.6rem, 3.2vw, 2.5rem); font-weight: 700; } .ki-btn { display: inline-flex; align-items: center; justify-content: center; padding: 1rem 1.9rem; font-family: var(--k-font-body); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid transparent; cursor: pointer; transition: filter 0.25s var(--k-ease-expo), background-color 0.25s var(--k-ease-expo); } .ki-btn--solid { background-color: var(--k-primary); color: var(--k-primary-fg); } .ki-btn--solid:hover { filter: brightness(1.1); } .ki-btn--outline { border-color: var(--k-border); color: var(--k-fg); background-color: color-mix(in oklab, var(--k-bg) 60%, transparent); } .ki-btn--outline:hover { background-color: var(--k-elevated); } .ki-textlink { display: inline-flex; margin-top: 1.5rem; padding-bottom: 0.15rem; border-bottom: 2px solid var(--k-primary); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--k-fg); } .ki-textlink:hover { color: var(--k-primary); } /* grade com divisórias (o "gap" vira a linha de 1px sobre o fundo border) */ .ki-grid { margin-top: 2.5rem; display: grid; gap: 1px; background-color: var(--k-border); border: 1px solid var(--k-border); } .ki-grid--3 { grid-template-columns: repeat(3, 1fr); } .ki-grid--2 { grid-template-columns: repeat(2, 1fr); } .ki-grid--4 { grid-template-columns: repeat(4, 1fr); } .ki-grid > * { background-color: var(--k-bg); padding: 2rem; } .ki-cell__title { font-family: var(--k-font-display); font-size: 1rem; font-weight: 700; } .ki-cell__text { margin-top: 0.75rem; font-size: 0.9rem; line-height: 1.6; color: var(--k-muted-fg); } @media (max-width: 900px) { .ki-grid--3, .ki-grid--2 { grid-template-columns: 1fr; } .ki-grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .ki-grid--4 { grid-template-columns: 1fr; } }