/* vietnamese */
@font-face {
font-family: 'Fraunces';
font-style: italic;
font-weight: 300 700;
font-display: swap;
src: url(../fonts/6NUG8FyLNQOQZAnv9ZwNjucMAkn8xNi7emAe9nipTfd_uw.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Fraunces';
font-style: italic;
font-weight: 300 700;
font-display: swap;
src: url(../fonts/6NUG8FyLNQOQZAnv9ZwNjucMAkn8xNi7emAe9nioTfd_uw.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Fraunces';
font-style: italic;
font-weight: 300 700;
font-display: swap;
src: url(../fonts/6NUG8FyLNQOQZAnv9ZwNjucMAkn8xNi7emAe9nimTfc.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url(../fonts/6NUI8FyLNQOQZAnv9bYEvCeYdG9Ea92uemAO_kikVfM.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url(../fonts/6NUI8FyLNQOQZAnv9bYEvCeYdG9Ea92uemAO_0ikVfM.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url(../fonts/6NUI8FyLNQOQZAnv9bYEvCeYdG9Ea92uemAO8Uik.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(../fonts/ieVn2YZDLWuGJpnzaiwFXS9tYtpQ59CjCQ.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(../fonts/ieVn2YZDLWuGJpnzaiwFXS9tYtpS59CjCQ.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(../fonts/ieVn2YZDLWuGJpnzaiwFXS9tYtpT59CjCQ.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(../fonts/ieVn2YZDLWuGJpnzaiwFXS9tYtpd59A.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/ieVn2YZDLWuGJpnzaiwFXS9tYtpQ59CjCQ.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/ieVn2YZDLWuGJpnzaiwFXS9tYtpS59CjCQ.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/ieVn2YZDLWuGJpnzaiwFXS9tYtpT59CjCQ.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/ieVn2YZDLWuGJpnzaiwFXS9tYtpd59A.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(../fonts/ieVn2YZDLWuGJpnzaiwFXS9tYtpQ59CjCQ.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(../fonts/ieVn2YZDLWuGJpnzaiwFXS9tYtpS59CjCQ.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(../fonts/ieVn2YZDLWuGJpnzaiwFXS9tYtpT59CjCQ.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(../fonts/ieVn2YZDLWuGJpnzaiwFXS9tYtpd59A.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(../fonts/ieVn2YZDLWuGJpnzaiwFXS9tYtpQ59CjCQ.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(../fonts/ieVn2YZDLWuGJpnzaiwFXS9tYtpS59CjCQ.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(../fonts/ieVn2YZDLWuGJpnzaiwFXS9tYtpT59CjCQ.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(../fonts/ieVn2YZDLWuGJpnzaiwFXS9tYtpd59A.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(../fonts/ieVn2YZDLWuGJpnzaiwFXS9tYtpQ59CjCQ.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(../fonts/ieVn2YZDLWuGJpnzaiwFXS9tYtpS59CjCQ.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(../fonts/ieVn2YZDLWuGJpnzaiwFXS9tYtpT59CjCQ.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(../fonts/ieVn2YZDLWuGJpnzaiwFXS9tYtpd59A.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ============================================
Dr. Emerson Ferreira — Hero
Editorial luxe · dark cinematic
============================================ */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
html,
body {
min-height: 100%;
background: var(--bg);
}
img,
svg {
display: block;
max-width: 100%;
}
a {
color: inherit;
text-decoration: none;
}
ul {
list-style: none;
}
button {
font: inherit;
cursor: pointer;
}
::selection {
background: var(--accent);
color: var(--bg);
}
:root {
/* Surfaces */
--bg: #080b10;
--bg-2: #0f141c;
/* Ink */
--ink: #e8eef5;
--ink-soft: rgba(232, 238, 245, 0.74);
--ink-mute: rgba(232, 238, 245, 0.46);
--line: rgba(232, 238, 245, 0.14);
--line-strong: rgba(232, 238, 245, 0.28);
/* Accent — champagne / warm gold */
--accent: #a8c2d6;
--accent-2: #d0dfeb;
--accent-soft: rgba(168, 194, 214, 0.18);
/* Type */
--f-display: "Fraunces", "Cormorant Garamond", Georgia, serif;
--f-sans: "Hanken Grotesk", "Inter", system-ui, sans-serif;
/* Motion */
--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}
body {
background: var(--bg);
color: var(--ink);
font-family: var(--f-sans);
font-weight: 400;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* ============================================
TOPBAR
============================================ */
.topbar {
position: fixed;
inset: 0 0 auto 0;
z-index: 50;
padding: clamp(18px, 2.2vw, 26px) clamp(20px, 4vw, 56px);
pointer-events: none;
}
.topbar-inner {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 24px;
pointer-events: auto;
}
.brand {
display: inline-flex;
align-items: center;
gap: 14px;
justify-self: start;
}
.brand-mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border: 1px solid var(--line-strong);
border-radius: 50%;
font-family: var(--f-display);
font-weight: 400;
font-style: italic;
font-size: 15px;
letter-spacing: 0.02em;
color: var(--ink);
background: rgba(8, 11, 16, 0.32);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.brand-name {
font-family: var(--f-display);
font-size: 14px;
font-weight: 400;
letter-spacing: 0.04em;
color: var(--ink);
}
.brand-name em {
font-style: italic;
color: var(--accent-2);
font-weight: 400;
}
.topbar-nav {
display: inline-flex;
align-items: center;
gap: 32px;
padding: 10px 22px;
border: 1px solid var(--line);
border-radius: 999px;
background: rgba(8, 11, 16, 0.32);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.topbar-nav a {
font-size: 12px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-soft);
transition: color 0.3s var(--ease);
position: relative;
}
.topbar-nav a::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -6px;
height: 1px;
background: var(--accent);
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.4s var(--ease-out);
}
.topbar-nav a:hover {
color: var(--ink);
}
.topbar-nav a:hover::after {
transform: scaleX(1);
}
.topbar-cta {
justify-self: end;
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink);
padding: 12px 20px 12px 22px;
border: 1px solid var(--line-strong);
border-radius: 999px;
background: rgba(8, 11, 16, 0.32);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: all 0.4s var(--ease);
}
.topbar-cta svg {
width: 14px;
height: 14px;
transition: transform 0.4s var(--ease);
}
.topbar-cta:hover {
border-color: var(--accent);
color: var(--accent-2);
}
.topbar-cta:hover svg {
transform: translateX(3px);
}
/* ============================================
HERO
============================================ */
.hero {
position: relative;
min-height: 100vh;
min-height: 100svh;
overflow: hidden;
isolation: isolate;
display: flex;
flex-direction: column;
}
.hero-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100vh;
height: 100svh;
z-index: -2;
overflow: hidden;
}
.hero-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 75% center;
filter: contrast(1.02) saturate(0.92);
transform: scale(1);
animation: heroPan 18s var(--ease-out) forwards;
}
.hero-img--mobile {
display: none;
}
@keyframes heroPan {
0% {
transform: scale(1.035);
}
100% {
transform: scale(1);
}
}
@keyframes heroPanMobile {
0% {
transform: scale(0.85);
}
100% {
transform: scale(0.82);
}
}
.hero-veil {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 80% 100% at -10% 60%,
rgba(8, 11, 16, 0.96) 0%,
rgba(8, 11, 16, 0.6) 35%,
transparent 65%),
linear-gradient(100deg,
rgba(8, 11, 16, 0.92) 0%,
rgba(8, 11, 16, 0.7) 25%,
rgba(8, 11, 16, 0.32) 50%,
rgba(8, 11, 16, 0.1) 75%,
transparent 100%),
linear-gradient(to bottom,
rgba(8, 11, 16, 0.35) 0%,
transparent 22%,
transparent 70%,
rgba(8, 11, 16, 0.6) 100%);
pointer-events: none;
}
.hero-grain {
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.22;
mix-blend-mode: overlay;
pointer-events: none;
}
.hero-frame {
position: relative;
flex: 1;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 40px;
align-items: center;
padding: clamp(120px, 14vh, 160px) clamp(20px, 4vw, 64px) clamp(48px, 6vh, 80px);
}
/* ---------- Content column ---------- */
.hero-content {
max-width: 760px;
display: flex;
flex-direction: column;
align-items: flex-start;
}
/* Eyebrow */
.eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--ink-soft);
padding: 9px 18px 9px 14px;
border: 1px solid var(--line);
border-radius: 999px;
background: rgba(8, 11, 16, 0.32);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
margin-bottom: clamp(28px, 4vh, 40px);
}
.eyebrow-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 4px var(--accent-soft);
animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% {
box-shadow: 0 0 0 4px var(--accent-soft);
}
50% {
box-shadow: 0 0 0 7px rgba(168, 194, 214, 0.08);
}
}
.eyebrow-text strong {
color: var(--ink);
font-weight: 600;
}
/* Headline */
.headline {
font-family: var(--f-display);
font-weight: 350;
font-size: clamp(46px, 7.4vw, 128px);
line-height: 0.94;
letter-spacing: -0.025em;
color: var(--ink);
font-variation-settings: "opsz" 144, "SOFT" 40;
}
.headline .line {
display: block;
overflow: hidden;
}
.headline .line-inner {
display: inline-block;
}
.headline em {
font-style: italic;
font-weight: 350;
color: var(--ink);
font-variation-settings: "opsz" 144, "SOFT" 100;
}
.headline .strike {
position: relative;
color: var(--ink-mute);
font-weight: 350;
}
.headline .strike::after {
content: "";
position: absolute;
left: -0.05em;
right: -0.05em;
top: 56%;
height: 1px;
background: var(--ink-mute);
transform: scaleX(0);
transform-origin: left center;
animation: strike 0.9s 1.4s var(--ease-out) forwards;
}
@keyframes strike {
to {
transform: scaleX(1);
}
}
.headline .line--accent {
font-style: italic;
color: var(--accent-2);
font-variation-settings: "opsz" 144, "SOFT" 100;
}
.headline .period {
color: var(--accent);
margin-left: -0.04em;
}
/* Lede */
.lede {
margin-top: clamp(28px, 4vh, 40px);
max-width: 540px;
font-size: clamp(15.5px, 1.15vw, 18.5px);
line-height: 1.58;
font-weight: 300;
color: var(--ink-soft);
}
.lede strong {
color: var(--ink);
font-weight: 500;
}
.lede em {
font-family: var(--f-display);
font-style: italic;
color: var(--accent-2);
font-weight: 400;
}
/* Urgency line */
.urgency {
margin-top: 24px;
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent-2);
}
.urgency::before {
content: "";
width: 24px;
height: 1px;
background: var(--accent);
}
/* CTAs */
.cta-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px;
margin-top: clamp(24px, 3.2vh, 36px);
}
.cta {
position: relative;
display: inline-flex;
align-items: center;
gap: 14px;
font-family: var(--f-sans);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 19px 32px;
border-radius: 999px;
overflow: hidden;
transition: transform 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease);
white-space: nowrap;
}
.cta-label,
.cta-arrow {
position: relative;
z-index: 2;
}
.cta--primary {
background: var(--ink);
color: var(--bg);
}
.cta--primary::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(120deg, var(--accent-2) 0%, var(--accent) 100%);
transform: translateY(101%);
transition: transform 0.5s var(--ease-out);
z-index: 1;
}
.cta--primary:hover::before {
transform: translateY(0);
}
.cta--primary:hover {
transform: translateY(-1px);
}
.cta-arrow svg {
width: 22px;
height: 10px;
transition: transform 0.4s var(--ease);
}
.cta--primary:hover .cta-arrow svg {
transform: translateX(5px);
}
.cta--ghost {
color: var(--ink-soft);
border: 1px solid var(--line-strong);
background: rgba(8, 11, 16, 0.32);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
font-weight: 500;
letter-spacing: 0.08em;
text-transform: none;
font-size: 14px;
padding: 18px 26px;
}
.cta--ghost .cta-arrow svg {
width: 18px;
height: 9px;
opacity: 0.6;
transition: transform 0.4s var(--ease), opacity 0.4s var(--ease);
}
.cta--ghost:hover {
color: var(--ink);
border-color: var(--accent);
}
.cta--ghost:hover .cta-arrow svg {
transform: translateX(4px);
opacity: 1;
color: var(--accent-2);
}
/* Trust strip */
.trust {
display: flex;
gap: clamp(28px, 4vw, 56px);
flex-wrap: wrap;
margin-top: clamp(48px, 7vh, 72px);
padding-top: 28px;
border-top: 1px solid var(--line);
width: 100%;
max-width: 620px;
}
.trust li {
display: flex;
flex-direction: column;
gap: 6px;
}
.trust .label {
font-family: var(--f-display);
font-weight: 400;
font-style: italic;
font-size: 19px;
color: var(--ink);
font-variation-settings: "opsz" 36, "SOFT" 80;
}
.trust .sub {
font-size: 10px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-mute);
}
/* ---------- Meta column (right edge) ---------- */
.hero-meta {
align-self: end;
display: flex;
flex-direction: column;
align-items: center;
gap: 28px;
padding-bottom: 8px;
color: var(--ink-mute);
}
.meta-year {
font-family: var(--f-display);
font-style: italic;
font-size: 15px;
letter-spacing: 0.22em;
color: var(--ink-soft);
font-variation-settings: "opsz" 24, "SOFT" 100;
}
.meta-divider {
width: 1px;
height: 56px;
background: linear-gradient(to bottom, transparent, var(--line-strong), transparent);
}
.meta-vert {
writing-mode: vertical-rl;
transform: rotate(180deg);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--ink-mute);
}
.meta-vert--accent {
color: var(--accent-2);
}
/* ---------- Bottom ticker ---------- */
.hero-ticker {
position: relative;
padding: 16px 0;
border-top: 1px solid var(--line);
overflow: hidden;
background: rgba(8, 11, 16, 0.55);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
.hero-ticker::before,
.hero-ticker::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 80px;
z-index: 2;
pointer-events: none;
}
.hero-ticker::before {
left: 0;
background: linear-gradient(to right, var(--bg) 0%, transparent 100%);
}
.hero-ticker::after {
right: 0;
background: linear-gradient(to left, var(--bg) 0%, transparent 100%);
}
.ticker-track {
display: flex;
gap: 38px;
white-space: nowrap;
animation: ticker 48s linear infinite;
width: max-content;
}
.ticker-track span {
font-family: var(--f-display);
font-style: italic;
font-weight: 400;
font-size: 14px;
letter-spacing: 0.04em;
color: var(--ink-soft);
font-variation-settings: "opsz" 24, "SOFT" 80;
}
.ticker-track .dot {
color: var(--accent);
font-style: normal;
}
@keyframes ticker {
to {
transform: translateX(-50%);
}
}
/* ============================================
ENTRANCE ANIMATIONS
============================================ */
@keyframes rise {
from {
opacity: 0;
transform: translateY(28px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes lineReveal {
from {
transform: translateY(105%);
}
to {
transform: translateY(0);
}
}
.topbar { animation: fadeIn 1.4s 0.1s var(--ease-out) backwards; }
.eyebrow { animation: rise 0.9s 0.25s var(--ease-out) backwards; }
.headline .line-inner {
animation: lineReveal 1s var(--ease-out) backwards;
}
.headline .line:nth-child(1) .line-inner { animation-delay: 0.4s; }
.headline .line:nth-child(2) .line-inner { animation-delay: 0.55s; }
.headline .line:nth-child(3) .line-inner { animation-delay: 0.7s; }
.lede { animation: rise 1s 0.95s var(--ease-out) backwards; }
.urgency { animation: rise 1s 1.05s var(--ease-out) backwards; }
.cta-row { animation: rise 1s 1.15s var(--ease-out) backwards; }
.trust { animation: rise 1s 1.3s var(--ease-out) backwards; }
.hero-meta { animation: fadeIn 1.4s 1.4s var(--ease-out) backwards; }
.hero-ticker { animation: fadeIn 1.4s 1.5s var(--ease-out) backwards; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.hero-img { transform: none; }
}
/* ============================================
RESPONSIVE
============================================ */
@media (max-width: 1080px) {
.topbar-nav { display: none; }
.topbar-inner { grid-template-columns: 1fr auto; }
.hero-meta { display: none; }
.hero-frame { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
/* Reduce hero-bg height: less cover upscaling = head naturally smaller, no side bars */
.hero-bg {
height: 64vh;
height: 64svh;
}
.hero-img--desktop { display: none; }
.hero-img--mobile {
display: block;
object-position: 60% 26%;
}
/* —— Saved fallback A: tighter mobile crop with scale-down (creates dark vignette on sides) ——
.hero-img--mobile {
display: block;
object-position: 60% 22%;
transform: scale(0.82);
transform-origin: 50% 26%;
animation: heroPanMobile 18s var(--ease-out) forwards;
}
*/
/* —— Saved fallback B: wider source (v1.png) on mobile — head stays similar size, more horizontal context ——
.hero-img--desktop {
display: block;
object-position: 78% 28%;
}
.hero-img--mobile {
display: none;
}
*/
.brand-name { display: none; }
.hero-veil {
background:
linear-gradient(to bottom,
rgba(8, 11, 16, 0.3) 0%,
rgba(8, 11, 16, 0.05) 18%,
rgba(8, 11, 16, 0.1) 40%,
rgba(8, 11, 16, 0.78) 58%,
rgba(8, 11, 16, 0.97) 72%,
var(--bg) 100%);
}
.hero-frame {
padding: 58vh 22px 32px;
align-items: start;
}
.eyebrow {
font-size: 10px;
padding: 8px 14px 8px 12px;
margin-bottom: 22px;
}
.headline {
font-size: clamp(40px, 11.8vw, 60px);
line-height: 0.98;
}
.lede {
font-size: 15px;
margin-top: 22px;
}
.cta-row {
margin-top: 28px;
width: 100%;
}
.cta--primary,
.cta--ghost {
flex: 1 1 100%;
justify-content: center;
}
.trust {
margin-top: 40px;
padding-top: 24px;
gap: 20px 36px;
}
.trust li {
flex: 1 1 calc(50% - 36px);
}
.trust .label { font-size: 16px; }
.ticker-track span { font-size: 12px; }
}
@media (max-width: 420px) {
.topbar { padding: 16px 18px; }
.topbar-cta { padding: 10px 16px; font-size: 11px; }
.hero-frame { padding: 52vh 20px 28px; }
}
/* ============================================
Dr. Emerson Ferreira — Antes & Depois
Editorial luxe · dark cinematic carousel
Inherits tokens from hero.css (:root)
============================================ */
.gallery {
position: relative;
padding: clamp(110px, 14vh, 180px) clamp(20px, 4vw, 64px) clamp(96px, 12vh, 160px);
background: var(--bg);
color: var(--ink);
overflow: hidden;
isolation: isolate;
}
.gallery::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 40% at 80% 0%,
rgba(168, 194, 214, 0.07) 0%,
transparent 60%),
radial-gradient(ellipse 50% 35% at 10% 100%,
rgba(168, 194, 214, 0.05) 0%,
transparent 55%);
pointer-events: none;
z-index: -1;
}
.gallery-inner {
max-width: 1280px;
margin: 0 auto;
}
/* ---------- Header ---------- */
.gallery-head {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
max-width: 760px;
margin: 0 auto clamp(56px, 7vh, 88px);
}
.eyebrow--gallery {
margin-bottom: clamp(24px, 3.5vh, 36px);
}
.gallery-title {
font-family: var(--f-display);
font-weight: 350;
font-size: clamp(38px, 5.4vw, 84px);
line-height: 1;
letter-spacing: -0.022em;
color: var(--ink);
font-variation-settings: "opsz" 144, "SOFT" 40;
}
.gallery-title em {
font-style: italic;
color: var(--accent-2);
font-variation-settings: "opsz" 144, "SOFT" 100;
}
.gallery-title-line {
display: block;
margin-top: 0.08em;
font-style: italic;
color: var(--ink-soft);
font-size: 0.62em;
letter-spacing: -0.01em;
font-variation-settings: "opsz" 72, "SOFT" 80;
}
.gallery-title .period {
color: var(--accent);
margin-left: -0.04em;
}
.gallery-lede {
margin-top: clamp(22px, 3vh, 32px);
max-width: 580px;
font-size: clamp(15px, 1.05vw, 17.5px);
line-height: 1.6;
font-weight: 300;
color: var(--ink-soft);
}
.gallery-lede strong {
color: var(--ink);
font-weight: 500;
}
.gallery-lede em {
font-family: var(--f-display);
font-style: italic;
color: var(--accent-2);
font-weight: 400;
}
/* ---------- Stage (arrows + viewport) ---------- */
.gallery-stage {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: clamp(16px, 3vw, 40px);
max-width: 980px;
margin: 0 auto;
}
.gallery-nav {
position: relative;
width: clamp(48px, 4.5vw, 58px);
height: clamp(48px, 4.5vw, 58px);
border: 1px solid var(--line-strong);
border-radius: 50%;
background: rgba(8, 11, 16, 0.4);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: var(--ink-soft);
display: inline-flex;
align-items: center;
justify-content: center;
transition: border-color 0.4s var(--ease), color 0.4s var(--ease), transform 0.4s var(--ease), background 0.4s var(--ease);
z-index: 3;
}
.gallery-nav svg {
width: 16px;
height: 12px;
transition: transform 0.4s var(--ease);
}
.gallery-nav:hover {
border-color: var(--accent);
color: var(--accent-2);
background: rgba(168, 194, 214, 0.08);
}
.gallery-nav--prev:hover svg { transform: translateX(-3px); }
.gallery-nav--next:hover svg { transform: translateX(3px); }
.gallery-nav:focus-visible {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 4px var(--accent-soft);
}
/* ---------- Viewport / track ---------- */
.gallery-viewport {
position: relative;
overflow: hidden;
border-radius: 4px;
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.gallery-track {
display: flex;
align-items: stretch;
transition: transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1);
touch-action: pan-y;
cursor: grab;
will-change: transform;
}
.gallery-track.is-dragging {
transition: none;
cursor: grabbing;
}
.gallery-slide {
flex: 0 0 100%;
width: 100%;
padding: 0 clamp(8px, 1.5vw, 18px);
display: flex;
justify-content: center;
opacity: 0.36;
transform: scale(0.94);
transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out), filter 0.85s var(--ease-out);
filter: saturate(0.7);
}
.gallery-slide.is-active {
opacity: 1;
transform: scale(1);
filter: saturate(1);
}
.gallery-frame {
position: relative;
width: 100%;
max-width: 720px;
aspect-ratio: 4 / 5;
background: var(--bg-2);
border-radius: 2px;
overflow: hidden;
box-shadow:
0 1px 0 rgba(232, 238, 245, 0.06) inset,
0 30px 80px -30px rgba(0, 0, 0, 0.8),
0 12px 32px -12px rgba(0, 0, 0, 0.6);
}
.gallery-frame::before,
.gallery-frame::after {
content: "";
position: absolute;
width: 14px;
height: 14px;
border: 1px solid var(--accent);
z-index: 3;
opacity: 0;
transition: opacity 0.6s var(--ease-out) 0.2s, transform 0.6s var(--ease-out) 0.2s;
}
.gallery-frame::before {
top: 10px;
left: 10px;
border-right: none;
border-bottom: none;
transform: translate(-4px, -4px);
}
.gallery-frame::after {
bottom: 10px;
right: 10px;
border-left: none;
border-top: none;
transform: translate(4px, 4px);
}
.is-active .gallery-frame::before,
.is-active .gallery-frame::after {
opacity: 0.7;
transform: translate(0, 0);
}
.gallery-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
filter: contrast(1.03) saturate(0.96);
}
/* Center vertical divider — emphasizes the antes/depois split */
.gallery-frame .gallery-divider {
position: absolute;
top: 8%;
bottom: 8%;
left: 50%;
width: 1px;
background: linear-gradient(to bottom,
transparent 0%,
rgba(232, 238, 245, 0.42) 18%,
rgba(232, 238, 245, 0.42) 82%,
transparent 100%);
transform: translateX(-50%);
z-index: 2;
pointer-events: none;
}
/* Labels — antes / depois chips */
.gallery-label {
position: absolute;
top: clamp(14px, 2.2vw, 22px);
display: inline-flex;
align-items: center;
gap: 7px;
font-family: var(--f-sans);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.24em;
text-transform: uppercase;
padding: 7px 13px 7px 11px;
border-radius: 999px;
border: 1px solid var(--line);
background: rgba(8, 11, 16, 0.55);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: var(--ink-soft);
z-index: 3;
opacity: 0;
transform: translateY(-6px);
transition: opacity 0.7s var(--ease-out) 0.35s, transform 0.7s var(--ease-out) 0.35s;
}
.is-active .gallery-label {
opacity: 1;
transform: translateY(0);
}
.gallery-label::before {
content: "";
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--ink-mute);
}
.gallery-label--before {
left: clamp(14px, 2.2vw, 22px);
}
.gallery-label--after {
right: clamp(14px, 2.2vw, 22px);
color: var(--accent-2);
border-color: rgba(168, 194, 214, 0.28);
}
.gallery-label--after::before {
background: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
/* ---------- Foot (counter, dots, progress) ---------- */
.gallery-foot {
max-width: 980px;
margin: clamp(40px, 5vh, 64px) auto 0;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: clamp(20px, 4vw, 56px);
}
.gallery-counter {
display: inline-flex;
align-items: baseline;
gap: 14px;
font-family: var(--f-display);
font-style: italic;
font-weight: 400;
color: var(--ink-soft);
font-variation-settings: "opsz" 72, "SOFT" 100;
justify-self: start;
}
.counter-current {
font-size: clamp(38px, 4.5vw, 56px);
line-height: 1;
color: var(--ink);
}
.counter-divider {
width: 32px;
height: 1px;
background: var(--line-strong);
align-self: center;
margin: 0 2px;
}
.counter-total {
font-size: 17px;
color: var(--ink-mute);
letter-spacing: 0.04em;
}
.gallery-dots {
display: inline-flex;
align-items: center;
gap: 10px;
justify-self: center;
}
.gallery-dot {
position: relative;
width: 8px;
height: 8px;
border-radius: 50%;
border: none;
background: rgba(232, 238, 245, 0.22);
padding: 0;
cursor: pointer;
transition: background 0.4s var(--ease), transform 0.4s var(--ease);
}
.gallery-dot::after {
content: "";
position: absolute;
inset: -8px;
border-radius: 50%;
}
.gallery-dot:hover {
background: var(--ink-soft);
}
.gallery-dot.is-active {
background: var(--accent);
transform: scale(1.25);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.gallery-progress {
position: relative;
width: 100%;
height: 1px;
background: var(--line);
overflow: hidden;
justify-self: end;
max-width: 220px;
}
.gallery-progress-bar {
position: absolute;
inset: 0;
background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%);
transform-origin: left center;
transform: scaleX(0);
}
.gallery-progress-bar.is-running {
animation: galleryProgress 6s linear forwards;
}
@keyframes galleryProgress {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
/* ---------- Entrance reveal ---------- */
.gallery-head > * {
opacity: 0;
transform: translateY(20px);
transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.gallery.is-revealed .gallery-head > *:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.05s; }
.gallery.is-revealed .gallery-head > *:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.18s; }
.gallery.is-revealed .gallery-head > *:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.3s; }
.gallery-stage,
.gallery-foot {
opacity: 0;
transform: translateY(20px);
transition: opacity 1.1s var(--ease-out) 0.4s, transform 1.1s var(--ease-out) 0.4s;
}
.gallery.is-revealed .gallery-stage,
.gallery.is-revealed .gallery-foot {
opacity: 1;
transform: translateY(0);
}
.gallery.is-revealed .gallery-foot {
transition-delay: 0.55s;
}
/* ---------- Responsive ---------- */
@media (max-width: 900px) {
.gallery-stage {
grid-template-columns: 1fr;
}
.gallery-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.gallery-nav--prev { left: 4px; }
.gallery-nav--next { right: 4px; }
.gallery-viewport {
-webkit-mask-image: none;
mask-image: none;
}
.gallery-slide {
padding: 0 8px;
}
.gallery-frame {
aspect-ratio: 3 / 4;
max-width: 520px;
}
.gallery-foot {
grid-template-columns: auto auto;
gap: 20px;
}
.gallery-progress {
display: none;
}
.gallery-dots {
justify-self: end;
}
}
@media (max-width: 560px) {
.gallery {
padding: 80px 18px 64px;
}
.gallery-nav {
width: 42px;
height: 42px;
background: rgba(8, 11, 16, 0.7);
}
.gallery-label {
font-size: 9px;
padding: 6px 11px 6px 9px;
letter-spacing: 0.2em;
}
.counter-current { font-size: 34px; }
.counter-divider { width: 22px; }
.counter-total { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
.gallery-track,
.gallery-slide,
.gallery-frame::before,
.gallery-frame::after,
.gallery-label,
.gallery-progress-bar {
transition: none !important;
animation: none !important;
}
}
/* ============================================
Dr. Emerson Ferreira — Sobre
Editorial portrait · fade-to-void · plaque
Inherits tokens from hero.css
============================================ */
.about {
position: relative;
padding: clamp(120px, 18vh, 220px) clamp(20px, 4vw, 64px);
background: var(--bg-2);
color: var(--ink);
overflow: hidden;
isolation: isolate;
}
/* Ambient platinum wash — top-left and bottom-right corners */
.about::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 50% at 8% 12%,
rgba(168, 194, 214, 0.085) 0%,
transparent 55%),
radial-gradient(ellipse 55% 45% at 92% 90%,
rgba(168, 194, 214, 0.055) 0%,
transparent 55%);
pointer-events: none;
z-index: 0;
}
/* Hairline crosshatch — gives weight without dominance */
.about::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(to right,
transparent calc(50% - 0.5px),
rgba(168, 194, 214, 0.04) 50%,
transparent calc(50% + 0.5px));
pointer-events: none;
z-index: 0;
}
.about-inner {
position: relative;
z-index: 1;
max-width: 1320px;
margin: 0 auto;
}
/* ---------- Eyebrow ---------- */
.about-eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--f-sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ink-soft);
padding: 9px 18px 9px 14px;
border: 1px solid var(--line);
border-radius: 999px;
background: rgba(8, 11, 16, 0.32);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
margin-bottom: clamp(72px, 10vh, 120px);
opacity: 0;
transform: translateY(20px);
transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.about-eyebrow .dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 4px var(--accent-soft);
animation: aboutPulse 2.4s ease-in-out infinite;
}
@keyframes aboutPulse {
0%, 100% { box-shadow: 0 0 0 4px var(--accent-soft); }
50% { box-shadow: 0 0 0 7px rgba(168, 194, 214, 0.08); }
}
.about-eyebrow strong {
color: var(--ink);
font-weight: 600;
}
.about.is-revealed .about-eyebrow {
opacity: 1;
transform: translateY(0);
transition-delay: 0.05s;
}
/* ============================================
GRID — portrait | story
============================================ */
.about-grid {
display: grid;
grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
gap: clamp(48px, 7vw, 112px);
align-items: center;
}
/* ============================================
PORTRAIT — edges dissolve into the void
============================================ */
.portrait {
position: relative;
align-self: center;
display: flex;
flex-direction: column;
align-items: center;
isolation: isolate;
opacity: 0;
transform: translateY(28px) scale(0.97);
transition: opacity 1.6s var(--ease-out), transform 1.6s var(--ease-out);
}
.about.is-revealed .portrait {
opacity: 1;
transform: translateY(0) scale(1);
transition-delay: 0.15s;
}
/* Soft platinum aura behind the portrait — gives ethereal weight */
.portrait-aura {
position: absolute;
top: 50%;
left: 50%;
width: 110%;
aspect-ratio: 1 / 1.05;
transform: translate(-50%, -52%);
background:
radial-gradient(ellipse 55% 60% at 50% 50%,
rgba(168, 194, 214, 0.16) 0%,
rgba(168, 194, 214, 0.08) 30%,
rgba(168, 194, 214, 0.02) 60%,
transparent 100%);
filter: blur(38px);
z-index: -2;
opacity: 0;
transition: opacity 1.8s var(--ease-out);
}
.about.is-revealed .portrait-aura {
opacity: 1;
transition-delay: 0.55s;
}
/* The mask: radial gradient fades the photo edges into bg */
.portrait-mask {
position: relative;
width: 100%;
max-width: 480px;
aspect-ratio: 4 / 5;
-webkit-mask-image: radial-gradient(
ellipse 72% 78% at 50% 48%,
#000 0%,
#000 38%,
rgba(0, 0, 0, 0.85) 58%,
rgba(0, 0, 0, 0.35) 80%,
transparent 98%
);
mask-image: radial-gradient(
ellipse 72% 78% at 50% 48%,
#000 0%,
#000 38%,
rgba(0, 0, 0, 0.85) 58%,
rgba(0, 0, 0, 0.35) 80%,
transparent 98%
);
z-index: 1;
}
.portrait-mask img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 38%;
filter: contrast(1.04) saturate(0.88) brightness(0.97);
display: block;
transform: scale(1);
transition: transform 1.6s var(--ease-out);
}
.about.is-revealed .portrait-mask img {
transform: scale(1.02);
}
/* Subtle film grain — adds editorial texture */
.portrait-grain {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.14;
mix-blend-mode: overlay;
pointer-events: none;
z-index: 2;
-webkit-mask-image: radial-gradient(ellipse 70% 75% at 50% 48%, #000 40%, transparent 90%);
mask-image: radial-gradient(ellipse 70% 75% at 50% 48%, #000 40%, transparent 90%);
}
/* Museum plaque below the portrait — credentials */
.portrait-plaque {
position: relative;
margin-top: clamp(18px, 3vh, 32px);
display: grid;
grid-template-columns: 1fr auto 1fr;
grid-template-rows: auto auto;
align-items: center;
column-gap: 16px;
row-gap: 10px;
width: 100%;
max-width: 380px;
z-index: 3;
opacity: 0;
transform: translateY(12px);
transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out);
}
.about.is-revealed .portrait-plaque {
opacity: 1;
transform: translateY(0);
transition-delay: 0.7s;
}
.plaque-rule {
grid-row: 1;
height: 1px;
background: linear-gradient(to right,
transparent 0%,
var(--line-strong) 35%,
var(--line-strong) 65%,
transparent 100%);
}
.plaque-rule:nth-of-type(2) { /* not used but kept for clarity */
display: none;
}
.plaque-glyph {
grid-row: 1;
grid-column: 2;
font-family: var(--f-display);
font-style: italic;
color: var(--accent);
font-size: 14px;
line-height: 1;
font-variation-settings: "opsz" 24, "SOFT" 100;
}
.plaque-name {
grid-row: 2;
grid-column: 1 / -1;
font-family: var(--f-display);
font-weight: 400;
font-size: clamp(18px, 1.5vw, 22px);
letter-spacing: -0.005em;
color: var(--ink);
text-align: center;
line-height: 1.1;
font-variation-settings: "opsz" 36, "SOFT" 60;
}
.plaque-name em {
font-style: italic;
color: var(--accent-2);
font-variation-settings: "opsz" 36, "SOFT" 100;
}
.plaque-meta {
grid-row: 3;
grid-column: 1 / -1;
font-family: var(--f-sans);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ink-mute);
text-align: center;
margin-top: -4px;
}
.plaque-meta strong {
color: var(--ink-soft);
font-weight: 600;
letter-spacing: 0.16em;
}
/* ============================================
STORY — narrative on the right
============================================ */
.story {
position: relative;
display: flex;
flex-direction: column;
}
.story-role {
display: inline-flex;
align-items: center;
gap: 12px;
align-self: flex-start;
font-family: var(--f-sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--ink-soft);
margin-bottom: clamp(24px, 3.6vh, 38px);
opacity: 0;
transform: translateX(-12px);
transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.role-pulse {
position: relative;
width: 28px;
height: 1px;
background: var(--accent);
display: inline-block;
}
.role-pulse::after {
content: "";
position: absolute;
right: -4px;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 4px var(--accent-soft);
}
.story-role em {
font-family: var(--f-display);
font-style: italic;
text-transform: none;
color: var(--accent-2);
font-size: 1.25em;
letter-spacing: 0;
margin-left: 4px;
font-variation-settings: "opsz" 24, "SOFT" 100;
}
.about.is-revealed .story-role {
opacity: 1;
transform: translateX(0);
transition-delay: 0.25s;
}
/* Name — two stacked lines */
.story-name {
font-family: var(--f-display);
font-weight: 350;
font-size: clamp(58px, 7.6vw, 132px);
line-height: 0.9;
letter-spacing: -0.028em;
color: var(--ink);
font-variation-settings: "opsz" 144, "SOFT" 40;
margin-bottom: clamp(24px, 3.6vh, 38px);
}
.name-line {
display: block;
overflow: hidden;
}
.name-inner {
display: inline-block;
transform: translateY(105%);
transition: transform 1.1s var(--ease-out);
}
.about.is-revealed .name-line:nth-child(1) .name-inner {
transform: translateY(0);
transition-delay: 0.35s;
}
.about.is-revealed .name-line:nth-child(2) .name-inner {
transform: translateY(0);
transition-delay: 0.5s;
}
.name-line--accent {
font-style: italic;
color: var(--accent-2);
font-variation-settings: "opsz" 144, "SOFT" 100;
}
.story-name .period {
color: var(--accent);
margin-left: -0.04em;
}
/* Tagline */
.story-tagline {
font-family: var(--f-display);
font-style: italic;
font-weight: 350;
font-size: clamp(20px, 1.8vw, 28px);
line-height: 1.35;
color: var(--ink-soft);
max-width: 28ch;
font-variation-settings: "opsz" 72, "SOFT" 80;
margin-bottom: clamp(40px, 5.5vh, 64px);
opacity: 0;
transform: translateY(14px);
transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.story-tagline em {
color: var(--accent-2);
font-style: italic;
font-variation-settings: "opsz" 72, "SOFT" 100;
}
.about.is-revealed .story-tagline {
opacity: 1;
transform: translateY(0);
transition-delay: 0.68s;
}
/* Bio body */
.story-bio {
position: relative;
padding-left: clamp(20px, 2.2vw, 32px);
border-left: 1px solid var(--line);
display: flex;
flex-direction: column;
gap: clamp(18px, 2.4vh, 24px);
max-width: 58ch;
}
.story-bio::before {
content: "";
position: absolute;
left: -1px;
top: 0;
bottom: 0;
width: 1px;
background: linear-gradient(to bottom,
var(--accent) 0%,
var(--accent) 6%,
transparent 6%,
transparent 100%);
transform: scaleY(0);
transform-origin: top;
transition: transform 1.2s var(--ease-out);
}
.about.is-revealed .story-bio::before {
transform: scaleY(1);
transition-delay: 0.8s;
}
.story-bio p {
font-family: var(--f-sans);
font-size: clamp(15.5px, 1.05vw, 17px);
line-height: 1.72;
color: var(--ink-soft);
font-weight: 300;
opacity: 0;
transform: translateY(14px);
transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out);
}
.story-bio p strong {
color: var(--ink);
font-weight: 500;
}
.story-bio p em {
font-family: var(--f-display);
font-style: italic;
color: var(--accent-2);
font-weight: 400;
font-variation-settings: "opsz" 24, "SOFT" 100;
}
.about.is-revealed .story-bio p:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.85s; }
.about.is-revealed .story-bio p:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 1.0s; }
.about.is-revealed .story-bio p:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 1.15s; }
/* Credentials grid — academic mini-cards */
.story-credentials {
list-style: none;
margin: clamp(40px, 5.5vh, 60px) 0 0;
padding: clamp(28px, 4vh, 40px) 0 0;
border-top: 1px solid var(--line);
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(22px, 3vh, 32px) clamp(28px, 3.5vw, 48px);
position: relative;
}
.story-credentials::before {
content: "Formação";
position: absolute;
top: -7px;
left: 0;
font-family: var(--f-sans);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--ink-mute);
background: var(--bg-2);
padding-right: 16px;
}
.story-credentials li {
display: flex;
gap: 14px;
align-items: flex-start;
opacity: 0;
transform: translateY(12px);
transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.cred-num {
font-family: var(--f-display);
font-style: italic;
font-weight: 400;
font-size: 22px;
line-height: 1;
color: var(--accent);
flex-shrink: 0;
margin-top: 2px;
font-variation-settings: "opsz" 36, "SOFT" 100;
}
.cred-body {
display: flex;
flex-direction: column;
gap: 5px;
min-width: 0;
}
.cred-label {
font-family: var(--f-display);
font-style: italic;
font-weight: 400;
font-size: clamp(16px, 1.2vw, 18.5px);
color: var(--ink);
letter-spacing: -0.005em;
line-height: 1.2;
font-variation-settings: "opsz" 36, "SOFT" 80;
}
.cred-sub {
font-family: var(--f-sans);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--ink-mute);
}
.about.is-revealed .story-credentials li:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 1.0s; }
.about.is-revealed .story-credentials li:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 1.12s; }
.about.is-revealed .story-credentials li:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 1.24s; }
.about.is-revealed .story-credentials li:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 1.36s; }
/* Foot — signature + CTA inline */
.story-foot {
margin-top: clamp(40px, 5.5vh, 56px);
padding-top: clamp(28px, 4vh, 36px);
border-top: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
opacity: 0;
transform: translateY(14px);
transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.about.is-revealed .story-foot {
opacity: 1;
transform: translateY(0);
transition-delay: 1.5s;
}
.story-sign {
display: inline-flex;
align-items: center;
gap: 14px;
}
.sign-mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: 1px solid var(--accent);
border-radius: 50%;
font-family: var(--f-display);
font-style: italic;
font-weight: 400;
font-size: 16px;
color: var(--accent-2);
background: rgba(168, 194, 214, 0.04);
font-variation-settings: "opsz" 24, "SOFT" 100;
}
.sign-text {
font-family: var(--f-sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--ink-mute);
}
.sign-text em {
font-family: var(--f-display);
font-style: italic;
color: var(--ink-soft);
text-transform: none;
font-size: 1.32em;
letter-spacing: 0;
font-variation-settings: "opsz" 24, "SOFT" 100;
}
.story-cta {
position: relative;
display: inline-flex;
align-items: center;
gap: 14px;
font-family: var(--f-sans);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 18px 30px;
border-radius: 999px;
background: var(--ink);
color: var(--bg);
overflow: hidden;
transition: transform 0.4s var(--ease);
white-space: nowrap;
}
.story-cta::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(120deg, var(--accent-2) 0%, var(--accent) 100%);
transform: translateY(101%);
transition: transform 0.5s var(--ease-out);
}
.story-cta span,
.story-cta svg {
position: relative;
z-index: 2;
}
.story-cta svg {
width: 22px;
height: 10px;
transition: transform 0.4s var(--ease);
}
.story-cta:hover::before { transform: translateY(0); }
.story-cta:hover { transform: translateY(-1px); }
.story-cta:hover svg { transform: translateX(5px); }
/* ============================================
RESPONSIVE
============================================ */
@media (max-width: 1080px) {
.about-grid {
gap: clamp(40px, 6vw, 72px);
}
.story-credentials {
gap: 24px;
}
}
@media (max-width: 880px) {
.about-grid {
grid-template-columns: 1fr;
gap: clamp(48px, 7vh, 72px);
}
.portrait-mask {
max-width: 420px;
margin: 0 auto;
}
.portrait-plaque {
margin-left: auto;
margin-right: auto;
}
.story-name {
font-size: clamp(56px, 12vw, 88px);
}
}
@media (max-width: 580px) {
.about {
padding: 92px 18px;
}
.about-eyebrow {
margin-bottom: 48px;
}
.portrait-mask {
max-width: 100%;
aspect-ratio: 4 / 4.6;
}
.story-bio {
padding-left: 18px;
}
.story-credentials {
grid-template-columns: 1fr;
gap: 22px;
}
.story-foot {
flex-direction: column;
align-items: stretch;
gap: 22px;
}
.story-cta {
justify-content: center;
width: 100%;
}
.sign-text em {
font-size: 1.2em;
}
}
@media (prefers-reduced-motion: reduce) {
.about *,
.about *::before,
.about *::after {
transition: none !important;
animation: none !important;
}
.portrait,
.portrait-aura,
.portrait-plaque,
.name-inner,
.story-role,
.story-tagline,
.story-bio p,
.story-credentials li,
.story-foot {
opacity: 1 !important;
transform: none !important;
}
.story-bio::before {
transform: scaleY(1) !important;
}
}
/* ============================================
Dr. Emerson Ferreira — Diferenciais
Editorial 4-card lineup
Inherits tokens from hero.css
============================================ */
.advantages {
position: relative;
padding: clamp(110px, 14vh, 180px) clamp(20px, 4vw, 64px);
background: var(--bg);
color: var(--ink);
overflow: hidden;
isolation: isolate;
}
.advantages::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 45% 40% at 12% 18%,
rgba(168, 194, 214, 0.05) 0%,
transparent 60%),
radial-gradient(ellipse 45% 40% at 92% 88%,
rgba(168, 194, 214, 0.04) 0%,
transparent 60%);
pointer-events: none;
z-index: -1;
}
.advantages-inner {
position: relative;
max-width: 1180px;
margin: 0 auto;
}
.advantages-head {
text-align: center;
max-width: 760px;
margin: 0 auto clamp(56px, 7vh, 84px);
}
.advantages-eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--f-sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ink-soft);
padding: 9px 18px 9px 14px;
border: 1px solid var(--line);
border-radius: 999px;
background: rgba(8, 11, 16, 0.32);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
margin-bottom: clamp(24px, 3.5vh, 36px);
opacity: 0;
transform: translateY(20px);
transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.advantages-eyebrow .dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 4px var(--accent-soft);
}
.advantages-eyebrow strong {
color: var(--ink);
font-weight: 600;
}
.advantages.is-revealed .advantages-eyebrow {
opacity: 1; transform: translateY(0);
transition-delay: 0.05s;
}
.advantages-title {
font-family: var(--f-display);
font-weight: 350;
font-size: clamp(36px, 4.6vw, 72px);
line-height: 1.0;
letter-spacing: -0.022em;
color: var(--ink);
font-variation-settings: "opsz" 144, "SOFT" 40;
opacity: 0;
transform: translateY(24px);
transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out);
}
.advantages-title em {
font-style: italic;
color: var(--accent-2);
font-variation-settings: "opsz" 144, "SOFT" 100;
}
.advantages-title .period {
color: var(--accent);
margin-left: -0.04em;
}
.advantages.is-revealed .advantages-title {
opacity: 1; transform: translateY(0);
transition-delay: 0.2s;
}
.advantages-lede {
margin-top: clamp(20px, 3vh, 28px);
font-family: var(--f-sans);
font-size: clamp(15px, 1.05vw, 17px);
line-height: 1.6;
color: var(--ink-soft);
font-weight: 300;
max-width: 540px;
margin-left: auto;
margin-right: auto;
opacity: 0;
transform: translateY(14px);
transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.advantages-lede em {
font-family: var(--f-display);
font-style: italic;
color: var(--ink);
font-variation-settings: "opsz" 24, "SOFT" 100;
}
.advantages.is-revealed .advantages-lede {
opacity: 1; transform: translateY(0);
transition-delay: 0.35s;
}
/* ---------- Grid ---------- */
.advantages-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(18px, 2.2vw, 30px);
}
.advantage {
position: relative;
padding: clamp(28px, 3vw, 38px) clamp(22px, 2.4vw, 30px);
border: 1px solid var(--line);
background: linear-gradient(180deg, rgba(232, 238, 245, 0.045) 0%, rgba(232, 238, 245, 0.015) 100%);
display: flex;
flex-direction: column;
gap: 14px;
opacity: 0;
transform: translateY(28px);
transition: opacity 1s var(--ease-out), transform 1s var(--ease-out),
border-color 0.4s var(--ease), transform 0.6s var(--ease-out);
min-height: 250px;
}
.advantage:hover {
border-color: rgba(232, 238, 245, 0.16);
}
.advantages.is-revealed .advantage:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.5s; }
.advantages.is-revealed .advantage:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.62s; }
.advantages.is-revealed .advantage:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.74s; }
.advantages.is-revealed .advantage:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 0.86s; }
.advantage-num {
font-family: var(--f-display);
font-style: italic;
font-weight: 350;
font-size: 32px;
line-height: 1;
color: var(--accent);
letter-spacing: -0.02em;
font-variation-settings: "opsz" 36, "SOFT" 100;
}
.advantage-title {
margin: 0;
font-family: var(--f-display);
font-weight: 400;
font-size: clamp(19px, 1.55vw, 23px);
line-height: 1.22;
letter-spacing: -0.012em;
color: var(--ink);
font-variation-settings: "opsz" 36, "SOFT" 60;
}
.advantage-text {
margin: 0;
font-family: var(--f-sans);
font-size: 14.5px;
line-height: 1.62;
color: var(--ink-soft);
font-weight: 300;
}
.advantage-text em {
font-style: italic;
color: var(--ink);
}
@media (max-width: 1024px) {
.advantages-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
max-width: 760px;
margin: 0 auto;
}
}
@media (max-width: 560px) {
.advantages { padding: 72px 18px; }
.advantages-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.advantage { min-height: 0; padding: 26px 22px; }
.advantages-title { font-size: clamp(30px, 8vw, 44px); line-height: 1.04; }
}
@media (prefers-reduced-motion: reduce) {
.advantages *,
.advantages *::before,
.advantages *::after {
transition: none !important;
animation: none !important;
}
.advantages .advantages-eyebrow,
.advantages .advantages-title,
.advantages .advantages-lede,
.advantages .advantage {
opacity: 1 !important;
transform: none !important;
}
}
/* ============================================
Dr. Emerson Ferreira — FAQ
Editorial Q&A · magazine interview register
Inherits tokens from hero.css
============================================ */
.faq {
position: relative;
padding: clamp(120px, 16vh, 200px) clamp(20px, 4vw, 64px);
background: var(--bg);
color: var(--ink);
overflow: hidden;
isolation: isolate;
}
.faq::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 55% 50% at 90% 12%,
rgba(168, 194, 214, 0.05) 0%,
transparent 60%),
radial-gradient(ellipse 60% 45% at 10% 88%,
rgba(168, 194, 214, 0.04) 0%,
transparent 60%);
pointer-events: none;
z-index: -1;
}
/* chapter marker — IV */
.faq::after {
content: "IV";
position: absolute;
top: clamp(40px, 8vh, 100px);
right: -0.16em;
font-family: var(--f-display);
font-style: italic;
font-weight: 350;
font-size: clamp(220px, 38vw, 520px);
line-height: 0.78;
color: rgba(168, 194, 214, 0.035);
font-variation-settings: "opsz" 144, "SOFT" 100;
pointer-events: none;
user-select: none;
z-index: -1;
letter-spacing: -0.05em;
}
.faq-inner {
position: relative;
max-width: 1080px;
margin: 0 auto;
}
/* ============================================
HEADER
============================================ */
.faq-head {
text-align: center;
max-width: 880px;
margin: 0 auto clamp(64px, 9vh, 100px);
}
.faq-eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--f-sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ink-soft);
padding: 9px 18px 9px 14px;
border: 1px solid var(--line);
border-radius: 999px;
background: rgba(8, 11, 16, 0.32);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
margin-bottom: clamp(28px, 4vh, 40px);
opacity: 0;
transform: translateY(20px);
transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.faq-eyebrow .dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 4px var(--accent-soft);
}
.faq-eyebrow strong {
color: var(--ink);
font-weight: 600;
}
.faq.is-revealed .faq-eyebrow {
opacity: 1; transform: translateY(0);
transition-delay: 0.05s;
}
.faq-title {
font-family: var(--f-display);
font-weight: 350;
font-size: clamp(40px, 5.6vw, 88px);
line-height: 0.98;
letter-spacing: -0.024em;
color: var(--ink);
font-variation-settings: "opsz" 144, "SOFT" 40;
opacity: 0;
transform: translateY(28px);
transition: opacity 1.2s var(--ease-out), transform 1.2s var(--ease-out);
}
.faq-title em {
font-style: italic;
color: var(--accent-2);
font-variation-settings: "opsz" 144, "SOFT" 100;
}
.faq-title .period {
color: var(--accent);
margin-left: -0.04em;
}
.faq-title .line-2 {
display: block;
font-style: italic;
color: var(--ink-soft);
font-variation-settings: "opsz" 144, "SOFT" 100;
}
.faq.is-revealed .faq-title {
opacity: 1; transform: translateY(0);
transition-delay: 0.2s;
}
.faq-lede {
margin-top: clamp(24px, 3.5vh, 36px);
font-family: var(--f-sans);
font-size: clamp(15px, 1.05vw, 17.5px);
line-height: 1.65;
color: var(--ink-soft);
font-weight: 300;
max-width: 580px;
margin-left: auto;
margin-right: auto;
opacity: 0;
transform: translateY(16px);
transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.faq-lede em {
font-family: var(--f-display);
font-style: italic;
color: var(--ink);
font-variation-settings: "opsz" 24, "SOFT" 100;
}
.faq.is-revealed .faq-lede {
opacity: 1; transform: translateY(0);
transition-delay: 0.35s;
}
/* ============================================
FAQ LIST
============================================ */
.faq-list {
max-width: 880px;
margin: 0 auto;
border-top: 1px solid var(--line);
}
.faq-item {
position: relative;
border-bottom: 1px solid var(--line);
padding-left: 0;
opacity: 0;
transform: translateY(14px);
transition:
opacity 0.9s var(--ease-out),
transform 0.9s var(--ease-out),
padding-left 0.5s var(--ease);
}
.faq.is-revealed .faq-item { opacity: 1; transform: translateY(0); }
.faq.is-revealed .faq-item:nth-child(1) { transition-delay: 0.46s; }
.faq.is-revealed .faq-item:nth-child(2) { transition-delay: 0.52s; }
.faq.is-revealed .faq-item:nth-child(3) { transition-delay: 0.58s; }
.faq.is-revealed .faq-item:nth-child(4) { transition-delay: 0.64s; }
.faq.is-revealed .faq-item:nth-child(5) { transition-delay: 0.7s; }
.faq.is-revealed .faq-item:nth-child(6) { transition-delay: 0.76s; }
.faq.is-revealed .faq-item:nth-child(7) { transition-delay: 0.82s; }
.faq.is-revealed .faq-item:nth-child(8) { transition-delay: 0.88s; }
.faq-item.is-open {
padding-left: clamp(14px, 1.6vw, 22px);
}
/* gold marker on the left when open */
.faq-item.is-open::before {
content: "";
position: absolute;
left: 0;
top: clamp(22px, 3.2vh, 32px);
bottom: clamp(22px, 3.2vh, 32px);
width: 1px;
background: var(--accent);
animation: faqLineIn 0.5s var(--ease-out);
}
@keyframes faqLineIn {
from { transform: scaleY(0); transform-origin: top; }
to { transform: scaleY(1); transform-origin: top; }
}
/* ---------- Question (button) ---------- */
.faq-question {
display: grid;
grid-template-columns: clamp(52px, 5.5vw, 76px) 1fr auto;
gap: clamp(20px, 3vw, 36px);
align-items: baseline;
width: 100%;
padding: clamp(24px, 3.5vh, 36px) clamp(6px, 1.5vw, 16px);
background: transparent;
border: none;
cursor: pointer;
text-align: left;
font: inherit;
color: inherit;
transition: padding 0.4s var(--ease);
}
.faq-question:focus-visible {
outline: 1px solid var(--accent);
outline-offset: -1px;
}
.q-num {
font-family: var(--f-display);
font-style: italic;
font-weight: 400;
font-size: clamp(20px, 2vw, 30px);
color: var(--accent);
line-height: 1;
font-variation-settings: "opsz" 36, "SOFT" 100;
letter-spacing: -0.01em;
text-align: right;
padding-right: 4px;
transition: color 0.4s var(--ease);
}
.q-text {
font-family: var(--f-display);
font-weight: 350;
font-style: italic;
font-size: clamp(19px, 1.9vw, 27px);
line-height: 1.28;
letter-spacing: -0.012em;
color: var(--ink);
font-variation-settings: "opsz" 72, "SOFT" 100;
transition: color 0.4s var(--ease);
}
.faq-question:hover .q-text {
color: var(--accent-2);
}
.faq-item.is-open .q-text {
color: var(--accent-2);
}
.faq-item.is-open .q-num {
color: var(--accent-2);
}
/* ---------- Toggle indicator (rotating cross) ---------- */
.q-toggle {
position: relative;
width: 22px;
height: 22px;
flex-shrink: 0;
align-self: center;
}
.q-toggle .bar {
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background: var(--accent);
transform-origin: center;
transition: transform 0.45s var(--ease), background 0.4s var(--ease);
}
.q-toggle .bar:nth-child(2) {
transform: rotate(90deg);
}
.faq-item.is-open .q-toggle .bar:nth-child(2) {
transform: rotate(0);
}
.faq-question:hover .q-toggle .bar {
background: var(--accent-2);
}
/* ---------- Answer (animated grid-row collapse) ---------- */
.faq-answer {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.5s var(--ease-out);
}
.faq-item.is-open .faq-answer {
grid-template-rows: 1fr;
}
.answer-inner {
min-height: 0;
overflow: hidden;
}
.answer-content {
display: grid;
grid-template-columns: clamp(52px, 5.5vw, 76px) 1fr;
gap: clamp(20px, 3vw, 36px);
padding: 0 clamp(6px, 1.5vw, 16px) clamp(28px, 4vh, 40px);
}
.answer-body {
grid-column: 2;
font-family: var(--f-sans);
font-size: clamp(15px, 1.05vw, 17px);
line-height: 1.72;
color: var(--ink-soft);
font-weight: 300;
max-width: 60ch;
opacity: 0;
transform: translateY(8px);
transition:
opacity 0.5s var(--ease) 0.18s,
transform 0.5s var(--ease) 0.18s;
}
.faq-item.is-open .answer-body {
opacity: 1;
transform: translateY(0);
}
.answer-body em {
font-family: var(--f-display);
font-style: italic;
color: var(--ink);
font-weight: 400;
font-variation-settings: "opsz" 24, "SOFT" 100;
}
.answer-body strong {
color: var(--ink);
font-weight: 500;
}
/* ============================================
FOOTER (still got a question?)
============================================ */
.faq-foot {
margin-top: clamp(72px, 10vh, 110px);
max-width: 640px;
margin-left: auto;
margin-right: auto;
text-align: center;
position: relative;
opacity: 0;
transform: translateY(20px);
transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out);
}
.faq.is-revealed .faq-foot {
opacity: 1; transform: translateY(0);
transition-delay: 1s;
}
.faq-foot::before {
content: "✦";
display: block;
font-size: 13px;
color: var(--accent);
opacity: 0.65;
margin-bottom: clamp(24px, 3vh, 36px);
}
.foot-text {
font-family: var(--f-display);
font-weight: 350;
font-size: clamp(20px, 2vw, 28px);
line-height: 1.36;
color: var(--ink-soft);
margin-bottom: clamp(22px, 3vh, 32px);
font-variation-settings: "opsz" 96, "SOFT" 60;
}
.foot-text em {
font-style: italic;
color: var(--ink);
font-variation-settings: "opsz" 96, "SOFT" 100;
}
.foot-link {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--f-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ink);
padding-bottom: 8px;
border-bottom: 1px solid var(--accent);
transition: gap 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.foot-link svg {
width: 18px;
height: 9px;
transition: transform 0.4s var(--ease);
}
.foot-link:hover {
color: var(--accent-2);
gap: 16px;
}
.foot-link:hover svg {
transform: translateX(3px);
}
/* ============================================
RESPONSIVE
============================================ */
@media (max-width: 720px) {
.faq {
padding: 80px 18px;
}
.faq::after {
font-size: 200px;
top: 30px;
}
.faq-question {
grid-template-columns: clamp(40px, 9vw, 56px) 1fr auto;
gap: 14px;
padding: 22px 6px;
}
.answer-content {
grid-template-columns: clamp(40px, 9vw, 56px) 1fr;
gap: 14px;
padding: 0 6px 24px;
}
.q-text {
font-size: clamp(17px, 4.6vw, 22px);
}
.q-num {
font-size: clamp(18px, 4.5vw, 24px);
}
.answer-body {
font-size: 14.5px;
}
.faq-title {
font-size: clamp(36px, 9.5vw, 56px);
}
.foot-text {
font-size: clamp(18px, 5vw, 22px);
}
}
@media (prefers-reduced-motion: reduce) {
.faq *,
.faq *::before,
.faq *::after {
transition: none !important;
animation: none !important;
}
.faq .faq-eyebrow,
.faq .faq-title,
.faq .faq-lede,
.faq .faq-item,
.faq .faq-foot {
opacity: 1 !important;
transform: none !important;
}
}
/* ============================================
Dr. Emerson Ferreira — Por dentro da clínica
Editorial asymmetric photo grid
Inherits tokens from hero.css
============================================ */
.clinic-tour {
position: relative;
padding: clamp(110px, 14vh, 180px) clamp(20px, 4vw, 64px);
background: var(--bg-2);
color: var(--ink);
overflow: hidden;
isolation: isolate;
}
.clinic-tour::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 55% 45% at 50% 0%,
rgba(168, 194, 214, 0.05) 0%,
transparent 60%);
pointer-events: none;
z-index: -1;
}
.clinic-tour-inner {
position: relative;
max-width: 1240px;
margin: 0 auto;
}
.clinic-tour-head {
text-align: center;
max-width: 760px;
margin: 0 auto clamp(56px, 7vh, 80px);
}
.clinic-tour-eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--f-sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ink-soft);
padding: 9px 18px 9px 14px;
border: 1px solid var(--line);
border-radius: 999px;
background: rgba(8, 11, 16, 0.32);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
margin-bottom: clamp(24px, 3.5vh, 36px);
opacity: 0;
transform: translateY(20px);
transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.clinic-tour-eyebrow .dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 4px var(--accent-soft);
}
.clinic-tour-eyebrow strong {
color: var(--ink);
font-weight: 600;
}
.clinic-tour.is-revealed .clinic-tour-eyebrow {
opacity: 1; transform: translateY(0);
transition-delay: 0.05s;
}
.clinic-tour-title {
font-family: var(--f-display);
font-weight: 350;
font-size: clamp(36px, 4.8vw, 76px);
line-height: 1.0;
letter-spacing: -0.022em;
color: var(--ink);
font-variation-settings: "opsz" 144, "SOFT" 40;
opacity: 0;
transform: translateY(24px);
transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out);
}
.clinic-tour-title em {
font-style: italic;
color: var(--accent-2);
font-variation-settings: "opsz" 144, "SOFT" 100;
}
.clinic-tour-title .period {
color: var(--accent);
margin-left: -0.04em;
}
.clinic-tour.is-revealed .clinic-tour-title {
opacity: 1; transform: translateY(0);
transition-delay: 0.2s;
}
.clinic-tour-lede {
margin-top: clamp(22px, 3vh, 30px);
font-family: var(--f-sans);
font-size: clamp(15px, 1.05vw, 17px);
line-height: 1.6;
color: var(--ink-soft);
font-weight: 300;
max-width: 580px;
margin-left: auto;
margin-right: auto;
opacity: 0;
transform: translateY(14px);
transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.clinic-tour-lede em {
font-family: var(--f-display);
font-style: italic;
color: var(--ink);
font-variation-settings: "opsz" 24, "SOFT" 100;
}
.clinic-tour.is-revealed .clinic-tour-lede {
opacity: 1; transform: translateY(0);
transition-delay: 0.35s;
}
/* ---------- Asymmetric photo grid ---------- */
.clinic-tour-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: clamp(140px, 16vw, 200px);
gap: clamp(10px, 1.4vw, 18px);
}
.tour-item {
margin: 0;
position: relative;
overflow: hidden;
background: var(--bg);
border: 1px solid var(--line);
opacity: 0;
transform: translateY(28px);
transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out);
}
.tour-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 1.6s var(--ease-out);
}
.tour-item:hover img {
transform: scale(1.05);
}
.tour-item figcaption {
position: absolute;
bottom: 0; left: 0; right: 0;
padding: 18px 18px 14px;
font-family: var(--f-sans);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #fff;
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%);
opacity: 0;
transform: translateY(8px);
transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
pointer-events: none;
}
.tour-item:hover figcaption {
opacity: 1;
transform: translateY(0);
}
/* corner accent on hover */
.tour-item::before,
.tour-item::after {
content: "";
position: absolute;
width: 14px;
height: 14px;
border: 1px solid var(--accent);
z-index: 2;
opacity: 0;
pointer-events: none;
transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.tour-item::before {
top: 10px; left: 10px;
border-right: none; border-bottom: none;
transform: translate(-4px, -4px);
}
.tour-item::after {
bottom: 10px; right: 10px;
border-left: none; border-top: none;
transform: translate(4px, 4px);
}
.tour-item:hover::before,
.tour-item:hover::after {
opacity: 0.85;
transform: translate(0, 0);
}
/* Editorial layout: 6 cols × 6 rows */
.tour-item:nth-child(1) { grid-column: span 3; grid-row: span 2; } /* fachada */
.tour-item:nth-child(2) { grid-column: span 3; grid-row: span 2; } /* consultório */
.tour-item:nth-child(3) { grid-column: span 2; grid-row: span 2; } /* dr retrato */
.tour-item:nth-child(4) { grid-column: span 2; grid-row: span 2; } /* sala consulta */
.tour-item:nth-child(5) { grid-column: span 2; grid-row: span 2; } /* câmera */
.tour-item:nth-child(6) { grid-column: span 6; grid-row: span 2; } /* atendimento full */
.clinic-tour.is-revealed .tour-item:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.5s; }
.clinic-tour.is-revealed .tour-item:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.6s; }
.clinic-tour.is-revealed .tour-item:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.7s; }
.clinic-tour.is-revealed .tour-item:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 0.8s; }
.clinic-tour.is-revealed .tour-item:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 0.9s; }
.clinic-tour.is-revealed .tour-item:nth-child(6) { opacity: 1; transform: translateY(0); transition-delay: 1.0s; }
/* ---------- Responsive ---------- */
@media (max-width: 960px) {
.clinic-tour-grid {
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: clamp(170px, 32vw, 240px);
}
.tour-item:nth-child(1),
.tour-item:nth-child(2),
.tour-item:nth-child(6) {
grid-column: span 2;
grid-row: span 1;
}
.tour-item:nth-child(3),
.tour-item:nth-child(4),
.tour-item:nth-child(5) {
grid-column: span 1;
grid-row: span 1;
}
.tour-item figcaption {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 540px) {
.clinic-tour { padding: 72px 18px; }
.clinic-tour-title { font-size: clamp(30px, 8vw, 44px); line-height: 1.04; }
.clinic-tour-grid {
grid-template-columns: 1fr;
grid-auto-rows: 240px;
}
.tour-item:nth-child(n) {
grid-column: span 1;
grid-row: span 1;
}
}
@media (prefers-reduced-motion: reduce) {
.clinic-tour *,
.clinic-tour *::before,
.clinic-tour *::after {
transition: none !important;
animation: none !important;
}
.clinic-tour .clinic-tour-eyebrow,
.clinic-tour .clinic-tour-title,
.clinic-tour .clinic-tour-lede,
.clinic-tour .tour-item {
opacity: 1 !important;
transform: none !important;
}
}
/* ============================================
Dr. Emerson Ferreira — Depoimentos
Editorial Google-review cards
Inherits tokens from hero.css
============================================ */
.testimonials {
position: relative;
padding: clamp(120px, 16vh, 200px) clamp(20px, 4vw, 64px);
background: var(--bg-2);
color: var(--ink);
overflow: hidden;
isolation: isolate;
}
.testimonials::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 55% 50% at 50% 0%,
rgba(168, 194, 214, 0.07) 0%,
transparent 60%),
radial-gradient(ellipse 60% 45% at 50% 100%,
rgba(168, 194, 214, 0.055) 0%,
transparent 60%);
pointer-events: none;
z-index: -1;
}
.testimonials::after {
content: "V";
position: absolute;
top: clamp(40px, 8vh, 100px);
left: -0.12em;
font-family: var(--f-display);
font-style: italic;
font-weight: 350;
font-size: clamp(220px, 38vw, 520px);
line-height: 0.78;
color: rgba(168, 194, 214, 0.045);
font-variation-settings: "opsz" 144, "SOFT" 100;
pointer-events: none;
user-select: none;
z-index: -1;
letter-spacing: -0.05em;
}
.testimonials-inner {
position: relative;
max-width: 1180px;
margin: 0 auto;
}
/* ---------- Header ---------- */
.testimonials-head {
text-align: center;
max-width: 880px;
margin: 0 auto clamp(64px, 9vh, 100px);
}
.testimonials-eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--f-sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ink-soft);
padding: 9px 18px 9px 14px;
border: 1px solid var(--line);
border-radius: 999px;
background: rgba(8, 11, 16, 0.32);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
margin-bottom: clamp(28px, 4vh, 40px);
opacity: 0;
transform: translateY(20px);
transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.testimonials-eyebrow .dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 4px var(--accent-soft);
}
.testimonials-eyebrow strong {
color: var(--ink);
font-weight: 600;
}
.testimonials.is-revealed .testimonials-eyebrow {
opacity: 1; transform: translateY(0);
transition-delay: 0.05s;
}
.testimonials-title {
font-family: var(--f-display);
font-weight: 350;
font-size: clamp(40px, 5.6vw, 88px);
line-height: 0.98;
letter-spacing: -0.024em;
color: var(--ink);
font-variation-settings: "opsz" 144, "SOFT" 40;
opacity: 0;
transform: translateY(28px);
transition: opacity 1.2s var(--ease-out), transform 1.2s var(--ease-out);
}
.testimonials-title em {
font-style: italic;
color: var(--accent-2);
font-variation-settings: "opsz" 144, "SOFT" 100;
}
.testimonials-title .period {
color: var(--accent);
margin-left: -0.04em;
}
.testimonials.is-revealed .testimonials-title {
opacity: 1; transform: translateY(0);
transition-delay: 0.2s;
}
.testimonials-lede {
margin-top: clamp(24px, 3.5vh, 36px);
font-family: var(--f-sans);
font-size: clamp(15px, 1.05vw, 17.5px);
line-height: 1.65;
color: var(--ink-soft);
font-weight: 300;
max-width: 580px;
margin-left: auto;
margin-right: auto;
opacity: 0;
transform: translateY(16px);
transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.testimonials-lede em {
font-family: var(--f-display);
font-style: italic;
color: var(--ink);
font-variation-settings: "opsz" 24, "SOFT" 100;
}
.testimonials.is-revealed .testimonials-lede {
opacity: 1; transform: translateY(0);
transition-delay: 0.35s;
}
/* ---------- Google summary badge ---------- */
.google-summary {
display: inline-flex;
align-items: center;
gap: 12px;
margin-top: clamp(22px, 3vh, 30px);
padding: 10px 18px 10px 14px;
border: 1px solid var(--line);
border-radius: 999px;
background: rgba(8, 11, 16, 0.32);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
font-family: var(--f-sans);
color: var(--ink);
text-decoration: none;
opacity: 0;
transform: translateY(16px);
transition: opacity 1s var(--ease-out), transform 1s var(--ease-out),
border-color 0.4s var(--ease), background 0.4s var(--ease);
}
.testimonials.is-revealed .google-summary {
opacity: 1; transform: translateY(0);
transition-delay: 0.45s;
}
.google-summary:hover {
border-color: rgba(232, 238, 245, 0.18);
background: rgba(8, 11, 16, 0.48);
}
.google-summary .g-logo {
width: 16px;
height: 16px;
flex-shrink: 0;
}
.google-summary .g-rating {
font-size: 14px;
font-weight: 600;
letter-spacing: 0.01em;
color: var(--ink);
}
.google-summary .g-stars {
display: inline-flex;
line-height: 0;
}
.google-summary .g-stars svg {
width: 64px;
height: 12px;
display: block;
}
.google-summary .g-count {
font-size: 11.5px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-soft);
}
.google-summary .g-arrow {
width: 12px;
height: 9px;
color: var(--accent);
transition: transform 0.4s var(--ease);
}
.google-summary:hover .g-arrow {
transform: translateX(3px);
}
@media (max-width: 520px) {
.google-summary {
padding: 9px 14px 9px 12px;
gap: 10px;
}
.google-summary .g-count {
display: none;
}
}
/* ============================================
REVIEW CARD GRID
============================================ */
.testimonials-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(20px, 3vw, 44px);
max-width: 1180px;
margin: 0 auto;
align-items: start;
width: 100%;
}
.testimonial {
position: relative;
min-width: 0;
max-width: 100%;
opacity: 0;
transform: translateY(28px);
transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out);
}
.testimonial:nth-child(2) {
margin-top: clamp(28px, 4vh, 56px);
}
.testimonials.is-revealed .testimonial:nth-child(1) {
opacity: 1; transform: translateY(0);
transition-delay: 0.5s;
}
.testimonials.is-revealed .testimonial:nth-child(2) {
opacity: 1; transform: translateY(0);
transition-delay: 0.68s;
}
.testimonials.is-revealed .testimonial:nth-child(3) {
opacity: 1; transform: translateY(0);
transition-delay: 0.86s;
}
/* ---------- Review card ---------- */
.testimonial-card {
position: relative;
width: 100%;
max-width: 100%;
min-width: 0;
padding: clamp(26px, 3vw, 36px) clamp(24px, 2.8vw, 34px);
background: linear-gradient(180deg, rgba(232, 238, 245, 0.045) 0%, rgba(232, 238, 245, 0.018) 100%);
border: 1px solid var(--line);
display: flex;
flex-direction: column;
gap: clamp(18px, 2.4vw, 24px);
box-shadow:
0 1px 0 rgba(232, 238, 245, 0.04) inset,
0 32px 80px -32px rgba(0, 0, 0, 0.7),
0 14px 32px -16px rgba(0, 0, 0, 0.5);
transition: border-color 0.5s var(--ease), transform 0.6s var(--ease-out);
}
.testimonial:hover .testimonial-card {
border-color: rgba(232, 238, 245, 0.16);
transform: translateY(-4px);
}
/* gold corner accents */
.testimonial-card::before,
.testimonial-card::after {
content: "";
position: absolute;
width: 16px;
height: 16px;
border: 1px solid var(--accent);
z-index: 5;
opacity: 0;
pointer-events: none;
transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.testimonial-card::before {
top: 10px; left: 10px;
border-right: none; border-bottom: none;
transform: translate(-5px, -5px);
}
.testimonial-card::after {
bottom: 10px; right: 10px;
border-left: none; border-top: none;
transform: translate(5px, 5px);
}
.testimonials.is-revealed .testimonial:nth-child(1) .testimonial-card::before,
.testimonials.is-revealed .testimonial:nth-child(1) .testimonial-card::after {
opacity: 0.6; transform: translate(0, 0);
transition-delay: 1s;
}
.testimonials.is-revealed .testimonial:nth-child(2) .testimonial-card::before,
.testimonials.is-revealed .testimonial:nth-child(2) .testimonial-card::after {
opacity: 0.6; transform: translate(0, 0);
transition-delay: 1.2s;
}
.testimonials.is-revealed .testimonial:nth-child(3) .testimonial-card::before,
.testimonials.is-revealed .testimonial:nth-child(3) .testimonial-card::after {
opacity: 0.6; transform: translate(0, 0);
transition-delay: 1.4s;
}
/* ---------- Card head: G + stars + date ---------- */
.testimonial-card-head {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.g-mark {
width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
flex-shrink: 0;
}
.g-mark svg {
width: 100%;
height: 100%;
display: block;
}
.t-stars {
display: inline-flex;
line-height: 0;
}
.t-stars svg {
width: 72px;
height: 14px;
display: block;
}
.t-when {
margin-left: auto;
font-family: var(--f-sans);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-mute);
}
/* ---------- Quote ---------- */
.testimonial-quote {
margin: 0;
font-family: var(--f-display);
font-weight: 350;
font-size: clamp(17px, 1.35vw, 21px);
line-height: 1.52;
letter-spacing: -0.005em;
color: var(--ink-soft);
font-variation-settings: "opsz" 36, "SOFT" 60;
position: relative;
padding-top: 6px;
}
.testimonial-quote::before {
content: "\201C";
position: absolute;
top: -18px;
left: -6px;
font-family: var(--f-display);
font-style: italic;
font-weight: 350;
font-size: 64px;
line-height: 1;
color: var(--accent);
opacity: 0.5;
font-variation-settings: "opsz" 144, "SOFT" 100;
pointer-events: none;
}
.testimonial-quote em {
font-style: italic;
color: var(--ink);
font-variation-settings: "opsz" 36, "SOFT" 100;
}
/* ---------- Author block ---------- */
.testimonial-author {
display: flex;
align-items: center;
gap: 12px;
padding-top: clamp(14px, 2vw, 20px);
border-top: 1px solid var(--line);
margin-top: auto;
}
.t-avatar {
width: 38px;
height: 38px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--f-sans);
font-size: 15px;
font-weight: 600;
color: #fff;
letter-spacing: 0.01em;
flex-shrink: 0;
box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset;
}
.t-meta {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.t-name {
font-family: var(--f-display);
font-style: italic;
font-weight: 400;
font-size: clamp(16px, 1.25vw, 19px);
color: var(--ink);
letter-spacing: -0.008em;
font-variation-settings: "opsz" 36, "SOFT" 100;
}
.t-role {
font-family: var(--f-sans);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--ink-mute);
line-height: 1.5;
}
/* ============================================
FOOTER QUOTE
============================================ */
.testimonials-foot {
max-width: 760px;
margin: clamp(80px, 11vh, 120px) auto 0;
text-align: center;
opacity: 0;
transform: translateY(20px);
transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out);
}
.testimonials.is-revealed .testimonials-foot {
opacity: 1; transform: translateY(0);
transition-delay: 0.95s;
}
.testimonials-foot::before {
content: "✦";
display: block;
font-size: 13px;
color: var(--accent);
opacity: 0.7;
margin-bottom: 28px;
}
.foot-quote {
font-family: var(--f-display);
font-weight: 350;
font-size: clamp(22px, 2.4vw, 32px);
line-height: 1.32;
color: var(--ink-soft);
font-variation-settings: "opsz" 96, "SOFT" 60;
margin-bottom: 28px;
}
.foot-quote em {
font-style: italic;
color: var(--ink);
font-variation-settings: "opsz" 96, "SOFT" 100;
}
.foot-cta {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--f-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ink);
padding-bottom: 8px;
border-bottom: 1px solid var(--accent);
transition: gap 0.4s var(--ease), color 0.4s var(--ease);
}
.foot-cta svg {
width: 18px;
height: 9px;
transition: transform 0.4s var(--ease);
}
.foot-cta:hover {
color: var(--accent-2);
gap: 16px;
}
.foot-cta:hover svg {
transform: translateX(3px);
}
/* ============================================
RESPONSIVE
============================================ */
@media (max-width: 1024px) {
.testimonials-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
max-width: 820px;
}
.testimonial:nth-child(3) {
grid-column: 1 / -1;
max-width: 400px;
justify-self: center;
}
}
@media (max-width: 760px) {
.testimonials {
padding: 80px 18px;
}
.testimonials::after {
font-size: 200px;
top: 30px;
}
.testimonials-grid {
grid-template-columns: minmax(0, 1fr);
max-width: 340px;
gap: 48px;
}
.testimonial:nth-child(2),
.testimonial:nth-child(3) {
margin-top: 0;
grid-column: auto;
max-width: 100%;
justify-self: stretch;
}
.testimonials-title {
font-size: clamp(34px, 9vw, 50px);
line-height: 1.04;
}
}
@media (prefers-reduced-motion: reduce) {
.testimonials *,
.testimonials *::before,
.testimonials *::after {
transition: none !important;
animation: none !important;
}
.testimonials .testimonials-eyebrow,
.testimonials .testimonials-title,
.testimonials .testimonials-lede,
.testimonials .testimonial,
.testimonials .testimonials-foot {
opacity: 1 !important;
transform: none !important;
}
}
/* ============================================
Dr. Emerson Ferreira — Serviços / Tratamentos
Editorial ledger · numbered catalog
Inherits tokens from hero.css
============================================ */
.services {
position: relative;
padding: clamp(120px, 16vh, 200px) clamp(20px, 4vw, 64px);
background: var(--bg);
color: var(--ink);
overflow: hidden;
isolation: isolate;
}
.services::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 55% 50% at 10% 12%,
rgba(168, 194, 214, 0.045) 0%,
transparent 60%),
radial-gradient(ellipse 60% 45% at 90% 88%,
rgba(168, 194, 214, 0.04) 0%,
transparent 60%);
pointer-events: none;
z-index: -1;
}
.services-inner {
position: relative;
max-width: 1180px;
margin: 0 auto;
}
/* ============================================
HEADER
============================================ */
.services-head {
text-align: center;
max-width: 880px;
margin: 0 auto clamp(72px, 10vh, 110px);
}
.services-eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--f-sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ink-soft);
padding: 9px 18px 9px 14px;
border: 1px solid var(--line);
border-radius: 999px;
background: rgba(8, 11, 16, 0.32);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
margin-bottom: clamp(28px, 4vh, 40px);
opacity: 0;
transform: translateY(20px);
transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.services-eyebrow .dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 4px var(--accent-soft);
}
.services-eyebrow strong {
color: var(--ink);
font-weight: 600;
}
.services.is-revealed .services-eyebrow {
opacity: 1; transform: translateY(0);
transition-delay: 0.05s;
}
.services-title {
font-family: var(--f-display);
font-weight: 350;
font-size: clamp(40px, 5.6vw, 88px);
line-height: 0.98;
letter-spacing: -0.024em;
color: var(--ink);
font-variation-settings: "opsz" 144, "SOFT" 40;
opacity: 0;
transform: translateY(28px);
transition: opacity 1.2s var(--ease-out), transform 1.2s var(--ease-out);
}
.services-title em {
font-style: italic;
color: var(--accent-2);
font-variation-settings: "opsz" 144, "SOFT" 100;
}
.services-title .line-2 {
display: block;
margin-top: 0.04em;
font-style: italic;
color: var(--ink-soft);
font-variation-settings: "opsz" 144, "SOFT" 100;
font-size: 0.75em;
letter-spacing: -0.012em;
}
.services-title .period {
color: var(--accent);
margin-left: -0.04em;
}
.services.is-revealed .services-title {
opacity: 1; transform: translateY(0);
transition-delay: 0.2s;
}
.services-lede {
margin-top: clamp(24px, 3.5vh, 36px);
font-family: var(--f-sans);
font-size: clamp(15px, 1.05vw, 17.5px);
line-height: 1.65;
color: var(--ink-soft);
font-weight: 300;
max-width: 560px;
margin-left: auto;
margin-right: auto;
opacity: 0;
transform: translateY(16px);
transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.services-lede em {
font-family: var(--f-display);
font-style: italic;
color: var(--ink);
font-variation-settings: "opsz" 24, "SOFT" 100;
}
.services.is-revealed .services-lede {
opacity: 1; transform: translateY(0);
transition-delay: 0.35s;
}
/* ============================================
CATALOG
============================================ */
.services-catalog {
border-top: 1px solid var(--line);
}
/* ---------- Category divider ---------- */
.service-category {
display: flex;
align-items: baseline;
gap: clamp(20px, 3vw, 36px);
padding: clamp(40px, 6vh, 64px) clamp(8px, 1.5vw, 18px) clamp(18px, 2.5vh, 28px);
opacity: 0;
transform: translateY(16px);
transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out);
}
.services.is-revealed .service-category {
opacity: 1; transform: translateY(0);
}
.service-category:nth-of-type(1) { transition-delay: 0.5s; }
.service-category:nth-of-type(2) { transition-delay: 0.5s; }
.category-marker {
font-family: var(--f-sans);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--ink-mute);
flex-shrink: 0;
}
.category-title {
font-family: var(--f-display);
font-style: italic;
font-weight: 350;
font-size: clamp(26px, 3.2vw, 44px);
line-height: 1;
letter-spacing: -0.018em;
color: var(--ink);
font-variation-settings: "opsz" 96, "SOFT" 80;
flex-shrink: 0;
}
.category-title em {
color: var(--accent-2);
font-variation-settings: "opsz" 96, "SOFT" 100;
}
.category-line {
flex: 1;
height: 1px;
background: linear-gradient(to right, var(--accent) 0%, transparent 80%);
align-self: center;
margin-bottom: -8px;
}
/* ---------- Service row ---------- */
.service-row {
display: grid;
grid-template-columns: clamp(54px, 5.5vw, 78px) clamp(140px, 18vw, 200px) 1fr auto;
gap: clamp(18px, 2.8vw, 40px);
align-items: center;
padding: clamp(22px, 3.2vh, 36px) clamp(8px, 1.5vw, 18px);
border-bottom: 1px solid var(--line);
position: relative;
text-decoration: none;
color: inherit;
transition: padding-left 0.5s var(--ease), background 0.5s var(--ease);
opacity: 0;
transform: translateY(16px);
}
.services.is-revealed .service-row {
opacity: 1; transform: translateY(0);
transition:
padding-left 0.5s var(--ease),
background 0.5s var(--ease),
opacity 1s var(--ease-out),
transform 1s var(--ease-out);
}
.services.is-revealed .service-row:nth-of-type(1) { transition-delay: 0.6s, 0.6s, 0.6s, 0.6s; }
.services.is-revealed .service-row:nth-of-type(2) { transition-delay: 0.66s, 0.66s, 0.66s, 0.66s; }
.services.is-revealed .service-row:nth-of-type(3) { transition-delay: 0.72s, 0.72s, 0.72s, 0.72s; }
.services.is-revealed .service-row:nth-of-type(4) { transition-delay: 0.78s, 0.78s, 0.78s, 0.78s; }
.services.is-revealed .service-row:nth-of-type(5) { transition-delay: 0.84s, 0.84s, 0.84s, 0.84s; }
.services.is-revealed .service-row:nth-of-type(6) { transition-delay: 0.9s, 0.9s, 0.9s, 0.9s; }
.services.is-revealed .service-row:nth-of-type(7) { transition-delay: 0.96s, 0.96s, 0.96s, 0.96s; }
.services.is-revealed .service-row:nth-of-type(8) { transition-delay: 1.02s, 1.02s, 1.02s, 1.02s; }
.service-row:hover {
padding-left: clamp(14px, 1.6vw, 24px);
background: rgba(168, 194, 214, 0.025);
}
.service-row:focus-visible {
outline: none;
background: rgba(168, 194, 214, 0.04);
}
.service-row:focus-visible::after {
content: "";
position: absolute;
inset: 0;
border: 1px solid var(--accent);
pointer-events: none;
}
/* Number cell */
.service-num {
font-family: var(--f-sans);
font-size: clamp(11px, 1vw, 13px);
font-weight: 500;
letter-spacing: 0.24em;
color: var(--accent);
align-self: start;
padding-top: 2px;
font-variant-numeric: tabular-nums;
}
/* Thumb cell */
.service-thumb {
position: relative;
width: 100%;
max-width: 200px;
aspect-ratio: 5 / 4;
overflow: hidden;
background:
linear-gradient(135deg,
rgba(168, 194, 214, 0.08) 0%,
rgba(168, 194, 214, 0.02) 100%),
var(--bg-2);
border: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: center;
box-shadow:
0 1px 0 rgba(232, 238, 245, 0.05) inset,
0 14px 30px -14px rgba(0, 0, 0, 0.7);
transition: border-color 0.5s var(--ease), background 0.5s var(--ease);
}
/* Abstract roman numeral when no image is provided */
.thumb-glyph {
font-family: var(--f-display);
font-style: italic;
font-weight: 350;
font-size: clamp(34px, 3.8vw, 52px);
color: var(--accent-2);
line-height: 1;
letter-spacing: -0.02em;
font-variation-settings: "opsz" 144, "SOFT" 100;
opacity: 0.78;
transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
user-select: none;
}
/* Subtle corner accents — editorial frame mark */
.service-thumb::before,
.service-thumb::after {
content: "";
position: absolute;
width: 10px;
height: 10px;
border: 1px solid var(--accent);
opacity: 0;
transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
pointer-events: none;
}
.service-thumb::before {
top: 8px;
left: 8px;
border-right: none;
border-bottom: none;
transform: translate(-3px, -3px);
}
.service-thumb::after {
bottom: 8px;
right: 8px;
border-left: none;
border-top: none;
transform: translate(3px, 3px);
}
/* If an ![]()
is provided, hide the glyph and let the image take over */
.service-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
filter: contrast(1.02) saturate(0.95);
transition: transform 0.7s var(--ease-out), filter 0.4s var(--ease);
display: block;
position: absolute;
inset: 0;
}
.service-thumb:has(img) .thumb-glyph {
display: none;
}
.service-row:hover .service-thumb {
border-color: rgba(168, 194, 214, 0.32);
}
.service-row:hover .thumb-glyph {
opacity: 1;
transform: scale(1.04);
}
.service-row:hover .service-thumb::before,
.service-row:hover .service-thumb::after {
opacity: 0.7;
transform: translate(0, 0);
}
.service-row:hover .service-thumb img {
transform: scale(1.04);
filter: contrast(1.05) saturate(1);
}
/* Body cell */
.service-body {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.service-name {
font-family: var(--f-display);
font-weight: 350;
font-style: italic;
font-size: clamp(22px, 2.2vw, 30px);
line-height: 1.18;
letter-spacing: -0.014em;
color: var(--ink);
font-variation-settings: "opsz" 72, "SOFT" 100;
transition: color 0.4s var(--ease);
}
.service-row:hover .service-name {
color: var(--accent-2);
}
.service-desc {
font-family: var(--f-sans);
font-size: clamp(13.5px, 1vw, 15px);
line-height: 1.6;
color: var(--ink-soft);
font-weight: 300;
max-width: 56ch;
}
.service-desc em {
font-family: var(--f-display);
font-style: italic;
color: var(--ink);
font-variation-settings: "opsz" 24, "SOFT" 100;
}
/* Arrow cell */
.service-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
color: var(--ink-mute);
transition: color 0.4s var(--ease), transform 0.4s var(--ease);
flex-shrink: 0;
}
.service-arrow svg {
width: 20px;
height: 10px;
}
.service-row:hover .service-arrow {
color: var(--accent-2);
transform: translateX(4px);
}
/* ============================================
FOOTER NOTE
============================================ */
.services-foot {
margin: clamp(64px, 9vh, 100px) auto 0;
max-width: 720px;
text-align: center;
opacity: 0;
transform: translateY(20px);
transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out);
}
.services.is-revealed .services-foot {
opacity: 1; transform: translateY(0);
transition-delay: 1.1s;
}
.services-foot p {
font-family: var(--f-display);
font-weight: 350;
font-style: italic;
font-size: clamp(18px, 1.6vw, 24px);
line-height: 1.4;
color: var(--ink-soft);
margin-bottom: 22px;
font-variation-settings: "opsz" 72, "SOFT" 80;
}
.services-foot em {
color: var(--accent-2);
font-variation-settings: "opsz" 72, "SOFT" 100;
}
.services-foot a {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--f-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ink);
padding-bottom: 8px;
border-bottom: 1px solid var(--accent);
transition: gap 0.4s var(--ease), color 0.4s var(--ease);
}
.services-foot a svg {
width: 18px;
height: 9px;
transition: transform 0.4s var(--ease);
}
.services-foot a:hover {
color: var(--accent-2);
gap: 14px;
}
.services-foot a:hover svg {
transform: translateX(3px);
}
/* ============================================
RESPONSIVE
============================================ */
@media (max-width: 780px) {
.services {
padding: 80px 18px;
}
.service-category {
flex-wrap: wrap;
gap: 12px;
}
.category-line {
flex-basis: 100%;
margin-bottom: 0;
margin-top: 4px;
}
.service-row {
grid-template-columns: 1fr;
gap: 18px;
padding: 24px 6px;
}
.service-num {
order: 1;
padding-top: 0;
}
.service-thumb {
order: 2;
max-width: 240px;
aspect-ratio: 4 / 3;
}
.service-body {
order: 3;
}
.service-arrow {
display: none;
}
.service-row:hover {
padding-left: 6px;
}
.services-title {
font-size: clamp(36px, 9vw, 56px);
}
}
@media (prefers-reduced-motion: reduce) {
.services *,
.services *::before,
.services *::after {
transition: none !important;
animation: none !important;
}
.services .services-eyebrow,
.services .services-title,
.services .services-lede,
.services .service-category,
.services .service-row,
.services .services-foot {
opacity: 1 !important;
transform: none !important;
}
}
/* ============================================
Dr. Emerson Ferreira — Closing (Agendamento) + Footer
Editorial climax · grounded utility
Inherits tokens from hero.css
============================================ */
/* ============================================
CLOSING — final CTA section
============================================ */
.closing {
position: relative;
padding: clamp(130px, 18vh, 220px) clamp(20px, 4vw, 64px) clamp(110px, 14vh, 180px);
background: var(--bg);
color: var(--ink);
overflow: hidden;
isolation: isolate;
}
.closing::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 70% 55% at 50% 0%,
rgba(168, 194, 214, 0.09) 0%,
transparent 65%),
radial-gradient(ellipse 60% 50% at 50% 100%,
rgba(168, 194, 214, 0.06) 0%,
transparent 60%);
pointer-events: none;
z-index: -1;
}
.closing::after {
content: "VI";
position: absolute;
top: clamp(40px, 8vh, 100px);
right: -0.18em;
font-family: var(--f-display);
font-style: italic;
font-weight: 350;
font-size: clamp(220px, 38vw, 520px);
line-height: 0.78;
color: rgba(168, 194, 214, 0.04);
font-variation-settings: "opsz" 144, "SOFT" 100;
pointer-events: none;
user-select: none;
z-index: -1;
letter-spacing: -0.05em;
}
.closing-inner {
position: relative;
max-width: 1120px;
margin: 0 auto;
}
/* ---------- Header ---------- */
.closing-head {
text-align: center;
max-width: 920px;
margin: 0 auto clamp(56px, 8vh, 96px);
}
.closing-eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--f-sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ink-soft);
padding: 9px 18px 9px 14px;
border: 1px solid var(--line);
border-radius: 999px;
background: rgba(8, 11, 16, 0.32);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
margin-bottom: clamp(28px, 4vh, 40px);
opacity: 0;
transform: translateY(20px);
transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.closing-eyebrow .dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 4px var(--accent-soft);
}
.closing-eyebrow strong {
color: var(--ink);
font-weight: 600;
}
.closing.is-revealed .closing-eyebrow {
opacity: 1; transform: translateY(0);
transition-delay: 0.05s;
}
.closing-title {
font-family: var(--f-display);
font-weight: 350;
font-size: clamp(40px, 5.8vw, 96px);
line-height: 0.98;
letter-spacing: -0.026em;
color: var(--ink);
font-variation-settings: "opsz" 144, "SOFT" 40;
opacity: 0;
transform: translateY(28px);
transition: opacity 1.2s var(--ease-out), transform 1.2s var(--ease-out);
}
.closing-title em {
font-style: italic;
color: var(--accent-2);
font-variation-settings: "opsz" 144, "SOFT" 100;
}
.closing-title .line-2 {
display: block;
margin-top: 0.04em;
font-style: italic;
color: var(--ink-soft);
font-variation-settings: "opsz" 144, "SOFT" 100;
font-size: 0.7em;
letter-spacing: -0.012em;
}
.closing-title .period {
color: var(--accent);
margin-left: -0.04em;
}
.closing.is-revealed .closing-title {
opacity: 1; transform: translateY(0);
transition-delay: 0.2s;
}
.closing-lede {
margin-top: clamp(28px, 4vh, 44px);
font-family: var(--f-sans);
font-size: clamp(15.5px, 1.1vw, 18px);
line-height: 1.65;
color: var(--ink-soft);
font-weight: 300;
max-width: 620px;
margin-left: auto;
margin-right: auto;
opacity: 0;
transform: translateY(16px);
transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.closing-lede em {
font-family: var(--f-display);
font-style: italic;
color: var(--ink);
font-variation-settings: "opsz" 24, "SOFT" 100;
}
.closing-lede strong {
color: var(--ink);
font-weight: 500;
}
.closing.is-revealed .closing-lede {
opacity: 1; transform: translateY(0);
transition-delay: 0.35s;
}
/* ---------- Paths (CTAs) ---------- */
.closing-paths {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(16px, 2vw, 28px);
max-width: 860px;
margin: 0 auto;
}
.closing-cta {
position: relative;
display: grid;
grid-template-columns: auto 1fr auto;
gap: clamp(14px, 1.6vw, 22px);
align-items: center;
padding: clamp(22px, 2.8vh, 30px) clamp(22px, 2.6vw, 32px);
border-radius: 3px;
overflow: hidden;
transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), background 0.4s var(--ease);
text-align: left;
opacity: 0;
transform: translateY(28px);
}
.closing.is-revealed .closing-cta:nth-of-type(1) {
opacity: 1; transform: translateY(0);
transition: opacity 1.1s var(--ease-out) 0.5s, transform 1.1s var(--ease-out) 0.5s, border-color 0.4s var(--ease), background 0.4s var(--ease);
}
.closing.is-revealed .closing-cta:nth-of-type(2) {
opacity: 1; transform: translateY(0);
transition: opacity 1.1s var(--ease-out) 0.62s, transform 1.1s var(--ease-out) 0.62s, border-color 0.4s var(--ease), background 0.4s var(--ease);
}
.cta-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: clamp(40px, 4vw, 50px);
height: clamp(40px, 4vw, 50px);
border-radius: 50%;
flex-shrink: 0;
transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
.cta-icon svg {
width: 60%;
height: 60%;
}
.cta-body {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.cta-label {
font-family: var(--f-sans);
font-size: clamp(13.5px, 1.1vw, 15.5px);
font-weight: 600;
letter-spacing: 0.04em;
line-height: 1.2;
}
.cta-sub {
font-family: var(--f-display);
font-style: italic;
font-weight: 400;
font-size: clamp(13px, 1vw, 15px);
letter-spacing: 0;
line-height: 1.3;
font-variation-settings: "opsz" 24, "SOFT" 100;
}
.cta-arrow {
width: 22px;
height: 10px;
flex-shrink: 0;
transition: transform 0.4s var(--ease);
}
.closing-cta:hover .cta-arrow {
transform: translateX(5px);
}
/* Primary — WhatsApp */
.closing-cta--primary {
background: var(--ink);
color: var(--bg);
border: 1px solid var(--ink);
}
.closing-cta--primary::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(120deg, var(--accent-2) 0%, var(--accent) 100%);
transform: translateY(101%);
transition: transform 0.55s var(--ease-out);
z-index: 0;
}
.closing-cta--primary > * {
position: relative;
z-index: 2;
}
.closing-cta--primary .cta-icon {
background: rgba(8, 11, 16, 0.08);
color: var(--bg);
}
.closing-cta--primary .cta-sub {
color: rgba(8, 11, 16, 0.7);
}
.closing-cta--primary:hover {
transform: translateY(-2px);
}
.closing-cta--primary:hover::before {
transform: translateY(0);
}
.closing-cta--primary:hover .cta-icon {
background: rgba(8, 11, 16, 0.15);
}
/* Ghost — Endereço */
.closing-cta--ghost {
background: rgba(8, 11, 16, 0.32);
color: var(--ink);
border: 1px solid var(--line-strong);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.closing-cta--ghost .cta-icon {
background: rgba(168, 194, 214, 0.1);
color: var(--accent-2);
border: 1px solid var(--line-strong);
}
.closing-cta--ghost .cta-sub {
color: var(--ink-soft);
}
.closing-cta--ghost:hover {
border-color: var(--accent);
background: rgba(168, 194, 214, 0.06);
transform: translateY(-2px);
}
.closing-cta--ghost:hover .cta-icon {
background: rgba(168, 194, 214, 0.18);
border-color: var(--accent);
}
/* ---------- Urgency line ---------- */
.closing-urgency {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
margin-top: clamp(40px, 5vh, 64px);
font-family: var(--f-sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--accent-2);
opacity: 0;
transform: translateY(14px);
transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.closing-urgency::before,
.closing-urgency::after {
content: "";
display: inline-block;
width: 28px;
height: 1px;
background: var(--accent);
}
.closing.is-revealed .closing-urgency {
opacity: 1; transform: translateY(0);
transition-delay: 0.8s;
}
/* ============================================
FOOTER
============================================ */
.footer {
position: relative;
padding: clamp(64px, 9vh, 100px) clamp(20px, 4vw, 64px) clamp(36px, 5vh, 56px);
background: var(--bg-2);
color: var(--ink-soft);
border-top: 1px solid var(--line);
overflow: hidden;
isolation: isolate;
}
.footer::before {
content: "";
position: absolute;
top: -1px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 1px;
background: var(--accent);
z-index: 2;
}
.footer-inner {
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.2fr 1fr 1.3fr;
gap: clamp(40px, 5vw, 72px);
align-items: start;
}
/* ---------- Brand ---------- */
.footer-brand {
display: flex;
flex-direction: column;
gap: 18px;
}
.footer-mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
border: 1px solid var(--accent);
border-radius: 50%;
font-family: var(--f-display);
font-style: italic;
font-weight: 400;
font-size: 17px;
color: var(--accent-2);
font-variation-settings: "opsz" 24, "SOFT" 100;
margin-bottom: 4px;
}
.footer-name {
font-family: var(--f-display);
font-weight: 350;
font-size: clamp(22px, 1.8vw, 26px);
line-height: 1.1;
letter-spacing: -0.014em;
color: var(--ink);
font-variation-settings: "opsz" 36, "SOFT" 60;
}
.footer-name em {
font-style: italic;
color: var(--accent-2);
font-variation-settings: "opsz" 36, "SOFT" 100;
}
.footer-tagline {
font-family: var(--f-sans);
font-size: 13px;
line-height: 1.55;
color: var(--ink-mute);
max-width: 28ch;
font-weight: 300;
}
.footer-tagline em {
font-family: var(--f-display);
font-style: italic;
color: var(--ink-soft);
font-variation-settings: "opsz" 24, "SOFT" 100;
}
/* ---------- Navigation ---------- */
.footer-nav,
.footer-contact {
display: flex;
flex-direction: column;
gap: 14px;
}
.footer-label {
font-family: var(--f-sans);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--ink-mute);
margin-bottom: 8px;
}
.footer-nav ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.footer-nav a {
font-family: var(--f-sans);
font-size: 14px;
color: var(--ink-soft);
font-weight: 400;
transition: color 0.3s var(--ease), padding-left 0.3s var(--ease);
position: relative;
display: inline-block;
}
.footer-nav a::before {
content: "→";
position: absolute;
left: -20px;
top: 0;
opacity: 0;
color: var(--accent);
transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.footer-nav a:hover {
color: var(--ink);
padding-left: 4px;
}
.footer-nav a:hover::before {
opacity: 1;
transform: translateX(4px);
}
/* ---------- Contact ---------- */
.footer-contact {
gap: 16px;
}
.footer-link {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--f-sans);
font-size: 14px;
color: var(--ink-soft);
transition: color 0.3s var(--ease);
width: fit-content;
}
.footer-link svg {
width: 18px;
height: 18px;
flex-shrink: 0;
color: var(--accent);
transition: color 0.3s var(--ease);
}
.footer-link:hover {
color: var(--ink);
}
.footer-link:hover svg {
color: var(--accent-2);
}
.footer-address {
font-family: var(--f-sans);
font-size: 13px;
line-height: 1.6;
color: var(--ink-mute);
font-style: normal;
margin-top: 8px;
padding-top: 16px;
border-top: 1px solid var(--line);
}
.footer-address strong {
display: block;
font-family: var(--f-display);
font-style: italic;
font-weight: 400;
font-size: 16px;
color: var(--ink);
letter-spacing: -0.008em;
margin-bottom: 6px;
font-variation-settings: "opsz" 24, "SOFT" 100;
}
.footer-address a {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 8px;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--accent-2);
border-bottom: 1px solid var(--accent);
padding-bottom: 3px;
transition: gap 0.3s var(--ease), color 0.3s var(--ease);
}
.footer-address a:hover {
gap: 9px;
color: var(--ink);
}
/* ---------- Bottom bar ---------- */
.footer-bottom {
max-width: 1280px;
margin: clamp(56px, 7vh, 80px) auto 0;
padding-top: clamp(28px, 3vh, 40px);
border-top: 1px solid var(--line);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 16px 32px;
font-family: var(--f-sans);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-mute);
font-weight: 500;
}
.footer-bottom em {
font-family: var(--f-display);
font-style: italic;
font-weight: 400;
text-transform: none;
color: var(--ink-soft);
font-size: 1.2em;
letter-spacing: 0;
font-variation-settings: "opsz" 24, "SOFT" 100;
}
.footer-bottom .meta-divider {
display: inline-block;
width: 4px;
height: 4px;
background: var(--accent);
border-radius: 50%;
margin: 0 4px;
vertical-align: 1px;
}
/* ============================================
RESPONSIVE
============================================ */
@media (max-width: 880px) {
.closing-paths {
grid-template-columns: 1fr;
max-width: 480px;
}
.closing-cta {
padding: 20px 22px;
}
.footer-inner {
grid-template-columns: 1fr;
gap: 44px;
}
.footer-bottom {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
}
@media (max-width: 580px) {
.closing {
padding: 84px 18px;
}
.closing::after {
font-size: 200px;
top: 30px;
}
.closing-title {
font-size: clamp(36px, 9.5vw, 56px);
}
.closing-cta {
grid-template-columns: auto 1fr;
gap: 14px;
}
.cta-arrow {
display: none;
}
.footer {
padding: 56px 18px 36px;
}
}
@media (prefers-reduced-motion: reduce) {
.closing *,
.closing *::before,
.closing *::after {
transition: none !important;
animation: none !important;
}
.closing .closing-eyebrow,
.closing .closing-title,
.closing .closing-lede,
.closing .closing-cta,
.closing .closing-urgency {
opacity: 1 !important;
transform: none !important;
}
}
/* ============================================
Dr. Emerson Ferreira — Localização
Map strip · dark-filtered Google Maps embed
Inherits tokens from hero.css
============================================ */
.location {
position: relative;
padding: clamp(80px, 11vh, 140px) clamp(20px, 4vw, 64px);
background: var(--bg);
color: var(--ink);
overflow: hidden;
isolation: isolate;
}
.location::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 55% 50% at 50% 0%,
rgba(168, 194, 214, 0.04) 0%,
transparent 60%);
pointer-events: none;
z-index: -1;
}
.location-inner {
position: relative;
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
gap: clamp(36px, 5vw, 72px);
align-items: stretch;
}
/* ============================================
INFO (left column)
============================================ */
.location-info {
display: flex;
flex-direction: column;
justify-content: center;
gap: clamp(20px, 3vh, 32px);
padding: clamp(0px, 2vh, 24px) 0;
opacity: 0;
transform: translateY(20px);
transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out);
}
.location.is-revealed .location-info {
opacity: 1; transform: translateY(0);
transition-delay: 0.1s;
}
.location-eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--f-sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ink-soft);
padding: 9px 18px 9px 14px;
border: 1px solid var(--line);
border-radius: 999px;
background: rgba(8, 11, 16, 0.32);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
width: fit-content;
}
.location-eyebrow .dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 4px var(--accent-soft);
}
.location-eyebrow strong {
color: var(--ink);
font-weight: 600;
}
.location-title {
font-family: var(--f-display);
font-weight: 350;
font-size: clamp(32px, 4vw, 56px);
line-height: 1;
letter-spacing: -0.022em;
color: var(--ink);
font-variation-settings: "opsz" 96, "SOFT" 40;
}
.location-title em {
font-style: italic;
color: var(--accent-2);
font-variation-settings: "opsz" 96, "SOFT" 100;
}
.location-title .period {
color: var(--accent);
margin-left: -0.04em;
}
.location-address {
font-style: normal;
font-family: var(--f-sans);
font-size: clamp(14.5px, 1.05vw, 16px);
line-height: 1.7;
color: var(--ink-soft);
font-weight: 300;
display: flex;
flex-direction: column;
gap: 2px;
}
.location-address strong {
display: block;
font-family: var(--f-display);
font-style: italic;
font-weight: 400;
font-size: clamp(18px, 1.5vw, 22px);
color: var(--ink);
letter-spacing: -0.008em;
margin-bottom: 8px;
font-variation-settings: "opsz" 36, "SOFT" 100;
}
.location-meta {
list-style: none;
margin: 0;
padding: clamp(20px, 3vh, 28px) 0 0;
border-top: 1px solid var(--line);
display: flex;
flex-direction: column;
gap: 14px;
}
.location-meta li {
display: flex;
align-items: baseline;
gap: 14px;
}
.location-meta .meta-label {
font-family: var(--f-sans);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--ink-mute);
flex-shrink: 0;
min-width: 92px;
}
.location-meta .meta-value {
font-family: var(--f-display);
font-style: italic;
font-weight: 400;
font-size: clamp(15px, 1.15vw, 17px);
color: var(--ink);
font-variation-settings: "opsz" 24, "SOFT" 100;
}
.location-cta {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--f-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ink);
padding: 14px 22px 14px 18px;
border: 1px solid var(--accent);
border-radius: 999px;
background: rgba(168, 194, 214, 0.06);
transition: gap 0.4s var(--ease), background 0.4s var(--ease), color 0.4s var(--ease);
width: fit-content;
margin-top: 8px;
}
.location-cta .pin {
width: 16px;
height: 16px;
color: var(--accent-2);
flex-shrink: 0;
}
.location-cta .arrow {
width: 18px;
height: 9px;
transition: transform 0.4s var(--ease);
}
.location-cta:hover {
background: rgba(168, 194, 214, 0.14);
color: var(--accent-2);
gap: 16px;
}
.location-cta:hover .arrow {
transform: translateX(3px);
}
/* ============================================
MAP (right column)
============================================ */
.location-map {
position: relative;
min-height: 420px;
opacity: 0;
transform: translateY(20px) scale(0.99);
transition: opacity 1.2s var(--ease-out), transform 1.2s var(--ease-out);
}
.location.is-revealed .location-map {
opacity: 1; transform: translateY(0) scale(1);
transition-delay: 0.28s;
}
.map-frame {
position: relative;
width: 100%;
height: 100%;
min-height: 420px;
overflow: hidden;
background: var(--bg-2);
box-shadow:
0 1px 0 rgba(232, 238, 245, 0.06) inset,
0 28px 60px -28px rgba(0, 0, 0, 0.8),
0 12px 28px -12px rgba(0, 0, 0, 0.55);
}
.map-frame iframe {
width: 100%;
height: 100%;
border: 0;
display: block;
/* Dark-mode the Google Maps iframe via CSS filter */
filter: invert(0.92) hue-rotate(180deg) brightness(0.95) contrast(0.92) saturate(0.75);
}
/* Subtle warm overlay to integrate the map into the page palette */
.map-frame::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at center,
transparent 30%,
rgba(8, 11, 16, 0.18) 100%),
linear-gradient(135deg,
rgba(168, 194, 214, 0.04) 0%,
transparent 40%);
pointer-events: none;
z-index: 2;
mix-blend-mode: overlay;
}
/* Gold corner accents on the map frame */
.map-frame::after {
content: "";
position: absolute;
top: 12px; right: 12px;
width: 18px; height: 18px;
border-top: 1px solid var(--accent);
border-right: 1px solid var(--accent);
opacity: 0;
transform: translate(6px, -6px);
transition: opacity 0.8s var(--ease-out) 0.6s, transform 0.8s var(--ease-out) 0.6s;
pointer-events: none;
z-index: 3;
}
.location.is-revealed .map-frame::after {
opacity: 0.7;
transform: translate(0, 0);
}
/* Pin pulse overlay — subtle marker indicator */
.map-pin {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--accent);
pointer-events: none;
z-index: 4;
box-shadow: 0 0 0 0 rgba(168, 194, 214, 0.6);
animation: mapPinPulse 2.4s ease-out infinite;
}
@keyframes mapPinPulse {
0% { box-shadow: 0 0 0 0 rgba(168, 194, 214, 0.45); }
70% { box-shadow: 0 0 0 18px rgba(168, 194, 214, 0); }
100% { box-shadow: 0 0 0 0 rgba(168, 194, 214, 0); }
}
/* ============================================
RESPONSIVE
============================================ */
@media (max-width: 920px) {
.location-inner {
grid-template-columns: 1fr;
gap: 36px;
}
.location-map {
min-height: 340px;
order: 2;
}
.map-frame {
min-height: 340px;
}
.location-info {
order: 1;
}
}
@media (max-width: 580px) {
.location {
padding: 64px 18px;
}
.location-title {
font-size: clamp(28px, 8vw, 40px);
}
.location-meta li {
flex-direction: column;
gap: 4px;
}
.location-cta {
width: 100%;
justify-content: center;
}
.map-frame {
min-height: 300px;
}
}
@media (prefers-reduced-motion: reduce) {
.location *,
.location *::before,
.location *::after {
transition: none !important;
animation: none !important;
}
.location .location-info,
.location .location-map {
opacity: 1 !important;
transform: none !important;
}
}