/* ============================================================
Hau.Design — design system (dark, Sylven-inspired language)
Palette: #191b15 ink · #dee146 lime · #e8dccf cream · Onest
============================================================ */
:root {
--ink: #191b15;
--ink-2: #1f2119;
--ink-3: #262a1f;
--lime: #dee146;
--cream: #e8dccf;
--cream-dim: rgba(232, 220, 207, 0.58);
--cream-faint: rgba(232, 220, 207, 0.14);
--hairline: rgba(232, 220, 207, 0.13);
--maxw: 1240px;
--grid-line: rgba(232, 220, 207, 0.028);
--grid-size: 10px;
}
/* subtle technical grid — reused on the base and on tinted panels */
.gridbg {
background-image:
linear-gradient(var(--grid-line) 1px, transparent 1px),
linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
background-size: var(--grid-size) var(--grid-size);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
font-family: 'Onest', system-ui, -apple-system, sans-serif;
background-color: var(--ink);
background-image:
linear-gradient(var(--grid-line) 1px, transparent 1px),
linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
background-size: var(--grid-size) var(--grid-size);
color: var(--cream);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
/* xadrez reativo ao mouse — assume o lugar do grid estático do body.
Só na home: as páginas de case são claras e não têm grid. */
#gridfx {
position: fixed; inset: 0; z-index: -1;
display: block; pointer-events: none;
}
.tem-gridfx body { background-image: none; }
::selection { background: var(--lime); color: var(--ink); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }
/* micro-labels */
.mono {
font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
font-weight: 500; color: var(--cream-dim);
}
.mono .m { color: var(--lime); }
.reg { color: var(--lime); }
/* ---------- Top bar ---------- */
.topbar {
position: sticky; top: 0; z-index: 60;
background: rgba(25, 27, 21, 0.72);
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; height: 70px; gap: 20px; }
.wordmark { display: inline-flex; align-items: center; }
.logo { display: block; width: auto; }
.logo-topbar { height: 22px; width: 138px; }
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a {
position: relative; font-size: 14px; font-weight: 500; color: var(--cream);
display: inline-flex; align-items: flex-start; gap: 3px; transition: color .2s ease;
}
.nav-links a:hover { color: var(--lime); }
.nav-links a sup { font-size: 9px; color: var(--lime); font-weight: 600; letter-spacing: .04em; }
.nav-cta {
display: inline-flex; align-items: center; gap: 9px;
background: var(--lime); color: var(--ink);
font-weight: 600; font-size: 14px; padding: 10px 18px; border-radius: 100px;
transition: transform .18s ease, filter .2s ease;
}
.nav-cta:hover { transform: translateY(-1px); filter: brightness(1.05); }
.nav-cta .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); position: relative; }
.nav-cta .cta-ic { display: inline-flex; }
.nav-cta .cta-ic svg { width: 17px; height: 17px; display: block; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--lime);
box-shadow: 0 0 0 0 rgba(222,225,70,0.6); animation: pulse 2.4s infinite; }
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(222,225,70,0.55); }
70% { box-shadow: 0 0 0 7px rgba(222,225,70,0); }
100% { box-shadow: 0 0 0 0 rgba(222,225,70,0); }
}
.hide-sm { display: inline-flex; }
/* ---------- Language switch ---------- */
.lang-switch { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--hairline); border-radius: 100px; padding: 3px; }
.lang-switch button {
display: inline-flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer;
font: inherit; font-size: 12.5px; font-weight: 600; letter-spacing: .02em; color: var(--cream-dim);
padding: 6px 11px; border-radius: 100px; transition: color .2s ease, background-color .2s ease;
}
.lang-switch button.active { background: var(--lime); color: var(--ink); }
.lang-switch button:not(.active):hover { color: var(--cream); }
.lang-switch .flag { font-size: 14px; line-height: 1; }
.lang-switch--menu { align-self: flex-start; margin-top: 26px; }
/* ---------- Hero (XL editorial) ---------- */
.hero-xl { position: relative; padding: 60px 0 64px; overflow: hidden; }
.hero-xl::before {
content: ""; position: absolute; top: -240px; right: -180px;
width: 720px; height: 720px; pointer-events: none;
background: radial-gradient(circle, rgba(222,225,70,0.16) 0%, rgba(222,225,70,0) 62%);
}
.hero-xl::after {
content: ""; position: absolute; bottom: -300px; left: -220px;
width: 720px; height: 720px; pointer-events: none;
background: radial-gradient(circle, rgba(222,225,70,0.07) 0%, rgba(222,225,70,0) 60%);
}
.hero-top {
display: flex; justify-content: space-between; align-items: center;
padding-bottom: 42px; flex-wrap: wrap; gap: 12px;
}
.display {
font-weight: 800; text-transform: uppercase; letter-spacing: -0.04em;
line-height: 0.9; margin: 8px 0 0;
font-size: clamp(2.9rem, 11.5vw, 9.5rem);
}
.display .sup { font-size: 0.32em; vertical-align: super; color: var(--lime); font-weight: 700; }
.display .accent { color: var(--lime); }
.hero-qualifier {
margin-top: 26px; display: flex; justify-content: space-between; align-items: flex-end;
flex-wrap: wrap; gap: 24px;
}
.hero-qualifier .q-big {
font-size: clamp(1.1rem, 2.4vw, 1.7rem); font-weight: 600; text-transform: uppercase;
letter-spacing: -0.01em; max-width: 20ch; line-height: 1.15;
}
.hero-sub { color: var(--cream-dim); font-size: 1.05rem; max-width: 42ch; line-height: 1.5; font-weight: 400; }
.hero-bottom {
margin-top: 54px; padding-top: 30px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: end;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: flex-end; }
/* ---------- Hero: inverted (light) for first-impression contrast ---------- */
.hero-xl {
background-color: var(--cream);
}
.hero-xl::before, .hero-xl::after { display: none; } /* drop the lime blooms on light ground */
.hero-xl .display, .hero-xl .q-big { color: var(--ink); }
.hero-xl .display .sup { color: var(--ink); }
.hero-xl .q-big .accent { color: var(--ink); }
.hero-xl .hero-sub { color: rgba(25,27,21,0.62); }
/* the CTA stays chartreuse — the one brand pop on the light hero */
.btn {
display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 15px;
padding: 15px 26px; border-radius: 100px;
transition: transform .18s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-primary { background: var(--lime); color: var(--ink); }
.btn-primary:hover { transform: translateY(-2px); }
.btn-ghost { color: var(--cream); border: 1px solid var(--hairline); }
.btn-ghost:hover { border-color: var(--cream-dim); transform: translateY(-2px); }
.btn .arrow { transition: transform .2s ease; }
.btn:hover .arrow { transform: translate(3px,-3px); }
.btn-lg { font-size: 1.15rem; padding: 22px 40px; gap: 12px; }
.btn-lg .arrow { font-size: 1.15em; }
/* ---------- Marquee ---------- */
.marquee {
overflow: hidden; padding: 26px 0;
background-color: var(--ink-2);
background-image:
linear-gradient(var(--grid-line) 1px, transparent 1px),
linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
background-size: var(--grid-size) var(--grid-size);
}
.marquee-track { display: flex; width: max-content; animation: scroll 34s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
font-size: clamp(1.5rem, 3.4vw, 2.6rem); font-weight: 700; text-transform: uppercase;
letter-spacing: -0.015em; white-space: nowrap; padding: 0 26px; display: inline-flex; align-items: center; gap: 52px;
}
.marquee-item .star { color: var(--lime); font-size: 0.7em; }
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* ---------- Logo marquee (two opposing rows) ---------- */
.logo-marquee {
background-color: var(--ink);
padding: 46px 0;
display: grid;
gap: 38px;
}
.logo-row { overflow: hidden; }
.logo-track { display: flex; width: max-content; }
/* each set carries its own trailing gap so translateX(-50%) loops seamlessly */
.logo-set { display: flex; align-items: center; gap: 64px; padding-right: 64px; }
.logo-track.to-left { animation: logo-left 38s linear infinite; }
.logo-track.to-right { animation: logo-right 38s linear infinite; }
@keyframes logo-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes logo-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.logo-marquee:hover .logo-track { animation-play-state: paused; }
/* each logo is painted through a mask, so it can take an exact brand colour */
.logo-mark {
display: block; flex: none;
height: 58px; aspect-ratio: 400 / 150;
background-color: var(--cream);
opacity: 0.66;
-webkit-mask-image: var(--src); mask-image: var(--src);
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
-webkit-mask-size: contain; mask-size: contain;
transition: background-color .25s ease, opacity .25s ease;
}
.logo-mark:hover { background-color: var(--lime); opacity: 1; }
@media (max-width: 640px) {
.logo-set { gap: 44px; padding-right: 44px; }
.logo-mark { height: 41px; }
.logo-marquee { padding: 26px 0; gap: 20px; }
}
@media (prefers-reduced-motion: reduce) { .logo-track { animation: none; } }
/* ---------- Section scaffolding ---------- */
section { position: relative; }
.section-pad { padding: 100px 0; }
.sec-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 52px; flex-wrap: wrap; }
/* when the section has a big title, sit the intro on the same base line */
.sec-head:has(.sec-title) { align-items: flex-end; }
.sec-head .idx { font-size: 12px; letter-spacing: .16em; color: var(--lime); font-weight: 600; }
.sec-title {
font-size: clamp(2.2rem, 6vw, 4.6rem); font-weight: 800; text-transform: uppercase;
letter-spacing: -0.035em; line-height: 0.95;
}
.sec-title .accent { color: var(--lime); }
.sec-intro { color: var(--cream-dim); max-width: 40ch; font-size: 1.02rem; line-height: 1.5; }
/* ---------- Stats / proof ---------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.stat { padding-top: 0; }
.stat .num {
font-size: clamp(2.6rem, 6vw, 4.6rem); font-weight: 800; letter-spacing: -0.04em;
line-height: 1; color: var(--cream);
}
.stat .num .accent { color: var(--lime); }
.stat .cap { margin-top: 14px; font-size: 0.92rem; color: var(--cream-dim); line-height: 1.4; max-width: 26ch; }
.big-statement {
font-size: clamp(1.6rem, 3.6vw, 2.9rem); font-weight: 500; letter-spacing: -0.02em;
line-height: 1.24; max-width: 24ch; margin-bottom: 64px;
}
.big-statement .accent { color: var(--lime); }
/* ---------- Works (XL rows) ---------- */
.work-row {
display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 40px; align-items: center;
padding: 46px 0;}
.work-row .w-meta { display: flex; flex-direction: column; }
.work-row .w-idx { font-size: 12px; letter-spacing: .16em; color: var(--lime); font-weight: 600; margin-bottom: 16px; }
.work-row .w-name {
font-size: clamp(2rem, 5vw, 3.6rem); font-weight: 800; text-transform: uppercase;
letter-spacing: -0.035em; line-height: 0.95; margin-bottom: 18px;
}
.work-row .w-cat { font-size: 0.92rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cream-dim); margin-bottom: 22px; }
.work-row .w-desc { color: var(--cream-dim); font-size: 1.02rem; line-height: 1.5; max-width: 44ch; margin-bottom: 26px; }
.work-row .w-view { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 15px; color: var(--cream); }
.work-row .w-view .arrow { color: var(--lime); transition: transform .2s ease; }
.work-row:hover .w-view .arrow { transform: translateX(5px); }
.work-row .w-cover { overflow: hidden; border-radius: 16px; border: 1px solid var(--hairline); aspect-ratio: 1728/1117; background: var(--ink-3); }
.work-row .w-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.work-row:hover .w-cover img { transform: scale(1.04); }
/* ---------- Case stack (full-bleed image cards that stack on scroll) ---------- */
.case-stack { display: flex; flex-direction: column; gap: 26px; }
.case-card {
position: sticky; top: 88px;
display: flex; flex-direction: column; justify-content: flex-end;
overflow: hidden; border-radius: 24px; border: 1px solid var(--hairline);
min-height: min(80vh, 720px); background: var(--ink-3); color: var(--cream);
}
.case-card .cc-bg {
position: absolute; inset: 0; z-index: 0;
background-size: cover; background-position: center;
transition: transform .7s cubic-bezier(.16,1,.3,1);
}
.case-card:hover .cc-bg { transform: scale(1.05); }
.case-card .cc-scrim {
position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: linear-gradient(to top, rgba(9,10,7,0.9) 0%, rgba(9,10,7,0.55) 32%, rgba(9,10,7,0.12) 62%, rgba(9,10,7,0.04) 100%);
}
.case-card .cc-inner {
position: relative; z-index: 2;
padding: 52px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 720px;
}
.cc-tag {
background: var(--lime); color: var(--ink); font-weight: 600; font-size: 13px;
letter-spacing: .02em; padding: 7px 16px; border-radius: 100px;
}
.cc-title {
font-size: clamp(2rem, 5vw, 3.7rem); font-weight: 800; text-transform: uppercase;
letter-spacing: -0.03em; line-height: 0.98; color: var(--cream);
}
.cc-desc { color: rgba(232,220,207,0.82); font-size: 1.02rem; line-height: 1.5; max-width: 54ch; }
.cc-view { display: inline-flex; align-items: center; gap: 9px; margin-top: 4px; font-weight: 600; font-size: 15px; }
.cc-view .arrow { color: var(--lime); transition: transform .2s ease; }
.case-card:hover .cc-view .arrow { transform: translateX(5px); }
@media (max-width: 640px) {
.case-card { min-height: 66vh; border-radius: 18px; }
.case-card .cc-inner { padding: 30px; }
}
/* ---------- Approach / process ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.step { padding-top: 22px; }
.step .st-icon { display: block; width: 36px; height: 36px; color: var(--lime); }
.step .st-icon svg { display: block; width: 100%; height: 100%; }
.step .st-title { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; margin: 22px 0 12px; }
.step .st-desc { color: var(--cream-dim); font-size: 0.98rem; line-height: 1.5; }
/* ---------- Testimonial ---------- */
.quote-section { background-color: var(--ink); }
/* ---------- Testimonial cards ---------- */
.testi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.testi-card {
margin: 0; background: var(--ink-2); border: 1px solid var(--hairline);
border-radius: 20px; padding: 42px; display: flex; flex-direction: column;
}
.testi-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 30px; }
.testi-rating { display: inline-flex; align-items: baseline; gap: 8px; font-size: 15px; font-weight: 600; }
.testi-rating .r-num { color: var(--cream); }
.testi-rating .r-max { color: var(--cream-dim); }
.testi-rating .r-stars { color: var(--lime); letter-spacing: 3px; font-size: 13px; }
.testi-top .q-mark { font-size: 2.6rem; line-height: 1; color: var(--cream-faint); font-weight: 800; }
.testi-quote { font-size: 1.12rem; line-height: 1.55; color: var(--cream); flex: 1; }
.testi-quote .accent { color: var(--lime); }
.testi-foot { display: flex; align-items: center; gap: 14px; margin-top: 36px; }
.testi-foot img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; border: 1px solid var(--hairline); flex: none; }
.testi-foot .who { display: block; font-weight: 600; color: var(--cream); font-size: 1rem; }
.testi-foot .role { display: block; color: var(--cream-dim); font-size: 0.88rem; margin-top: 2px; }
@media (max-width: 820px) { .testi-grid { grid-template-columns: 1fr; } .testi-card { padding: 30px; } }
/* ---------- Testimonials: inverted (light) for contrast — scoped to the home section only ---------- */
.quote-section--light { background-color: var(--cream); }
.quote-section--light .idx { color: var(--ink); }
.quote-section--light .sec-title,
.quote-section--light .sec-title .accent { color: var(--ink); }
.quote-section--light .sec-intro { color: rgba(25,27,21,0.62); }
.quote-section--light .testi-card { background: #f4efe6; border-color: rgba(25,27,21,0.10); }
.quote-section--light .testi-quote { color: var(--ink); }
.quote-section--light .testi-quote .accent { background: rgba(222,225,70,0.5); color: var(--ink); padding: 0 .1em; border-radius: 3px; }
.quote-section--light .testi-rating .r-num { color: var(--ink); }
.quote-section--light .testi-rating .r-max { color: rgba(25,27,21,0.5); }
.quote-section--light .testi-rating .r-stars { color: var(--ink); }
.quote-section--light .testi-top .q-mark { color: rgba(25,27,21,0.13); }
.quote-section--light .testi-foot img { border-color: rgba(25,27,21,0.14); }
.quote-section--light .testi-foot .who { color: var(--ink); }
.quote-section--light .testi-foot .role { color: rgba(25,27,21,0.62); }
.quote-mark { font-size: 5rem; line-height: 0.6; color: var(--lime); font-weight: 800; height: 42px; }
blockquote {
font-size: clamp(1.5rem, 3.6vw, 2.6rem); line-height: 1.3; letter-spacing: -0.02em;
font-weight: 500; max-width: 26ch; margin: 26px 0 34px;
}
blockquote .accent { color: var(--lime); }
.attribution { display: flex; align-items: center; gap: 14px; }
.attribution .who { font-weight: 600; font-size: 1.05rem; }
.attribution .role { color: var(--cream-dim); font-size: 0.95rem; }
.attribution .sep { width: 34px; height: 1px; background: var(--lime); }
/* ---------- Testimonial with photo ---------- */
.quote-layout { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 56px; align-items: center; }
.quote-photo-wrap { position: relative; }
.quote-photo-wrap::before {
content: ""; position: absolute; inset: -9%;
background: radial-gradient(circle at 50% 38%, rgba(222,225,70,0.17), rgba(222,225,70,0) 66%);
z-index: 0; pointer-events: none;
}
.quote-photo {
position: relative; z-index: 1; overflow: hidden; border-radius: 18px;
border: 1px solid var(--hairline); background: var(--ink-3); aspect-ratio: 1 / 1;
}
.quote-photo img {
width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%;
transition: transform .7s cubic-bezier(.16,1,.3,1);
}
.quote-photo:hover img { transform: scale(1.045); }
/* curtain-up clip reveal + settle-zoom */
.reveal-photo { clip-path: inset(100% 0 0 0); opacity: 0; transform: scale(1.06);
transition: clip-path 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1), opacity .5s ease; }
/* the clip makes this element invisible to IntersectionObserver, so the
un-clipped parent (.reveal) is what triggers the reveal */
.reveal-photo.in,
.reveal.in .reveal-photo { clip-path: inset(0 0 0 0); opacity: 1; transform: scale(1); }
@media (max-width: 820px) {
.quote-layout { grid-template-columns: 1fr; gap: 30px; }
.quote-photo-wrap { max-width: 330px; }
}
/* ---------- Contact ---------- */
.contact { padding: 110px 0 40px; }
.contact .avail-badge {
display: inline-flex; align-items: center; gap: 10px; margin-bottom: 34px;
padding: 9px 16px 9px 14px; border: 1px solid var(--hairline); border-radius: 100px;
font-size: 14px; color: var(--cream-dim);
}
.contact .avail-badge strong { color: var(--cream); font-weight: 600; }
.contact h2 {
font-size: clamp(2.4rem, 7vw, 6rem); letter-spacing: -0.04em; line-height: 0.95;
font-weight: 800; text-transform: uppercase; max-width: 16ch;
}
.contact h2 .accent { color: var(--lime); }
.contact-links { margin-top: 44px; display: flex; flex-wrap: wrap; gap: 14px 16px; }
.clink {
display: inline-flex; align-items: center; gap: 10px; padding: 16px 24px; border-radius: 14px;
background: var(--ink-2); border: 1px solid var(--hairline); font-weight: 600; font-size: 15px;
transition: border-color .2s ease, transform .18s ease;
}
.clink:hover { border-color: var(--lime); transform: translateY(-2px); }
.clink .ic { color: var(--lime); display: inline-flex; }
.clink.primary { background: var(--lime); color: var(--ink); border-color: var(--lime); }
.clink.primary .ic { color: var(--ink); }
.clink .ic svg { width: 21px; height: 21px; display: block; }
/* Instagram in the header */
.topbar-ig {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px; border-radius: 100px; flex: none;
color: var(--cream); border: 1px solid var(--hairline);
transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.topbar-ig:hover { color: var(--ink); background: var(--lime); border-color: var(--lime); }
.topbar-ig svg { width: 20px; height: 20px; display: block; }
@media (max-width: 480px) { .topbar-ig { display: none; } }
/* ---------- Big footer ---------- */
.big-foot { padding: 40px 0 46px; overflow: hidden; }
.foot-word {
font-size: clamp(3.2rem, 15vw, 13rem); font-weight: 800; text-transform: uppercase;
letter-spacing: -0.05em; line-height: 0.85; color: var(--cream); white-space: nowrap;
}
.foot-word .sup { font-size: 0.28em; vertical-align: super; color: var(--lime); }
.foot-word { line-height: 0; }
.foot-logo { display: block; width: 100%; height: auto; }
.foot-meta {
margin-top: 34px; display: flex; justify-content: space-between; align-items: center;
flex-wrap: wrap; gap: 12px; color: var(--cream-dim); font-size: 13px;
padding-top: 26px;}
.foot-meta a:hover { color: var(--lime); }
/* ============================================================
Case-study page classes (kept for cayman.html / alavanqc.html)
============================================================ */
.section-label { display: flex; align-items: center; gap: 14px; font-size: 12.5px; letter-spacing: .16em;
text-transform: uppercase; color: var(--lime); font-weight: 600; margin-bottom: 40px; }
.section-label .num { color: var(--cream-dim); font-weight: 500; }
.case-hero { padding: 56px 0 8px; }
.back-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--cream-dim);
margin-bottom: 40px; transition: color .2s ease; }
.back-link:hover { color: var(--lime); }
.back-link .a { color: var(--lime); }
.case-kicker { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--lime); font-weight: 600; margin-bottom: 22px; }
.case-hero-title { font-size: clamp(2.6rem, 7vw, 5.4rem); letter-spacing: -0.04em; line-height: 0.96;
font-weight: 800; text-transform: uppercase; margin-bottom: 26px; }
.case-hero-context { font-size: clamp(1.05rem, 2vw, 1.3rem); color: var(--cream-dim); max-width: 62ch; line-height: 1.5; }
.case-hero-context .hl { color: var(--cream); font-weight: 500; }
.case-cover { padding: 40px 0 0; }
.case-cover img { width: 100%; height: auto; border-radius: 18px; border: 1px solid var(--hairline); background: var(--ink-2); }
.narrative { padding: 80px 0 40px; }
.n-row { display: grid; grid-template-columns: 200px 1fr; gap: 30px; padding: 36px 0; }
.n-label { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--lime); font-weight: 700; padding-top: 7px; }
.n-text { font-size: 1.18rem; line-height: 1.55; color: var(--cream); max-width: 62ch; }
.n-text .metric { color: var(--lime); font-weight: 600; }
.case-next h2 { font-size: clamp(2rem, 5vw, 3.4rem); letter-spacing: -0.035em; line-height: 1.02;
font-weight: 800; text-transform: uppercase; max-width: 20ch; margin: 6px 0 30px; }
.case-next h2 .accent { color: var(--lime); }
/* ============================================================
Case pages — light editorial layout (sidebar + content)
============================================================ */
.case-light { background: #f4efe7; color: var(--ink); }
.case-light ::selection { background: var(--lime); color: var(--ink); }
.case-hero-v2 { padding: 56px 0 36px; }
.case-hero-v2 .back-link { color: rgba(25,27,21,0.5); margin-bottom: 30px; }
.case-hero-v2 .back-link:hover { color: var(--ink); }
.case-hero-v2 .back-link .a { color: rgba(25,27,21,0.5); }
.case-headline { font-size: clamp(2.1rem, 5vw, 3.7rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.04; max-width: 22ch; }
.case-lede { margin-top: 24px; font-size: clamp(1.05rem, 2vw, 1.25rem); color: rgba(25,27,21,0.62); max-width: 56ch; line-height: 1.5; }
.case-body { padding: 44px 0 96px; }
.case-grid { display: grid; grid-template-columns: 264px 1fr; gap: 64px; align-items: start; }
.case-meta { position: sticky; top: 100px; display: flex; flex-direction: column; }
.meta-item { display: flex; flex-direction: column; gap: 5px; padding: 18px 0; border-bottom: 1px solid rgba(25,27,21,0.12); }
.meta-item:first-child { padding-top: 0; }
.meta-label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(25,27,21,0.48); font-weight: 700; }
.meta-value { font-size: 0.98rem; color: var(--ink); font-weight: 500; line-height: 1.45; }
.meta-cta { margin-top: 24px; display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
background: var(--lime); color: var(--ink); font-weight: 600; font-size: 14px; padding: 12px 22px; border-radius: 100px; transition: transform .18s ease; }
.meta-cta:hover { transform: translateY(-2px); }
.case-content { min-width: 0; display: flex; flex-direction: column; gap: 46px; }
.case-cover-v2 { width: 100%; height: auto; border-radius: 16px; border: 1px solid rgba(25,27,21,0.10); display: block; }
.cc-block h3 { font-size: 0.82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); font-weight: 700; margin-bottom: 14px; }
.cc-block p { font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.62; color: rgba(25,27,21,0.76); max-width: 62ch; }
.cc-block .metric { color: var(--ink); font-weight: 700; background: rgba(222,225,70,0.55); padding: 0 .1em; border-radius: 3px; }
.case-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.case-imgs figure { margin: 0; }
.case-imgs figure.full { grid-column: 1 / -1; }
.case-imgs img { width: 100%; height: auto; display: block; border-radius: 12px; border: 1px solid rgba(25,27,21,0.10); background: #ece5d8; }
.case-imgs figcaption { margin-top: 9px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(25,27,21,0.48); font-weight: 500; }
.case-quote { border-left: 3px solid var(--lime); padding: 2px 0 2px 26px; }
.case-quote blockquote { font-size: clamp(1.2rem, 2.2vw, 1.55rem); line-height: 1.4; letter-spacing: -0.01em; color: var(--ink); font-weight: 500; }
.case-quote blockquote .accent { background: rgba(222,225,70,0.55); color: var(--ink); padding: 0 .1em; border-radius: 3px; }
.case-quote .cite { margin-top: 22px; display: flex; align-items: center; gap: 13px; }
.case-quote .cite img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(25,27,21,0.15); }
.case-quote .cite .who { font-weight: 700; color: var(--ink); }
.case-quote .cite .role { color: rgba(25,27,21,0.6); font-size: 0.92rem; }
/* dark CTA + footer on the light case pages */
.case-light .case-next { background: var(--ink); color: var(--cream); }
.case-light .case-next .back-link { color: var(--cream-dim); }
.case-light .case-next .back-link:hover { color: var(--lime); }
.case-light .case-next .back-link .a { color: var(--lime); }
.case-light .case-next h2 { color: var(--cream); }
.case-light .big-foot { background: var(--ink); }
.case-light .topbar { background: rgba(25,27,21,0.9); }
@media (max-width: 860px) {
.case-grid { grid-template-columns: 1fr; gap: 10px; }
.case-meta { position: static; flex-direction: row; flex-wrap: wrap; gap: 0 40px; margin-bottom: 26px; }
.meta-item { border-bottom: none; padding: 8px 0; }
.meta-cta { margin-top: 14px; }
}
@media (max-width: 560px) { .case-imgs { grid-template-columns: 1fr; } }
.gallery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.gallery-grid figure { grid-column: span 1; margin: 0; }
.gallery-grid figure.full { grid-column: 1 / -1; }
.gallery-grid img { width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--hairline); background: var(--ink-2); }
.gallery-cap { margin-top: 10px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--cream-dim); font-weight: 500; }
.gallery-cap::before { content: ""; display: inline-block; width: 12px; height: 1px; background: var(--lime);
vertical-align: middle; margin-right: 8px; opacity: .8; }
/* ---------- Top-bar actions + mobile menu ---------- */
.topbar-actions { display: flex; align-items: center; gap: 14px; }
.menu-toggle {
display: none; width: 42px; height: 42px; padding: 0; cursor: pointer;
flex-direction: column; align-items: center; justify-content: center; gap: 5px;
background: none; border: 1px solid var(--hairline); border-radius: 100px;
}
.menu-toggle span { display: block; width: 18px; height: 2px; background: var(--cream); border-radius: 2px; transition: transform .3s ease, opacity .2s ease; }
body.menu-open .menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
body.menu-open .menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu {
position: fixed; inset: 0; z-index: 55; display: none;
flex-direction: column; justify-content: center; gap: 4px; padding: 90px 32px 40px;
background: var(--ink);
opacity: 0; pointer-events: none; transform: translateY(-10px);
transition: opacity .3s ease, transform .3s ease;
}
body.menu-open { overflow: hidden; }
body.menu-open .mobile-menu { opacity: 1; pointer-events: auto; transform: none; }
.mobile-menu .m-link {
font-size: clamp(2rem, 9vw, 3.4rem); font-weight: 800; text-transform: uppercase;
letter-spacing: -0.03em; color: var(--cream); display: inline-flex; align-items: flex-start;
gap: 8px; padding: 8px 0; width: max-content; transition: color .2s ease;
}
.mobile-menu .m-link sup { font-size: 0.3em; color: var(--lime); font-weight: 600; }
.mobile-menu .m-link:hover, .mobile-menu .m-link:active { color: var(--lime); }
.mobile-menu .m-cta { margin-top: 30px; align-self: flex-start; }
.mobile-menu .m-meta { margin-top: auto; color: var(--cream-dim); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
@media (max-width: 900px) { .menu-toggle { display: flex; } .mobile-menu { display: flex; } }
@media (hover: none), (pointer: coarse) { }
/* ---------- Work-row hover badge ---------- */
.work-row .w-cover { position: relative; }
.work-row .w-cover::after {
content: "↗"; position: absolute; top: 16px; right: 16px;
width: 46px; height: 46px; border-radius: 50%; background: var(--lime); color: var(--ink);
display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700;
opacity: 0; transform: scale(0.8) rotate(-8deg); transition: opacity .3s ease, transform .3s ease; pointer-events: none;
}
.work-row:hover .w-cover::after { opacity: 1; transform: scale(1) rotate(0); }
/* ---------- Typography & rhythm polish ---------- */
:where(section, header)[id] { scroll-margin-top: 88px; }
.display, .sec-title, .case-hero-title, .contact h2, .case-next h2, .work-row .w-name, blockquote, .big-statement { text-wrap: balance; }
.hero-sub, .sec-intro, .n-text, .w-desc, .s-desc, .st-desc, .stat .cap { text-wrap: pretty; }
.marquee-item { gap: 60px; }
.foot-logo { max-width: 1100px; margin: 0 auto; }
/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; transition: none; }
.reveal-photo { clip-path: none; opacity: 1; transform: none; transition: none; }
.pulse, .marquee-track { animation: none; }
html { scroll-behavior: auto; }
}
/* ---------- Responsive ---------- */
@media (max-width: 900px) {
.nav-links { display: none; }
.topbar .lang-switch { display: none; }
.hero-bottom { grid-template-columns: 1fr; gap: 30px; }
.hero-actions { justify-content: flex-start; }
.work-row { grid-template-columns: 1fr; gap: 24px; }
.work-row .w-cover { order: -1; }
.steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
.wrap { padding: 0 22px; }
.section-pad { padding: 72px 0; }
.stats { grid-template-columns: 1fr; gap: 22px; }
.steps { grid-template-columns: 1fr; }
.n-row { grid-template-columns: 1fr; gap: 10px; }
.hide-sm { display: none; }
}
/* ===== Tela de abertura: só a logo (sem topo) ===== */
.has-intro .topbar {
transform: translateY(-100%); opacity: 0; pointer-events: none;
transition: transform .55s cubic-bezier(.2,.7,.2,1), opacity .55s ease;
}
.has-intro.scrolled .topbar { transform: none; opacity: 1; pointer-events: auto; }
/* logo fixa no centro; recua (escala+blur+fade) conforme o scroll */
.intro { position: relative; height: 100vh; height: 100svh; margin-top: -70px; }
.intro-logo {
position: fixed; inset: 0; z-index: 1; pointer-events: none;
display: grid; place-items: center; padding: 24px;
animation: introIn 1.4s ease both;
}
.intro-logo img {
width: min(1080px, 86vw); height: auto; display: block;
transform-origin: 50% 50%;
will-change: transform, opacity, filter;
}
@keyframes introIn { from { opacity: 0; } to { opacity: 1; } }
/* ===== Marcas — constelação com zoom-out no scroll (ref: adamjakubowski.pl) =====
Um palco sticky de 100vh guarda todas as marcas; o palco inteiro
escala de 1 → .55 com origem no centro da viewport. Os cards não se
movem entre si: quem estava fora da tela entra conforme o zoom recua. */
/* NÃO usar overflow aqui: as marcas que ficam acima do palco (cy negativo) são
justamente as que o zoom-out revela — recortar cortaria as logos ao meio.
Para não invadirem o splash, o palco entra em crossfade via JS (.brand-stage
opacity), acompanhando o recuo da logo. */
.brands { position: relative; z-index: 2; height: 280vh; }
/* Fim do zoom: o palco CONTINUA fixo e a seção seguinte sobe POR CIMA das marcas,
como uma cortina — em vez das logos rolarem embora.
Altura = 100vh (palco fixo) + 80vh (curso do zoom) + 100vh (trecho da cortina).
O `~ *` cobre todas as seções seguintes, não só o hero: se o hero for mais baixo
que a tela, quem aparece embaixo dele também precisa passar por cima das logos. */
.has-intro .brands ~ * { position: relative; z-index: 3; }
.has-intro .hero-xl { margin-top: -100vh; }
.brand-stage {
position: sticky; top: 0;
height: 100vh; height: 100svh;
transform-origin: 50% 50%;
will-change: transform;
}
.brand-card {
position: absolute;
left: var(--cx); top: var(--cy); width: var(--w);
transform: translate(-50%, -50%);
}
.brand-card img,
.brand-card .bc-art {
width: 100%; height: auto; display: block; border-radius: 14px;
box-shadow: 0 18px 50px rgba(0,0,0,.42);
transition: transform .35s ease, box-shadow .35s ease;
}
/* Só as marcas que JÁ têm página de case respondem ao hover — dar resposta
visual num card que não clica sugere um link que não existe. */
.brand-card.is-link { cursor: pointer; }
.brand-card.is-link:hover { z-index: 5; }
.brand-card.is-link:hover img,
.brand-card.is-link:hover .bc-art,
.brand-card.is-link:focus-visible img,
.brand-card.is-link:focus-visible .bc-art {
transform: scale(1.05);
box-shadow: 0 3vh 7vh rgba(0,0,0,.58);
}
.brand-card.is-link:focus-visible { outline: none; }
/* No hover o card veste a marca da Hau: fundo no lime e a logo no verde escuro.
Só funciona porque o SVG do card está INLINE no index.html — dentro de um
![]()
o CSS não alcança os paths. As cores de repouso ficam em atributos
`fill` no próprio SVG (presentation attributes), que qualquer regra CSS
sobrescreve: parado, o card continua exatamente como no arquivo original. */
.bc-bg, .bc-mark { transition: fill .35s ease; }
.brand-card.is-link:hover .bc-bg,
.brand-card.is-link:focus-visible .bc-bg { fill: var(--lime); }
.brand-card.is-link:hover .bc-mark,
.brand-card.is-link:focus-visible .bc-mark { fill: var(--ink); }
/* Selo "Ver o case" — é o mesmo botão do site (.btn: Onest 600, 15px,
padding 15px/26px = 1em/1.733em, gap 9px = .6em).
O `/ var(--stage-s)` desfaz a escala do palco (o JS publica a escala corrente
ali): sem isso o selo mediria 15px só no início do zoom e chegaria a 9px no
fim. Com o calc ele mede 15px REAIS na tela em qualquer ponto da rolagem.
Inverte as cores porque no hover o card já é lime — selo lime sobre card
lime sumiria. */
.bc-float { position: relative; }
.bc-cta {
position: absolute; left: 50%; bottom: 7%;
transform: translate(-50%, 1.4vh);
display: inline-flex; align-items: center; gap: .6em; z-index: 2;
background: var(--ink); color: var(--lime);
font-size: calc(15px / var(--stage-s, 1)); font-weight: 600; line-height: 1;
padding: 1em 1.733em; border-radius: 100px; white-space: nowrap;
box-shadow: 0 1vh 2.6vh rgba(0,0,0,.45);
opacity: 0; pointer-events: none;
transition: opacity .28s ease, transform .28s cubic-bezier(.2,.7,.2,1);
}
.bc-cta .arrow { transition: transform .28s ease; }
.brand-card.is-link:hover .bc-cta,
.brand-card.is-link:focus-visible .bc-cta { opacity: 1; transform: translate(-50%, 0); }
.brand-card.is-link:hover .bc-cta .arrow { transform: translateX(.25em); }
/* Leve flutuação vertical. Fica num wrapper próprio porque o .brand-card já usa
transform p/ se posicionar (translate -50%,-50%) e o ![]()
já usa transform no
hover — três animações no mesmo transform se sobrescreveriam.
Amplitude menor nos pares mais justos (Cayman/Smartlig e CRMall/GPR ficam a ~7px
um do outro no fim do zoom) para nunca se tocarem. */
.bc-float {
display: block;
animation: bcFloat var(--dur, 7s) ease-in-out var(--dl, 0s) infinite;
}
@keyframes bcFloat {
0%, 100% { transform: translateY(calc(var(--amp, 7px) * -1)); }
50% { transform: translateY(var(--amp, 7px)); }
}
/* Flutuação alternada DENTRO de cada linha: da esquerda p/ direita, enquanto um
sobe o vizinho desce. (Antes eu alternava pelo grafo de vizinho-mais-próximo,
que ligava os cards na vertical — resultado: cada linha inteira virava uma fase
só e o conjunto parecia se mover em blocos.)
Fase A = delay 0 · fase B = meio ciclo. Todos com o MESMO período: se as durações
diferissem, a oposição se descolaria com o tempo — a variedade vem da amplitude.
Folga verificada em todos os pares opostos que se sobrepõem na horizontal. */
.bc-float { --dur: 7s; }
.brand-card:nth-child(1) .bc-float { --dl: 0s; --amp: 10px; } /* Interface fase A */
.brand-card:nth-child(2) .bc-float { --dl: -3.5s; --amp: 9px; } /* CRMall fase B */
.brand-card:nth-child(3) .bc-float { --dl: 0s; --amp: 13px; } /* Virtus fase A */
.brand-card:nth-child(4) .bc-float { --dl: -3.5s; --amp: 10px; } /* Degrau fase B */
.brand-card:nth-child(5) .bc-float { --dl: 0s; --amp: 9px; } /* Smartlig fase A */
.brand-card:nth-child(6) .bc-float { --dl: 0s; --amp: 11px; } /* Seisensi fase A */
.brand-card:nth-child(7) .bc-float { --dl: -3.5s; --amp: 10px; } /* GPR fase B */
.brand-card:nth-child(8) .bc-float { --dl: -3.5s; --amp: 9px; } /* Tripz fase B */
/* fallback empilhado no mobile/estreito */
@media (max-width: 820px) {
.brands { height: auto; padding: 30px 22px 80px; }
.has-intro .hero-xl { margin-top: 0; }
.brand-stage {
position: static; height: auto; transform: none !important;
display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.brand-card {
position: static; left: auto; top: auto;
width: min(460px, 88vw); transform: none;
}
}
@media (prefers-reduced-motion: reduce) {
.intro-logo { animation: none; }
.bc-float { animation: none; }
.bc-cta { transition: none; }
.brand-card { transition: none; }
.brand-card:hover img { transform: none; }
/* a troca de cor continua (é o sinal de clicável), só não anima */
.bc-bg, .bc-mark { transition: none; }
.brand-card.is-link:hover .bc-art { transform: none; }
}
/* ===== Tela cheia (lightbox) — páginas de case ===== */
body.lb-open { overflow: hidden; }
/* imagens ampliáveis: cursor + selo de expandir no hover */
[data-full] { cursor: zoom-in; }
/* :has() restringe o selo às figures que REALMENTE ampliam — os outros
cases ainda não têm data-full e não devem mostrar o ícone.
Se o browser não suportar :has(), a regra é ignorada por inteiro (degrada sem ícone). */
.case-content figure:has(img[data-full]) { position: relative; }
.case-content figure:has(img[data-full])::after {
content: "";
position: absolute; top: 12px; right: 12px;
width: 34px; height: 34px; border-radius: 9px;
background: rgba(25,27,21,.72) center/17px 17px no-repeat;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8dccf' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E");
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
opacity: 0; transform: scale(.9);
transition: opacity .22s ease, transform .22s ease;
pointer-events: none;
}
.case-content figure:has(img[data-full]):hover::after { opacity: 1; transform: scale(1); }
.case-cover-v2[data-full] { transition: filter .25s ease; }
.case-cover-v2[data-full]:hover { filter: brightness(1.04); }
[data-full]:focus-visible { outline: 3px solid var(--lime); outline-offset: 4px; }
.lightbox {
position: fixed; inset: 0; z-index: 200;
background: rgba(12,13,10,.95);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
display: grid; place-items: center;
padding: 4vh 6vw;
opacity: 0; transition: opacity .25s ease;
}
.lightbox.open { opacity: 1; }
.lightbox[hidden] { display: none; }
.lb-stage {
display: flex; flex-direction: column; align-items: center; gap: 16px;
max-width: 100%; max-height: 100%;
}
.lb-img {
max-width: 100%; max-height: 80vh; width: auto; height: auto;
border-radius: 10px; box-shadow: 0 30px 90px rgba(0,0,0,.65);
animation: lbIn .3s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes lbIn { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
.lb-cap {
display: flex; align-items: center; gap: 12px;
font-size: 13px; letter-spacing: .02em; color: var(--cream-dim); text-align: center;
}
.lb-count { color: var(--lime); font-weight: 700; font-variant-numeric: tabular-nums; }
.lb-btn {
position: absolute; z-index: 2;
width: 48px; height: 48px; border-radius: 50%;
display: grid; place-items: center; cursor: pointer;
background: rgba(232,220,207,.09); border: 1px solid var(--hairline); color: var(--cream);
transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.lb-btn svg { width: 22px; height: 22px; }
.lb-btn:hover { background: var(--lime); color: var(--ink); border-color: var(--lime); }
.lb-btn:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }
.lb-close { top: 24px; right: 24px; }
.lb-prev { left: 24px; top: 50%; margin-top: -24px; }
.lb-next { right: 24px; top: 50%; margin-top: -24px; }
.lb-prev:hover { transform: translateX(-2px); }
.lb-next:hover { transform: translateX(2px); }
@media (max-width: 820px) {
.lightbox { padding: 9vh 4vw; }
.lb-img { max-height: 66vh; }
.lb-btn { width: 42px; height: 42px; }
.lb-close { top: 16px; right: 16px; }
/* no celular os controles descem para o polegar, fora da imagem */
.lb-prev { left: 50%; top: auto; bottom: 22px; margin: 0; transform: translateX(-58px); }
.lb-next { right: auto; left: 50%; top: auto; bottom: 22px; margin: 0; transform: translateX(16px); }
.lb-prev:hover, .lb-next:hover { transform: translateX(-58px); }
.lb-next:hover { transform: translateX(16px); }
}
@media (prefers-reduced-motion: reduce) {
.lightbox, .lb-img, .case-content figure::after { transition: none; animation: none; }
.bc-cta { transition: none; }
}