/* ============================================================
overA Capital - components (editorial-human system)
Every pattern is flat, serif-led, hairline-separated, generously spaced.
The serif headline labels each section; no eyebrow kickers anywhere.
============================================================ */
/* ---------- generic grids ---------- */
.grid { display: grid; gap: clamp(1.5rem, 2.6vw, 2.4rem); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
/* asymmetric editorial split (the workhorse two-column composition) */
.split {
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: clamp(2.5rem, 6vw, 6rem);
align-items: center;
}
.split--top { align-items: start; }
.split--text-right { grid-template-columns: 0.95fr 1.05fr; }
/* a more editorial, deliberately uneven split: narrow heading column, wide body */
.editorial-split {
display: grid;
grid-template-columns: 0.78fr 1.22fr;
gap: clamp(2rem, 6vw, 6rem);
align-items: start;
}
@media (max-width: 900px) {
.grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
.split, .split--text-right, .editorial-split { grid-template-columns: 1fr; gap: 2.5rem; }
}
@media (max-width: 560px) {
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}
/* =========================================================
HERO - signature warm banded gradient, re-typeset editorial
========================================================= */
.hero {
position: relative; isolation: isolate;
min-height: min(90vh, 820px);
display: flex; align-items: center;
padding-top: calc(var(--header-h) + clamp(2.5rem, 6vw, 5rem));
padding-bottom: clamp(3.5rem, 7vw, 6rem);
overflow: hidden;
color: var(--paper);
background: var(--espresso); /* fallback */
}
.hero__bands { /* the brand surface, built in CSS (no baked-in text) */
position: absolute; inset: 0; z-index: -2;
background:
repeating-linear-gradient(122deg,
rgba(255,255,255,0.045) 0 2px,
transparent 2px 52px),
linear-gradient(116deg,
var(--marrom-escuro) 0%,
var(--marrom) 24%,
var(--argila) 50%,
var(--verde-claro) 82%,
var(--verde) 100%);
}
.hero__veil { /* legibility scrim: cream copy must pass AA on the left */
position: absolute; inset: 0; z-index: -1;
/* Exposure pass 2026-08-03: the veil was smothering the brand gradient
(the whole "dark filter" complaint). Held strong under the copy column,
opened up everywhere else. */
background:
linear-gradient(96deg, rgba(28,21,8,0.80) 0%, rgba(28,21,8,0.44) 36%, rgba(28,21,8,0.06) 64%, transparent 100%),
linear-gradient(180deg, rgba(28,21,8,0.52) 0%, rgba(28,21,8,0.20) 11%, transparent 26%, transparent 76%, rgba(28,21,8,0.26) 100%);
}
.hero .container { position: relative; z-index: 1; }
.hero__copy { max-width: 760px; }
.hero h1 {
color: var(--paper); font-size: var(--fs-display);
line-height: 1.03; letter-spacing: -0.015em;
}
.hero h1 .tone-muted { color: rgba(251,247,238,0.74); }
.hero h1 .accent { color: var(--accent-soft); }
.hero .lead { color: rgba(251,247,238,0.93); margin-top: 1.5rem; max-width: 46ch; }
.hero__cta { margin-top: 2.4rem; display: flex; flex-wrap: wrap; gap: 1rem; }
.hero__qualifier { /* plain audience line, offdeal "$5M-100M" move */
color: rgba(251,247,238,0.86); font-size: var(--fs-small);
margin-bottom: 1.4rem;
}
@media (max-width: 860px) { .hero { min-height: auto; } .hero__copy { max-width: none; } }
/* =================================================================
STATEMENT - mid-page thesis moment (igcp register: assert once at
display scale). Voice-stepped crescendo: a quiet serif concession
line (.statement__set), then the payoff at display scale
(.statement__pay) with ONE roman terracotta phrase. Pure type +
air; no rules, no devices. Statements without the spans keep the
flat one-size rendering below.
================================================================= */
.statement { text-align: center; }
.statement p,
.statement h2 {
font-family: var(--display); font-weight: 400;
font-size: clamp(2rem, 1.2rem + 4vw, 4rem);
line-height: 1.1; letter-spacing: -0.015em;
max-width: 18ch; margin-inline: auto;
}
.statement .statement__thesis { font-size: var(--fs-h3); line-height: 1.3; max-width: none; }
.statement__set { display: block; max-width: 40ch; margin-inline: auto; text-wrap: balance; }
.statement__pay {
display: block; margin: 0.6rem auto 0;
font-size: var(--fs-display); line-height: 1.07;
letter-spacing: -0.02em; text-wrap: balance;
}
/* narrow screens: drop the authored break, let balance wrap naturally */
@media (max-width: 640px) { .statement__pay br { display: none; } }
.statement .tone-muted { display: block; }
.statement .accent { color: var(--accent); font-style: normal; }
.section--dark .statement .accent { color: var(--accent-soft); }
.statement .lead { margin: 2.4rem auto 0; max-width: 52ch; }
/* =================================================================
STAT BAND - GIANT serif numerals on hairlines, left-aligned, no boxes
(igcp move). JS count-up writes .stat__n textContent, so the numeral is
the direct text node; .stat__n .u keeps a terracotta unit/suffix.
================================================================= */
.stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(2.5rem, 5vw, 4.5rem) clamp(2rem, 4vw, 4rem);
}
.stat { border-top: 1px solid var(--line-ink); padding-top: 1.4rem; }
.section--dark .stat { border-top-color: var(--line-on-dark-strong); }
.stat__n {
font-family: var(--display); font-weight: 400;
font-size: var(--fs-stat); line-height: 0.92;
letter-spacing: -0.03em;
color: var(--ink);
font-feature-settings: "tnum" 1, "lnum" 1;
}
.section--dark .stat__n { color: var(--on-dark); }
.stat__n .u { color: var(--accent); }
.section--dark .stat__n .u { color: var(--accent-soft); }
.stat__label {
margin-top: 1.1rem; font-size: var(--fs-small); line-height: 1.5;
color: var(--ink-muted); max-width: 26ch;
}
.section--dark .stat__label { color: var(--on-dark-muted); }
/* a single warm word in a caption may lean terracotta; rationed */
.stat__label b { color: var(--accent); font-weight: 500; }
.section--dark .stat__label b { color: var(--accent-soft); }
@media (max-width: 760px) {
.stats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 440px) {
.stats { grid-template-columns: 1fr; }
}
/* =================================================================
FEATURE COLUMN (hairline top border, serif title) - NOT a 3-card row
Use inside an editorial-split or stacked list, never as the page backbone.
================================================================= */
.feat {
padding-top: 1.5rem;
border-top: 1px solid var(--line-ink);
}
.section--dark .feat { border-top-color: var(--line-on-dark-strong); }
.feat h3 { font-size: var(--fs-h3); margin-bottom: 0.7rem; }
.feat p { color: var(--ink-muted); font-size: var(--fs-small); line-height: 1.6; max-width: 42ch; }
.section--dark .feat p { color: var(--on-dark-muted); }
/* =================================================================
PROCESS (Como geramos valor) - numbered steps, numbers quiet
================================================================= */
.steps { display: flex; flex-direction: column; gap: 0; }
.step {
display: grid;
grid-template-columns: auto 1fr;
gap: clamp(1.5rem, 4vw, 4rem);
padding: clamp(2.2rem, 4vw, 3.6rem) 0;
border-top: 1px solid var(--line);
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step__n {
font-family: var(--display); font-size: clamp(2.4rem,4vw,3.6rem);
line-height: 1; color: var(--ink-faint); letter-spacing: -0.03em;
font-feature-settings: "tnum" 1, "lnum" 1;
}
.step__title { font-size: var(--fs-h3); margin-bottom: 0.6rem; }
/* sub-label is sentence-case muted, never an all-caps tracked tag */
.step__tag {
font-family: var(--sans); font-size: var(--fs-small); letter-spacing: 0;
text-transform: none; color: var(--ink-faint); margin-bottom: 0.7rem; display: block;
}
.step__body { color: var(--ink-muted); max-width: 60ch; }
.step__body ul { margin-top: 0.9rem; display: grid; gap: 0.5rem; }
.step__body li { position: relative; padding-left: 1.3rem; font-size: var(--fs-small); }
.step__body li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 7px; height: 1px; background: var(--ink-faint); }
@media (max-width: 620px) { .step { grid-template-columns: 1fr; gap: 0.6rem; } }
/* =================================================================
CARD - base (flat, hairline, one radius)
================================================================= */
.card {
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--r);
padding: clamp(1.6rem, 2.6vw, 2.2rem);
transition: border-color var(--dur) var(--ease);
}
.section--oat .card { background: var(--paper); }
.card:hover { border-color: var(--line-strong); }
/* =================================================================
DEAL TOMBSTONE - elegant serif company name, flow beneath. No logos,
no card box by default (igcp/serif-name move). A framed variant exists
for the transactions list.
================================================================= */
.deal {
display: flex; flex-direction: column; gap: 0.6rem;
padding: clamp(1.6rem, 2.6vw, 2.2rem) 0;
border-top: 1px solid var(--line-ink);
}
.deal__target { font-family: var(--display); font-size: clamp(1.7rem,2.8vw,2.4rem); line-height: 1.05; letter-spacing: -0.015em; }
.deal__flow {
display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.45rem;
color: var(--ink-muted); font-size: var(--fs-small);
}
.deal__flow .arrow { color: var(--accent); }
.deal__acquirer { color: var(--ink); font-family: var(--display); font-size: 1.05rem; }
.deal__desc { color: var(--ink-muted); font-size: var(--fs-small); line-height: 1.55; max-width: 48ch; }
.deal__meta { color: var(--ink-faint); font-size: var(--fs-xs); }
/* framed variant when deals need a contained surface (e.g. filtered list) */
.deal--framed {
position: relative;
background: var(--paper);
border: 1px solid var(--line); border-top: 1px solid var(--line);
border-radius: var(--r); padding: clamp(1.7rem,2.6vw,2.4rem);
box-shadow: var(--shadow);
transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
transform var(--dur) var(--ease);
}
.deal--framed:hover {
border-color: var(--line-strong);
box-shadow: var(--shadow-lg);
transform: translateY(var(--lift));
}
.deal--framed:active { transform: translateY(1px); }
/* O+A seal accent, top-right of a framed tombstone (NOT a thematic icon) */
.deal__seal {
position: absolute; top: clamp(1.2rem,2vw,1.6rem); right: clamp(1.2rem,2vw,1.6rem);
width: 28px; height: 28px; opacity: var(--seal-opacity);
object-fit: contain; pointer-events: none;
}
.deal--framed .deal__target { padding-right: 38px; }
@media (prefers-reduced-motion: reduce) {
.deal--framed:hover, .deal--framed:active { transform: none; }
}
/* =================================================================
SECTOR - hairline list: serif name + grey sub-verticals
================================================================= */
.sector {
border-top: 1px solid var(--line-ink);
padding: clamp(1.6rem,2.6vw,2.2rem) 0;
display: grid; grid-template-columns: 1fr; gap: 0.5rem;
align-items: start;
}
.sector__name { font-family: var(--display); font-size: var(--fs-h3); line-height: 1.04; }
.sector__sub { font-size: var(--fs-small); color: var(--ink-muted); margin-top: 0.4rem; max-width: 58ch; }
/* SECTOR BENTO - flat grid, one brand-gradient cell breaking the rhythm */
.sector-bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.sector-cell { background: var(--paper); padding: clamp(1.6rem,2.4vw,2.2rem); display: flex; flex-direction: column; gap: 0.5rem; min-height: clamp(150px,16vw,190px); }
.sector-cell h3 { font-size: var(--fs-h3); }
.sector-cell p { font-size: var(--fs-small); color: var(--ink-muted); }
.sector-cell--brand { color: var(--paper); position: relative; isolation: isolate; justify-content: flex-end; }
.sector-cell--brand .hero__bands { z-index: -1; opacity: 1; }
.sector-cell--brand h3, .sector-cell--brand p { color: var(--paper); position: relative; }
@media (max-width: 820px) { .sector-bento { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .sector-bento { grid-template-columns: 1fr; } }
/* =================================================================
TESTIMONIAL - serif quote, <=3 lines, face + name + role
================================================================= */
.quote {
display: flex; flex-direction: column; gap: 1.6rem;
}
.quote--framed {
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--r);
padding: clamp(1.8rem,2.6vw,2.4rem);
box-shadow: var(--shadow);
transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
transform var(--dur) var(--ease);
}
.quote--framed:hover {
border-color: var(--line-strong);
box-shadow: var(--shadow-lg);
transform: translateY(var(--lift));
}
.section--dark .quote--framed {
background: var(--espresso-2); border-color: var(--line-on-dark);
box-shadow: var(--shadow-dark);
}
.section--dark .quote--framed:hover { border-color: var(--line-on-dark-strong); }
@media (prefers-reduced-motion: reduce) {
.quote--framed:hover { transform: none; }
}
.quote p {
font-family: var(--display); font-size: clamp(1.25rem,1.7vw,1.55rem);
line-height: 1.32; color: var(--ink); letter-spacing: -0.008em;
}
.section--dark .quote p { color: var(--on-dark); }
.quote__by { margin-top: auto; display: flex; align-items: center; gap: 0.9rem; }
.quote__avatar { width: 48px; height: 48px; border-radius: var(--r-pill); object-fit: cover; background: var(--oat); border: 1px solid var(--line); flex: none; }
.quote__by b { display: block; font-weight: 500; font-size: var(--fs-small); font-family: var(--sans); }
.quote__by small { color: var(--ink-faint); font-size: var(--fs-xs); }
.section--dark .quote__by small { color: var(--on-dark-faint); }
/* =================================================================
PARTNERS - portrait-forward (faces are the humanity lever)
================================================================= */
.partner { display: grid; grid-template-columns: clamp(170px, 26vw, 280px) 1fr; gap: clamp(1.8rem,3.5vw,3.5rem); align-items: start; }
.partner__photo {
width: 100%; aspect-ratio: 4 / 5; border-radius: var(--r);
object-fit: cover; object-position: top center; background: var(--oat);
border: 1px solid var(--line);
}
/* role is a quiet sentence-case serif line, not a tracked terracotta label */
.partner__role {
font-family: var(--display); font-size: var(--fs-body);
letter-spacing: 0; text-transform: none; color: var(--ink-muted);
margin-bottom: 0.5rem; display: block;
}
.partner h3 { font-size: var(--fs-h2); margin-bottom: 1rem; }
.partner__bio { color: var(--ink-muted); max-width: 60ch; }
.partner__bio + .partner__bio { margin-top: 0.8rem; }
.partner__links { margin-top: 1.4rem; }
@media (max-width: 560px) {
.partner { grid-template-columns: 1fr; }
.partner__photo { max-width: 220px; }
}
/* FOUNDER LETTER - first-person note with portraits (offdeal "note from the
founders" move). Warm, human, signed. */
.letter { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem,5vw,5rem); align-items: start; }
.letter__portraits { display: flex; gap: 0.9rem; }
.letter__portraits img { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: top center; border-radius: var(--r); border: 1px solid var(--line); background: var(--oat); }
.letter__body p { font-size: var(--fs-lead); line-height: 1.6; color: var(--ink); max-width: 60ch; }
.letter__body p + p { margin-top: 1.3rem; }
.letter__sign { margin-top: 2rem; font-family: var(--display); font-size: var(--fs-h4); color: var(--ink); }
@media (max-width: 760px) { .letter { grid-template-columns: 1fr; gap: 2.5rem; } .letter__portraits { max-width: 280px; } }
/* =================================================================
IGC / PRESS strip - quiet, monochrome, no card
================================================================= */
.igc-logo-frame {
display: inline-flex; background: var(--paper); border-radius: var(--r);
padding: 0.9rem 1.3rem; border: 1px solid var(--line);
}
.igc-logo-frame img { height: 34px; width: auto; }
/* press / pedigree line: one muted sentence + greyscale marks */
.press { display: flex; align-items: center; gap: clamp(1.5rem,4vw,3rem); flex-wrap: wrap; }
.press__label { color: var(--ink-faint); font-size: var(--fs-small); }
.press img { height: 24px; width: auto; opacity: 0.78; filter: grayscale(1); }
/* =================================================================
PRODUCT SCREENSHOT FRAME - honest, no fake window chrome
================================================================= */
.shot {
border-radius: var(--r);
overflow: hidden;
border: 1px solid var(--line);
box-shadow: var(--shadow-hero); /* the product earns presence */
background: var(--paper);
}
.section--dark .shot { border-color: var(--line-on-dark); box-shadow: var(--shadow-dark); }
.section--dark .shot figcaption {
background: var(--espresso-2); border-top-color: var(--line-on-dark); color: var(--on-dark-faint);
}
/* optional honest caption strip BELOW the image; no fake macOS dots/title bar */
.shot img { width: 100%; display: block; }
.shot figcaption {
padding: 0.85rem 1.1rem; border-top: 1px solid var(--line);
font-size: var(--fs-xs); color: var(--ink-faint); background: var(--paper-2);
}
/* =================================================================
CTA band - the warm, optimistic close
================================================================= */
.cta-band {
background: var(--espresso); color: var(--on-dark);
text-align: center;
position: relative; overflow: hidden;
}
.cta-band__inner { max-width: 22ch; margin-inline: auto; position: relative; z-index: 2; }
.cta-band h2 { color: var(--on-dark); font-size: var(--fs-h2); }
.cta-band h2 .accent { color: var(--accent-soft); }
.cta-band h2 .tone-muted { color: var(--on-dark-muted); }
.cta-band .lead { color: var(--on-dark-muted); margin: 1.4rem auto 2.4rem; max-width: 50ch; }
.cta-band__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.cta-band__glow {
position: absolute; inset: 0;
background: radial-gradient(60% 120% at 50% 120%, rgba(186,112,39,0.30), transparent 62%);
pointer-events: none;
}
/* =================================================================
FAQ - founder questions, lowercase-human heading, two-column
================================================================= */
.faq { display: grid; grid-template-columns: 0.6fr 1.4fr; gap: clamp(2rem,5vw,5rem); align-items: start; }
.faq__list { display: flex; flex-direction: column; }
.faq__item { border-top: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 1px solid var(--line); }
.faq__q {
width: 100%; text-align: left; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
padding: clamp(1.2rem,2.2vw,1.7rem) 0;
font-family: var(--display); font-size: var(--fs-h4); color: var(--ink); line-height: 1.2;
transition: color var(--dur) var(--ease);
}
.faq__q:hover { color: var(--accent); }
.faq__q .faq__mark {
color: var(--accent); flex: none;
transition: transform var(--dur) var(--ease);
}
/* +/- glyph rotation as a tactile open cue (works for an add<->remove swap too) */
.faq__q[aria-expanded="true"] .faq__mark { transform: rotate(45deg); }
.faq__a { color: var(--ink-muted); font-size: var(--fs-small); line-height: 1.6; max-width: 58ch; padding-bottom: clamp(1.2rem,2.2vw,1.7rem); }
/* Animated disclosure. JS toggles aria-expanded on .faq__q and removes [hidden]
on .faq__a; the grid-rows tween gives a smooth open/close. Default (no JS,
not hidden) shows answers statically. */
.faq__a[hidden] { display: block; } /* override base hidden so we can animate */
.faq__a {
display: grid; grid-template-rows: 0fr;
transition: grid-template-rows var(--dur) var(--ease), padding var(--dur) var(--ease), opacity var(--dur) var(--ease);
padding-bottom: 0; opacity: 0;
}
.faq__a > * { overflow: hidden; min-height: 0; }
.faq__a:not([hidden]) {
grid-template-rows: 1fr; opacity: 1;
padding-bottom: clamp(1.2rem,2.2vw,1.7rem);
}
@media (prefers-reduced-motion: reduce) {
.faq__a { transition: none; }
.faq__a[hidden] { display: none; } /* instant show/hide, honor real hidden */
}
@media (max-width: 760px) { .faq { grid-template-columns: 1fr; gap: 1.5rem; } }
/* =================================================================
FORM - sentence-case labels (no tracked mono), flat fields
================================================================= */
.form { display: grid; gap: 1.3rem; }
/* the success state hides the form via [hidden]; display:grid above must not win */
.form[hidden] { display: none; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; }
.field { display: flex; flex-direction: column; gap: 0.5rem; }
.field label {
font-family: var(--sans); font-size: var(--fs-small); font-weight: 500;
letter-spacing: 0; text-transform: none; color: var(--ink);
}
.field input, .field select, .field textarea {
font: inherit; font-size: var(--fs-small);
color: var(--ink); background: var(--paper);
border: 1px solid var(--line-strong); border-radius: var(--r-sm);
padding: 0.9em 1em;
transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field textarea { resize: vertical; min-height: 140px; }
.field input:focus, .field select:focus, .field textarea:focus {
outline: none; border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-wash);
}
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--accent-deep); }
.field__err { color: var(--accent-deep); font-size: var(--fs-xs); }
.form__error { color: var(--accent-deep); font-size: var(--fs-small); margin-top: 0.4rem; }
.form__success {
border: 1px solid var(--line); border-radius: var(--r);
padding: clamp(1.6rem,2.6vw,2.4rem); background: var(--paper-2);
}
.form__success h3 { font-size: var(--fs-h3); margin-bottom: 0.6rem; }
.form__success p { color: var(--ink-muted); }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }
/* =================================================================
teaser link to inner pages
================================================================= */
.teaser-link {
display: inline-flex; align-items: center; gap: 0.5em;
margin-top: 1.6rem; font-weight: 500; color: var(--accent);
position: relative;
}
.teaser-link::after {
content: ""; position: absolute; left: 0; bottom: -3px; width: 100%; height: 1px;
background: currentColor; transform: scaleX(0); transform-origin: left;
transition: transform var(--dur) var(--ease);
}
.teaser-link:hover::after { transform: scaleX(1); }
.teaser-link .arr { transition: transform var(--dur) var(--ease); }
.teaser-link:hover .arr { transform: translate(3px,-3px); }
/* generic uneven two-column intro (heading left, body right) */
.intro-split {
display: grid; grid-template-columns: 0.85fr 1.15fr;
gap: clamp(2rem, 5vw, 5rem); align-items: start;
}
@media (max-width: 760px) { .intro-split { grid-template-columns: 1fr; gap: 1.5rem; } }
/* =================================================================
=========== RICH INSTITUTIONAL COMPONENT LIBRARY =============
Tactile-depth tiles, Material Symbols icon system, bento, filterable
tombstones, product callouts, structured comparison, carded sectors,
process timeline w/ icon chips, credibility bars. Built ON the shipped
engine (.reveal / data-count / [data-filter-bar]); ADD-only, never re-theme.
================================================================= */
/* -----------------------------------------------------------------
ICON SYSTEM - Google Material Symbols Outlined (brand-sanctioned UI icons)
Load once in :
Recolor by ROLE: terracotta = capability/AI, green = sector/growth,
ink-muted = neutral/process. FILL 0 (outline) to match the hairline look.
The 16 over_a_icones_* PNGs are the O+A SEAL, never thematic icons.
----------------------------------------------------------------- */
.msym {
font-family: "Material Symbols Outlined";
font-weight: normal; font-style: normal;
font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
line-height: 1; letter-spacing: normal; text-transform: none;
white-space: nowrap; word-wrap: normal; direction: ltr;
-webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
display: inline-block; color: var(--accent); font-size: 1.7rem;
flex: none;
}
.msym--green { color: var(--verde); }
.msym--ink { color: var(--ink-muted); }
.msym--soft { color: var(--accent-soft); } /* on dark */
.msym--faint { color: var(--on-dark-faint); } /* muted "old way" on dark */
.msym--sm { font-size: 1.3rem; }
.msym--lg { font-size: 2.1rem; }
/* a glyph inside a rounded-square chip (sector tiles, feature rows) */
.icon-chip {
display: inline-flex; align-items: center; justify-content: center;
width: 46px; height: 46px; border-radius: var(--r-sm);
background: var(--accent-wash-2); border: 1px solid var(--line);
}
.icon-chip .msym { color: var(--accent); }
.icon-chip--green { background: var(--verde-wash-2); }
.icon-chip--green .msym { color: var(--verde); }
.icon-chip--ink { background: var(--paper-2); }
.icon-chip--ink .msym { color: var(--ink-muted); }
/* -----------------------------------------------------------------
TACTILE TILE - the canonical warm paper surface every card shares
(bento, sector card, capability tile, product-note rows). Warm 1px
border + whisper-soft shadow + hover lift. One radius. Never harsh.
----------------------------------------------------------------- */
.tile {
position: relative; isolation: isolate;
display: flex; flex-direction: column; gap: 0.85rem;
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--r);
padding: clamp(1.6rem, 2.6vw, 2.2rem);
box-shadow: var(--shadow);
transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
transform var(--dur) var(--ease);
}
.tile:hover {
border-color: var(--line-strong);
box-shadow: var(--shadow-lg);
transform: translateY(var(--lift));
}
.tile:active { transform: translateY(1px); }
.tile > .msym { margin-bottom: 0.2rem; }
.tile h3 { font-size: var(--fs-h3); line-height: 1.1; }
.tile p { color: var(--ink-muted); font-size: var(--fs-small); line-height: 1.6; }
/* nested chip inside a tile uses the deeper paper layer for depth */
.tile .chip { background: var(--paper-2); }
/* O+A seal accent inside a tile (top-right, never a thematic icon) */
.tile__seal {
position: absolute; top: clamp(1.2rem,2vw,1.6rem); right: clamp(1.2rem,2vw,1.6rem);
width: 30px; height: 30px; opacity: var(--seal-opacity);
object-fit: contain; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
.tile:hover, .tile:active { transform: none; }
}
/* -----------------------------------------------------------------
BENTO - real mixed-size grid (NOT 3 equal cards). 6-col track; tiles
span 2/3/4; one .tile--brand carries the brand gradient and breaks the
rhythm. Separated tiles (warm gaps), not a hairline-knit grid.
----------------------------------------------------------------- */
.bento {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: clamp(1rem, 1.6vw, 1.4rem);
}
.bento .tile { grid-column: span 3; } /* default half */
.tile--lg { grid-column: span 4 !important; }
.tile--sm { grid-column: span 2 !important; }
.tile--wide { grid-column: span 6 !important; }
.tile--tall { grid-row: span 2; }
/* brand-gradient anchor cell (reuses the hero band surface) */
.tile--brand {
color: var(--paper); justify-content: flex-end; overflow: hidden;
border-color: transparent;
}
.tile--brand .hero__bands { position: absolute; inset: 0; z-index: -1; }
.tile--brand h3, .tile--brand p { color: var(--paper); }
.tile--brand p { color: rgba(251,247,238,0.92); }
.tile--brand:hover { border-color: transparent; }
/* a seal-forward accent cell (O+A mark large, quiet) */
.tile--seal { align-items: center; justify-content: center; text-align: center; }
.tile--seal img { width: clamp(56px, 7vw, 84px); height: auto; opacity: 0.9; }
@media (max-width: 900px) {
.bento { grid-template-columns: repeat(4, 1fr); }
.bento .tile, .tile--lg, .tile--sm, .tile--wide { grid-column: span 2 !important; }
.tile--tall { grid-row: auto; }
}
@media (max-width: 560px) {
.bento { grid-template-columns: 1fr; }
.bento .tile, .tile--lg, .tile--sm, .tile--wide { grid-column: 1 / -1 !important; }
}
/* -----------------------------------------------------------------
FEATURE ROW - 4-up scannable "what you get" (offdeal modern-approach).
Lighter sibling of the bento: icon + title + one line, hairline-topped,
no card box. Use for process/benefits; reserve .bento for capabilities.
----------------------------------------------------------------- */
.feature-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.6rem,3vw,3rem); }
.feature-cell { display: flex; flex-direction: column; gap: 0.7rem; padding-top: 1.3rem; border-top: 1px solid var(--line-ink); }
.section--dark .feature-cell { border-top-color: var(--line-on-dark-strong); }
.feature-cell h3 { font-size: var(--fs-h4); }
.feature-cell p { color: var(--ink-muted); font-size: var(--fs-small); line-height: 1.55; max-width: 30ch; }
.section--dark .feature-cell p { color: var(--on-dark-muted); }
@media (max-width: 820px) { .feature-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .feature-row { grid-template-columns: 1fr; } }
/* -----------------------------------------------------------------
CHIP + FILTER BAR - sentence-case pills (NOT terminal tags). Drives the
shipped [data-filter-bar] -> [data-deal][data-sector] mechanism in site.js.
----------------------------------------------------------------- */
.chip {
display: inline-flex; align-items: center; gap: 0.4em;
font-family: var(--sans); font-size: var(--fs-xs); font-weight: 500;
letter-spacing: 0; text-transform: none; color: var(--ink-muted);
background: var(--paper-2); border: 1px solid var(--line);
border-radius: var(--r-pill); padding: 0.4em 0.85em; line-height: 1;
}
.chip--sector { background: var(--accent-wash-2); color: var(--accent-deep); border-color: transparent; }
.chip--year { color: var(--ink-faint); }
.deal__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.2rem; }
/* filter bar = a row of toggle chips; the active one is filled terracotta */
.filter-bar {
display: flex; flex-wrap: wrap; gap: 0.6rem;
margin-bottom: clamp(2rem,4vw,3rem);
}
.filter-bar button {
font-family: var(--sans); font-size: var(--fs-small); font-weight: 500;
color: var(--ink-muted); background: var(--paper);
border: 1px solid var(--line); border-radius: var(--r-pill);
padding: 0.55em 1.15em; line-height: 1;
transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.filter-bar button:hover { border-color: var(--line-strong); color: var(--ink); }
.filter-bar button.is-active { background: var(--accent); border-color: var(--accent); color: var(--paper); }
/* calm fade when the filter swaps cards (JS toggles display; this softens it) */
[data-deal] { transition: opacity var(--dur) var(--ease); }
@media (prefers-reduced-motion: reduce) { [data-deal] { transition: none; } }
/* a grid wall of framed tombstones for the Transações page */
.deal-wall { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem,2vw,1.6rem); }
@media (max-width: 720px) { .deal-wall { grid-template-columns: 1fr; } }
/* -----------------------------------------------------------------
PRODUCT SHOWCASE - real screenshot in .shot + annotation callout rows.
The "AI as structure" proof, shown not faked. Callouts sit beside the
image as paper-2 chip rows with a Material glyph.
----------------------------------------------------------------- */
.shot-stage {
display: grid; grid-template-columns: 1.25fr 0.75fr;
gap: clamp(1.6rem, 3.5vw, 3rem); align-items: center;
}
.shot-notes { display: flex; flex-direction: column; gap: 0.85rem; }
.shot-notes li {
display: flex; align-items: flex-start; gap: 0.85rem;
background: var(--paper-2); border: 1px solid var(--line);
border-radius: var(--r-sm); padding: 0.95rem 1.1rem;
font-size: var(--fs-small); color: var(--ink); line-height: 1.4;
}
.shot-notes li .msym { font-size: 1.4rem; margin-top: 0.05rem; }
.shot-notes li b { font-weight: 600; }
.shot-notes li span:last-child { color: var(--ink-muted); }
.section--dark .shot-notes li {
background: var(--espresso-2); border-color: var(--line-on-dark); color: var(--on-dark);
}
.section--dark .shot-notes li span:last-child { color: var(--on-dark-muted); }
@media (max-width: 820px) { .shot-stage { grid-template-columns: 1fr; } }
/* -----------------------------------------------------------------
SECTOR CARD - carded variant of .sector: glyph chip + name + sub +
one REAL named outcome (drop .sector__outcome if no real deal exists).
Reuses .tile for the tactile surface.
----------------------------------------------------------------- */
.sector-card { gap: 0.7rem; }
.sector-card .icon-chip { margin-bottom: 0.3rem; }
.sector-card .sector__name { font-family: var(--display); font-size: var(--fs-h3); line-height: 1.04; }
.sector-card .sector__sub { font-size: var(--fs-small); color: var(--ink-muted); margin-top: 0; }
.sector__outcome {
margin-top: auto; padding-top: 0.9rem; border-top: 1px solid var(--line);
font-size: var(--fs-small); color: var(--ink-muted);
}
.sector__outcome .serif-italic { color: var(--ink); }
/* -----------------------------------------------------------------
PROCESS TIMELINE (upgrade) - left icon chip on a vertical connector line.
Add .steps--connected to .steps; each .step gets a .step__icon chip. The
1px connector is the static base; the optional Lottie draws over it in-view.
----------------------------------------------------------------- */
.steps--connected { position: relative; }
.steps--connected .step { grid-template-columns: var(--icon-chip) 1fr; align-items: start; }
.step__icon {
position: relative; z-index: 1;
display: inline-flex; align-items: center; justify-content: center;
width: var(--icon-chip); height: var(--icon-chip); border-radius: var(--r-pill);
background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.step__icon .msym { color: var(--ink-muted); font-size: 1.4rem; }
.section--dark .step__icon { background: var(--espresso-2); border-color: var(--line-on-dark); }
.section--dark .step__icon .msym { color: var(--on-dark-muted); }
/* the static connector: a 1px rule running through the icon-chip column */
.steps--connected .step::before {
content: ""; position: absolute; left: calc(var(--icon-chip) / 2);
top: 0; bottom: 0; width: 1px; background: var(--line);
z-index: 0; transform: translateX(-0.5px);
}
.steps--connected .step:first-child::before { top: 50%; }
.steps--connected .step:last-child::before { bottom: 50%; }
.section--dark .steps--connected .step::before { background: var(--line-on-dark); }
/* host for the one purposeful Lottie connector (sits behind the chips) */
.steps__connector {
position: absolute; left: calc(var(--icon-chip) / 2); top: 0; bottom: 0;
width: 2px; transform: translateX(-1px); z-index: 0; pointer-events: none;
}
@media (max-width: 620px) {
.steps--connected .step { grid-template-columns: 1fr; gap: 0.6rem; }
.steps--connected .step::before, .steps__connector { display: none; }
}
/* -----------------------------------------------------------------
CREDIBILITY / UTILITY BARS
.util-bar = thin top announcement strip (one real credibility fact)
.cred-strip = "apoiado por IGC" lockup, quiet greyscale, hairline-ruled
----------------------------------------------------------------- */
.util-bar {
display: flex; align-items: center; justify-content: center; gap: 0.6rem;
flex-wrap: wrap; text-align: center;
background: var(--oat); border-bottom: 1px solid var(--line);
padding: 0.6rem var(--gutter); font-size: var(--fs-small); color: var(--ink-muted);
}
.util-bar b { color: var(--ink); font-weight: 600; }
.util-bar a { color: var(--accent); }
.util-bar a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cred-strip {
display: flex; align-items: center; justify-content: center; gap: clamp(1.4rem,4vw,3rem);
flex-wrap: wrap; padding-block: clamp(1.4rem,3vw,2.2rem);
border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.cred-strip__label { color: var(--ink-faint); font-size: var(--fs-small); }
.cred-strip img { height: 30px; width: auto; opacity: 0.88; }
/* -----------------------------------------------------------------
HERO STAT-STRIP - inline 3-4 cell proof strip under the hero headline
(offdeal move). Hairline-separated cells: big serif number + tiny line.
Real, defensible facts only. Sits on the dark hero, so on-dark colors.
----------------------------------------------------------------- */
.stat-strip {
display: grid; grid-template-columns: repeat(var(--cells, 3), 1fr);
margin-top: clamp(2.2rem, 4vw, 3.2rem);
border-top: 1px solid var(--line-on-dark);
}
.stat-strip__cell { padding: 1.3rem clamp(1rem,2.5vw,2rem) 0 0; }
.stat-strip__cell + .stat-strip__cell { border-left: 1px solid var(--line-on-dark); padding-left: clamp(1rem,2.5vw,2rem); }
.stat-strip__n {
font-family: var(--display); font-weight: 400; line-height: 0.95;
font-size: clamp(2rem, 1.2rem + 2.6vw, 3.2rem); letter-spacing: -0.02em;
color: var(--on-dark); font-feature-settings: "tnum" 1, "lnum" 1;
}
.stat-strip__n .u { color: var(--accent-soft); }
.stat-strip__label { margin-top: 0.6rem; font-size: var(--fs-xs); line-height: 1.45; color: var(--on-dark-muted); max-width: 22ch; }
/* light-band variant (when the strip sits on paper, not the hero) */
.stat-strip--light { border-top-color: var(--line-ink); }
.stat-strip--light .stat-strip__cell + .stat-strip__cell { border-left-color: var(--line); }
.stat-strip--light .stat-strip__n { color: var(--ink); }
.stat-strip--light .stat-strip__n .u { color: var(--accent); }
.stat-strip--light .stat-strip__label { color: var(--ink-muted); }
@media (max-width: 680px) {
.stat-strip { grid-template-columns: 1fr 1fr; }
.stat-strip__cell { padding-right: 1rem; }
.stat-strip__cell:nth-child(odd) { border-left: 0; padding-left: 0; }
.stat-strip__cell:nth-child(n+3) { border-top: 1px solid var(--line-on-dark); margin-top: 1.1rem; }
.stat-strip--light .stat-strip__cell:nth-child(n+3) { border-top-color: var(--line); }
}
/* -----------------------------------------------------------------
FOOTER SEAL option - swap the giant italic wordmark for the O+A seal
bleeding off the bottom edge (quiet brand-signature). Pair with .site-footer.
----------------------------------------------------------------- */
.footer-seal {
position: absolute; right: -3vw; bottom: -10vw; z-index: 0;
width: 42vw; height: auto; opacity: 0.05;
pointer-events: none; user-select: none;
}
/* The α watermark used by the inner pages ():
same quiet-signature register as .footer-seal — a giant serif glyph
bleeding off the footer's bottom-right, clipped by .site-footer's
overflow:hidden. Without this rule the span renders as a stray
body-size "α" at the footer's top-left. */
.footer-mark {
position: absolute; right: -0.05em; bottom: -0.28em; z-index: 0;
font-family: var(--display);
font-style: italic;
font-size: clamp(13rem, 20vw, 24rem);
line-height: 1;
color: var(--on-dark);
opacity: 0.045;
pointer-events: none; user-select: none;
}
.site-footer .container { position: relative; z-index: 1; }
/* -----------------------------------------------------------------
CINEMATIC MEDIA BAND - full-bleed real photo with a play affordance
(igcp human-video moment). If no film, the band still lands as one
strong photograph. Reduced-motion: no autoplay, poster only.
----------------------------------------------------------------- */
.media-band { position: relative; isolation: isolate; border-radius: var(--r); overflow: hidden; min-height: clamp(320px, 46vw, 560px); }
.media-band img, .media-band video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.media-band__veil { position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(28,21,8,0.04) 40%, rgba(28,21,8,0.34)); }
.media-band__play {
position: absolute; left: clamp(1.4rem,3vw,2.4rem); bottom: clamp(1.4rem,3vw,2.4rem);
z-index: 1; display: inline-flex; align-items: center; gap: 0.8rem;
color: var(--paper); font-weight: 500;
}
.media-band__play .play-dot {
display: inline-flex; align-items: center; justify-content: center;
width: 52px; height: 52px; border-radius: var(--r-pill);
background: rgba(251,247,238,0.16); border: 1px solid rgba(251,247,238,0.5);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.media-band__play:hover .play-dot { background: rgba(251,247,238,0.28); transform: scale(1.05); }
.media-band__play .msym { color: var(--paper); }
@media (prefers-reduced-motion: reduce) { .media-band__play:hover .play-dot { transform: none; } }
/* =================================================================
HOME HERO (.h1hero) — EXPOSURE CORRECTION, client review 2026-08-03
The home hero's own rules live in an inline