JaissonLogistics/esg.css at main · JaissonGroup/JaissonLogistics · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
/* =========================
   Sustentabilidade — Jaisson Logistics
   Mesma estrutura da Rações (apenas paleta/logística)
   ========================= */

:root{
  /* azul oceano da Logistics */
  --green: #0E4B71;          /* usado em títulos/acentos */
  --yellow: #F2CF63;         /* acento (igual vibe do site) */
  --ink: #0f172a;
  --ink-2: #334155;
  --muted: #6b7280;
  --radius: 20px;
  --shadow: 0 8px 30px rgba(0,0,0,.08);
}

/* ===== HERO ESG ===== */
.sust-hero{
  position: relative; isolation: isolate;
  padding: 84px 0 60px;
  background:
    linear-gradient(rgba(14,75,113,.70), rgba(14,75,113,.28)),
    url('https://www.visiwise.co/blog/wp-content/uploads/2025/04/What-Is-Sustainable-Shipping.jpg') center/cover no-repeat;
  color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.2);
}
.sust-hero .container{ max-width:1160px; margin:0 auto; padding:0 16px }
.sust-hero h1{ font-size:clamp(28px,5vw,52px); margin:10px 0 8px }
.sust-hero p{ max-width:70ch; opacity:.95; line-height:1.7 }

/* ===== INICIATIVAS ===== */
.initiatives{
  padding:60px 0 64px;
  background:
    radial-gradient(900px 400px at -10% 0%, rgba(242,207,99,.12), transparent 60%),
    radial-gradient(900px 400px at 110% 0%, rgba(14,75,113,.08), transparent 60%);
}
.initiatives .container{ max-width:1160px; margin:0 auto; padding:0 16px }

.initiative-card{
  display:grid; grid-template-columns:1fr 1fr;
  background:#fff; border:1px solid #eef2f7; border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden; margin-bottom:32px;
  transition:transform .25s ease;
}
.initiative-card:hover{ transform:translateY(-4px) }

.initiative-img{
  aspect-ratio:16/10; background:var(--ph) center/cover no-repeat;
  min-height:340px; filter:saturate(1.05);
  transition:filter .4s ease, transform .4s ease;
}
.initiative-card:hover .initiative-img{ filter:saturate(1.15); transform:scale(1.02) }

.initiative-info{
  padding:24px 28px; display:flex; flex-direction:column; justify-content:center;
}
.initiative-info h3{ margin:0 0 8px; color:var(--green); font-size:22px }
.initiative-info p{ margin:0; color:var(--ink-2); line-height:1.6 }

@media (max-width:980px){
  .initiative-card{ grid-template-columns:1fr }
  .initiative-img{ min-height:260px }
}

/* ===== MÉTRICAS ESG (versão com imagens) ===== */
.esg-metrics{
  padding:70px 0 80px; text-align:center;
  background:
    radial-gradient(900px 400px at -10% 0%, rgba(242,207,99,.08), transparent 60%),
    radial-gradient(900px 400px at 110% 0%, rgba(14,75,113,.06), transparent 60%);
}
.esg-metrics .container{ max-width:1160px; margin:0 auto; padding:0 16px }

.esg-stack{
  display:grid; grid-template-columns:1fr; gap:30px; margin-top:40px;
}
.esg-item{
  display:grid; grid-template-columns:1.1fr .9fr;
  background:#fff; border:1px solid #eef2f7; border-radius:20px;
  overflow:hidden; box-shadow:var(--shadow); transition:transform .25s ease;
}
.esg-item:hover{ transform:translateY(-4px) }

.esg-img{
  background:var(--ph) center/cover no-repeat; min-height:340px; aspect-ratio:16/9;
  filter:saturate(1.05); transition:transform .4s ease, filter .4s ease;
}
.esg-item:hover .esg-img{ filter:saturate(1.2); transform:scale(1.03) }

.esg-info{
  padding:28px 32px; display:flex; flex-direction:column; justify-content:center;
}
.esg-info h3{ font-size:22px; margin:0 0 10px; color:var(--green) }
.esg-info p{ margin:0; color:var(--ink-2); line-height:1.6 }

@media (max-width:880px){
  .esg-item{ grid-template-columns:1fr }
  .esg-img{ min-height:260px }
}