:root {
–ink: #111315;
–paper: #f8f2e8;
–paper2: #efe3d2;
–muted: #6f655a;
–line: rgba(22,20,18,.14);
–brass: #b98948;
–cream: #fff8ec;
–charcoal: #151719;
–shadow: 0 24px 80px rgba(25,20,14,.16);
}
.dorso-product-page, .dorso-product-page * { box-sizing: border-box; }
.dorso-product-page {
width: 100%;
color: var(–ink);
background: linear-gradient(180deg, #fbf6ee 0%, #eee2d2 42%, #fbf7ef 100%);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, “Segoe UI”, sans-serif;
overflow: hidden;
}
.dorso-product-page img { display: block; max-width: 100%; }
.dorso-product-page a { color: inherit; text-decoration: none; }
.dp-top {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 60;
display: flex;
justify-content: space-between;
align-items: center;
gap: 18px;
padding: 16px clamp(18px, 4vw, 56px);
color: var(–cream);
background: linear-gradient(180deg, rgba(10,11,12,.74), rgba(10,11,12,.36));
border-bottom: 1px solid rgba(255,255,255,.12);
backdrop-filter: blur(14px);
}
.dp-logo {
display: grid;
gap: 2px;
line-height: 1;
letter-spacing: .18em;
text-transform: uppercase;
font-weight: 800;
}
.dp-logo small {
color: rgba(255,248,236,.66);
font-size: 10px;
letter-spacing: .22em;
}
.dp-top nav {
display: flex;
align-items: center;
gap: 12px;
color: rgba(255,248,236,.78);
font-size: 12px;
}
.dp-top nav a {
padding: 7px 10px;
border: 1px solid rgba(255,255,255,.12);
border-radius: 999px;
transition: background .2s ease, color .2s ease;
}
.dp-top nav a:hover { background: var(–cream); color: var(–ink); }
.dp-hero {
position: relative;
min-height: 94vh;
display: grid;
align-items: end;
padding: 116px clamp(18px, 5vw, 70px) clamp(42px, 7vw, 88px);
color: var(–cream);
background-image:
linear-gradient(90deg, rgba(10,11,12,.88) 0%, rgba(10,11,12,.52) 42%, rgba(10,11,12,.12) 78%),
linear-gradient(180deg, rgba(10,11,12,.12), rgba(10,11,12,.74)),
url(‘https://bodysplashmen.hanseng.com.br/wp-content/uploads/2026/05/dorso-page-atlas-hero-body-fragrance.jpg’);
background-size: cover;
background-position: center;
isolation: isolate;
}
.dp-hero::before {
position: absolute;
inset: -18%;
z-index: -1;
background:
radial-gradient(circle at 18% 34%, color-mix(in srgb, var(–accent) 34%, transparent), transparent 26%),
radial-gradient(circle at 82% 70%, rgba(185,137,72,.20), transparent 28%);
content: “”;
filter: blur(22px);
animation: dpAtmosphere 9s ease-in-out infinite alternate;
}
.dp-hero-inner {
display: grid;
grid-template-columns: minmax(0, .76fr) minmax(260px, .34fr);
gap: clamp(24px, 5vw, 72px);
align-items: end;
max-width: 1240px;
margin: 0 auto;
width: 100%;
}
.dp-kicker {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 34px;
margin-bottom: 18px;
padding: 0 13px;
border: 1px solid rgba(255,248,236,.22);
border-radius: 999px;
color: rgba(255,248,236,.84);
background: rgba(255,248,236,.08);
font-size: 11px;
font-weight: 780;
letter-spacing: .12em;
text-transform: uppercase;
backdrop-filter: blur(12px);
}
.dp-kicker i {
width: 8px; height: 8px;
border-radius: 50%;
background: var(–accent);
box-shadow: 0 0 0 5px color-mix(in srgb, var(–accent) 24%, transparent);
}
.dp-hero h1 {
max-width: 760px;
margin: 0;
font-family: Georgia, “Times New Roman”, serif;
font-size: clamp(54px, 8vw, 118px);
line-height: .86;
letter-spacing: 0;
color: var(–cream);
}
.dp-hero p {
max-width: 650px;
margin: 22px 0 0;
color: rgba(255,248,236,.80);
font-size: clamp(17px, 1.7vw, 22px);
line-height: 1.58;
}
.dp-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 30px;
}
.dp-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 52px;
padding: 0 21px;
border-radius: 999px;
font-size: 12px;
font-weight: 820;
letter-spacing: .11em;
text-transform: uppercase;
transition: transform .22s ease, background .22s ease, color .22s ease, box-shadow .22s ease;
}
.dp-button.primary {
border: 1px solid var(–cream);
background: var(–cream);
color: var(–ink);
box-shadow: 0 18px 40px rgba(0,0,0,.22);
}
.dp-button.ghost {
border: 1px solid rgba(255,248,236,.28);
color: var(–cream);
background: rgba(255,248,236,.08);
}
.dp-button.dark {
border: 1px solid var(–ink);
background: var(–ink);
color: var(–cream);
}
.dp-button:hover { transform: translateY(-2px); box-shadow: 0 22px 48px rgba(0,0,0,.18); }
.dp-pack-card {
border: 1px solid rgba(255,248,236,.18);
border-radius: 28px;
background: rgba(255,248,236,.10);
box-shadow: 0 26px 70px rgba(0,0,0,.24);
overflow: hidden;
backdrop-filter: blur(12px);
}
.dp-pack-card img {
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
}
.dp-pack-card div {
padding: 16px 18px 18px;
}
.dp-pack-card strong {
display: block;
color: var(–cream);
font-size: 13px;
letter-spacing: .11em;
text-transform: uppercase;
}
.dp-pack-card span {
display: block;
margin-top: 8px;
color: rgba(255,248,236,.68);
font-size: 13px;
line-height: 1.45;
}
.dp-product-nav {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding: 18px clamp(18px, 4vw, 56px);
background: #111315;
color: var(–cream);
}
.dp-nav-chip {
display: inline-flex;
align-items: center;
min-height: 38px;
padding: 0 15px;
border: 1px solid rgba(255,248,236,.18);
border-radius: 999px;
color: rgba(255,248,236,.72);
font-size: 12px;
font-weight: 760;
letter-spacing: .08em;
text-transform: uppercase;
}
.dp-nav-chip.is-active, .dp-nav-chip:hover {
background: var(–cream);
color: var(–ink);
}
.dp-section {
max-width: 1220px;
margin: 0 auto;
padding: clamp(54px, 8vw, 102px) clamp(18px, 4vw, 34px);
}
.dp-section.wide { max-width: 1380px; }
.dp-head {
display: grid;
grid-template-columns: minmax(0, .8fr) minmax(260px, .48fr);
gap: clamp(22px, 4vw, 72px);
align-items: end;
margin-bottom: clamp(28px, 5vw, 52px);
}
.dp-head h2 {
margin: 0;
font-family: Georgia, “Times New Roman”, serif;
font-size: clamp(38px, 5.6vw, 76px);
line-height: .95;
letter-spacing: 0;
}
.dp-head p, .dp-copy p {
margin: 0;
color: var(–muted);
font-size: 16px;
line-height: 1.72;
}
.dp-grid-3 {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
.dp-stat {
min-height: 170px;
padding: 24px;
border: 1px solid var(–line);
border-radius: 24px;
background: rgba(255,250,242,.72);
box-shadow: 0 16px 46px rgba(30,24,18,.06);
}
.dp-stat span {
display: block;
color: var(–accent);
font-size: 11px;
font-weight: 820;
letter-spacing: .12em;
text-transform: uppercase;
}
.dp-stat strong {
display: block;
margin-top: 20px;
color: var(–ink);
font-size: 21px;
line-height: 1.18;
}
.dp-split {
display: grid;
grid-template-columns: minmax(320px, .58fr) minmax(0, .72fr);
gap: clamp(24px, 5vw, 72px);
align-items: center;
}
.dp-split.reverse {
grid-template-columns: minmax(0, .72fr) minmax(320px, .58fr);
}
.dp-photo {
border-radius: 34px;
overflow: hidden;
background: #d8c7b0;
box-shadow: var(–shadow);
}
.dp-photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.dp-photo.landscape img { aspect-ratio: 3 / 2; }
.dp-copy {
display: grid;
gap: 18px;
}
.dp-copy h2 {
margin: 0;
font-family: Georgia, “Times New Roman”, serif;
font-size: clamp(38px, 5.4vw, 72px);
line-height: .94;
letter-spacing: 0;
}
.dp-note-list {
display: grid;
gap: 12px;
margin-top: 10px;
}
.dp-note {
display: grid;
grid-template-columns: 104px 1fr;
gap: 18px;
padding: 16px 0;
border-bottom: 1px solid var(–line);
}
.dp-note b {
color: var(–accent);
font-size: 11px;
letter-spacing: .12em;
text-transform: uppercase;
}
.dp-note span {
color: var(–muted);
font-size: 15px;
line-height: 1.55;
}
.dp-final {
display: grid;
min-height: 560px;
align-items: end;
padding: clamp(32px, 7vw, 82px);
border-radius: 36px;
color: var(–cream);
background-image:
linear-gradient(90deg, rgba(10,11,12,.82), rgba(10,11,12,.28) 70%),
url(‘https://bodysplashmen.hanseng.com.br/wp-content/uploads/2026/05/dorso-page-atlas-lifestyle-body-fragrance.jpg’);
background-size: cover;
background-position: center;
overflow: hidden;
box-shadow: var(–shadow);
}
.dp-final h2 {
max-width: 760px;
margin: 0;
font-family: Georgia, “Times New Roman”, serif;
font-size: clamp(40px, 6vw, 82px);
line-height: .94;
letter-spacing: 0;
color: var(–cream);
}
.dp-final p {
max-width: 590px;
margin: 18px 0 0;
color: rgba(255,248,236,.74);
font-size: 17px;
line-height: 1.68;
}
.dp-form {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px;
max-width: 560px;
margin-top: 28px;
}
.dp-form input {
width: 100%;
min-height: 54px;
border: 1px solid rgba(255,248,236,.28);
border-radius: 999px;
padding: 0 18px;
color: var(–cream);
background: rgba(255,248,236,.10);
font: inherit;
outline: none;
backdrop-filter: blur(12px);
}
.dp-form input::placeholder { color: rgba(255,248,236,.60); }
.dp-form button { border: 0; cursor: pointer; }
.dp-reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity .72s ease, transform .72s ease;
}
.dp-reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
@keyframes dpAtmosphere {
from { transform: translate3d(-2%, 1%, 0) scale(1); opacity: .72; }
to { transform: translate3d(3%, -2%, 0) scale(1.06); opacity: .98; }
}
@media (max-width: 980px) {
.dp-top nav { display: none; }
.dp-hero-inner, .dp-head, .dp-split, .dp-split.reverse { grid-template-columns: 1fr; }
.dp-pack-card { max-width: 360px; }
.dp-grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.dp-top { padding: 14px 16px; }
.dp-logo { font-size: 14px; }
.dp-hero {
min-height: 86vh;
padding: 96px 18px 34px;
background-position: 64% center;
}
.dp-product-nav { padding: 14px 16px; }
.dp-section { padding-left: 16px; padding-right: 16px; }
.dp-photo, .dp-final, .dp-pack-card { border-radius: 24px; }
.dp-note, .dp-form { grid-template-columns: 1fr; }
.dp-final { min-height: 540px; padding: 28px 20px; background-position: 60% center; }
}

Pirâmide olfativa

Notas que constroem a assinatura.

A estrutura combina uma saída clara, corpo masculino e base confortável para manter a fragrância próxima da pele.

TopoToranja, folhas verdes e brilho cítrico

CoraçãoLavanda seca, cedro claro e nuance aromática

BaseVetiver limpo, musk e madeira polida

Modo de uso

Presença sem exagero.

Aplique no pescoço, peito e punhos antes da rotina profissional. A proposta é presença próxima e bem dosada.

AplicaçãoBorrife a cerca de 20 cm da pele limpa, no peito, pescoço e punhos.

IntensidadeComece com poucas borrifadas e reaplique ao longo do dia, se quiser renovar a sensação.

RotinaUse sozinho ou como camada leve antes de uma fragrância mais intensa.

(function () {
var reveals = document.querySelectorAll(‘.dp-reveal’);
if (‘IntersectionObserver’ in window) {
var io = new IntersectionObserver(function (entries) {
entries.forEach(function (entry) {
if (entry.isIntersecting) {
entry.target.classList.add(‘is-visible’);
io.unobserve(entry.target);
}
});
}, { threshold: 0.12 });
reveals.forEach(function (item) { io.observe(item); });
} else {
reveals.forEach(function (item) { item.classList.add(‘is-visible’); });
}
})();