/* ============================================================
DELPHI — DIGITAL CREATIVE STUDIO
REVISED HOMEPAGE
============================================================ */
/* ============================================================
VARIABLES
============================================================ */
:root {
/* cream: the warm neutral base */
--paper: #F2E7D8;
--soft-paper: #F7EBDD;
/* sage: the identity colour */
--sage: #96A08D;
--sage-paper: #D6DCCF;
--deep-sage: #66705F;
/* wine: secondary, for contrast — ochre: micro-accent only */
--wine: #713D45;
--ochre: #B98755;
--charcoal: #352B27;
--ink: #29231F;
--line: rgba(53, 43, 39, .14);
--ease: cubic-bezier(.16, 1, .3, 1);
/* running text and small labels use Bhavuka; titles use Arima Madurai */
--font-text: "Bhavuka", serif;
--font-heading: "Arima Madurai", serif;
--font-mockup: "Manrope", sans-serif;
/* small uppercase labels (formerly Syne) */
--font-accent: var(--font-text);
/* tonal surfaces — used instead of borders and dark blocks */
--surface-paper: #F1E4D4;
--surface-sage: #D6DCCF;
--surface-sand: #E2CDB5;
--sand-ink: #9B624A;
/* soft, slightly organic radii */
--radius-lg: 26px;
--radius-md: 18px;
--radius-sm: 10px;
}
/* ============================================================
HERO FONTS
local files in assets/fonts/ (an installed copy is used first)
============================================================ */
@font-face {
font-family: "Anaktoria";
src:
local("Anaktoria"),
local("Anaktoria-Regular"),
url("assets/fonts/Anaktoria.woff2") format("woff2"),
url("assets/fonts/Anaktoria.woff") format("woff"),
url("assets/fonts/Anaktoria.otf") format("opentype"),
url("assets/fonts/Anaktoria.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Cocomat Pro";
src:
local("Cocomat Pro Light"),
local("CocomatPro-Light"),
url("assets/fonts/CocomatPro-Light.woff2") format("woff2"),
url("assets/fonts/CocomatPro-Light.woff") format("woff"),
url("assets/fonts/CocomatPro-Light.otf") format("opentype"),
url("assets/fonts/CocomatPro-Light.ttf") format("truetype");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Cocomat Pro";
src:
local("Cocomat Pro Regular"),
local("Cocomat Pro"),
local("CocomatPro-Regular"),
url("assets/fonts/CocomatPro-Regular.woff2") format("woff2"),
url("assets/fonts/CocomatPro-Regular.woff") format("woff"),
url("assets/fonts/CocomatPro-Regular.otf") format("opentype"),
url("assets/fonts/CocomatPro-Regular.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Bhavuka";
src:
local("Bhavuka"),
local("Bhavuka-Regular"),
url("assets/fonts/Bhavuka-Regular.woff") format("woff"),
url("assets/fonts/Bhavuka-Regular.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
/* Bhavuka's x-height is ~35% smaller than Manrope's: scaling it
here keeps every existing font-size readable and the line
lengths close to what the layout was built for */
size-adjust: 125%;
}
/* Broadway Flower — licensed webfont (desktop + webfont licence).
Logo, H1 and section H2 only. A single Regular cut: the weight
range maps every requested weight to it, so nothing is faked */
@font-face {
font-family: "Broadway Flower";
src:
url("assets/fonts/BroadwayFlower.woff2") format("woff2"),
url("assets/fonts/BroadwayFlower.woff") format("woff");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Brittany";
src:
local("Brittany Signature"),
local("BrittanySignature"),
local("Brittany"),
url("assets/fonts/BrittanySignature.woff2") format("woff2"),
url("assets/fonts/BrittanySignature.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* ============================================================
RESET
============================================================ */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
overflow-x: hidden;
background: var(--paper);
color: var(--ink);
font-family: var(--font-text);
/* Bhavuka has a single weight: labels set to 500/600 stay regular
instead of getting a smeared synthetic bold */
font-synthesis-weight: none;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* real emphasis inside running text keeps its bold */
strong,
b {
font-synthesis-weight: auto;
}
/* titles use the heading face */
h1,
h2,
h3,
h4,
h5,
h6,
.case__title,
.concept__title,
.service-accordion__title,
.offer__title,
.offer__price,
.contact__title {
font-family: var(--font-heading);
font-synthesis-weight: auto;
}
/* the illustrative mockups (client-site previews)
depict other UIs, so they keep their own neutral sans */
.lorenzo-preview,
.lm-hero-preview,
.lorenzo-preview :is(h1, h2, h3, h4, h5, h6) {
font-family: var(--font-mockup);
font-synthesis-weight: auto;
}
a {
color: inherit;
text-decoration: none;
}
button {
border: 0;
color: inherit;
font: inherit;
}
img,
video {
display: block;
max-width: 100%;
}
iframe {
display: block;
border: 0;
}
::selection {
background: var(--ochre);
color: var(--ink);
}
.section-label,
.eyebrow,
.project-count {
font-family: var(--font-accent);
font-size: 9px;
font-weight: 500;
line-height: 1.3;
text-transform: uppercase;
letter-spacing: .10em;
}
/* ============================================================
DESIGN SYSTEM — SHARED PIECES
============================================================ */
/*
Accent: a word or two in wine, same sans font as the rest.
Markup: Un sito, a modo tuo.
*/
.accent {
color: var(--wine);
}
/* numbering: (01) */
.index-num {
color: var(--wine);
font-family: var(--font-accent);
font-size: 10px;
font-weight: 600;
line-height: 1;
letter-spacing: .12em;
}
.index-num::before {
content: "(";
}
.index-num::after {
content: ")";
}
/* the single, quiet call to action: a circle with an arrow */
.circle-arrow {
width: 38px;
height: 38px;
flex: none;
display: inline-grid;
place-items: center;
border:
1px solid
rgba(41, 35, 31, .16);
border-radius: 50%;
font-size: 13px;
font-style: normal;
transition:
transform .8s var(--ease),
background-color .5s ease,
border-color .5s ease,
color .5s ease;
}
@media (hover: hover) and (pointer: fine) {
a:hover > .circle-arrow,
a:hover .circle-arrow {
transform:
rotate(45deg);
background: var(--ink);
border-color: var(--ink);
color: var(--paper);
}
}
/* ============================================================
MAIN
============================================================ */
main {
position: relative;
z-index: 5;
width: 100%;
background: var(--paper);
}
/* ============================================================
HERO
============================================================ */
.hero {
position: sticky;
top: 0;
z-index: 1;
width: 100%;
height: 100svh;
min-height: 720px;
overflow: hidden;
background: var(--soft-paper);
/* hero colours are pinned here, so changes to the site-wide
palette in :root never reach the hero */
--paper: #F2E3CD;
--soft-paper: #F7EBDD;
--wine: #713D45;
--ochre: #C8904E;
--ink: #29231F;
--line: rgba(53, 43, 39, .14);
/* hero-only faces; text and labels follow the site-wide --font-text */
/* trying WindSong on the wordmark (Brittany @font-face kept) */
--font-wordmark: "WindSong", "Brittany", serif;
--font-editorial: var(--font-text);
/* same face as every other title on the site */
--font-title: var(--font-heading);
font-family: var(--font-editorial);
}
/* ============================================================
HERO ART
============================================================ */
.hero-art {
position: absolute;
inset:
0
0
0
31%;
overflow: hidden;
-webkit-mask-image:
linear-gradient(
90deg,
transparent 0%,
rgba(0, 0, 0, .08) 8%,
rgba(0, 0, 0, .45) 20%,
#000 36%,
#000 100%
);
mask-image:
linear-gradient(
90deg,
transparent 0%,
rgba(0, 0, 0, .08) 8%,
rgba(0, 0, 0, .45) 20%,
#000 36%,
#000 100%
);
}
.hero-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center right;
transform:
scale(1.02);
will-change: transform;
}
/*
Slow "liquid" marbling: script.js draws the same image
into this canvas through a WebGL displacement shader.
Until it is ready (or if WebGL is unavailable) the ![]()
underneath is what you see.
*/
.hero-flow {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
opacity: 0;
transform:
scale(1.02);
transition:
opacity 1.4s ease;
will-change: transform;
pointer-events: none;
}
.hero-flow.is-ready {
opacity: 1;
}
.hero-art-fade {
position: absolute;
inset: 0;
background:
linear-gradient(
90deg,
rgba(247, 235, 221, .44),
transparent 38%
);
pointer-events: none;
}
/* ============================================================
NAVIGATION
============================================================ */
.nav {
position: absolute;
z-index: 20;
top: 0;
left: 0;
width: 100%;
display: grid;
grid-template-columns:
1fr
auto;
/* links sit on the same baseline as the signature and its tagline */
align-items: baseline;
padding:
38px
4.5vw;
}
.brand {
display: flex;
align-items: baseline;
gap: 20px;
width: fit-content;
}
/* a loose, airy signature; the studio line stays small beside it */
.brand-name {
font-family: var(--font-wordmark);
/* script faces run small for their size */
font-size: 50px;
/* WindSong's real medium weight, for a bolder signature */
font-weight: 500;
line-height: 1;
letter-spacing: .04em;
}
.brand-sub,
.nav-links a {
font-family: var(--font-text);
font-size: 10.5px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: .08em;
}
/* a readable line next to the signature, not a tiny tag */
.brand-sub {
font-size: 10.5px;
letter-spacing: .16em;
opacity: .68;
}
.nav-links {
display: flex;
gap: 38px;
}
.nav-links a {
position: relative;
color: var(--ink);
font-size: 12px;
letter-spacing: .1em;
transition:
color .4s ease;
}
.nav-links a:hover,
.nav-links a:focus-visible {
color: var(--wine);
}
.nav-links a::after {
content: "";
position: absolute;
left: 0;
bottom: -7px;
width: 100%;
height: 1px;
background: currentColor;
transform:
scaleX(0);
transform-origin: right;
transition:
transform .4s var(--ease);
}
.nav-links a:hover::after,
.nav-links a:focus-visible::after {
transform:
scaleX(1);
transform-origin: left;
}
/* TOGGLE — two thin lines, tablet / mobile only */
.nav-toggle,
.mobile-menu__close {
position: relative;
display: none;
align-self: center;
width: 30px;
height: 30px;
background: none;
color: var(--ink);
cursor: pointer;
}
.nav-toggle span,
.mobile-menu__close span {
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 1px;
background: currentColor;
}
.nav-toggle span:first-child {
transform:
translateY(-4px);
}
.nav-toggle span:last-child {
transform:
translateY(4px);
}
.mobile-menu__close span:first-child {
transform:
rotate(45deg);
}
.mobile-menu__close span:last-child {
transform:
rotate(-45deg);
}
/* ============================================================
MOBILE MENU — fullscreen overlay above every section
============================================================ */
.mobile-menu {
/* the signature face is scoped to the hero: repeat it here */
--font-wordmark: "WindSong", "Brittany", serif;
position: fixed;
z-index: 1000;
inset: 0;
display: none;
flex-direction: column;
/* same inset as the header, so the logo does not move */
padding: 28px;
overflow-y: auto;
background:
rgba(242, 227, 205, .94);
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
opacity: 0;
visibility: hidden;
transform:
translateY(-12px);
transition:
opacity .4s ease,
transform .4s var(--ease),
visibility .4s;
}
.mobile-menu.is-open {
opacity: 1;
visibility: visible;
transform: none;
}
.mobile-menu__top {
display: flex;
align-items: baseline;
justify-content: space-between;
}
.mobile-menu__close {
display: block;
}
.mobile-menu__links {
display: grid;
margin-block: auto;
padding-block: 40px;
}
.mobile-menu__links a {
padding: .5em 0;
border-bottom:
1px solid
var(--line);
font-family: var(--font-heading);
font-size:
clamp(
30px,
8.4vw,
46px
);
font-weight: 300;
line-height: 1.1;
letter-spacing: .05em;
text-transform: uppercase;
transition:
color .4s ease;
}
.mobile-menu__links a:first-child {
border-top:
1px solid
var(--line);
}
.mobile-menu__links a:hover,
.mobile-menu__links a:focus-visible {
color: var(--wine);
}
/* page behind the open menu stays still; never locked on desktop */
@media (max-width: 850px) {
html.menu-open,
html.menu-open body {
overflow: hidden;
}
}
/* small phones: the signature gives the toggle just enough room */
@media (max-width: 480px) {
.hero .nav,
.mobile-menu {
padding:
28px
22px;
}
.nav {
column-gap: 12px;
}
.nav .brand,
.mobile-menu .brand {
gap: 10px;
}
.nav .brand-name,
.mobile-menu .brand-name {
font-size: 34px;
}
.nav .brand-sub,
.mobile-menu .brand-sub {
font-size: 8px;
letter-spacing: .12em;
}
.nav-toggle,
.mobile-menu__close {
width: 26px;
}
}
/* ============================================================
HERO COPY
============================================================ */
.hero-copy {
position: absolute;
z-index: 10;
left: 6.7vw;
top: 50%;
width:
min(
740px,
50vw
);
transform:
translateY(-38%);
}
.hero-kicker {
margin-bottom: 24px;
color:
rgba(41, 35, 31, .55);
font-family: var(--font-accent);
font-size: 9.5px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: .10em;
}
.hero-copy h1 {
display: flex;
flex-direction: column;
font-family: var(--font-title);
font-size:
clamp(
44px,
4vw,
76px
);
font-weight: 400;
line-height: 1.08;
letter-spacing: -.01em;
}
/* same face as the lines above; only colour and a step down in size */
.hero-copy__accent {
color: var(--wine);
font-size: .9em;
}
/* if the line has to break, break after "e", never inside the phrase */
.hero-copy__keep {
white-space: nowrap;
}
.hero-description {
max-width: 400px;
margin-top: 34px;
font-family: var(--font-editorial);
/* Bhavuka is scaled up in its @font-face; this reads like ~17px */
font-size: 14px;
font-weight: 400;
line-height: 1.65;
letter-spacing: 0;
}
/* ============================================================
HERO GRID
============================================================ */
.layout-grid {
position: absolute;
inset: 0;
z-index: 4;
pointer-events: none;
}
.layout-grid span {
position: absolute;
display: block;
background:
rgba(247, 235, 221, .20);
}
.grid-v {
top: 0;
bottom: 0;
width: 1px;
}
.grid-v-1 {
left: 61%;
}
.grid-v-2 {
left: 73%;
}
.grid-v-3 {
left: 88%;
}
.grid-h {
left: 40%;
right: 0;
height: 1px;
}
.grid-h-1 {
top: 38%;
}
.grid-h-2 {
top: 68%;
}
.grid-h-3 {
top: 91%;
}
/* ============================================================
HERO PALETTE
============================================================ */
.palette-card {
position: absolute;
z-index: 8;
overflow: hidden;
border:
1px solid
rgba(247, 235, 221, .30);
background:
rgba(247, 235, 221, .02);
color: white;
transition:
width .6s var(--ease),
height .6s var(--ease),
transform .6s var(--ease),
border-color .45s ease,
color .45s ease;
}
.palette-card:hover,
.palette-card.is-active {
border-color:
rgba(247, 235, 221, .46);
}
.palette-card::before {
content: "";
position: absolute;
inset: 0;
background:
var(--swatch);
opacity: 0;
transform:
scale(.97);
transition:
opacity .45s ease,
transform .55s var(--ease);
}
/* slightly see-through, so the marbling stays readable underneath */
.palette-card:hover::before,
.palette-card.is-active::before {
opacity: .8;
transform:
scale(1);
}
.palette-info {
position: absolute;
z-index: 2;
left: 18px;
bottom: 17px;
display: flex;
flex-direction: column;
gap: 4px;
opacity: 0;
transform:
translateY(7px);
transition:
opacity .45s ease,
transform .45s var(--ease);
}
.palette-info b {
font-size: 14px;
font-weight: 400;
}
.palette-info small {
font-family: var(--font-text);
font-size: 8px;
font-weight: 500;
letter-spacing: .08em;
}
.palette-card:hover
.palette-info,
.palette-card.is-active
.palette-info {
opacity: 1;
transform: none;
}
.palette-card-01 {
top: 19%;
right: 2.5%;
width: 21vw;
height: 28vh;
}
/* the paper and champagne swatches are light: their labels turn to ink */
.palette-card-01:hover,
.palette-card-01.is-active,
.palette-card-03:hover,
.palette-card-03.is-active {
color: var(--ink);
}
.palette-card-02 {
top: 49%;
left: 60.7%;
width: 12vw;
height: 20vh;
}
.palette-card-03 {
right: 11.8%;
bottom: 0;
width: 16vw;
height: 18vh;
}
/* ============================================================
HERO CTA
============================================================ */
.hero-discover {
position: absolute;
z-index: 10;
left: 6.7vw;
bottom: 7%;
display: flex;
align-items: center;
gap: 18px;
/* a slightly larger hit area, no visible box */
padding: 10px 0;
color: var(--ink);
font-family: var(--font-text);
font-size: 11.5px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: .12em;
}
.hero-discover span {
transition:
transform .5s var(--ease);
}
/* a short line that belongs to the link, not a divider */
.hero-discover i {
width: 56px;
height: 1px;
background: var(--wine);
transition:
width .5s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
.hero-discover:hover span {
transform:
translateX(4px);
}
.hero-discover:hover i {
width: 88px;
}
}
.hero-discover:focus-visible {
outline:
1px solid
var(--wine);
outline-offset: 6px;
}
/* ============================================================
MI PRESENTO
============================================================ */
.intro-section {
position: relative;
z-index: 20;
width: 100%;
min-height: 690px;
display: grid;
grid-template-columns:
minmax(0, 59%)
minmax(0, 41%);
overflow: hidden;
background: var(--paper);
}
.intro-content {
position: relative;
z-index: 2;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
padding:
82px
clamp(60px, 6vw, 110px)
82px
4.7vw;
background: var(--paper);
}
.motion-title-wrap {
overflow: hidden;
}
.intro-content h2 {
margin: 0;
color: var(--ink);
font-size:
clamp(
40px,
3vw,
54px
);
font-weight: 300;
line-height: 1;
letter-spacing: -.045em;
}
.intro-copy {
display: grid;
grid-template-columns:
minmax(0, 1.05fr)
minmax(220px, .95fr);
gap:
clamp(
40px,
4.5vw,
72px
);
width: 100%;
max-width: 800px;
margin-top:
clamp(
44px,
4vw,
64px
);
}
.intro-copy__primary {
max-width: 390px;
color:
rgba(41, 35, 31, .92);
font-size:
clamp(
18px,
1.2vw,
21px
);
font-weight: 300;
line-height: 1.5;
letter-spacing: -.025em;
}
.intro-copy__primary strong {
color: var(--ink);
font-weight: 500;
}
.intro-copy__stack {
display: grid;
align-content: start;
gap: 18px;
}
.intro-copy__secondary {
max-width: 315px;
color:
rgba(41, 35, 31, .72);
font-size:
clamp(
15px,
.95vw,
17px
);
font-weight: 300;
line-height: 1.6;
letter-spacing: -.012em;
}
.intro-link {
display: inline-flex;
align-items: center;
gap: 13px;
width: fit-content;
margin-top:
clamp(
34px,
3.5vw,
48px
);
color:
rgba(41, 35, 31, .80);
font-family: var(--font-accent);
font-size: 9px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: .10em;
}
.intro-link__line {
width: 32px;
height: 1px;
background: var(--wine);
transition:
width .4s var(--ease);
}
.intro-link__arrow {
color: var(--wine);
transition:
transform .4s var(--ease);
}
.intro-link:hover
.intro-link__line {
width: 48px;
}
.intro-link:hover
.intro-link__arrow {
transform:
translate(3px, 3px);
}
.intro-meta {
position: absolute;
left: 4.7vw;
bottom: 28px;
display: flex;
gap: 28px;
color:
rgba(102, 112, 95, .78);
font-family: var(--font-accent);
font-size: 7px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .10em;
}
.intro-meta span {
position: relative;
}
.intro-meta
span:not(:last-child)::after {
content: "";
position: absolute;
top: 50%;
right: -16px;
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--sage);
transform:
translateY(-50%);
}
.intro-portrait {
position: relative;
z-index: 2;
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding:
clamp(48px, 5vw, 76px)
clamp(32px, 4vw, 64px);
background: #B8B49D;
}
.intro-portrait__image {
position: relative;
width:
min(
82%,
510px
);
aspect-ratio:
4 / 5;
overflow: hidden;
background: var(--soft-paper);
}
.intro-portrait__image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position:
50%
42%;
filter:
saturate(.92)
contrast(.99);
transform:
scale(1.02);
}
.intro-portrait__reveal {
position: absolute;
z-index: 3;
inset: 0;
background: #B8B49D;
pointer-events: none;
}
.intro-portrait__caption {
width:
min(
82%,
510px
);
display: flex;
justify-content: space-between;
gap: 20px;
margin-top: 14px;
padding-top: 11px;
color:
rgba(53, 43, 39, .52);
font-family: var(--font-accent);
font-size: 7px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .10em;
}
/* ============================================================
SELECTED WORK — COMPACT
============================================================ */
.works-intro {
position: relative;
z-index: 20;
width: 100%;
padding:
58px
6.7vw
38px;
background: var(--paper);
border-top:
1px solid
rgba(41, 35, 31, .10);
border-bottom:
1px solid
rgba(41, 35, 31, .12);
}
.works-intro__top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 28px;
}
.works-intro .section-label {
color:
rgba(41, 35, 31, .48);
font-family: var(--font-accent);
font-size: 8px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: .10em;
}
.works-intro__bottom {
display: grid;
grid-template-columns:
minmax(0, 1fr)
320px;
gap: 60px;
align-items: end;
}
.works-intro h2 {
margin: 0;
color: var(--ink);
font-size:
clamp(
40px,
3.9vw,
67px
);
font-weight: 300;
line-height: .98;
letter-spacing: -.05em;
}
.works-intro__bottom p {
max-width: 320px;
padding-bottom: 4px;
color:
rgba(41, 35, 31, .58);
font-size: 13px;
font-weight: 300;
line-height: 1.6;
}
/* ============================================================
PROJECT 01 — LORENZO
Case study: a large, still editorial frame holding the
site preview. No scroll-driven zoom.
============================================================ */
.project--case {
position: relative;
z-index: 20;
padding:
clamp(70px, 7vw, 120px)
6.7vw
clamp(90px, 9vw, 150px);
background: var(--paper);
}
.case {
max-width: 1160px;
margin: 0 auto;
}
/* desktop — size the preview on the window height too,
so title and site fit in one screen */
@media (min-width: 701px) {
.case {
max-width:
clamp(
560px,
110vh,
1160px
);
}
.project--case {
padding-block:
clamp(
34px,
5.5vh,
90px
);
}
.case__title {
font-size:
clamp(
36px,
min(3.8vw, 6.4vh),
66px
);
}
.case__head {
margin-bottom:
clamp(
14px,
2.2vh,
26px
);
}
.project--case
.case__meta {
margin-top:
clamp(
16px,
2.6vh,
38px
);
}
}
/* HEAD — title and category; the site follows right below */
.case__head {
display: grid;
grid-template-columns:
minmax(0, 1fr)
360px;
gap: 60px;
align-items: end;
margin-bottom:
clamp(
18px,
1.8vw,
26px
);
}
.case__title-wrap {
display: flex;
align-items: flex-start;
gap: 26px;
}
.case__title {
font-size:
clamp(
40px,
3.8vw,
66px
);
font-weight: 300;
line-height: .95;
letter-spacing: -.055em;
}
/* PREVIEW — no frame: the video sits directly on the page */
.case__frame {
display: block;
}
.case__screen {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
background: #151514;
border-radius: 2px;
transform:
translateZ(0);
}
/* META — small project data under the frame */
.case__meta {
display: grid;
grid-template-columns:
1.4fr
1fr
1fr;
gap: 40px;
margin-top:
clamp(
24px,
2.6vw,
38px
);
padding-top: 18px;
border-top:
1px solid
var(--line);
}
.case__meta dt {
margin-bottom: 8px;
color:
rgba(41, 35, 31, .46);
font-family: var(--font-accent);
font-size: 8px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .08em;
}
.case__meta dd {
color: var(--ink);
font-size: 13px;
font-weight: 300;
line-height: 1.5;
}
.case__visit {
display: inline-flex;
align-items: center;
gap: 6px;
background:
linear-gradient(
currentColor,
currentColor
)
left bottom / 0 1px
no-repeat;
transition:
background-size .5s var(--ease);
}
.case__visit span {
color: var(--wine);
}
.case__visit:hover {
background-size: 100% 1px;
}
/* half-width projects: services on its own row, the rest paired */
@media (min-width: 701px) {
.projects-duo
.case__meta {
grid-template-columns:
1fr
1fr;
gap: 20px 32px;
}
.projects-duo
.case__meta > div:first-child {
grid-column: 1 / -1;
}
}
/* ============================================================
LORENZO PREVIEW
============================================================ */
.lorenzo-preview {
position: absolute;
inset: 0;
overflow: hidden;
background: #151514;
color: white;
}
.lorenzo-preview__top {
position: absolute;
z-index: 5;
top: 0;
left: 0;
right: 0;
height: 11%;
display: flex;
align-items: center;
justify-content: space-between;
padding:
0
2.2%;
background:
rgba(15, 15, 14, .72);
backdrop-filter:
blur(8px);
-webkit-backdrop-filter:
blur(8px);
}
.lorenzo-preview__brand {
display: flex;
align-items: center;
gap: 10px;
}
.lorenzo-preview__brand img {
width: 40px;
height: 40px;
/* transparent white mark: show it whole, no circular crop */
object-fit: contain;
}
.lorenzo-preview__brand small,
.lorenzo-preview__nav {
font-size:
clamp(
7px,
.7vw,
11px
);
font-weight: 300;
}
/*
The media layer is slightly oversized so script.js can give it
an almost imperceptible parallax (±12px) without showing edges.
*/
.lorenzo-preview__media {
position: absolute;
inset: -14px 0;
overflow: hidden;
will-change: transform;
}
.lorenzo-preview__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: center;
transform:
translateZ(0)
scale(1);
transition:
transform .8s cubic-bezier(.22, 1, .36, 1);
}
@media (hover: hover) and (pointer: fine) {
.case__frame:hover
.lorenzo-preview__video {
transform:
translateZ(0)
scale(1.015);
}
}
.lorenzo-preview__shade {
position: absolute;
z-index: 1;
inset: 0;
background:
linear-gradient(
180deg,
rgba(0, 0, 0, .05),
rgba(0, 0, 0, .12) 50%,
rgba(0, 0, 0, .62)
);
}
.lorenzo-preview__center {
position: absolute;
z-index: 3;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
pointer-events: none;
}
.lorenzo-preview__center strong {
font-size:
clamp(
28px,
4.2vw,
72px
);
font-weight: 300;
line-height: 1;
letter-spacing: -.045em;
}
.lorenzo-preview__center span {
margin-top: 14px;
color:
rgba(255, 255, 255, .82);
font-size:
clamp(
10px,
1vw,
17px
);
}
/* ============================================================
LORENZO — HERO REPLICA (lm-hero-*)
the lorenzomagnanini.com hero, isolated and scaled
to fill the preview (100% of its container, never 100vh)
============================================================ */
.lm-hero-preview {
position: relative;
width: 100%;
height: 100%;
min-height: 100%;
overflow: hidden;
background: #111;
isolation: isolate;
}
/* VIDEO */
/* oversized vertically so the existing ±12px parallax never shows an edge */
.lm-hero-media {
position: absolute;
inset: -14px 0;
overflow: hidden;
will-change: transform;
}
.lm-hero-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
transform: scale(1.05);
}
/* OVERLAY */
.lm-hero-overlay {
position: absolute;
inset: 0;
z-index: 1;
background:
radial-gradient(
circle at center,
rgba(255, 255, 255, 0.03),
transparent 32%
),
linear-gradient(
to top,
rgba(0, 0, 0, 0.92) 0%,
rgba(0, 0, 0, 0.48) 52%,
rgba(0, 0, 0, 0.15) 100%
);
}
/* CONTENT */
.lm-hero-content {
position: absolute;
z-index: 2;
left: 50%;
bottom: 13%;
transform: translateX(-50%);
width: min(90%, 760px);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
font-family: "Jost", sans-serif;
}
/* TITLE */
.lm-hero-title {
position: relative;
margin: 0 0 clamp(5px, 1vw, 14px);
font-family: "Jost", sans-serif;
font-weight: 500;
font-size: clamp(1.25rem, 3.1vw, 3.15rem);
line-height: 1.05;
letter-spacing: 0.085em;
text-transform: uppercase;
white-space: nowrap;
}
.lm-hero-title-text {
display: inline-block;
background-image: linear-gradient(
100deg,
#6f6b65 0%,
#9f9a91 8%,
#f4f1eb 15%,
#ffffff 21%,
#d5b98a 27%,
#9f9a91 36%,
#6f6b65 47%,
#9f9a91 58%,
#f4f1eb 66%,
#ffffff 71%,
#d5b98a 77%,
#6f6b65 88%,
#f5f3ee 100%
);
background-size: 350% 100%;
background-position: 66% 50%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
filter: brightness(1);
transition:
background-position 2.6s cubic-bezier(0.16, 1, 0.3, 1),
filter 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.lm-hero-preview:hover .lm-hero-title-text {
background-position: 38% 50%;
filter: brightness(1.1) contrast(1.1);
}
/* SUBTITLE */
.lm-hero-subtitle {
margin: 0 0 clamp(12px, 2vw, 30px);
color: rgba(255, 255, 255, 0.6);
font-family: "Jost", sans-serif;
font-weight: 300;
font-size: clamp(0.65rem, 1.1vw, 1.02rem);
letter-spacing: 0.01em;
line-height: 1.6;
}
/* CTA WRAPPER */
.lm-hero-actions {
display: flex;
justify-content: center;
align-items: center;
gap: clamp(10px, 2vw, 28px);
}
/* PRIMARY */
.lm-hero-cta-primary {
position: relative;
overflow: hidden;
display: inline-flex;
align-items: center;
gap: 8px;
padding:
clamp(7px, 1vw, 13px)
clamp(12px, 1.8vw, 24px);
border-radius: 10px;
background: #f2efe9;
color: #14120f;
font-family: "Jost", sans-serif;
font-size: clamp(0.5rem, 0.8vw, 0.85rem);
font-weight: 500;
letter-spacing: 0.05em;
text-transform: uppercase;
transition:
background 0.4s ease,
transform 0.4s ease;
}
.lm-hero-cta-primary::before {
content: "";
position: absolute;
top: 0;
left: -60%;
width: 35%;
height: 100%;
background: linear-gradient(
115deg,
transparent,
rgba(255,255,255,0.55),
transparent
);
transform: skewX(-18deg);
transition:
left 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.lm-hero-preview:hover .lm-hero-cta-primary::before {
left: 120%;
}
.lm-hero-primary-arrow {
display: inline-block;
}
/* SECONDARY */
.lm-hero-cta-secondary {
display: inline-flex;
align-items: center;
gap: 7px;
color: rgba(235, 233, 228, 0.68);
font-size: clamp(0.5rem, 0.8vw, 0.88rem);
font-weight: 300;
letter-spacing: 0.02em;
}
.lm-hero-secondary-label {
position: relative;
}
.lm-hero-secondary-label::after {
content: "";
position: absolute;
left: 0;
right: 100%;
bottom: -3px;
height: 1px;
background: currentColor;
opacity: 0.6;
transition:
right 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.lm-hero-preview:hover
.lm-hero-secondary-label::after {
right: 0;
}
/* SITE RECORDING — covers the replica once loaded */
.lm-site-video {
position: absolute;
z-index: 6;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
background: #111;
/* clicks stay on the card link */
pointer-events: none;
opacity: 0;
transition: opacity .6s ease;
}
.lm-site-video.is-loaded {
opacity: 1;
}
/* RESPONSIVE DELLA PREVIEW */
@media (max-width: 700px) {
.lm-hero-content {
bottom: 9%;
width: 92%;
}
.lm-hero-title {
font-size: clamp(1.15rem, 6vw, 2rem);
letter-spacing: 0.07em;
}
.lm-hero-subtitle {
font-size: 0.72rem;
margin-bottom: 12px;
}
.lm-hero-actions {
gap: 10px;
}
.lm-hero-cta-primary {
padding: 8px 12px;
}
.lm-hero-cta-secondary {
font-size: 0.6rem;
}
}
/* ============================================================
PROJECT 02 / 03
============================================================ */
.project--editorial {
position: relative;
z-index: 20;
padding:
clamp(
90px,
9vw,
150px
)
6.7vw;
background: var(--paper);
border-top:
1px solid
var(--line);
}
.project--pomeranze {
background: #DDD8C2;
}
/* ============================================================
MAGA + POMERANZE — SIDE BY SIDE
============================================================ */
.projects-duo {
display: grid;
grid-template-columns:
repeat(
2,
minmax(0, 1fr)
);
border-top:
1px solid
var(--line);
}
.projects-duo
.project--editorial {
border-top: none;
padding:
clamp(
64px,
7vw,
110px
)
4vw;
}
.projects-duo
.project--maga {
border-right:
1px solid
var(--line);
}
.projects-duo
.project-heading {
grid-template-columns: 1fr;
gap: 16px;
align-items: start;
}
.projects-duo
.project-heading
.project-count {
display: none;
}
.projects-duo
.project-heading h3 {
font-size:
clamp(
32px,
3.4vw,
56px
);
}
.projects-duo
.project-live,
.projects-duo
.project-live--offset {
width: 100%;
margin:
clamp(
28px,
4vw,
48px
)
0
0;
}
.project-heading {
display: grid;
grid-template-columns:
110px
minmax(0, 1fr)
330px;
gap: 38px;
align-items: end;
padding-bottom: 26px;
border-bottom:
1px solid
var(--line);
}
.project-heading
.project-count {
align-self: start;
padding-top: 7px;
color:
rgba(41, 35, 31, .46);
}
.project-heading
.eyebrow {
margin-bottom: 10px;
color: var(--wine);
}
.project-heading h3 {
font-size:
clamp(
48px,
6vw,
105px
);
font-weight: 300;
line-height: .92;
letter-spacing: -.06em;
}
.project-live {
position: relative;
display: block;
width:
min(
86vw,
1380px
);
margin:
clamp(
48px,
6vw,
85px
)
auto
0;
}
.project-live--offset {
width:
min(
76vw,
1220px
);
margin-left: 8%;
}
.project-browser {
position: relative;
aspect-ratio:
16 / 9;
overflow: hidden;
background: #DCC8AC;
box-shadow:
0 25px 80px
rgba(41, 35, 31, .11);
will-change: transform;
}
.project-browser__bar {
height: 38px;
display: flex;
align-items: center;
gap: 7px;
padding:
0
15px;
background: #F1E4D2;
border-bottom:
1px solid
rgba(41, 35, 31, .10);
}
.project-browser__bar span {
width: 7px;
height: 7px;
border-radius: 50%;
background:
rgba(41, 35, 31, .18);
}
.project-browser__bar small {
margin-left: 9px;
color:
rgba(41, 35, 31, .40);
font-family:
"IBM Plex Mono",
monospace;
font-size: 7px;
letter-spacing: .10em;
}
.project-browser iframe {
width: 100%;
height:
calc(
100% - 38px
);
pointer-events: none;
background: white;
}
.project-live__veil {
position: absolute;
inset:
38px
0
0;
pointer-events: none;
background:
linear-gradient(
180deg,
transparent 55%,
rgba(41, 35, 31, .22)
);
opacity: .45;
transition:
opacity .5s ease;
}
.project-live__cta {
position: absolute;
right: 18px;
bottom: 18px;
padding:
12px
15px;
background:
rgba(242, 227, 205, .90);
border:
1px solid
rgba(200, 144, 78, .60);
font-family: var(--font-accent);
font-size: 8px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .08em;
opacity: 0;
transform:
translateY(6px);
transition:
opacity .4s var(--ease),
transform .4s var(--ease);
}
.project-live:hover
.project-live__cta {
opacity: 1;
transform: none;
}
.project-live:hover
.project-live__veil {
opacity: .16;
}
/* ============================================================
MAGA ALCHEMY / POMERANZE — LIVE VIDEO REEL (ISOLATED TEST)
============================================================ */
.project-reel {
display: block;
}
.project-reel__frame {
position: relative;
/*
Coloured frame around the preview. No fixed aspect-ratio:
the frame follows the video's own proportions, so the site
recording is always shown whole.
*/
padding:
clamp(
32px,
3.4vw,
50px
);
background: #DCC8AC;
border-radius: 3px;
}
.project-reel__screen {
position: relative;
border-radius: 1px;
overflow: hidden;
transform:
translateZ(0);
transition:
transform 1.1s
cubic-bezier(.22, 1, .36, 1);
}
/* ============================================================
PROJECT FRAMES — ONE COLOUR PER PROJECT
Maga and Pomeranze: soft, desaturated tones with the same
low chroma. Lorenzo has no frame: video on the page itself.
============================================================ */
/* warm anthracite: material, handcrafted */
.project-frame--maga {
background: #502A2D;
}
/* soft natural sage: botanical */
.project-frame--pomeranze {
background: #69705A;
}
.project-reel__video {
display: block;
width: 100%;
height: auto;
object-fit: contain;
}
/* the whole screen grows slightly, so nothing gets cropped */
.project-reel:hover
.project-reel__screen {
transform:
scale(1.018);
}
/* ============================================================
CONCEPTS — PROJECT GALLERY
============================================================ */
.concepts-section {
position: relative;
z-index: 20;
overflow: hidden;
padding:
clamp(100px, 9vw, 150px)
6.7vw
clamp(120px, 11vw, 190px);
background: #E9DAC6;
color: var(--ink);
}
.concepts-heading {
position: relative;
z-index: 2;
}
.concepts-heading .section-label {
display: block;
margin-bottom: 22px;
color: var(--deep-sage);
}
.concepts-heading__row {
display: grid;
grid-template-columns:
minmax(0, 1fr)
300px;
gap: 60px;
align-items: end;
}
.concepts-heading h2 {
margin: 0;
/* room for descenders (g, p) inside the clipped motion wrap */
padding-bottom: .22em;
font-size:
clamp(
46px,
4.8vw,
82px
);
font-weight: 300;
line-height: .98;
letter-spacing: -.055em;
}
.concepts-heading p {
max-width: 300px;
padding-bottom: 12px;
color:
rgba(41, 35, 31, .58);
font-size: 13px;
font-weight: 300;
line-height: 1.6;
}
/* ============================================================
PROJECT GALLERY
three equal cards side by side, compact
============================================================ */
.concepts-list {
display: grid;
grid-template-columns:
repeat(3, minmax(0, 1fr));
gap:
clamp(
18px,
2vw,
32px
);
margin-top:
clamp(
50px,
5vw,
80px
);
}
/* per-project tint — used only on details, never as a fill */
.concept {
--c-accent: var(--wine);
--c-tint: #DEC9AB;
position: relative;
}
.concept--wedding {
--c-accent: var(--wine);
--c-tint: #E0CDB2;
}
.concept--balloon {
--c-accent: var(--deep-sage);
--c-tint: #E2C6A6;
}
.concept--sail {
--c-accent: var(--deep-sage);
--c-tint: #D9CDB8;
}
.concept--empty {
--c-accent: rgba(41, 35, 31, .42);
--c-tint: transparent;
}
.concept__link {
display: block;
color: inherit;
}
/* ============================================================
VISUAL — same portrait frame for every card
============================================================ */
.concept__visual {
position: relative;
overflow: hidden;
aspect-ratio:
4 / 5;
border-radius: 4px;
background: var(--c-tint);
}
.concept__visual img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transform:
scale(1.001);
transition:
transform 2.6s var(--ease);
}
/* the couple sits on the right of the photo: centre the crop on them */
.concept--wedding
.concept__visual img {
object-position: 92% 50%;
}
.concept--balloon
.concept__visual img {
object-position: 54% 50%;
}
.concept--sail
.concept__visual img {
object-position: 50% 50%;
}
/* empty slot — an outline waiting for the next project */
.concept--empty
.concept__visual {
display: grid;
place-items: center;
border:
1px dashed
rgba(41, 35, 31, .22);
}
.concept__soon {
color:
rgba(41, 35, 31, .38);
font-family: var(--font-accent);
font-size: 8px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .16em;
}
/* ============================================================
META — category, title, line, arrow
============================================================ */
.concept__meta {
display: grid;
grid-template-columns:
minmax(0, 1fr)
auto;
align-items: start;
gap: 16px;
margin-top: 22px;
}
.concept__category {
display: block;
margin-bottom: 10px;
color: var(--c-accent);
font-family: var(--font-accent);
font-size: 8px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .16em;
}
.concept__title {
margin: 0;
font-size:
clamp(
26px,
2.3vw,
38px
);
font-weight: 300;
line-height: 1;
letter-spacing: -.04em;
}
.concept--empty
.concept__title {
color:
rgba(41, 35, 31, .42);
}
.concept__place {
max-width: 34ch;
margin: 10px 0 0;
color:
rgba(41, 35, 31, .56);
font-size: 13px;
font-weight: 300;
line-height: 1.55;
}
.concept__meta .circle-arrow {
margin-top: 18px;
}
/* ============================================================
HOVER — slow zoom, arrow turns
============================================================ */
@media (hover: hover) and (pointer: fine) {
.concept__link:hover
.concept__visual img {
transform:
scale(1.045);
}
.concept__link:hover
.circle-arrow {
transform:
rotate(45deg);
background: var(--ink);
border-color: var(--ink);
color: var(--paper);
}
}
/* ============================================================
CONCEPTS DESKTOP — cap the frame so image, title and line
fit in one screen on wide monitors
============================================================ */
@media (min-width: 701px) {
.concept__visual {
/* keep the full column width when the height is capped */
width: 100%;
max-height:
max(
300px,
56vh
);
}
.concepts-section {
padding-block:
clamp(
34px,
5.5vh,
90px
);
}
.concepts-heading h2 {
font-size:
clamp(
38px,
min(4.8vw, 7vh),
82px
);
}
.concepts-list {
margin-top:
clamp(
20px,
3.4vh,
60px
);
}
.concept__meta {
margin-top:
clamp(
12px,
2vh,
22px
);
}
}
/* ============================================================
CONCEPTS TABLET
============================================================ */
@media (max-width: 950px) {
.concepts-heading__row {
grid-template-columns:
minmax(0, 1fr)
260px;
gap: 36px;
}
}
/* ============================================================
CONCEPTS MOBILE — swipeable gallery row
============================================================ */
@media (max-width: 700px) {
.concepts-section {
padding:
72px
16px
96px;
}
.concepts-heading__row {
grid-template-columns: 1fr;
gap: 18px;
}
.concepts-heading h2 {
font-size:
clamp(
36px,
10vw,
48px
);
}
/* two-up grid — everything stays on screen, no sideways scroll */
.concepts-list {
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 28px 12px;
margin-top: 36px;
}
.concept__meta {
margin-top: 12px;
}
.concept__meta .circle-arrow {
display: none;
}
.concept__category {
margin-bottom: 6px;
font-size: 7px;
}
.concept__title {
font-size:
clamp(
20px,
5.6vw,
26px
);
}
.concept__place {
margin-top: 6px;
font-size: 11px;
line-height: 1.45;
}
}
/* ============================================================
CONCEPTS REDUCED MOTION
============================================================ */
@media (prefers-reduced-motion: reduce) {
.concept {
opacity: 1 !important;
transform: none !important;
}
.concept__visual img {
transition: none !important;
}
}
/* ============================================================
SERVICES
warm sage surface — shares the pricing language
(tones, numbering, radii, quiet hover) without its layout
============================================================ */
.services {
position: relative;
z-index: 20;
overflow: hidden;
padding:
clamp(
90px,
8vw,
130px
)
6.7vw
clamp(
100px,
9vw,
150px
);
background: var(--paper);
color: #29231F;
}
.services__heading {
position: relative;
z-index: 2;
}
.services__heading
.section-label {
display: block;
margin-bottom: 22px;
color: var(--deep-sage);
}
.services__heading h2 {
max-width: 1000px;
color: #29231F;
font-size:
clamp(
44px,
4.6vw,
80px
);
font-weight: 300;
line-height: .98;
letter-spacing: -.055em;
}
/* ============================================================
SERVICES — EDITORIAL ACCORDION
base = mobile look; the desktop/tablet query below scales it up
============================================================ */
.services-mobile {
display: none;
position: relative;
z-index: 2;
margin-top:
clamp(
40px,
9vw,
60px
);
}
.service-accordion {
/* one accent per service, used on details only — never as a fill */
--service-accent: var(--deep-sage);
--service-accent-text: var(--service-accent);
margin-bottom: 10px;
border-radius: var(--radius-md);
background: #E8DCCB;
transition:
background-color .4s ease;
}
.service-accordion.is-open {
background: #E2D4C2;
}
/* web — sage */
.service-accordion:nth-child(1) {
--service-accent: #66705F;
}
/* creative direction — wine */
.service-accordion:nth-child(2) {
--service-accent: #713D45;
}
/* digital presence — ochre; a deeper tone keeps the title readable */
.service-accordion:nth-child(3) {
--service-accent: #B98755;
--service-accent-text: #96693F;
}
.service-accordion__trigger {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
width: 100%;
padding:
22px
22px;
background: none;
border: 0;
text-align: left;
cursor: pointer;
}
.service-accordion__title {
color: #352B27;
font-size:
clamp(
26px,
8vw,
32px
);
font-weight: 300;
letter-spacing: -.035em;
transition: color .3s ease;
}
.service-accordion.is-open .service-accordion__title {
color: var(--service-accent-text);
}
.service-accordion__indicator {
position: relative;
flex: none;
width: 34px;
height: 34px;
border:
1px solid
rgba(53, 43, 39, .20);
border-radius: 50%;
transition: border-color .3s ease;
}
.service-accordion.is-open .service-accordion__indicator {
border-color: var(--service-accent);
}
@media (hover: hover) and (pointer: fine) {
.service-accordion__trigger:hover .service-accordion__indicator {
border-color: var(--service-accent);
}
}
.service-accordion__indicator::before,
.service-accordion__indicator::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: var(--service-accent-text);
transform: translate(-50%, -50%);
transition: transform .3s var(--ease);
}
.service-accordion__indicator::before {
width: 11px;
height: 1px;
}
.service-accordion__indicator::after {
width: 1px;
height: 11px;
}
.service-accordion.is-open .service-accordion__indicator::after {
transform:
translate(-50%, -50%)
rotate(90deg)
scaleY(0);
}
.service-accordion__panel {
max-height: 0;
overflow: hidden;
opacity: 0;
padding:
0
22px;
transition:
max-height .35s var(--ease),
opacity .3s ease;
}
.service-accordion.is-open .service-accordion__panel {
max-height: 900px;
opacity: 1;
}
.service-accordion__desc {
max-width: 34ch;
margin: 0 0 18px;
color: rgba(41, 35, 31, .66);
font-size: 14px;
font-weight: 300;
line-height: 1.6;
}
.service-accordion__list {
display: grid;
gap: 10px;
list-style: none;
padding-bottom: 24px;
}
.service-accordion__list li {
display: flex;
align-items: baseline;
gap: 12px;
color: #352B27;
font-size: 15px;
font-weight: 300;
letter-spacing: -.01em;
}
.service-accordion__list li::before {
content: "";
flex: none;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--service-accent);
opacity: .75;
transform:
translateY(-2px);
}
/* small secondary note closing the list, shared by the starred entries */
.service-accordion__list .service-accordion__note {
display: block;
grid-column: 1 / -1;
margin-top: -2px;
font-size: 12px;
line-height: 1.35;
letter-spacing: 0;
opacity: .6;
}
.service-accordion__list .service-accordion__note::before {
content: none;
}
/* ============================================================
SERVICES — DESKTOP / TABLET ACCORDION
same cards as mobile, wider and airier; starts right above
the mobile breakpoint (max-width: 700px), which stays as is
============================================================ */
@media (min-width: 701px) {
.services-mobile {
display: block;
max-width: 1120px;
margin-top:
clamp(
50px,
5vw,
80px
);
}
.service-accordion {
margin-bottom: 14px;
border-radius: var(--radius-lg);
}
.service-accordion__trigger {
gap: 40px;
padding:
34px
clamp(32px, 3.4vw, 52px);
transition:
padding .45s var(--ease);
}
/* open card: more air above the title, content pulled up to it */
.service-accordion.is-open
.service-accordion__trigger {
padding-top: 46px;
padding-bottom: 22px;
}
.service-accordion__title {
font-size:
clamp(
34px,
3.2vw,
50px
);
/* the heading font's "normal" leading adds ~25px of empty band */
line-height: 1.1;
}
.service-accordion__indicator {
width: 44px;
height: 44px;
}
.service-accordion__indicator::before {
width: 13px;
}
.service-accordion__indicator::after {
height: 13px;
}
/* description on the left, services on the right */
.service-accordion__panel {
display: grid;
grid-template-columns:
minmax(0, 1fr)
minmax(0, 1.3fr);
gap: clamp(30px, 5vw, 90px);
padding:
0
clamp(32px, 3.4vw, 52px);
transition:
max-height .55s var(--ease),
opacity .45s ease;
}
.service-accordion__desc {
max-width: 36ch;
margin: 0;
font-size: 15px;
}
.service-accordion__list {
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 14px 36px;
margin: 0;
padding:
0
0
44px;
}
.service-accordion__list li {
font-size: 16px;
}
}
/* narrow tablets: description above the list */
@media (min-width: 701px) and (max-width: 950px) {
.service-accordion__panel {
grid-template-columns: 1fr;
gap: 22px;
}
}
/* ============================================================
PACKAGES
============================================================ */
.packages {
position: relative;
z-index: 20;
padding:
clamp(
90px,
8vw,
130px
)
6.7vw
clamp(
90px,
8vw,
130px
);
background: var(--paper);
border-top:
1px solid
var(--line);
}
.packages__heading {
display: grid;
grid-template-columns:
minmax(0, 1fr)
330px;
gap: 50px;
align-items: end;
}
.packages__heading
.section-label {
grid-column:
1 / -1;
color: var(--deep-sage);
}
.packages__heading h2 {
font-size:
clamp(
50px,
5.4vw,
92px
);
font-weight: 300;
line-height: .95;
letter-spacing: -.055em;
}
.packages__heading > p {
color:
rgba(41, 35, 31, .58);
font-size: 14px;
font-weight: 300;
line-height: 1.6;
}
/* OFFERS */
.offers {
display: grid;
grid-template-columns:
repeat(
3,
minmax(0, 1fr)
);
gap:
clamp(
16px,
1.6vw,
26px
);
margin-top:
clamp(
50px,
5vw,
80px
);
list-style: none;
}
.offers__item {
display: flex;
}
.offer {
--tint: #F1E4D4;
--accent: var(--wine);
position: relative;
isolation: isolate;
overflow: hidden;
width: 100%;
display: flex;
flex-direction: column;
padding:
clamp(
26px,
2.4vw,
38px
);
border-radius: 26px;
background: var(--tint);
transition:
transform .8s var(--ease),
background-color .8s var(--ease),
opacity .6s ease;
}
/* 01 — stone / olive-beige */
.offer--one {
--tint: #D9D2C1;
--accent: #69705A;
}
/* 02 — arch, warm sand */
.offer--multi {
--tint: #EAD7BF;
--accent: #A37A50;
padding-top:
clamp(
70px,
6vw,
96px
);
border-radius:
50%
50%
26px
26px /
clamp(170px, 15vw, 230px)
clamp(170px, 15vw, 230px)
26px
26px;
}
.offer--multi
.offer__top {
justify-content: center;
flex-direction: column;
align-items: center;
gap: 16px;
}
.offer--multi
.offer__title,
.offer--multi
.offer__text {
text-align: center;
}
.offer--multi
.offer__text {
margin-inline: auto;
}
/* 03 — taupe with a faint wine undertone, dashed wine outline */
.offer--custom {
--tint: #DBC8BE;
--accent: #713D45;
}
.offer--custom::after {
content: "";
position: absolute;
inset: 9px;
z-index: -1;
border:
1px dashed
rgba(113, 61, 69, .38);
border-radius: 19px;
pointer-events: none;
}
.offer__top {
display: flex;
/* only the glyph now: it stays top-right */
justify-content: flex-end;
align-items: flex-start;
/* a card without glyph keeps its title level with the others */
min-height: 42px;
}
.offer__glyph {
width: 42px;
height: 42px;
fill: none;
stroke: var(--accent);
stroke-width: 1.1;
stroke-linecap: round;
overflow: visible;
transition:
transform 1s var(--ease);
}
.offer__lines {
stroke-dasharray: 12;
stroke-dashoffset: 0;
transition:
stroke-dashoffset 1s var(--ease);
}
.offer__sheet {
fill: var(--tint);
transform-box: fill-box;
transform-origin: 50% 100%;
transition:
transform .9s var(--ease);
}
.offer__sheet--back {
transform:
translate(-3px, -2px)
rotate(-7deg);
}
.offer__sheet--mid {
transform:
rotate(-2deg);
}
.offer__sheet--front {
transform:
translate(3px, 1px)
rotate(4deg);
}
.offer__title {
margin-top:
clamp(
34px,
3.4vw,
56px
);
font-size:
clamp(
48px,
4.6vw,
80px
);
font-weight: 300;
line-height: .9;
letter-spacing: -.06em;
}
.offer__title .accent {
display: inline-block;
color: var(--accent);
transition:
transform .9s var(--ease);
}
.offer__text {
max-width: 300px;
margin-top: 24px;
color:
rgba(41, 35, 31, .62);
font-size: 14px;
font-weight: 300;
line-height: 1.6;
}
.offer__label {
margin-top: 40px;
color:
rgba(41, 35, 31, .45);
font-family: var(--font-accent);
font-size: 8px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .1em;
}
.offer__list {
display: grid;
gap: 9px;
margin-top: 16px;
margin-bottom: 40px;
list-style: none;
}
.offer__list li {
display: flex;
align-items: baseline;
gap: 12px;
color:
rgba(41, 35, 31, .78);
font-size: 13.5px;
font-weight: 300;
line-height: 1.35;
}
.offer__list li::before {
content: "";
flex: none;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--accent);
opacity: .55;
transform:
translateY(-2px);
}
.offer--multi
.offer__label,
.offer--multi
.offer__list {
align-self: center;
}
.offer__foot {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
margin-top: auto;
padding-top: 20px;
border-top:
1px solid
rgba(41, 35, 31, .10);
}
.offer__price {
font-size: 24px;
font-weight: 300;
letter-spacing: -.03em;
white-space: nowrap;
}
.offer__price .accent {
margin-right: 3px;
color:
rgba(41, 35, 31, .5);
font-size: 15px;
letter-spacing: 0;
}
.offer__price sup {
margin-left: 2px;
color: var(--ochre);
font-size: 13px;
}
.offer__price--quote .accent {
margin: 0;
color: var(--ink);
font-size: 24px;
letter-spacing: -.03em;
}
.offer__arrow {
width: 38px;
height: 38px;
flex: none;
display: grid;
place-items: center;
border:
1px solid
rgba(41, 35, 31, .16);
border-radius: 50%;
font-size: 13px;
transition:
transform .8s var(--ease),
background-color .5s ease,
border-color .5s ease,
color .5s ease;
}
.offer:focus-visible {
outline:
1px solid
var(--accent);
outline-offset: 5px;
}
/* HOVER — only where a real pointer exists */
@media (hover: hover) and (pointer: fine) {
.offers:hover
.offer:not(:hover) {
opacity: .72;
}
.offer:hover {
transform:
translateY(-8px);
}
.offer:hover
.offer__title .accent {
transform:
translateX(.14em)
rotate(-2deg);
}
.offer--multi:hover
.offer__title .accent {
transform:
translateY(-.04em)
rotate(-2deg);
}
.offer:hover
.offer__arrow {
transform:
rotate(45deg);
background: var(--ink);
border-color: var(--ink);
color: var(--paper);
}
.offer--one:hover
.offer__glyph {
transform:
rotate(-6deg)
translateY(-2px);
}
.offer--one:hover
.offer__lines {
stroke-dashoffset: 24;
}
.offer--multi:hover
.offer__sheet--back {
transform:
translate(-10px, -1px)
rotate(-16deg);
}
.offer--multi:hover
.offer__sheet--mid {
transform:
translate(-1px, -3px)
rotate(-3deg);
}
.offer--multi:hover
.offer__sheet--front {
transform:
translate(9px, 0)
rotate(12deg);
}
}
.packages__note {
max-width: 560px;
margin:
clamp(
36px,
3.5vw,
54px
)
auto
0;
color:
rgba(41, 35, 31, .5);
font-size: 12.5px;
font-weight: 300;
line-height: 1.6;
text-align: center;
}
.packages__note span {
margin-right: 2px;
color: var(--ochre);
font-size: 14px;
}
/* three-up layout: the whole section fits in one screen,
so every size also answers to the viewport height */
@media (min-width: 851px) {
.packages {
padding-block:
clamp(
34px,
5.5vh,
90px
);
}
.packages__heading h2 {
font-size:
clamp(
38px,
min(5.4vw, 7.4vh),
92px
);
}
.offers {
margin-top:
clamp(
22px,
3.6vh,
60px
);
}
.offer {
padding:
clamp(
20px,
min(2.4vw, 3vh),
38px
);
}
.offer--multi {
padding-top:
clamp(
34px,
min(6vw, 5.4vh),
96px
);
}
.offer__top {
min-height:
clamp(
30px,
4.2vh,
42px
);
}
.offer__glyph {
width:
clamp(
30px,
4.2vh,
42px
);
height:
clamp(
30px,
4.2vh,
42px
);
}
.offer--multi
.offer__top {
gap: 0;
}
.offer__title {
margin-top:
clamp(
8px,
min(3.4vw, 1.6vh),
56px
);
font-size:
clamp(
36px,
min(4.6vw, 6.4vh),
80px
);
}
.offer__text {
margin-top:
clamp(
10px,
1.8vh,
24px
);
line-height: 1.5;
}
.offer--multi
.offer__text {
max-width: 380px;
}
.offer__label {
margin-top:
clamp(
14px,
2.6vh,
40px
);
}
.offer__list {
gap:
clamp(
4px,
.8vh,
9px
);
margin-top:
clamp(
8px,
1.4vh,
16px
);
margin-bottom:
clamp(
14px,
2.6vh,
40px
);
}
.offer__foot {
padding-top:
clamp(
10px,
1.6vh,
20px
);
}
.offer__arrow {
width: 34px;
height: 34px;
}
.packages__note {
margin-top:
clamp(
14px,
2.4vh,
54px
);
}
}
/* ============================================================
CONTACT
============================================================ */
.contact {
position: relative;
z-index: 20;
overflow: hidden;
padding:
clamp(
64px,
7vw,
100px
)
6.7vw
clamp(
44px,
5vw,
64px
);
background: #4B4B40;
color: var(--ink);
}
.contact-shape {
position: absolute;
right: -6vw;
bottom: -8vw;
width: min(22vw, 300px);
height: min(22vw, 300px);
background:
radial-gradient(
circle at 35% 30%,
rgba(242, 231, 216, .08),
rgba(242, 231, 216, .025) 45%,
rgba(242, 231, 216, 0) 72%
);
border-radius: 62% 38% 55% 45% / 48% 60% 40% 52%;
filter: blur(6px);
opacity: .5;
pointer-events: none;
animation: contact-shape-drift 34s ease-in-out infinite;
}
@keyframes contact-shape-drift {
0%,
100% {
border-radius: 62% 38% 55% 45% / 48% 60% 40% 52%;
transform: rotate(0deg) scale(1);
}
50% {
border-radius: 45% 55% 48% 52% / 55% 45% 58% 42%;
transform: rotate(6deg) scale(1.05);
}
}
.contact-panel {
position: relative;
z-index: 2;
max-width: 720px;
margin: 0 auto;
padding:
clamp(32px, 4vw, 54px);
border: 1px solid rgba(113, 61, 69, .18);
border-radius: 8px;
background: var(--paper);
}
.contact-intro {
max-width: 40ch;
}
.contact__label {
color: var(--wine);
font-family: var(--font-accent);
font-size: 10.5px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: .10em;
}
.contact__title {
margin-top: 12px;
color: var(--ink);
font-size:
clamp(
24px,
2.6vw,
31px
);
font-weight: 400;
line-height: 1.35;
letter-spacing: -.01em;
}
.contact-cards {
margin-top: 32px;
border-top:
1px solid
rgba(41, 35, 31, .14);
}
.contact-card {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 21px 2px;
border-bottom:
1px solid
rgba(41, 35, 31, .14);
transition:
border-color .3s ease,
background-color .3s ease;
}
.contact-card:hover {
background: rgba(113, 61, 69, .045);
border-color: rgba(113, 61, 69, .28);
}
.contact-card__main {
display: flex;
align-items: center;
gap: 18px;
min-width: 0;
transition: transform .3s var(--ease);
}
.contact-card:hover .contact-card__main {
transform: translateX(2px);
}
.contact-card__icon {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 40px;
height: 40px;
border: 1px solid rgba(113, 61, 69, .32);
border-radius: 50%;
color: var(--wine);
transition:
border-color .3s ease,
color .3s ease;
}
.contact-card__icon svg {
width: 18px;
height: 18px;
}
.contact-card:hover .contact-card__icon {
border-color: var(--wine);
color: var(--wine);
}
.contact-card__body {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.contact-card__label {
color: var(--wine);
font-family: var(--font-accent);
font-size: 10.5px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: .10em;
}
.contact-card__value {
overflow: hidden;
color: var(--ink);
font-size: 18px;
font-weight: 400;
line-height: 1.3;
letter-spacing: -.005em;
text-overflow: ellipsis;
white-space: nowrap;
}
.contact-card__arrow {
flex: 0 0 auto;
color: var(--wine);
font-size: 19px;
transition:
transform .3s var(--ease),
color .3s ease;
}
.contact-card:hover .contact-card__arrow {
color: var(--wine);
transform: translate(3px, -3px);
}
.contact-meta {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 28px;
}
.contact-meta__label {
color: rgba(113, 61, 69, .75);
font-family: var(--font-accent);
font-size: 10.5px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: .10em;
}
.contact-meta__value {
font-size: 16px;
font-weight: 400;
color: var(--ink);
letter-spacing: -.005em;
}
.site-footer {
position: relative;
z-index: 2;
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-top:
clamp(
40px,
5vw,
56px
);
padding-top: 22px;
border-top:
1px solid
rgba(242, 231, 216, .18);
color:
rgba(242, 231, 216, .58);
font-family: var(--font-accent);
font-size: 9px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: .08em;
}
.site-footer__brand {
display: flex;
flex-direction: column;
gap: 6px;
}
.site-footer__name {
color: rgba(242, 231, 216, .75);
}
.site-footer__meta {
display: flex;
align-items: center;
gap: 20px;
}
.site-footer__top {
display: inline-flex;
align-items: center;
gap: 6px;
transition: color .3s ease;
}
.site-footer__top:hover {
color: var(--paper);
}
.site-footer__top-arrow {
display: inline-block;
transition: transform .35s var(--ease);
}
.site-footer__top:hover .site-footer__top-arrow {
transform: translateY(-3px);
}
/* ============================================================
REVEALS
============================================================ */
[data-reveal] {
opacity: 0;
transform:
translateY(28px);
transition:
opacity .85s var(--ease),
transform .9s var(--ease);
}
[data-reveal].is-visible {
opacity: 1;
transform: none;
}
/* ============================================================
TABLET
============================================================ */
@media (max-width: 1100px) {
.intro-section {
grid-template-columns:
56%
44%;
}
.intro-content {
padding-left: 45px;
padding-right: 45px;
}
.intro-copy {
gap: 30px;
}
.intro-portrait__image,
.intro-portrait__caption {
width:
min(
88%,
480px
);
}
.project-heading {
grid-template-columns:
80px
1fr
280px;
}
}
/* ============================================================
TABLET STACK
============================================================ */
@media (max-width: 850px) {
.projects-duo {
grid-template-columns: 1fr;
}
.projects-duo
.project--maga {
border-right: none;
border-bottom:
1px solid
var(--line);
}
.nav {
grid-template-columns:
1fr
auto;
padding: 28px;
}
.brand-sub {
white-space: nowrap;
}
.nav-links {
display: none;
}
.nav-toggle {
display: block;
}
.mobile-menu {
display: flex;
}
.intro-section {
grid-template-columns: 1fr;
min-height: 0;
}
.intro-content {
min-height: 590px;
padding:
80px
48px
90px;
}
.intro-copy {
max-width: 680px;
}
.intro-meta {
left: 48px;
}
.intro-portrait {
min-height: 680px;
border-left: 0;
border-top:
1px solid
rgba(102, 112, 95, .22);
}
.intro-portrait__image,
.intro-portrait__caption {
width:
min(
64%,
480px
);
}
.case__head {
grid-template-columns: 1fr;
gap: 18px;
}
.project-heading {
grid-template-columns:
60px
1fr;
}
.packages__heading {
grid-template-columns: 1fr;
}
.packages__heading > p {
max-width: 520px;
}
.offers {
grid-template-columns: 1fr;
max-width: 560px;
margin-inline: auto;
}
}
/* ============================================================
MOBILE
============================================================ */
@media (max-width: 700px) {
.hero {
position: relative;
min-height: 100svh;
}
.brand {
gap: 14px;
}
.brand-name {
font-size: 38px;
}
.brand-sub {
font-size: 8.5px;
letter-spacing: .14em;
}
.hero-kicker {
letter-spacing: .07em;
}
.section-label,
.eyebrow,
.project-count,
.contact__label,
.contact-card__label,
.contact-meta__label,
.site-footer {
letter-spacing: .07em;
}
.hero-art {
inset: 0;
-webkit-mask-image:
linear-gradient(
180deg,
rgba(0, 0, 0, .25),
#000
);
mask-image:
linear-gradient(
180deg,
rgba(0, 0, 0, .25),
#000
);
}
.hero-art-fade {
background:
linear-gradient(
90deg,
rgba(247, 235, 221, .76),
rgba(247, 235, 221, .18) 75%
);
}
.hero-copy {
left: 28px;
top: 43%;
width:
calc(
100% - 56px
);
}
.hero-copy h1 {
font-size:
clamp(
32px,
8.8vw,
46px
);
line-height: 1.08;
}
.hero-copy__accent {
font-size: .84em;
}
.hero-description {
max-width: 330px;
margin-top: 24px;
font-size: 13px;
line-height: 1.6;
}
.layout-grid,
.palette-card {
display: none;
}
.hero-discover {
left: 28px;
}
/* INTRO */
.intro-content {
min-height: auto;
padding:
68px
28px
82px;
}
.intro-content h2 {
font-size: 40px;
}
.intro-copy {
grid-template-columns: 1fr;
gap: 22px;
margin-top: 32px;
padding-top: 22px;
}
.intro-copy__primary {
max-width: none;
font-size: 18px;
}
.intro-copy__secondary {
max-width: 390px;
font-size: 15px;
}
.intro-link {
margin-top: 32px;
}
.intro-meta {
display: none;
}
.intro-portrait {
min-height: auto;
padding:
54px
28px
58px;
}
.intro-portrait__image,
.intro-portrait__caption {
width:
min(
86%,
420px
);
}
.intro-portrait__caption {
flex-direction: column;
gap: 5px;
}
/* WORK INTRO */
.works-intro {
padding:
50px
28px
32px;
}
.works-intro__top {
margin-bottom: 23px;
}
.works-intro__bottom {
grid-template-columns: 1fr;
gap: 14px;
}
.works-intro h2 {
font-size:
clamp(
38px,
11vw,
52px
);
}
.works-intro__bottom p {
max-width: 390px;
padding-bottom: 0;
font-size: 13px;
}
/* LORENZO */
.project--case {
padding:
56px
20px
72px;
}
.case__head {
margin-bottom: 14px;
}
.case__title-wrap {
display: block;
}
.case__title {
margin-top: 8px;
font-size: 40px;
}
.case__meta {
grid-template-columns: 1fr;
gap: 16px;
margin-top: 18px;
}
.lorenzo-preview__nav {
display: none;
}
.lorenzo-preview__brand img {
width: 28px;
height: 28px;
}
/* OTHER PROJECTS */
.project--editorial {
padding:
72px
28px;
}
.project-heading {
grid-template-columns: 1fr;
gap: 14px;
}
.project-heading
.project-count,
.project-heading > div {
grid-column: 1;
}
.project-heading h3 {
font-size:
clamp(
48px,
14vw,
72px
);
}
.project-live,
.project-live--offset {
width: 100%;
margin:
38px
0
0;
}
/* coloured frame kept on mobile, with a thinner border */
.project-reel__frame {
padding: 22px;
}
.project-browser {
aspect-ratio:
4 / 3;
}
.project-browser__bar {
height: 30px;
}
.project-browser iframe {
height:
calc(
100% - 30px
);
}
.project-live__veil {
inset:
30px
0
0;
}
.project-live__cta {
right: 10px;
bottom: 10px;
opacity: 1;
transform: none;
}
/* SERVICES */
.services {
padding:
72px
28px
95px;
}
.services__heading h2 {
font-size:
clamp(
24px,
7vw,
34px
);
}
.service-tab {
grid-template-columns:
1fr
30px;
}
.service-tab strong {
font-size:
clamp(
31px,
9vw,
40px
);
}
.service-tab p {
font-size: 13px;
}
.services__layout {
display: none;
}
.services-mobile {
display: block;
}
/* PACKAGES */
.packages {
padding:
72px
28px
90px;
}
.packages__heading h2 {
font-size: 48px;
}
.packages__heading {
gap: 22px;
}
.offers {
gap: 14px;
margin-top: 44px;
}
.offer {
padding: 28px 24px 24px;
border-radius: 22px;
}
.offer--multi {
padding-top: 64px;
border-radius:
50%
50%
22px
22px /
150px
150px
22px
22px;
}
.offer--custom::after {
inset: 7px;
border-radius: 16px;
}
.offer__title {
margin-top: 28px;
font-size: 54px;
}
.offer__label {
margin-top: 30px;
}
.offer__list {
margin-bottom: 30px;
}
.offer__list li {
font-size: 14px;
}
.packages__note {
text-align: left;
}
/* CONTACT */
.contact {
padding:
64px
20px
36px;
}
.contact-shape {
width: 55vw;
height: 55vw;
opacity: .3;
}
.contact-panel {
max-width: none;
padding: 24px;
}
.contact-intro {
max-width: none;
}
.contact-card {
align-items: flex-start;
gap: 12px;
}
.contact-card__main {
gap: 14px;
}
.contact-card__icon {
width: 34px;
height: 34px;
}
.contact-card__icon svg {
width: 16px;
height: 16px;
}
.contact-card__value {
overflow-wrap: anywhere;
font-size: 16px;
white-space: normal;
}
.contact-card__arrow {
margin-top: 2px;
}
.site-footer {
flex-direction: column;
align-items: flex-start;
gap: 16px;
margin-top: 64px;
}
.site-footer__meta {
gap: 16px;
}
}
/* ============================================================
REDUCED MOTION
============================================================ */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration:
.01ms !important;
transition-duration:
.01ms !important;
}
[data-reveal] {
opacity: 1 !important;
transform: none !important;
}
.intro-portrait__reveal {
display: none !important;
}
.lorenzo-preview__media,
.lm-hero-media {
transform: none !important;
}
}
/* ============================================================
TEST — DX SILLAGE TRACKING
The titles above were tracked tightly for Arima Madurai (down to
-.06em). Sillage has a darker stroke and touches at those values,
so its titles are opened up here. Remove this block together with
the "DX Sillage" @font-face to go back.
============================================================ */
.hero-copy h1 {
letter-spacing: .012em;
}
.intro-content h2,
.works-intro h2,
.case__title,
.project-heading h3,
.concepts-heading h2,
.concept__title,
.services__heading h2,
.service-accordion__title,
.packages__heading h2,
.offer__title,
.offer__price,
.offer__price--quote .accent,
.contact__title {
letter-spacing: -.005em;
}
/* ============================================================
BROADWAY FLOWER — LOGO, H1, SECTION H2
Only the brand and the main titles; menu, buttons, labels and
running text keep their current faces. Case is left as written
in the HTML (only the logo is set in capitals). Its ligatures
are built for capital pairs (HE, LL, ST, TH…), so they show in
the logo; they stay on everywhere the face is used.
============================================================ */
:root {
--font-display: "Broadway Flower", var(--font-heading);
}
.brand-name,
.hero-copy h1,
.intro-content h2,
.works-intro h2,
.concepts-heading h2,
.services__heading h2,
.packages__heading h2,
.contact__title {
font-family: var(--font-display);
font-weight: 400;
font-synthesis: none;
font-variant-ligatures: common-ligatures;
font-feature-settings: "liga" 1;
}
/* logo: capitals, so the HE and LL ligatures form */
.brand-name {
text-transform: uppercase;
}
/* tracking: Broadway Flower is spaced for display sizes already */
.hero-copy h1,
.intro-content h2,
.works-intro h2,
.concepts-heading h2,
.services__heading h2,
.packages__heading h2,
.contact__title {
letter-spacing: 0;
}
/* logo: one line, a little smaller than the old signature, which
ran small for its size */
.nav .brand-name {
font-size: 40px;
letter-spacing: .02em;
white-space: nowrap;
}
@media (max-width: 700px) {
.nav .brand-name {
font-size: 30px;
}
/* the last line ("e orientamento creativo.") must fit in one,
or the "e" is left alone on its own line */
.hero-copy__accent {
font-size: .78em;
}
}
@media (max-width: 480px) {
.nav .brand-name {
font-size: 25px;
}
}
/* also the concept titles (Elena & Alex, Mongolfiere, Il Cavaliere)
and the three service titles (Web, Creative Direction, Digital
Presence) */
.concept__title,
.service-accordion__title {
font-family: var(--font-display);
font-weight: 400;
font-synthesis: none;
font-variant-ligatures: common-ligatures;
font-feature-settings: "liga" 1;
letter-spacing: 0;
}
/* the three project titles: Lorenzo Magnanini (.case__title),
La Maga Alchemy and Pomeranze (.project-heading h3) */
.case__title,
.project-heading h3 {
font-family: var(--font-display);
font-weight: 400;
font-synthesis: none;
font-variant-ligatures: common-ligatures;
font-feature-settings: "liga" 1;
letter-spacing: 0;
}
/* logo written as "DELPHi TERHELL" in the HTML: no forced capitals,
or the lowercase i would lose its dot */
.brand-name {
text-transform: none;
}
/* "Digital Creative", small beside the wordmark, in the same face */
.brand-sub {
font-family: var(--font-display);
font-weight: 400;
font-synthesis: none;
font-variant-ligatures: common-ligatures;
font-feature-settings: "liga" 1;
}
/* Broadway Flower needs a little more size than Bhavuka did at
the smallest settings to stay readable */
@media (max-width: 700px) {
.nav .brand-sub,
.mobile-menu .brand-sub {
font-size: 9.5px;
}
}
/* ============================================================
TEST — ARIMA MADURAI FOR DESCRIPTIONS
Descriptive paragraphs only; menu, buttons, labels, lists and
notes keep their fonts. Every text size here was set for Bhavuka
at 125% (x-height ≈ .5 of the font size): font-size-adjust gives
Arima the same x-height, so the sizes can stay as they are.
============================================================ */
.hero-description,
.intro-copy__primary,
.intro-copy__secondary,
.concepts-heading p,
.concept__place,
.service-accordion__desc,
.packages__heading p,
.offer__text {
font-family: "Arima Madurai", serif;
font-weight: 400;
font-synthesis: none;
font-size-adjust: .5;
letter-spacing: 0;
}
/* formule titles: One page, Multi page, Custom website */
.offer__title {
font-family: var(--font-display);
font-weight: 400;
font-synthesis: none;
font-variant-ligatures: common-ligatures;
font-feature-settings: "liga" 1;
letter-spacing: 0;
}
/* menu: header links and the mobile menu */
.nav-links a,
.mobile-menu__links a {
font-family: var(--font-display);
font-weight: 400;
font-synthesis: none;
font-variant-ligatures: common-ligatures;
font-feature-settings: "liga" 1;
}
/* at menu sizes the capital ligatures (CH, CO, NT, TT, RO) turn
"CONTATTI" into an unreadable cluster: plain letters here */
.nav-links a {
font-variant-ligatures: none;
font-feature-settings: "liga" 0;
}
/* works only: the concept intro and descriptions go back to
Broadway Flower; every other description stays in Arima Madurai */
.concepts-heading p,
.concept__place {
font-family: var(--font-display);
font-size-adjust: none;
font-variant-ligatures: common-ligatures;
font-feature-settings: "liga" 1;
letter-spacing: .01em;
}
/* the three projects' rows (Servizi / Settore / Online) */
.case__meta dt,
.case__meta dd,
.case__meta dd a {
font-family: var(--font-display);
font-weight: 400;
font-synthesis: none;
}
.case__meta dd {
font-variant-ligatures: common-ligatures;
font-feature-settings: "liga" 1;
}
/* the small capital labels: plain letters, as in the menu, or
"SETTORE" collapses into its ST, TT and RE ligatures */
.case__meta dt {
font-variant-ligatures: none;
font-feature-settings: "liga" 0;
}
/* Bhavuka was scaled 125% at 8px; Broadway Flower is not */
.case__meta dt {
font-size: 10px;
}
/* descriptions read too small: about 12% larger throughout */
.hero-description,
.intro-copy__primary,
.intro-copy__secondary,
.service-accordion__desc,
.packages__heading p,
.offer__text {
font-size-adjust: .56;
}
.concepts-heading p,
.concept__place {
font-size: 15px;
}
.hero-description {
font-size: 15px;
}
/* formule prices: "da €399", "da €599", "su preventivo" */
.offer__price,
.offer__price .accent,
.offer__price--quote .accent {
font-family: var(--font-display);
font-weight: 400;
font-synthesis: none;
font-variant-ligatures: common-ligatures;
font-feature-settings: "liga" 1;
letter-spacing: 0;
}
/* ============================================================
LOGO — A SMALL SUN AS THE DOT OF THE i
The HTML uses the dotless ı; the sun sits where Broadway
Flower's dot would be (centred on the stem, with a small gap
above it), in the palette's gold
============================================================ */
.brand-sun-i {
position: relative;
display: inline-block;
}
.brand-sun-i::after {
content: "";
position: absolute;
left: 50%;
bottom: .76em;
width: .27em;
height: .27em;
background-color: var(--ochre);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4.4'/%3E%3Cg stroke='%23000' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M12 1.6v3M12 19.4v3M1.6 12h3M19.4 12h3M4.6 4.6l2.1 2.1M17.3 17.3l2.1 2.1M4.6 19.4l2.1-2.1M17.3 6.7l2.1-2.1'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4.4'/%3E%3Cg stroke='%23000' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M12 1.6v3M12 19.4v3M1.6 12h3M19.4 12h3M4.6 4.6l2.1 2.1M17.3 17.3l2.1 2.1M4.6 19.4l2.1-2.1M17.3 6.7l2.1-2.1'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
transform: translateX(-50%);
pointer-events: none;
}
/* works: descriptions a step larger (concepts 15 → 17px,
project rows 13 → 15px, their labels 10 → 11px) */
.concepts-heading p,
.concept__place {
font-size: 17px;
}
.case__meta dd {
font-size: 15px;
}
.case__meta dt {
font-size: 11px;
}
/* project rows (Servizi / Settore / Online): larger again,
values 15 → 17px, labels 11 → 12px */
.case__meta dd {
font-size: 17px;
}
.case__meta dt {
font-size: 12px;
}
/* lists (services and formule) in the same face as the
descriptions: Arima Madurai, matched to the same size */
.service-accordion__list li,
.offer__list li {
font-family: "Arima Madurai", serif;
font-weight: 400;
font-synthesis: none;
font-size-adjust: .56;
letter-spacing: 0;
}
/* hero palette cards: colour name and hex code */
.palette-info b,
.palette-info small {
font-family: var(--font-display);
font-weight: 400;
font-synthesis: none;
font-variant-ligatures: common-ligatures;
font-feature-settings: "liga" 1;
}
/* Bhavuka ran at 125%: same apparent size in Broadway Flower */
.palette-info b {
font-size: 16px;
}
.palette-info small {
font-size: 10px;
}
/* ============================================================
HERO — REFINEMENTS
Three lines (the last one never breaks, so the "e" can't be
left alone), a slightly wider and airier subtitle, and a more
evident "Esplora i progetti" whose line draws out on hover
============================================================ */
/* title: a touch more air between the lines, the wine line a
step smaller so the block reads as one editorial shape */
.hero-copy h1 {
line-height: 1.1;
}
.hero-copy__accent {
font-size: .9em;
}
/* subtitle: a measure of ~55 characters, more leading */
.hero-description {
max-width: 430px;
margin-top: 30px;
line-height: 1.72;
}
/* call to action: a little larger and clearer, still a line of
text with its rule, not a button */
.hero-discover {
gap: 20px;
font-size: 12.5px;
letter-spacing: .14em;
transition:
color .6s var(--ease);
}
.hero-discover i {
width: 64px;
transition:
width .8s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
.hero-discover:hover {
color: var(--wine);
}
.hero-discover:hover i {
width: 112px;
}
}
/* keyboard users get the same signal */
.hero-discover:focus-visible i {
width: 112px;
}
@media (max-width: 700px) {
/* the shorter last line fits again at the usual step down */
.hero-copy__accent {
font-size: .86em;
}
.hero-description {
max-width: 340px;
margin-top: 22px;
line-height: 1.66;
}
.hero-discover {
font-size: 12px;
}
}
/* no single word left alone on the last line (e.g. "davvero.") */
.hero-description {
text-wrap: pretty;
}
/* ============================================================
HEADER — SMALL PHONES
Logo, "Digital Creative" and the menu button need ~357px on
one line. Below 380px the studio line moves under the logo
(as the old two-line signature did), so nothing is squeezed
and the button stays fully on screen. Sizes are unchanged.
============================================================ */
/* the brand column may shrink; the button never moves out */
.nav {
grid-template-columns:
minmax(0, 1fr)
auto;
}
@media (max-width: 380px) {
.nav {
align-items: center;
}
.nav .brand {
flex-direction: column;
align-items: flex-start;
gap: 5px;
}
}