/* ============================================================
IKIGAI · DESIGN SYSTEM
Célia Nishimura · Primage
Extraído do manual de marca v1.2
============================================================ */
/* ---------- FONTES ----------
Adicionar no :
------------------------------- */
:root{
/* --- Cores. Seis, todas com função. Nenhuma decorativa. --- */
--roxo: #80477C; /* Âncora. Logo, destaques, botões. Nunca em grandes áreas. */
--prof: #4E2A4B; /* Fundo de peças com peso. Substitui o preto. */
--lilas: #C9B3C7; /* Respiro. Marcadores, divisórias, texto sobre fundo escuro. */
--tinta: #241D26; /* Texto. Não é preto puro, para não vibrar sobre papel quente. */
--papel: #FAF7F2; /* Fundo principal. É a maior parte de tudo. */
--giz: #E7E0E5; /* Linhas, bordas, trilhos. */
/* Derivadas de uso frequente */
--cinza: #6C6479; /* Texto secundário sobre papel */
--nevoa: #EFE8EE; /* Campo de lilás a baixa opacidade, para quebrar o bege */
--lilas-fraco: #B0A6BC; /* Texto terciário sobre fundo escuro */
/* --- Tipografia --- */
--display: 'Fraunces', Georgia, serif; /* Títulos, numerais, citações */
--corpo: 'IBM Plex Sans', system-ui, sans-serif; /* Texto, rótulos, interface */
/* --- Espaçamento. Base 4. --- */
--e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px;
--e5: 24px; --e6: 32px; --e7: 48px; --e8: 64px; --e9: 96px;
--raio: 2px; /* Canto quase reto. Nunca arredondado. */
--borda: 1px solid var(--giz);
--largura-texto: 820px;
}
/* ---------- BASE ---------- */
*{ box-sizing:border-box; margin:0; padding:0 }
body{
background: var(--papel);
color: var(--tinta);
font-family: var(--corpo);
font-weight: 300;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
.ik-wrap{ max-width: var(--largura-texto); margin:0 auto; padding: 0 var(--e5) }
/* ---------- TIPOGRAFIA ----------
Regra: Fraunces carrega o lado humano, IBM Plex carrega o rigor.
Nunca usar Fraunces em texto corrido longo.
--------------------------------- */
h1,h2,h3,.ik-display{
font-family: var(--display);
font-weight: 400;
letter-spacing: -.015em;
line-height: 1.12;
}
h1{ font-size: clamp(34px, 5.4vw, 64px) }
h2{ font-size: clamp(24px, 3.4vw, 38px) }
h3{ font-size: clamp(20px, 2.6vw, 27px) }
.ik-numeral{ /* Numeral gigante, peça de dado */
font-family: var(--display);
font-size: clamp(120px, 22vw, 300px);
line-height: .9;
letter-spacing: -.03em;
}
.ik-lead{ font-size: clamp(17px, 2vw, 21px); color: var(--cinza); max-width: 60ch }
.ik-corpo{ font-size: 16px; max-width: 64ch }
.ik-secundario{ color: var(--cinza) }
.ik-rotulo{ /* Rótulo de seção, caixa alta espaçada */
font-size: 12px;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--cinza);
}
.ik-marca{ /* Assinatura textual da marca */
font-family: var(--display);
font-size: 13px;
letter-spacing: .26em;
text-transform: uppercase;
color: var(--roxo);
}
/* ---------- SUPERFÍCIES ---------- */
.ik-escuro{
background: var(--prof);
color: var(--papel);
border-radius: var(--raio);
padding: var(--e6) var(--e6);
}
.ik-escuro h1,.ik-escuro h2,.ik-escuro h3{ color: var(--papel) }
.ik-escuro p{ color: var(--lilas) }
.ik-cartao{
background: #fff;
border: var(--borda);
border-radius: var(--raio);
padding: var(--e5) var(--e5);
}
.ik-destaque{ /* Frase de tese, com filete roxo */
font-family: var(--display);
font-size: clamp(22px, 3.1vw, 30px);
line-height: 1.28;
border-left: 2px solid var(--roxo);
padding: var(--e1) 0 var(--e1) var(--e5);
margin: var(--e6) 0;
max-width: 52ch;
}
.ik-campo-nevoa{ /* Campo diagonal de lilás, quebra a grade */
background: var(--nevoa);
clip-path: polygon(0 22%, 100% 11%, 100% 56%, 0 67%);
}
/* ---------- LISTA E TABELA ---------- */
.ik-item{
display: flex;
gap: var(--e4);
align-items: flex-start;
padding: var(--e4) 0;
border-bottom: var(--borda);
}
.ik-item:first-of-type{ border-top: var(--borda) }
.ik-item__titulo{ font-size:16px; line-height:1.45 }
.ik-item__info{ margin-top:5px; font-size:13px; color:var(--cinza) }
.ik-item__info b{ font-weight:600; color:var(--tinta) }
.ik-item.is-feito .ik-item__titulo{
color: var(--cinza);
text-decoration: line-through;
text-decoration-color: var(--lilas);
}
.ik-tabela{ width:100%; border-collapse:collapse; font-size:15px }
.ik-tabela th{
text-align:left; font-weight:600; font-size:12px;
letter-spacing:.13em; text-transform:uppercase; color:var(--cinza);
padding: 0 var(--e3) var(--e3) 0; border-bottom: var(--borda);
}
.ik-tabela td{ padding: var(--e4) var(--e3) var(--e4) 0; border-bottom: var(--borda); vertical-align: top }
/* ---------- CONTROLES ---------- */
.ik-check{
flex: 0 0 21px; height:21px; margin-top:2px;
border:1px solid var(--cinza); border-radius: var(--raio);
background: transparent; cursor:pointer; position:relative;
transition: background .15s, border-color .15s;
}
.ik-check:hover{ border-color: var(--roxo) }
.ik-check:focus-visible{ outline:2px solid var(--roxo); outline-offset:2px }
.ik-check.is-on{ background: var(--roxo); border-color: var(--roxo) }
.ik-check.is-on::after{
content:""; position:absolute; left:6.5px; top:2.5px;
width:5px; height:10px;
border: solid var(--papel); border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.ik-btn{
background: var(--roxo); color: var(--papel);
border:0; border-radius: var(--raio);
padding: 15px var(--e6);
font: inherit; font-size:16px; font-weight:600;
cursor:pointer; transition: opacity .18s;
}
.ik-btn:hover{ opacity:.88 }
.ik-btn--claro{ background: var(--papel); color: var(--prof) }
.ik-btn--vazio{ background:transparent; color:var(--tinta); border:1px solid var(--giz); font-weight:400 }
.ik-btn--vazio:hover{ border-color: var(--roxo); background:#fff; opacity:1 }
.ik-input{
background: transparent;
border: 1px solid var(--giz); border-radius: var(--raio);
padding: 15px var(--e4);
font: inherit; font-size:16px; color: var(--tinta);
width:100%;
}
.ik-input:focus{ outline:none; border-color: var(--roxo) }
.ik-escuro .ik-input{ border-color: rgba(250,247,242,.32); color: var(--papel) }
.ik-escuro .ik-input::placeholder{ color: rgba(201,179,199,.75) }
/* ---------- ETIQUETAS DE STATUS ---------- */
.ik-tag{
display:inline-block; font-size:11px; letter-spacing:.1em;
text-transform:uppercase; padding:3px 9px;
border-radius: var(--raio); white-space:nowrap;
}
.ik-tag--concluido{ background: var(--nevoa); color: var(--roxo) }
.ik-tag--atrasado { background: var(--roxo); color: var(--papel) }
.ik-tag--andamento{ background: var(--lilas); color: var(--prof) }
.ik-tag--aberto { border: var(--borda); color: var(--cinza) }
.ik-tag--cancelado{ border: var(--borda); color: var(--cinza); text-decoration: line-through }
/* ---------- PROGRESSO ---------- */
.ik-barra{ height:3px; background: var(--giz); border-radius:2px; overflow:hidden }
.ik-barra > i{
display:block; height:100%; width:0; background: var(--roxo);
transition: width .4s cubic-bezier(.4,0,.2,1);
}
/* ---------- DIVISÓRIA ---------- */
.ik-regua{ border:0; height:1px; background: var(--giz); margin: var(--e8) 0 }
/* ---------- RESPONSIVO ---------- */
@media (max-width: 640px){
.ik-escuro{ padding: var(--e5) var(--e4) }
.ik-tabela, .ik-tabela thead, .ik-tabela tbody,
.ik-tabela tr, .ik-tabela td, .ik-tabela th{ display:block }
.ik-tabela thead{ display:none }
.ik-tabela tr{ border-bottom: var(--borda); padding: var(--e4) 0 }
.ik-tabela td{ border:0; padding: 3px 0 }
}
/* ============================================================
REGRAS QUE NÃO ESTÃO NO CSS E PRECISAM SER RESPEITADAS
1. Nunca arredondar cantos além de 2px. A marca não é macia.
2. Nunca usar cor fora das seis. Sem azul, verde, laranja ou pastel.
3. Roxo nunca preenche grandes áreas. Para peso, usar roxo profundo.
4. Fraunces só em título, numeral e citação. Nunca em texto longo.
5. Peso de ícone sempre fino, e sempre em #80477C ou branco.
6. Ícone nunca abaixo de 40px, o traço fino desaparece.
7. Espaço vazio é elemento de design. Não preencher por preencher.
8. Sem ilustração, sem grafismo decorativo, sem sombra pesada.
============================================================ */