/*
Eldorado Empreendimentos Agropecuários — folha de estilos
Fontes (Fraunces, Source Sans 3, IBM Plex Mono) carregadas via no do index.html
Ícones: Font Awesome 6, carregado via no
*/
:root{
--cream:#F4EFE1;
--cream-2:#ECE4CE;
--paper:#FBF8EF;
--ink:#1C2A1F;
--ink-soft:#3C4A3D;
--green-deep:#132417;
--green:#1F3D28;
--green-mid:#2E5A3B;
--gold:#A9843C;
--gold-light:#CDA85C;
--line: rgba(28,42,31,0.14);
--shadow: 0 18px 40px -22px rgba(19,36,23,0.35);
--on-dark:#FBF8EF; /* fixed light ink for the permanently-dark green surfaces (hero, buttons, footer) — never redefined per theme */
}
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
--cream:#101a12;
--cream-2:#182417;
--paper:#141f16;
--ink:#EDE7D3;
--ink-soft:#B9C2B4;
--green-deep:#0B120C;
--green:#16281B;
--green-mid:#284A32;
--gold:#D6B369;
--gold-light:#E7CD8E;
--line: rgba(237,231,211,0.14);
--shadow: 0 18px 40px -20px rgba(0,0,0,0.6);
}
}
:root[data-theme="dark"]{
--cream:#101a12;
--cream-2:#182417;
--paper:#141f16;
--ink:#EDE7D3;
--ink-soft:#B9C2B4;
--green-deep:#0B120C;
--green:#16281B;
--green-mid:#284A32;
--gold:#D6B369;
--gold-light:#E7CD8E;
--line: rgba(237,231,211,0.14);
--shadow: 0 18px 40px -20px rgba(0,0,0,0.6);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
margin:0;
background:var(--cream);
color:var(--ink);
font-family:'Source Sans 3', ui-sans-serif, system-ui, sans-serif;
-webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){
html{scroll-behavior:auto;}
*{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}
h1,h2,h3{
font-family:'Fraunces', Georgia, 'Times New Roman', serif;
font-weight:600;
text-wrap:balance;
margin:0;
color:var(--ink);
}
.eyebrow{
font-family:'IBM Plex Mono', ui-monospace, monospace;
font-size:0.72rem;
letter-spacing:0.14em;
text-transform:uppercase;
color:var(--gold);
font-weight:500;
}
p{ line-height:1.65; color:var(--ink-soft); max-width:62ch; }
a{color:inherit;}
img{max-width:100%; display:block;}
.wrap{ max-width:1180px; margin:0 auto; padding-inline:clamp(20px,5vw,64px); }
/* NAV */
header.site{
position:sticky; top:0; z-index:40;
background:color-mix(in srgb, var(--cream) 88%, transparent);
backdrop-filter:blur(10px);
border-bottom:1px solid var(--line);
}
.navbar{
display:flex; align-items:center; justify-content:space-between;
padding-block:26px;
}
.brand{ display:flex; align-items:center; gap:14px; text-decoration:none; }
.brand img{ height:50px; width:auto; display:block; }
.brand-text{ display:flex; flex-direction:column; gap:2px; line-height:1; }
.brand-name{
font-family:'Source Sans 3', ui-sans-serif, system-ui, sans-serif;
font-weight:700; font-size:1.32rem; letter-spacing:0.01em;
color:var(--ink);
}
.brand-sub{
font-family:'Source Sans 3', ui-sans-serif, system-ui, sans-serif;
font-weight:600; font-size:0.72rem; letter-spacing:0.01em;
color:var(--ink-soft);
}
nav.links{ display:flex; gap:clamp(16px,2.4vw,34px); align-items:center; }
nav.links a{
text-decoration:none; font-size:0.92rem; font-weight:600; color:var(--ink-soft);
padding-block:6px; border-bottom:2px solid transparent; transition:color .2s, border-color .2s;
}
nav.links a:hover, nav.links a:focus-visible{ color:var(--green-mid); border-color:var(--gold); outline:none; }
.btn{
display:inline-flex; align-items:center; gap:8px;
background:var(--green); color:var(--on-dark);
padding:11px 22px; border-radius:2px; font-weight:600; font-size:0.9rem;
text-decoration:none; border:1px solid var(--green);
transition:background .2s, transform .15s;
}
/* nav.links a{ color:var(--ink-soft) } above outranks .btn{ color:var(--on-dark) }
by specificity — this rule wins the tie-break so the nav button text stays legible. */
nav.links a.btn{ color:var(--on-dark); }
.btn:hover{ background:var(--green-mid); }
.btn:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.btn-ghost{
background:transparent; color:var(--ink); border:1px solid var(--line);
}
.btn-ghost:hover{ border-color:var(--gold); color:var(--green-mid); background:transparent; }
/* HERO */
.hero{
position:relative; overflow:hidden;
background:var(--green-deep);
color:var(--on-dark);
}
.hero-terrain{
position:absolute; inset:0; opacity:0.5; pointer-events:none;
}
.hero-inner{
position:relative; z-index:2;
padding-block:clamp(72px,13vw,132px) clamp(64px,10vw,104px);
display:grid; gap:28px; max-width:760px;
}
.hero .eyebrow{ color:var(--gold-light); }
.hero h1{
color:var(--on-dark);
font-size:clamp(2.4rem,5vw,4.1rem);
line-height:1.06;
letter-spacing:-0.01em;
}
.hero p.lead{
color:#D9D4C2; font-size:1.12rem; max-width:52ch;
}
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:6px; }
.hero .btn-ghost{ border-color:rgba(251,248,239,0.35); color:var(--on-dark); }
.hero .btn-ghost:hover{ border-color:var(--gold-light); color:var(--gold-light); }
.hero-facts{
position:relative; z-index:2;
border-top:1px solid rgba(251,248,239,0.18);
}
.hero-facts .wrap{
display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:0;
}
.fact{
padding:22px 24px; border-left:1px solid rgba(251,248,239,0.18);
}
.fact:first-child{ border-left:none; }
.fact .num{
font-family:'IBM Plex Mono', monospace; font-size:1.5rem; color:var(--gold-light);
font-variant-numeric:tabular-nums;
}
.fact .label{
font-size:0.78rem; color:#C7C2AE; margin-top:4px; line-height:1.4;
}
/* SECTIONS */
section{ padding-block:clamp(64px,9vw,108px); }
.section-head{ max-width:640px; margin-bottom:clamp(36px,5vw,56px); }
.section-head h2{ font-size:clamp(1.9rem,3.4vw,2.6rem); margin-top:10px; }
.section-head p{ margin-top:14px; }
.alt{ background:var(--paper); border-block:1px solid var(--line); }
/* SOBRE */
.about-grid{
display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(40px,6vw,80px);
align-items:start;
}
@media (max-width:860px){ .about-grid{ grid-template-columns:1fr; } }
.timeline{ display:grid; gap:0; border-left:2px solid var(--line); padding-left:26px; }
.tl-item{ position:relative; padding-block:18px; }
.tl-item:not(:last-child){ border-bottom:1px solid var(--line); }
.tl-item::before{
content:''; position:absolute; left:-31px; top:24px;
width:9px; height:9px; border-radius:50%; background:var(--gold);
box-shadow:0 0 0 4px var(--cream);
}
.tl-year{ font-family:'IBM Plex Mono', monospace; color:var(--gold); font-size:0.82rem; font-weight:500; }
.tl-item h3{ font-size:1.08rem; margin-top:4px; }
.tl-item p{ margin-top:6px; font-size:0.94rem; }
.values{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:32px; }
.value{ background:var(--cream); padding:22px; }
.value .eyebrow{ display:block; margin-bottom:8px; }
.value h3{ font-size:1rem; }
.value p{ font-size:0.88rem; margin-top:6px; }
/* PROJETOS */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
@media (max-width:920px){ .cards{ grid-template-columns:1fr; } }
.card{
background:var(--paper); border:1px solid var(--line); border-radius:3px;
overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow);
}
.card-media{
height:150px; position:relative;
background:linear-gradient(135deg, var(--green) 0%, var(--green-mid) 60%, var(--gold) 140%);
}
.card-media canvas{ position:absolute; inset:0; width:100%; height:100%; opacity:0.55; }
.card-tag{
position:absolute; top:14px; left:14px;
font-family:'IBM Plex Mono', monospace; font-size:0.68rem; letter-spacing:0.08em;
text-transform:uppercase; color:var(--on-dark); background:rgba(19,36,23,0.55);
padding:4px 9px; border-radius:2px;
}
.card-body{ padding:22px 22px 26px; display:grid; gap:10px; flex:1; }
.card-body h3{ font-size:1.15rem; }
.card-body p{ font-size:0.92rem; }
/* CONTATO */
.contact-grid{
display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,80px);
}
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-list{ display:grid; gap:22px; margin-top:28px; }
.contact-item{ display:flex; gap:16px; align-items:flex-start; }
.contact-item .ic{
width:38px; height:38px; border-radius:50%; border:1px solid var(--gold);
display:flex; align-items:center; justify-content:center; flex-shrink:0;
color:var(--gold); font-size:0.92rem;
}
.contact-item h3{ font-size:0.98rem; }
.contact-item p{ font-size:0.92rem; margin-top:2px; }
.contact-link{ color:inherit; text-decoration:none; border-bottom:1px solid var(--line); transition:border-color .2s ease, color .2s ease; }
.contact-link:hover, .contact-link:focus-visible{ color:var(--gold); border-color:var(--gold); }
.map-card{
border:1px solid var(--line); border-radius:3px; overflow:hidden; background:var(--paper);
}
.contact-list + .map-card{ margin-top:28px; }
.map-visual{ height:220px; position:relative; background:var(--green-deep); }
.map-visual iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; filter:grayscale(0.15) contrast(1.02); }
.map-info{ padding:20px 22px; }
.map-info .eyebrow{ margin-bottom:6px; }
.map-info p{ margin-top:4px; }
.orient-block h3{ font-size:1.25rem; margin-bottom:14px; }
form.cta-form{ display:grid; gap:14px; margin-top:26px; }
.cta-form .row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:520px){ .cta-form .row{ grid-template-columns:1fr; } }
.field label{ font-size:0.8rem; font-weight:600; color:var(--ink-soft); display:block; margin-bottom:6px; }
.field input, .field textarea{
width:100%; border:1px solid var(--line); background:var(--paper); color:var(--ink);
padding:11px 13px; border-radius:2px; font-family:inherit; font-size:0.94rem;
}
.field input:focus, .field textarea:focus{ outline:2px solid var(--gold); outline-offset:1px; border-color:var(--gold); }
.field textarea{ min-height:110px; resize:vertical; }
.btn-submit{ justify-self:start; }
footer{
background:var(--green-deep); color:#C7C2AE; padding-block:44px;
border-top:1px solid rgba(251,248,239,0.1);
}
.foot-grid{ display:flex; flex-wrap:wrap; gap:32px; align-items:flex-start; }
.foot-legal{ font-size:0.78rem; line-height:1.7; max-width:44ch; }
.foot-legal b{ color:var(--on-dark); }
.foot-bottom{
margin-top:34px; padding-top:20px; border-top:1px solid rgba(251,248,239,0.1);
display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
font-size:0.76rem; color:#8E9587;
}
.skip-link{
position:absolute; left:-999px; top:0; background:var(--gold); color:var(--green-deep);
padding:10px 16px; z-index:100;
}
.skip-link:focus{ left:12px; top:12px; }
/* ---------------------------------------------------------------
Scroll reveal — progressive enhancement.
Without JS (or when IntersectionObserver is unsupported)
never gets the "js" class below, so .reveal elements stay at
their default, fully visible state. Only once js/main.js
confirms it can observe them do they start hidden and animate in.
--------------------------------------------------------------- */
.reveal{ opacity:1; transform:none; }
html.js .reveal{
opacity:0; transform:translateY(22px);
transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
will-change:opacity, transform;
}
html.js .reveal.in-view{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
html.js .reveal{ opacity:1; transform:none; transition:none; }
}