/* ====================================================================
HERR VON FUCHS — Website
Editorial / cinematic / mouthwash-inspired layout
==================================================================== */
@import url("tokens.css");
/* Oh Chewy — Glanzwerkstatt brand wordmark */
@font-face {
font-family: "Oh Chewy";
src: url("fonts/OhChewy.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* ROVA — Zunftliga brand wordmark */
@font-face {
font-family: "ROVA";
src: url("fonts/ROVA.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
font-family: var(--font-body);
color: var(--text-body);
background: var(--hvf-bg, var(--color-paper));
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
cursor: auto;
}
@media (hover: none) { body { cursor: auto; } .hvf-cursor { display: none !important; } }
button, a { font: inherit; cursor: pointer; }
@media (hover: none) { button, a { cursor: pointer; } }
img { display: block; max-width: 100%; }
::selection { background: var(--hvf-accent, var(--color-orange)); color: var(--color-white); }
/* ====================================================================
THEME — light (default) / dark, accent override
==================================================================== */
:root {
--hvf-bg: #F4F1EC; /* warm editorial paper */
--hvf-bg-soft: #EAE5DC;
--hvf-fg: #111111;
--hvf-fg-soft: #3C3A36;
--hvf-fg-muted: #807A6F;
--hvf-rule: rgba(17,17,17,0.14);
--hvf-rule-soft: rgba(17,17,17,0.08);
--hvf-accent: #FF5A1F;
--hvf-card: #FFFFFF;
--hvf-density: 0.66; /* editorial density */
--hvf-pad-y: calc(160px * var(--hvf-density));
--hvf-pad-x: clamp(24px, 6vw, 120px);
}
/* ====================================================================
CUSTOM CURSOR
==================================================================== */
.hvf-cursor {
position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999;
width: 12px; height: 12px; border-radius: 50%;
background: var(--hvf-accent);
transform: translate(-50%, -50%);
transition: width .25s cubic-bezier(.2,0,0,1),
height .25s cubic-bezier(.2,0,0,1),
background .2s, mix-blend-mode .2s, opacity .2s;
mix-blend-mode: difference;
will-change: transform, width, height;
}
.hvf-cursor.is-hover { width: 44px; height: 44px; background: var(--hvf-accent); mix-blend-mode: normal; }
.hvf-cursor.is-hover-text { width: 88px; height: 88px; background: var(--hvf-accent); mix-blend-mode: normal; }
.hvf-cursor.is-hover-text::after {
content: attr(data-label); position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-body); font-weight: 600; font-size: 11px;
line-height: 1; text-align: center; text-indent: 0.14em;
letter-spacing: 0.14em; text-transform: uppercase; color: #fff;
}
.hvf-cursor.is-text { width: 2px; height: 22px; border-radius: 0; background: var(--hvf-accent); mix-blend-mode: normal; }
/* ====================================================================
GLOBAL LAYOUT
==================================================================== */
.hvf-pad { padding-inline: var(--hvf-pad-x); }
.hvf-py { padding-block: var(--hvf-pad-y); }
.hvf-py-sm { padding-block: calc(var(--hvf-pad-y) * 0.5); }
.hvf-rule { height: 1px; background: var(--hvf-rule); border: 0; margin: 0; }
.hvf-overline {
font-family: var(--font-body); font-size: 11px; font-weight: 600;
letter-spacing: 0.22em; text-transform: uppercase;
color: var(--hvf-fg-muted);
display: inline-flex; align-items: center; gap: 10px;
}
.hvf-overline::before {
content: ""; display: inline-block; width: 8px; height: 8px;
background: var(--hvf-accent); border-radius: 50%;
}
.hvf-overline--bare::before { display: none; }
/* Display headline (sans-serif, tight tracking) ----------------------- */
.hvf-display {
font-family: var(--font-body);
font-weight: 500; font-style: normal;
line-height: 0.92; letter-spacing: -0.035em;
color: var(--hvf-fg);
margin: 0;
}
.hvf-display em { font-style: italic; color: var(--hvf-accent); font-weight: 400; }
.hvf-display .it { font-style: italic; }
/* Cycling hero word — typewriter ------------------------------------- */
.hvf-cycle {
position: relative;
display: inline-block;
vertical-align: baseline;
color: var(--hvf-accent);
font-style: italic;
}
.hvf-cycle__spacer {
display: inline-block;
white-space: nowrap;
visibility: hidden;
}
.hvf-cycle__inner {
position: absolute;
left: 0;
top: 0;
white-space: nowrap;
display: inline-flex;
align-items: baseline;
}
.hvf-cycle__text {
display: inline;
}
.hvf-cycle__caret {
display: inline-block;
width: 0.06em;
min-width: 2px;
height: 0.82em;
margin-left: 0.05em;
background: var(--hvf-accent);
opacity: 0;
transition: opacity .08s linear;
transform: translateY(0.06em);
}
.hvf-cycle__caret.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.hvf-cycle__caret { display: none; }
}
.hvf-eyebrow { display: inline-block; }
/* ====================================================================
HEADER
==================================================================== */
.hvf-header {
position: fixed; top: 0; left: 0; right: 0; z-index: 80;
padding-inline: var(--hvf-pad-x);
display: flex; align-items: center; justify-content: space-between;
height: 76px;
color: var(--hvf-fg);
background: var(--hvf-bg);
border-bottom: 1px solid var(--hvf-rule);
}
.hvf-header__logo {
display: inline-flex; align-items: center; gap: 10px;
text-decoration: none; color: inherit;
font-family: var(--font-body); font-weight: 700;
font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
}
.hvf-header__logo svg, .hvf-header__logo img { width: 32px; height: 32px; }
.hvf-nav { display: flex; align-items: center; gap: 4px; }
.hvf-nav__link {
position: relative;
padding: 10px 14px;
background: none; border: 0;
color: var(--hvf-fg); text-decoration: none;
font-family: var(--font-body); font-weight: 500;
font-size: 13px; letter-spacing: 0.02em;
}
.hvf-nav__link span { position: relative; display: inline-block; }
.hvf-nav__link span::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -4px;
height: 1px; background: var(--hvf-fg);
transform: scaleX(0); transform-origin: left center;
transition: transform .35s cubic-bezier(.2,0,0,1);
}
.hvf-nav__link:hover span::after { transform: scaleX(1); }
.hvf-nav__link.is-active span::after { transform: scaleX(1); background: var(--hvf-accent); }
.hvf-nav__num {
font-family: var(--font-display); font-style: italic; font-weight: 400;
font-size: 10px; color: var(--hvf-fg-muted); margin-right: 4px;
vertical-align: 4px;
}
.hvf-header__time {
font-family: var(--font-body); font-size: 11px; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--hvf-fg-muted);
display: flex; gap: 14px; align-items: center;
}
.hvf-header__time .dot {
width: 6px; height: 6px; border-radius: 50%; background: var(--hvf-accent);
animation: hvf-pulse 2s infinite;
}
@keyframes hvf-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
/* ====================================================================
MOBILE BURGER + DRAWER
==================================================================== */
.hvf-burger {
display: none;
position: relative;
width: 44px; height: 44px;
margin-right: -10px;
padding: 0;
background: transparent;
border: 0;
color: var(--hvf-fg);
z-index: 2;
}
.hvf-burger span {
position: absolute; left: 10px; right: 10px;
height: 1.5px; background: currentColor;
transition: transform .35s cubic-bezier(.7,0,.3,1),
opacity .2s ease,
top .35s cubic-bezier(.7,0,.3,1);
}
.hvf-burger span:nth-child(1) { top: 16px; }
.hvf-burger span:nth-child(2) { top: 22px; }
.hvf-burger span:nth-child(3) { top: 28px; }
.hvf-burger.is-open { color: var(--hvf-bg); }
.hvf-burger.is-open span:nth-child(1) { top: 22px; transform: rotate(45deg); }
.hvf-burger.is-open span:nth-child(2) { opacity: 0; }
.hvf-burger.is-open span:nth-child(3) { top: 22px; transform: rotate(-45deg); }
.hvf-drawer {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: var(--hvf-fg);
color: var(--hvf-bg);
z-index: 1;
visibility: hidden;
opacity: 0;
clip-path: inset(0 0 100% 0);
transition: clip-path .55s cubic-bezier(.7,0,.3,1),
opacity .25s ease,
visibility 0s linear .55s;
}
.hvf-drawer.is-open {
visibility: visible;
opacity: 1;
clip-path: inset(0 0 0 0);
transition: clip-path .55s cubic-bezier(.7,0,.3,1),
opacity .25s ease,
visibility 0s linear 0s;
}
.hvf-drawer__inner {
position: absolute; inset: 0;
padding: 96px var(--hvf-pad-x) 32px;
display: flex; flex-direction: column; justify-content: space-between;
overflow-y: auto;
overscroll-behavior: contain;
}
.hvf-drawer__nav {
display: flex; flex-direction: column;
border-top: 1px solid rgba(244,241,236,0.16);
}
.hvf-drawer__link {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: baseline;
gap: 18px;
padding: 22px 0;
text-decoration: none;
color: var(--hvf-bg);
border-bottom: 1px solid rgba(244,241,236,0.16);
opacity: 0;
transform: translateY(20px);
transition: opacity .5s cubic-bezier(.2,0,0,1), transform .5s cubic-bezier(.2,0,0,1);
}
.hvf-drawer.is-open .hvf-drawer__link {
opacity: 1;
transform: translateY(0);
}
.hvf-drawer__num {
font-family: var(--font-display); font-style: italic; font-weight: 400;
font-size: 14px;
color: rgba(244,241,236,0.5);
letter-spacing: 0;
}
.hvf-drawer__label {
font-family: var(--font-body); font-weight: 500;
font-size: clamp(40px, 11vw, 64px);
line-height: 1;
letter-spacing: -0.01em;
}
.hvf-drawer__link.is-active .hvf-drawer__label {
color: var(--hvf-accent);
}
.hvf-drawer__arrow {
font-size: 22px;
color: rgba(244,241,236,0.5);
transition: color .2s, transform .2s;
}
.hvf-drawer__link:hover .hvf-drawer__arrow { color: var(--hvf-accent); transform: translate(2px, -2px); }
.hvf-drawer__foot {
display: flex; flex-direction: column; gap: 12px;
padding-top: 32px;
font-family: var(--font-body);
font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
color: rgba(244,241,236,0.6);
}
.hvf-drawer__meta { display: inline-flex; align-items: center; gap: 10px; }
.hvf-drawer__foot .dot {
width: 6px; height: 6px; border-radius: 50%; background: var(--hvf-accent);
animation: hvf-pulse 2s infinite;
}
.hvf-drawer__mail {
color: var(--hvf-bg);
text-decoration: none;
font-family: var(--font-display); font-style: italic; font-weight: 400;
font-size: 22px;
letter-spacing: 0;
text-transform: none;
}
.hvf-drawer__mail:hover { color: var(--hvf-accent); }
/* When the drawer is open: lift the burger above it, invert the logo color */
.hvf-header.is-menu-open { background: transparent; border-bottom-color: transparent; }
.hvf-header.is-menu-open .hvf-header__logo { color: var(--hvf-bg); position: relative; z-index: 2; }
.hvf-header.is-menu-open .hvf-header__logo img { filter: invert(1); }
/* ====================================================================
PAGE TRANSITION
==================================================================== */
.hvf-transition {
position: fixed; inset: 0; z-index: 90; pointer-events: none;
display: flex;
}
.hvf-transition__panel {
flex: 1;
background-image: url("assets/brand-gradient.jpeg");
background-size: 500% 100%;
background-repeat: no-repeat;
transform: scaleY(0); transform-origin: bottom;
}
.hvf-transition__panel:nth-child(1) { background-position: 0% 0; }
.hvf-transition__panel:nth-child(2) { background-position: 25% 0; }
.hvf-transition__panel:nth-child(3) { background-position: 50% 0; }
.hvf-transition__panel:nth-child(4) { background-position: 75% 0; }
.hvf-transition__panel:nth-child(5) { background-position: 100% 0; }
.hvf-transition.is-in .hvf-transition__panel {
transform: scaleY(1);
transition: transform .55s cubic-bezier(.7,0,.3,1);
}
.hvf-transition.is-in .hvf-transition__panel:nth-child(2) { transition-delay: .04s; }
.hvf-transition.is-in .hvf-transition__panel:nth-child(3) { transition-delay: .08s; }
.hvf-transition.is-in .hvf-transition__panel:nth-child(4) { transition-delay: .12s; }
.hvf-transition.is-in .hvf-transition__panel:nth-child(5) { transition-delay: .16s; }
.hvf-transition.is-out .hvf-transition__panel {
transform: scaleY(0); transform-origin: top;
transition: transform .5s cubic-bezier(.7,0,.3,1);
}
.hvf-transition.is-out .hvf-transition__panel:nth-child(2) { transition-delay: .04s; }
.hvf-transition.is-out .hvf-transition__panel:nth-child(3) { transition-delay: .08s; }
.hvf-transition.is-out .hvf-transition__panel:nth-child(4) { transition-delay: .12s; }
.hvf-transition.is-out .hvf-transition__panel:nth-child(5) { transition-delay: .16s; }
.hvf-page { animation: hvf-page-in .6s cubic-bezier(.2,0,0,1) both; }
@keyframes hvf-page-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
/* ====================================================================
HERO (home)
==================================================================== */
.hvf-hero {
padding-top: 150px; padding-bottom: calc(var(--hvf-pad-y) * .5);
position: relative;
background-image:
linear-gradient(180deg, var(--hvf-bg) 0%, rgba(0,0,0,0) 18%, rgba(0,0,0,0) 78%, var(--hvf-bg) 100%),
url("assets/brand-gradient.jpeg");
background-size: cover, cover;
background-position: center, center;
background-repeat: no-repeat, no-repeat;
}
.hvf-hero__meta {
display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px;
font-family: var(--font-body); font-size: 11px;
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--hvf-fg-muted); margin-bottom: 80px;
}
.hvf-hero__meta strong { color: var(--hvf-fg); font-weight: 600; display: block; margin-top: 6px; letter-spacing: 0.12em; }
.hvf-hero__title {
font-size: clamp(64px, 10.5vw, 220px);
line-height: 0.86;
margin: 0;
}
.hvf-hero__title .l { display: block; }
.hvf-hero__title .l--indent { padding-left: 12vw; }
.hvf-hero__title .l--right { text-align: right; }
.hvf-hero__title .arrow {
display: inline-block; vertical-align: middle;
width: 0.7em; height: 0.7em; margin: 0 0.06em 0.06em 0;
}
.hvf-hero__title .arrow svg { width: 100%; height: 100%; fill: var(--hvf-accent); }
.hvf-hero__foot {
display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end;
padding-top: 80px;
}
.hvf-hero__lede {
font-family: var(--font-display); font-style: italic; font-weight: 400;
font-size: clamp(22px, 2.6vw, 34px); line-height: 1.25;
color: var(--hvf-fg-soft); max-width: 36ch; margin: 0;
}
.hvf-hero__cta {
display: inline-flex; align-items: center; gap: 16px;
padding: 18px 28px 18px 28px;
background: var(--hvf-fg); color: var(--hvf-bg);
border: 0; border-radius: 999px;
font-family: var(--font-body); font-weight: 600;
font-size: 14px; letter-spacing: 0.04em;
transition: background .2s, color .2s, padding .2s;
text-decoration: none;
}
.hvf-hero__cta:hover { background: var(--hvf-accent); color: var(--color-white); padding-right: 40px; }
.hvf-hero__cta .arrow { width: 18px; height: 18px; transition: transform .25s; }
.hvf-hero__cta:hover .arrow { transform: translateX(6px); }
/* ====================================================================
SHOWREEL
==================================================================== */
.hvf-reel {
position: relative; aspect-ratio: 21/9;
border-radius: 20px; overflow: hidden;
background: #0c0c0a;
margin-top: 40px;
}
.hvf-reel__bg {
position: absolute; inset: 0;
background:
radial-gradient(ellipse at 65% 35%, rgba(255,90,31,0.5), transparent 55%),
radial-gradient(ellipse at 20% 80%, rgba(44,64,228,0.35), transparent 60%),
linear-gradient(135deg, #0a0a08, #1a1714 55%, #2a1a10);
filter: contrast(1.1) saturate(1.1);
}
.hvf-reel__grain {
position: absolute; inset: 0; pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: overlay; opacity: 0.4;
}
.hvf-reel__meta {
position: absolute; left: 32px; top: 32px; right: 32px;
display: flex; justify-content: space-between; align-items: flex-start;
color: rgba(255,255,255,0.85); font-family: var(--font-body);
font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
}
.hvf-reel__meta .rec { display: inline-flex; align-items: center; gap: 8px; }
.hvf-reel__meta .rec::before {
content: ""; width: 8px; height: 8px; background: #FF3B30; border-radius: 50%;
animation: hvf-pulse 1.2s infinite;
}
.hvf-reel__title {
position: absolute; left: 0; right: 0; bottom: 56px;
text-align: center; padding-inline: 32px;
color: #fff;
font-family: var(--font-display); font-style: italic;
font-size: clamp(40px, 7vw, 110px); line-height: 1; letter-spacing: -0.02em;
margin: 0;
}
.hvf-reel__play {
position: absolute; right: 32px; bottom: 32px;
width: 110px; height: 110px; border-radius: 50%;
background: var(--hvf-accent); color: #fff;
border: 0; display: flex; align-items: center; justify-content: center;
font-family: var(--font-body); font-weight: 600; font-size: 12px;
letter-spacing: 0.14em; text-transform: uppercase;
transition: transform .3s, background .3s;
}
.hvf-reel__play:hover { transform: scale(1.06); background: var(--color-orange-dark); }
.hvf-reel__corners { position: absolute; inset: 16px; pointer-events: none; }
.hvf-reel__corners span { position: absolute; width: 24px; height: 24px; border: 1px solid rgba(255,255,255,0.6); }
.hvf-reel__corners span:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.hvf-reel__corners span:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.hvf-reel__corners span:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.hvf-reel__corners span:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }
/* ====================================================================
MARQUEE
==================================================================== */
.hvf-marquee {
overflow: hidden; padding-block: clamp(40px, 6vw, 90px);
border-block: 1px solid var(--hvf-rule);
background: var(--hvf-bg);
white-space: nowrap;
}
.hvf-marquee__track {
display: inline-flex; gap: 60px;
animation: hvf-marquee 30s linear infinite;
will-change: transform;
}
.hvf-marquee:hover .hvf-marquee__track { animation-play-state: paused; }
@keyframes hvf-marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.hvf-marquee__item {
display: inline-flex; align-items: center; gap: 60px;
font-family: var(--font-display); font-weight: 400;
font-size: clamp(56px, 9vw, 140px); line-height: 1;
letter-spacing: -0.02em; color: var(--hvf-fg);
}
.hvf-marquee__item.it { font-style: italic; color: var(--hvf-accent); }
.hvf-marquee__star {
width: 0.6em; height: 0.6em; flex: 0 0 auto;
fill: var(--hvf-fg);
}
.hvf-marquee__item.it .hvf-marquee__star { fill: var(--hvf-accent); }
/* ====================================================================
SECTION HEAD
==================================================================== */
.hvf-sec-head {
display: grid; grid-template-columns: 1fr 1fr; gap: 64px;
align-items: end; padding-bottom: 80px;
}
.hvf-sec-head__title { font-size: clamp(48px, 7vw, 110px); }
.hvf-sec-head__side {
max-width: 38ch;
font-size: 16px; line-height: 1.55; color: var(--hvf-fg-soft);
}
.hvf-sec-head__side .num {
display: block; font-family: var(--font-display); font-style: italic;
font-size: 32px; color: var(--hvf-accent); margin-bottom: 10px;
}
/* ====================================================================
WORK GRID — asymmetric
==================================================================== */
.hvf-worksec { padding-block: var(--hvf-pad-y); background: var(--hvf-bg); }
.hvf-work-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: clamp(40px, 5vw, 80px) 24px;
}
.hvf-tile {
position: relative; cursor: pointer; text-decoration: none; color: inherit;
}
.hvf-tile__media {
position: relative; overflow: hidden; aspect-ratio: 4/3;
background: var(--hvf-bg-soft);
border-radius: 16px;
transition: transform .6s cubic-bezier(.2,0,0,1);
}
.hvf-tile:hover .hvf-tile__media { transform: scale(.985); }
.hvf-tile__bg {
position: absolute; inset: 0;
background-size: cover; background-position: center;
transform: scale(1.04);
transition: transform .9s cubic-bezier(.2,0,0,1), filter .6s;
}
.hvf-tile:hover .hvf-tile__bg { transform: scale(1.1); filter: contrast(1.05); }
.hvf-tile__img {
position: absolute; inset: 0;
background-size: cover; background-position: center; background-repeat: no-repeat;
transition: transform .9s cubic-bezier(.2,0,0,1), filter .6s;
}
.hvf-tile:hover .hvf-tile__img { transform: scale(1.06); }
.hvf-tile__num {
position: absolute; top: 18px; left: 18px;
font-family: var(--font-display); font-style: italic; font-weight: 400;
font-size: 22px; color: rgba(255,255,255,0.95); text-shadow: 0 1px 8px rgba(0,0,0,0.5);
letter-spacing: 0;
}
.hvf-tile__chip {
position: absolute; top: 18px; right: 18px;
font-family: var(--font-body); font-size: 10px; letter-spacing: 0.18em;
text-transform: uppercase; color: rgba(255,255,255,0.95);
padding: 5px 10px; background: rgba(0,0,0,0.4); backdrop-filter: blur(6px);
border-radius: 999px;
}
.hvf-tile__count {
position: absolute; bottom: 18px; left: 18px;
display: inline-flex; align-items: center; gap: 7px;
font-family: var(--font-body); font-size: 10px; letter-spacing: 0.18em;
text-transform: uppercase; color: rgba(255,255,255,0.95);
padding: 5px 10px 5px 8px;
background: rgba(0,0,0,0.45); backdrop-filter: blur(6px);
border: 1px solid rgba(255,255,255,0.18);
border-radius: 999px;
}
.hvf-tile__count svg { display: block; }
.hvf-tile__meta {
display: flex; justify-content: space-between; align-items: baseline;
padding-top: 18px; gap: 24px;
}
.hvf-tile__client {
font-family: var(--font-body); font-size: 11px; font-weight: 600;
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--hvf-fg-muted);
}
.hvf-tile__title {
font-family: var(--font-display); font-weight: 400; font-style: italic;
font-size: clamp(22px, 2.4vw, 32px); line-height: 1.1; color: var(--hvf-fg);
margin: 4px 0 0;
}
.hvf-tile__year {
font-family: var(--font-display); font-style: italic; font-weight: 400;
font-size: 18px; color: var(--hvf-fg-muted); white-space: nowrap;
}
/* spans for asymmetry */
.hvf-tile--lg { grid-column: span 8; }
.hvf-tile--md { grid-column: span 6; }
.hvf-tile--sm { grid-column: span 4; }
.hvf-tile--off { grid-column: span 5; }
.hvf-tile--off2 { grid-column: 7 / span 5; margin-top: 80px; }
.hvf-tile--full { grid-column: span 12; }
.hvf-tile--lg .hvf-tile__media { aspect-ratio: 16/9; }
.hvf-tile--md .hvf-tile__media { aspect-ratio: 4/3; }
.hvf-tile--sm .hvf-tile__media { aspect-ratio: 3/4; }
.hvf-tile--off .hvf-tile__media { aspect-ratio: 4/5; }
.hvf-tile--off2 .hvf-tile__media { aspect-ratio: 16/11; }
.hvf-tile--full .hvf-tile__media { aspect-ratio: 21/9; }
/* ====================================================================
WORK INDEX — numbered list, hover-preview
==================================================================== */
.hvf-worklist { padding-block: var(--hvf-pad-y); background: var(--hvf-bg); }
.hvf-list {
list-style: none; padding: 0; margin: 0;
border-top: 1px solid var(--hvf-rule);
}
.hvf-list__row {
position: relative;
display: grid; grid-template-columns: 80px 1fr 1fr 200px 60px;
align-items: center; gap: 24px;
padding: 28px 0; border-bottom: 1px solid var(--hvf-rule);
text-decoration: none; color: inherit;
transition: padding .35s cubic-bezier(.2,0,0,1), color .25s;
}
.hvf-list__row:hover { padding-inline: 12px; }
.hvf-list__row:hover .hvf-list__title { color: var(--hvf-accent); font-style: italic; }
.hvf-list__num {
font-family: var(--font-display); font-style: italic;
font-size: 18px; color: var(--hvf-fg-muted);
}
.hvf-list__title {
font-family: var(--font-display); font-weight: 400;
font-size: clamp(28px, 3.6vw, 52px); line-height: 1.05;
color: var(--hvf-fg);
transition: color .25s, font-style .25s;
}
.hvf-list__client {
font-family: var(--font-body); font-size: 13px;
letter-spacing: 0.06em; color: var(--hvf-fg-soft);
}
.hvf-list__tags { display: flex; gap: 6px; flex-wrap: wrap; }
.hvf-list__tag {
font-family: var(--font-body); font-size: 10px;
letter-spacing: 0.18em; text-transform: uppercase; color: var(--hvf-fg-muted);
padding: 4px 10px; border: 1px solid var(--hvf-rule); border-radius: 999px;
}
.hvf-list__arrow {
justify-self: end; width: 32px; height: 32px;
display: flex; align-items: center; justify-content: center;
color: var(--hvf-fg); transition: transform .25s, color .25s;
}
.hvf-list__row:hover .hvf-list__arrow { transform: translate(4px, -4px); color: var(--hvf-accent); }
.hvf-list__preview {
position: fixed; pointer-events: none; z-index: 70;
width: 320px; aspect-ratio: 4/5;
background-size: cover; background-position: center;
border-radius: 12px; overflow: hidden;
opacity: 0; transform: translate(-50%, -50%) scale(0.96);
transition: opacity .25s, transform .35s cubic-bezier(.2,0,0,1);
box-shadow: 0 30px 60px -20px rgba(0,0,0,0.4);
}
.hvf-list__preview.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
/* ====================================================================
SERVICES split
==================================================================== */
.hvf-services { padding-block: var(--hvf-pad-y); background: var(--hvf-bg-soft); }
.hvf-services__head { padding-bottom: 80px; }
.hvf-services__split {
display: grid; grid-template-columns: 1fr 1px 1fr; gap: 80px;
align-items: start;
}
.hvf-services__divider { background: var(--hvf-rule); align-self: stretch; }
.hvf-services__col h3 {
font-family: var(--font-display); font-weight: 400; font-style: italic;
font-size: clamp(36px, 4vw, 56px); line-height: 1; color: var(--hvf-fg);
margin: 0 0 8px;
}
.hvf-services__col .sub {
font-family: var(--font-body); font-size: 12px; letter-spacing: 0.2em;
text-transform: uppercase; color: var(--hvf-fg-muted); margin-bottom: 40px;
}
.hvf-services__list {
list-style: none; padding: 0; margin: 0;
border-top: 1px solid var(--hvf-rule);
}
.hvf-services__item {
display: flex; justify-content: space-between; align-items: center; gap: 16px;
padding: 20px 0; border-bottom: 1px solid var(--hvf-rule);
font-family: var(--font-body); font-size: 17px; color: var(--hvf-fg);
cursor: pointer; transition: padding .3s, color .25s;
}
.hvf-services__item:hover { padding-inline: 8px; color: var(--hvf-accent); }
.hvf-services__item .n {
font-family: var(--font-display); font-style: italic;
font-size: 13px; color: var(--hvf-fg-muted); margin-right: 12px;
}
.hvf-services__item .arrow {
width: 18px; height: 18px; opacity: 0; transition: opacity .25s, transform .25s;
color: var(--hvf-accent);
}
.hvf-services__item:hover .arrow { opacity: 1; transform: translateX(4px); }
/* ====================================================================
CLIENTS LOGO WALL
==================================================================== */
.hvf-clients { padding-block: var(--hvf-pad-y); background: var(--hvf-bg); border-top: 1px solid var(--hvf-rule); }
.hvf-clients__head {
display: flex; justify-content: space-between; align-items: end;
margin-bottom: 60px; gap: 64px;
}
.hvf-clients__head h2 { font-size: clamp(40px, 6vw, 80px); }
.hvf-clients__head p { font-family: var(--font-body); font-size: 14px; color: var(--hvf-fg-soft); max-width: 32ch; }
.hvf-clients__grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.hvf-clients__cell {
height: 140px; display: flex; align-items: center; justify-content: center;
background: #F8F5EF;
border-radius: 16px;
box-shadow: 0 1px 2px rgba(17,17,17,0.03), 0 6px 16px rgba(17,17,17,0.025);
font-family: var(--font-display); font-style: italic; font-weight: 400;
font-size: 28px; color: var(--hvf-fg-soft);
transition: background .25s, color .25s, transform .3s cubic-bezier(.2,0,0,1), box-shadow .3s;
}
.hvf-clients__cell:hover { background: var(--hvf-fg); color: var(--hvf-bg); font-style: normal; transform: translateY(-3px); }
.hvf-clients__cell:has(.hvf-clients__logo):hover {
background: #F8F5EF;
color: inherit;
transform: translateY(-3px);
box-shadow: 0 3px 8px rgba(17,17,17,0.05), 0 12px 30px rgba(17,17,17,0.05);
}
.hvf-clients__cell .sans { font-family: var(--font-body); font-style: normal; font-weight: 700; letter-spacing: 0.04em; font-size: 22px; }
.hvf-clients__logo {
max-width: 64%; max-height: 64px; width: auto; height: auto;
object-fit: contain; display: block;
transition: transform .25s;
}
.hvf-clients__cell:hover .hvf-clients__logo { transform: scale(1.04); }
/* ====================================================================
CONTACT CTA (home)
==================================================================== */
.hvf-cta {
padding-block: var(--hvf-pad-y); background: var(--hvf-fg); color: var(--hvf-bg);
text-align: center; overflow: hidden;
}
.hvf-cta .hvf-overline { color: var(--hvf-bg); }
.hvf-cta .hvf-overline::before { background: var(--hvf-accent); }
.hvf-cta__title {
font-size: clamp(60px, 11vw, 180px); line-height: 0.9;
color: var(--hvf-bg); margin: 40px 0;
}
.hvf-cta__title em { color: var(--hvf-accent); }
.hvf-cta__btn {
display: inline-flex; align-items: center; gap: 16px;
padding: 22px 36px; border-radius: 999px;
background: var(--hvf-accent); color: #fff;
font-family: var(--font-body); font-weight: 600; font-size: 15px;
letter-spacing: 0.06em; text-decoration: none;
transition: padding .25s, background .25s;
border: 0;
}
.hvf-cta__btn:hover { padding-right: 52px; background: #fff; color: var(--hvf-fg); }
.hvf-cta__meta {
margin-top: 60px;
display: flex; justify-content: center; gap: 80px;
font-family: var(--font-body); font-size: 11px; letter-spacing: 0.2em;
text-transform: uppercase; color: rgba(255,255,255,0.55);
}
/* ====================================================================
FOOTER
==================================================================== */
.hvf-footer {
background: var(--hvf-bg); color: var(--hvf-fg);
padding-top: 80px; border-top: 1px solid var(--hvf-rule);
}
.hvf-footer__big {
font-size: clamp(80px, 17vw, 280px); line-height: 0.8;
text-align: center; margin: 0 0 40px;
letter-spacing: -0.03em;
}
.hvf-footer__big em { color: var(--hvf-accent); }
.hvf-footer__cols {
display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 64px;
padding-block: 60px; border-top: 1px solid var(--hvf-rule);
}
.hvf-footer h5 {
font-family: var(--font-body); font-size: 10px; font-weight: 600;
letter-spacing: 0.22em; text-transform: uppercase;
color: var(--hvf-fg-muted); margin: 0 0 16px;
}
.hvf-footer__col { display: flex; flex-direction: column; gap: 8px; }
.hvf-footer__col a, .hvf-footer__col span {
text-decoration: none; color: var(--hvf-fg);
font-family: var(--font-body); font-size: 14px;
}
.hvf-footer__col a:hover { color: var(--hvf-accent); }
.hvf-footer__motto {
font-family: var(--font-display); font-style: italic; font-weight: 400;
font-size: 22px; line-height: 1.3; color: var(--hvf-fg-soft);
max-width: 28ch;
}
.hvf-footer__base {
display: flex; justify-content: space-between; align-items: center;
padding: 28px 0; border-top: 1px solid var(--hvf-rule);
font-family: var(--font-body); font-size: 11px; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--hvf-fg-muted);
}
.hvf-footer__base a { color: inherit; text-decoration: none; margin-left: 24px; }
.hvf-footer__base a:hover { color: var(--hvf-accent); }
/* ====================================================================
PAGE HERO (Work / Services / About / Contact)
==================================================================== */
.hvf-phero { padding: 180px var(--hvf-pad-x) 100px; position: relative; }
.hvf-phero__row {
display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end;
}
.hvf-phero__title { font-size: clamp(72px, 12vw, 200px); }
.hvf-phero__lede {
font-family: var(--font-display); font-style: italic; font-weight: 400;
font-size: clamp(22px, 2.4vw, 30px); line-height: 1.25;
color: var(--hvf-fg-soft); max-width: 36ch; margin: 0;
}
.hvf-phero__crumbs {
display: flex; gap: 8px; font-family: var(--font-body); font-size: 11px;
letter-spacing: 0.18em; text-transform: uppercase; color: var(--hvf-fg-muted);
margin-bottom: 32px;
}
.hvf-phero__crumbs .sep { color: var(--hvf-accent); }
/* ====================================================================
SERVICES PAGE — big disciplines
==================================================================== */
.hvf-disc { padding-block: var(--hvf-pad-y); }
.hvf-disc__row {
display: grid; grid-template-columns: 0.4fr 1.6fr 1fr; gap: 64px;
align-items: start; padding-block: 64px;
border-top: 1px solid var(--hvf-rule);
}
.hvf-disc__row:last-of-type { border-bottom: 1px solid var(--hvf-rule); }
.hvf-disc__num {
font-family: var(--font-display); font-style: italic;
font-size: 32px; color: var(--hvf-accent);
}
.hvf-disc__title {
font-family: var(--font-display); font-weight: 400;
font-size: clamp(40px, 5.5vw, 84px); line-height: 0.95; letter-spacing: -0.02em;
margin: 0 0 24px; color: var(--hvf-fg);
}
.hvf-disc__title em { font-style: italic; color: var(--hvf-accent); font-weight: 400; }
.hvf-disc__desc {
font-family: var(--font-body); font-size: 16px; line-height: 1.6;
color: var(--hvf-fg-soft); max-width: 50ch;
}
.hvf-disc__items {
display: flex; flex-direction: column; gap: 6px;
font-family: var(--font-body); font-size: 14px; color: var(--hvf-fg);
}
.hvf-disc__items .it {
display: flex; justify-content: space-between; padding: 12px 0;
border-bottom: 1px solid var(--hvf-rule-soft);
}
.hvf-disc__items .it .n {
font-family: var(--font-display); font-style: italic;
color: var(--hvf-fg-muted); font-size: 13px;
}
/* ====================================================================
APPROACH grid
==================================================================== */
.hvf-approach { padding-block: var(--hvf-pad-y); background: var(--hvf-bg-soft); }
.hvf-approach__grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
margin-top: 60px;
}
.hvf-approach__card {
padding: 32px; background: var(--hvf-bg);
border: 1px solid var(--hvf-rule);
border-radius: 16px;
display: flex; flex-direction: column; gap: 16px;
min-height: 280px;
}
.hvf-approach__card .num {
font-family: var(--font-display); font-style: italic;
font-size: 18px; color: var(--hvf-accent);
}
.hvf-approach__card h4 {
font-family: var(--font-display); font-weight: 400;
font-size: 28px; line-height: 1.1; color: var(--hvf-fg); margin: 0;
}
.hvf-approach__card p {
font-family: var(--font-body); font-size: 14px; line-height: 1.55;
color: var(--hvf-fg-soft); margin: 0;
}
/* ====================================================================
ABOUT — manifest / team
==================================================================== */
.hvf-manifest { padding-block: var(--hvf-pad-y); }
.hvf-manifest__text {
font-family: var(--font-display); font-weight: 400;
font-size: clamp(28px, 3.8vw, 56px); line-height: 1.15;
letter-spacing: -0.01em; color: var(--hvf-fg);
max-width: 22ch;
}
.hvf-manifest__text em { font-style: italic; color: var(--hvf-accent); }
.hvf-manifest__row {
display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end;
}
.hvf-manifest__side { font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--hvf-fg-soft); max-width: 36ch; }
.hvf-team { padding-block: var(--hvf-pad-y); background: var(--hvf-bg-soft); }
.hvf-team__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 60px; }
.hvf-team__card {
background: var(--hvf-bg);
display: flex; flex-direction: column;
border-radius: 16px;
overflow: hidden;
}
.hvf-team__photo {
aspect-ratio: 3/4; background: var(--hvf-bg-soft);
position: relative; overflow: hidden;
}
.hvf-team__photo .ph {
position: absolute; inset: 0;
background-size: cover; background-position: center;
filter: grayscale(1) contrast(1.05);
transition: filter .4s;
}
.hvf-team__card:hover .ph { filter: grayscale(0) contrast(1.05); }
.hvf-team__body { padding: 20px; }
.hvf-team__body h4 {
font-family: var(--font-display); font-weight: 400;
font-size: 22px; margin: 0; color: var(--hvf-fg);
}
.hvf-team__body h4 em { font-style: italic; color: var(--hvf-accent); }
.hvf-team__body p { font-family: var(--font-body); font-size: 13px; color: var(--hvf-fg-muted); margin: 4px 0 0; letter-spacing: 0.04em; }
.hvf-numbers { padding-block: var(--hvf-pad-y); }
.hvf-numbers__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.hvf-numbers__cell {
border-top: 1px solid var(--hvf-rule); padding-top: 24px;
}
.hvf-numbers__cell .v {
font-family: var(--font-display); font-weight: 400; font-size: clamp(60px, 7vw, 110px);
line-height: 0.9; color: var(--hvf-fg);
}
.hvf-numbers__cell .v em { font-style: italic; color: var(--hvf-accent); }
.hvf-numbers__cell .l { font-family: var(--font-body); font-size: 13px; color: var(--hvf-fg-muted); margin-top: 16px; letter-spacing: 0.06em; }
/* ====================================================================
CONTACT page
==================================================================== */
.hvf-contact { padding-block: var(--hvf-pad-y); }
.hvf-contact__split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 96px; align-items: start; }
.hvf-contact__lead h2 { font-size: clamp(40px, 5.5vw, 80px); margin-bottom: 24px; }
.hvf-contact__lead p { font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--hvf-fg-soft); max-width: 40ch; }
.hvf-contact__info { margin-top: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.hvf-contact__info h5 {
font-family: var(--font-body); font-size: 10px; font-weight: 600;
letter-spacing: 0.22em; text-transform: uppercase; color: var(--hvf-fg-muted);
margin: 0 0 8px;
}
.hvf-contact__info a, .hvf-contact__info span {
font-family: var(--font-display); font-style: italic; font-size: 22px;
text-decoration: none; color: var(--hvf-fg);
}
.hvf-contact__info a:hover { color: var(--hvf-accent); }
.hvf-form { display: flex; flex-direction: column; gap: 20px; }
.hvf-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hvf-form label {
font-family: var(--font-body); font-size: 11px; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--hvf-fg-muted);
display: block; margin-bottom: 8px;
}
.hvf-form input, .hvf-form textarea, .hvf-form select {
width: 100%; padding: 14px 0;
background: transparent; border: 0; border-bottom: 1px solid var(--hvf-rule);
font-family: var(--font-body); font-size: 18px; color: var(--hvf-fg);
outline: none; transition: border-color .2s;
}
.hvf-form textarea { min-height: 120px; resize: vertical; padding-top: 14px; }
.hvf-form input::placeholder, .hvf-form textarea::placeholder { color: var(--hvf-fg-muted); }
.hvf-form input:focus, .hvf-form textarea:focus, .hvf-form select:focus { border-bottom-color: var(--hvf-accent); }
.hvf-form__chips { display: flex; gap: 8px; flex-wrap: wrap; }
.hvf-form__chip {
padding: 10px 16px; border: 1px solid var(--hvf-rule); border-radius: 999px;
background: transparent; color: var(--hvf-fg);
font-family: var(--font-body); font-size: 13px;
transition: background .2s, color .2s, border-color .2s;
}
.hvf-form__chip.is-on { background: var(--hvf-accent); color: #fff; border-color: var(--hvf-accent); }
.hvf-form__submit {
margin-top: 12px;
align-self: flex-start;
display: inline-flex; align-items: center; gap: 14px;
padding: 18px 28px; border-radius: 999px;
background: var(--hvf-fg); color: var(--hvf-bg); border: 0;
font-family: var(--font-body); font-weight: 600; font-size: 14px;
letter-spacing: 0.06em; transition: background .2s, padding .2s;
}
.hvf-form__submit:hover { background: var(--hvf-accent); color: #fff; padding-right: 40px; }
.hvf-form__sent {
padding: 32px; background: var(--hvf-bg-soft); border: 1px solid var(--hvf-rule);
border-radius: 12px;
font-family: var(--font-display); font-style: italic; font-size: 22px; color: var(--hvf-fg);
}
.hvf-form__sent em { color: var(--hvf-accent); }
/* ====================================================================
ABOUT — image strip / parallax
==================================================================== */
.hvf-strip {
display: grid; grid-template-columns: repeat(2, 1fr);
gap: 24px; padding-block: var(--hvf-pad-y);
}
.hvf-strip__item {
aspect-ratio: 3/4; overflow: hidden; position: relative;
background-size: cover; background-position: center;
border-radius: 16px;
will-change: transform;
}
.hvf-strip__item:nth-child(2) { transform: translateY(-60px); }
.hvf-strip__item:nth-child(3) { transform: translateY(40px); }
/* ====================================================================
QUOTE / TESTIMONIAL
==================================================================== */
.hvf-quote { padding-block: var(--hvf-pad-y); border-top: 1px solid var(--hvf-rule); border-bottom: 1px solid var(--hvf-rule); }
.hvf-quote__t {
font-family: var(--font-display); font-weight: 400; font-style: italic;
font-size: clamp(32px, 4.5vw, 64px); line-height: 1.15;
color: var(--hvf-fg); max-width: 38ch; margin: 0 auto;
text-align: left; position: relative;
}
.hvf-quote__t::before {
content: "„"; position: absolute; left: -0.6em; top: -0.2em;
color: var(--hvf-accent); font-size: 1.6em; font-style: normal;
}
.hvf-quote__cite {
display: flex; gap: 12px; margin-top: 32px;
font-family: var(--font-body); font-size: 12px; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--hvf-fg-muted);
}
.hvf-quote__cite strong { color: var(--hvf-fg); font-weight: 600; }
/* ====================================================================
RESPONSIVE
==================================================================== */
@media (max-width: 980px) {
.hvf-header { height: 64px; }
.hvf-nav { display: none; }
.hvf-header__time { display: none; }
.hvf-burger { display: inline-flex; }
.hvf-hero__meta { grid-template-columns: 1fr; gap: 12px; margin-bottom: 60px; }
.hvf-hero__title .l--indent { padding-left: 0; }
.hvf-hero__foot { grid-template-columns: 1fr; padding-top: 40px; }
.hvf-sec-head { grid-template-columns: 1fr; padding-bottom: 40px; }
.hvf-work-grid { grid-template-columns: 1fr; }
.hvf-tile--lg, .hvf-tile--md, .hvf-tile--sm, .hvf-tile--off, .hvf-tile--off2, .hvf-tile--full { grid-column: span 1; margin-top: 0; }
/* Home "Selected Work": uniform 3:2 preview format in single-column view */
.hvf-worksec .hvf-tile__media,
.hvf-worksec .hvf-tile--lg .hvf-tile__media,
.hvf-worksec .hvf-tile--md .hvf-tile__media,
.hvf-worksec .hvf-tile--sm .hvf-tile__media,
.hvf-worksec .hvf-tile--off .hvf-tile__media,
.hvf-worksec .hvf-tile--off2 .hvf-tile__media,
.hvf-worksec .hvf-tile--full .hvf-tile__media { aspect-ratio: 3 / 2; }
/* Canon "Drucker Kampagne": zoom in on the Canon logo so the person
photos above/below aren't sliced at the top and bottom edges. */
.hvf-worksec .hvf-tile[data-case="canon-drucker-kampagne"] .hvf-tile__img {
background-size: auto 227% !important;
background-position: 50% 48% !important;
}
/* Mobile: only client + year under the preview, pulled in closer */
.hvf-worksec .hvf-tile__title { display: none; }
.hvf-worksec .hvf-tile__meta { padding-top: 10px; }
.hvf-list__row { grid-template-columns: 40px 1fr 40px; }
.hvf-list__client, .hvf-list__tags { display: none; }
.hvf-services__split { grid-template-columns: 1fr; }
.hvf-services__divider { display: none; }
.hvf-clients__grid { grid-template-columns: repeat(2, 1fr); }
.hvf-footer__cols { grid-template-columns: 1fr 1fr; gap: 32px; }
.hvf-footer__base { flex-direction: column; gap: 12px; }
.hvf-disc__row { grid-template-columns: 1fr; gap: 24px; }
.hvf-approach__grid, .hvf-team__grid, .hvf-numbers__grid, .hvf-strip { grid-template-columns: 1fr 1fr; gap: 16px; }
.hvf-contact__split { grid-template-columns: 1fr; gap: 48px; }
.hvf-contact__info { grid-template-columns: 1fr; }
.hvf-phero__row { grid-template-columns: 1fr; gap: 32px; }
.hvf-strip__item:nth-child(2), .hvf-strip__item:nth-child(3) { transform: none; }
.hvf-cta__meta { flex-direction: column; gap: 16px; }
}
@media (max-width: 600px) {
:root {
--hvf-pad-y: calc(96px * var(--hvf-density));
--hvf-pad-x: clamp(18px, 5vw, 28px);
}
.hvf-header { height: 60px; }
.hvf-header__logo { font-size: 11px; letter-spacing: 0.18em; gap: 8px; }
.hvf-header__logo svg, .hvf-header__logo img { width: 26px; height: 26px; }
/* Hero — tighten vertical rhythm */
.hvf-hero { padding-top: 100px; }
.hvf-hero__meta { margin-bottom: 40px; }
/* Shrink headline so the longest cycling word ("zu hinterlassen") fits
the viewport width and never triggers horizontal scroll. */
.hvf-hero__title { font-size: clamp(34px, 10.5vw, 64px); line-height: 0.9; letter-spacing: -0.02em; }
.hvf-hero__title .l--right { text-align: left; }
.hvf-hero__lede { max-width: 32ch; }
/* Section heads, lists, tiles */
.hvf-sec-head { padding-bottom: 28px; }
.hvf-list__row { grid-template-columns: 32px 1fr 24px; gap: 12px; padding: 18px 0; }
.hvf-list__num { font-size: 12px; }
.hvf-tile { padding: 8px; }
.hvf-tile__title { font-size: clamp(20px, 5.5vw, 26px); }
/* Services / cards / clients */
.hvf-services__col { padding: 24px 0; }
.hvf-clients__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
.hvf-clients__head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 32px; }
/* About / numbers / team / approach — single column */
.hvf-approach__grid, .hvf-team__grid, .hvf-numbers__grid, .hvf-strip {
grid-template-columns: 1fr; gap: 12px;
}
/* Footer */
.hvf-footer__cols { grid-template-columns: 1fr; gap: 28px; }
.hvf-footer__big { font-size: clamp(56px, 20vw, 120px); margin-bottom: 28px; }
/* CTA */
.hvf-cta__title { font-size: clamp(44px, 13vw, 88px); margin: 24px 0; }
/* Page heroes — shrink so the longest word (e.g. "Standpunkt.") fits
the viewport and never triggers horizontal scroll. */
.hvf-phero__title { font-size: clamp(34px, 11vw, 72px); letter-spacing: -0.02em; }
.hvf-disc__title { font-size: clamp(32px, 9vw, 48px); }
/* Manifest / quote */
.hvf-manifest__text { font-size: clamp(24px, 7vw, 34px); }
.hvf-quote__t { font-size: clamp(26px, 7vw, 36px); }
/* Contact — keep stack, tighten gaps */
.hvf-contact__split { gap: 32px; }
.hvf-contact__info { margin-top: 32px; gap: 20px; }
.hvf-form__row { grid-template-columns: 1fr; gap: 20px; }
/* Drawer — phone tweaks */
.hvf-drawer__inner { padding-top: 88px; }
.hvf-drawer__link { padding: 18px 0; gap: 14px; }
.hvf-drawer__mail { font-size: 18px; }
}
/* ====================================================================
WORK PAGE — filter bar + tile action badges
==================================================================== */
.hvf-workfilter {
display: flex; justify-content: space-between; align-items: end;
gap: 24px; flex-wrap: wrap;
margin-bottom: 56px;
}
.hvf-workfilter__chips { display: flex; gap: 8px; flex-wrap: wrap; }
.hvf-workfilter__count {
font-family: var(--font-display); font-style: italic;
font-size: 16px; color: var(--hvf-fg-muted);
}
.hvf-tile__action {
position: absolute; right: 18px; bottom: 18px;
width: 56px; height: 56px; border-radius: 50%;
background: rgba(0,0,0,0.55);
color: #fff;
display: inline-flex; align-items: center; justify-content: center;
backdrop-filter: blur(6px);
border: 1px solid rgba(255,255,255,0.35);
transition: transform .35s cubic-bezier(.2,0,0,1),
background .25s, color .25s, width .35s, border-radius .35s;
z-index: 2;
}
.hvf-tile__action svg { width: 22px; height: 22px; }
.hvf-tile:hover .hvf-tile__action {
background: var(--color-orange, #FF5A1F);
border-color: var(--color-orange, #FF5A1F);
transform: scale(1.06);
}
/* ====================================================================
CASE MODAL — shared shell
==================================================================== */
.hvf-cm {
position: fixed; inset: 0; z-index: 200;
display: flex; align-items: stretch; justify-content: center;
animation: hvf-cm-in .35s cubic-bezier(.2,0,0,1) both;
}
@keyframes hvf-cm-in {
from { opacity: 0; }
to { opacity: 1; }
}
.hvf-cm__scrim {
position: absolute; inset: 0;
background: rgba(10,10,9,0.86);
cursor: pointer;
}
.hvf-cm__panel {
position: relative;
margin: clamp(20px, 4vw, 56px);
width: min(1280px, 100%);
max-width: 1280px;
background: var(--hvf-bg);
color: var(--hvf-fg);
border-radius: 16px;
overflow: hidden;
display: flex; flex-direction: column;
max-height: calc(100vh - clamp(40px, 8vw, 112px));
box-shadow: 0 48px 96px rgba(0,0,0,0.45);
animation: hvf-cm-rise .45s cubic-bezier(.2,0,0,1) both;
}
@keyframes hvf-cm-rise {
from { transform: translateY(30px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.hvf-cm__panel[data-kind="film"] { background: #0a0a09; color: #fff; }
.hvf-cm__panel[data-kind="campaign"] { background: #0a0a09; color: #fff; }
.hvf-cm__panel[data-kind="campaign"] .hvf-cm__top { border-bottom-color: rgba(255,255,255,0.12); }
.hvf-cm__panel[data-kind="campaign"] .hvf-cm__crumbs { color: rgba(255,255,255,0.6); }
.hvf-cm__panel[data-kind="campaign"] .hvf-cm__close { border-color: rgba(255,255,255,0.25); }
/* ====================================================================
CAMPAIGN — Clip strip below the main player
==================================================================== */
.hvf-cm__clips {
padding: 40px clamp(20px, 3vw, 36px) 24px;
color: #fff;
border-top: 1px solid rgba(255,255,255,0.08);
}
.hvf-cm__clips__head {
display: flex; justify-content: space-between; align-items: end;
gap: 24px;
margin-bottom: 28px;
}
.hvf-cm__clips__title {
font-family: var(--font-display); font-style: italic; font-weight: 400;
font-size: clamp(28px, 3.2vw, 44px); line-height: 1; color: #fff;
margin: 12px 0 0;
}
.hvf-cm__clips__nowtag {
display: inline-flex; align-items: center; gap: 9px;
font-family: var(--font-body); font-size: 10px; letter-spacing: 0.22em;
text-transform: uppercase; color: rgba(255,255,255,0.7);
padding: 8px 14px; border: 1px solid rgba(255,255,255,0.18);
border-radius: 999px; white-space: nowrap;
}
.hvf-cm__clips__nowtag .dot {
width: 7px; height: 7px; border-radius: 50%; background: #FF3B30;
box-shadow: 0 0 0 0 rgba(255,59,48,0.55); animation: hvf-pulse 1.4s infinite;
}
.hvf-cm__clips__row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 20px;
}
.hvf-cm__clip {
display: flex; flex-direction: column;
background: transparent; border: 0; padding: 0;
text-align: left; color: inherit; cursor: pointer;
font: inherit;
transition: transform .25s ease;
}
.hvf-cm__clip:hover { transform: translateY(-3px); }
.hvf-cm__clip__media {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: 4px;
border: 1px solid rgba(255,255,255,0.1);
isolation: isolate;
}
.hvf-cm__clip__img {
position: absolute; inset: 0;
background-size: cover; background-position: center;
transition: transform .5s ease, filter .25s ease;
filter: brightness(0.78) saturate(0.95);
}
.hvf-cm__clip:hover .hvf-cm__clip__img { transform: scale(1.04); filter: brightness(0.92) saturate(1); }
.hvf-cm__clip.is-active .hvf-cm__clip__img { filter: brightness(1) saturate(1); }
.hvf-cm__clip__media::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.55) 100%);
z-index: 1; pointer-events: none;
}
.hvf-cm__clip.is-active .hvf-cm__clip__media {
border-color: #fff;
box-shadow: 0 0 0 1px rgba(255,255,255,0.85), 0 18px 40px -16px rgba(255,59,48,0.45);
}
.hvf-cm__clip__play {
position: absolute; right: 12px; bottom: 12px;
width: 36px; height: 36px;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(0,0,0,0.55); backdrop-filter: blur(4px);
border: 1px solid rgba(255,255,255,0.35);
color: #fff;
border-radius: 999px;
z-index: 2;
transition: background .2s, transform .2s;
}
.hvf-cm__clip__play svg { width: 14px; height: 14px; }
.hvf-cm__clip:hover .hvf-cm__clip__play { background: #FF5A1F; border-color: #FF5A1F; transform: scale(1.06); }
.hvf-cm__clip.is-active .hvf-cm__clip__play { background: #FF3B30; border-color: #FF3B30; }
.hvf-cm__clip__idx {
position: absolute; left: 12px; top: 12px;
font-family: var(--font-body); font-size: 10px; letter-spacing: 0.22em;
text-transform: uppercase; color: rgba(255,255,255,0.85);
padding: 4px 8px; background: rgba(0,0,0,0.45);
border-radius: 4px; z-index: 2;
}
.hvf-cm__clip__meta {
padding-top: 14px;
}
.hvf-cm__clip__meta .label {
display: inline-block;
font-family: var(--font-body); font-size: 10px; letter-spacing: 0.22em;
text-transform: uppercase; color: rgba(255,255,255,0.6);
}
.hvf-cm__clip__meta h5 {
margin: 6px 0 0;
font-family: var(--font-display); font-style: italic; font-weight: 400;
font-size: clamp(18px, 1.6vw, 22px); line-height: 1.15; color: #fff;
}
.hvf-cm__clip.is-active .hvf-cm__clip__meta h5 { color: #fff; }
.hvf-cm__clip:not(.is-active) .hvf-cm__clip__meta h5 { color: rgba(255,255,255,0.78); }
@media (max-width: 991px) {
.hvf-cm__clips { padding: 28px 20px 16px; }
.hvf-cm__clips__head { flex-direction: column; align-items: flex-start; gap: 12px; }
.hvf-cm__clips__row { grid-template-columns: 1fr 1fr; gap: 14px; }
}
@media (max-width: 600px) {
.hvf-cm__clips__row { grid-template-columns: 1fr; }
}
/* ====================================================================
CAMPAIGN — Vertical 9:16 grid (Reels / Shorts style)
==================================================================== */
.hvf-cm__vhead {
padding: 40px clamp(20px, 3vw, 36px) 24px;
color: #fff;
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas:
"over sub"
"title title";
gap: 6px 24px;
align-items: end;
}
.hvf-cm__vhead > .hvf-overline { grid-area: over; color: rgba(255,255,255,0.7); }
.hvf-cm__vhead__title {
grid-area: title;
margin: 8px 0 0;
font-family: var(--font-display); font-style: italic; font-weight: 400;
font-size: clamp(36px, 4.6vw, 64px); line-height: 0.98; color: #fff;
}
.hvf-cm__vhead__sub {
grid-area: sub;
display: inline-flex; align-items: center; gap: 9px;
font-family: var(--font-body); font-size: 10px; letter-spacing: 0.22em;
text-transform: uppercase; color: rgba(255,255,255,0.7);
padding: 8px 14px; border: 1px solid rgba(255,255,255,0.18);
border-radius: 999px; white-space: nowrap;
}
.hvf-cm__vhead__sub .dot {
width: 7px; height: 7px; border-radius: 50%; background: #FF3B30;
box-shadow: 0 0 0 0 rgba(255,59,48,0.55); animation: hvf-pulse 1.4s infinite;
}
.hvf-cm__vgrid {
display: grid;
grid-template-columns: repeat(var(--vcount, 3), 1fr);
gap: clamp(16px, 1.8vw, 28px);
padding: 0 clamp(20px, 3vw, 36px) 40px;
align-items: start;
}
.hvf-cm__vclip {
margin: 0;
display: flex; flex-direction: column;
}
.hvf-cm__vclip__player {
position: relative;
aspect-ratio: 9 / 16;
background: #000;
border-radius: 6px;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.1);
box-shadow: 0 24px 60px -28px rgba(0,0,0,0.7);
}
.hvf-cm__vclip__player iframe {
position: absolute; inset: 0;
width: 100%; height: 100%;
border: 0;
}
/* Custom poster (click-to-play) ----------------------------------------- */
.hvf-cm__vclip__poster {
position: absolute; inset: 0;
width: 100%; height: 100%;
border: 0; padding: 0; margin: 0;
background: #000;
cursor: pointer;
overflow: hidden;
}
.hvf-cm__vclip__poster img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform .6s ease, filter .3s ease;
}
.hvf-cm__vclip__poster:hover img { transform: scale(1.03); filter: brightness(1.05); }
.hvf-cm__vclip__poster::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.45) 100%);
pointer-events: none;
}
.hvf-cm__vclip__playbtn {
position: absolute;
left: 50%; top: 50%; transform: translate(-50%, -50%);
width: 64px; height: 64px;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(0,0,0,0.55);
backdrop-filter: blur(4px);
border: 1px solid rgba(255,255,255,0.45);
color: #fff;
border-radius: 999px;
transition: background .25s ease, transform .25s ease, border-color .25s ease;
}
.hvf-cm__vclip__playbtn svg { width: 24px; height: 24px; margin-left: 3px; }
.hvf-cm__vclip__poster:hover .hvf-cm__vclip__playbtn {
background: #E50012;
border-color: #E50012;
transform: translate(-50%, -50%) scale(1.06);
}
.hvf-cm__vclip__meta {
padding-top: 16px;
}
.hvf-cm__vclip__meta .label {
display: inline-block;
font-family: var(--font-body); font-size: 10px; letter-spacing: 0.22em;
text-transform: uppercase; color: rgba(255,255,255,0.6);
}
.hvf-cm__vclip__meta h5 {
margin: 6px 0 0;
font-family: var(--font-display); font-style: italic; font-weight: 400;
font-size: clamp(18px, 1.5vw, 22px); line-height: 1.15; color: #fff;
}
/* Cap the player height so a vertical iframe doesn't dominate the viewport on wide screens */
@media (min-width: 1200px) {
.hvf-cm__vclip__player {
max-height: 72vh;
aspect-ratio: 9 / 16;
/* prevent the cap from squashing the aspect when the column is narrow */
margin-inline: auto;
width: 100%;
}
}
@media (max-width: 991px) {
.hvf-cm__vhead { grid-template-columns: 1fr; grid-template-areas: "over" "title" "sub"; padding: 28px 20px 16px; }
.hvf-cm__vgrid { padding: 0 20px 28px; gap: 14px; }
}
@media (max-width: 700px) {
.hvf-cm__vgrid { grid-template-columns: 1fr; }
.hvf-cm__vclip__player { max-width: 360px; margin-inline: auto; width: 100%; }
}
/* ====================================================================
CAMPAIGN — Mixed (1 landscape hero + portrait clips)
==================================================================== */
.hvf-cm__film--mixed .hvf-cm__lclip {
margin: 0;
padding: 0 clamp(20px, 3vw, 36px);
}
.hvf-cm__film--mixed .hvf-cm__lclip .hvf-cm__video {
border-radius: 10px;
box-shadow: 0 24px 60px -28px rgba(0,0,0,0.7);
}
.hvf-cm__lclip__meta { padding: 16px clamp(20px, 3vw, 36px) 0; }
.hvf-cm__mixrow {
display: grid;
grid-template-columns: repeat(var(--vcount, 2), 1fr);
gap: clamp(16px, 2vw, 28px);
padding: clamp(22px, 3vw, 36px) clamp(20px, 3vw, 36px) clamp(28px, 4vw, 44px);
max-width: 860px;
margin-inline: auto;
width: 100%;
}
@media (max-width: 700px) {
.hvf-cm__mixrow { grid-template-columns: 1fr; }
.hvf-cm__mixrow .hvf-cm__vclip__player { max-width: 360px; margin-inline: auto; width: 100%; }
}
.hvf-cm__top {
display: flex; justify-content: space-between; align-items: center;
padding: 18px clamp(20px, 3vw, 36px);
border-bottom: 1px solid rgba(17,17,17,0.1);
background: inherit;
z-index: 4;
}
.hvf-cm__panel[data-kind="film"] .hvf-cm__top { border-bottom-color: rgba(255,255,255,0.12); }
.hvf-cm__crumbs {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
font-family: var(--font-body); font-size: 11px;
letter-spacing: 0.22em; text-transform: uppercase;
color: var(--hvf-fg-muted);
}
.hvf-cm__panel[data-kind="film"] .hvf-cm__crumbs { color: rgba(255,255,255,0.6); }
.hvf-cm__crumbs .sep { opacity: 0.45; }
.hvf-cm__crumbs .kind {
font-family: var(--font-display); font-style: italic; text-transform: none;
letter-spacing: 0; font-size: 14px;
color: var(--color-orange, #FF5A1F);
}
.hvf-cm__close {
display: inline-flex; align-items: center; gap: 10px;
padding: 8px 14px;
border: 1px solid rgba(17,17,17,0.18); background: transparent;
border-radius: 999px;
color: inherit; cursor: pointer;
font-family: var(--font-body); font-size: 11px;
letter-spacing: 0.18em; text-transform: uppercase;
transition: background .2s, color .2s, border-color .2s;
}
.hvf-cm__panel[data-kind="film"] .hvf-cm__close { border-color: rgba(255,255,255,0.25); }
.hvf-cm__close:hover {
background: var(--color-orange, #FF5A1F);
border-color: var(--color-orange, #FF5A1F);
color: #fff;
}
.hvf-cm__body { overflow-y: auto; flex: 1 1 auto; }
/* ====================================================================
FILM SHOWCASE — inside modal
==================================================================== */
.hvf-cm__film { padding-bottom: 0; }
.hvf-cm__video {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background: #000;
overflow: hidden;
cursor: pointer;
}
.hvf-cm__videobg, .hvf-cm__videopan {
position: absolute; inset: 0;
background-size: cover; background-position: center;
}
.hvf-cm__videopan {
opacity: 0.85;
filter: contrast(1.08) saturate(1.05);
transform: scale(1.04);
}
.hvf-cm__videopan.is-playing {
animation: hvf-pan 18s ease-in-out infinite alternate;
}
@keyframes hvf-pan {
0% { transform: scale(1.04) translate(0, 0); }
100% { transform: scale(1.14) translate(-4%, -3%); }
}
.hvf-cm__videograin {
position: absolute; inset: 0; pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: overlay; opacity: 0.3;
}
.hvf-cm__videocorners { position: absolute; inset: 18px; pointer-events: none; z-index: 2; }
.hvf-cm__videocorners span {
position: absolute; width: 22px; height: 22px;
border: 1px solid rgba(255,255,255,0.6);
}
.hvf-cm__videocorners span:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.hvf-cm__videocorners span:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.hvf-cm__videocorners span:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.hvf-cm__videocorners span:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.hvf-cm__videohud {
position: absolute; top: 24px; left: 36px; right: 36px;
display: flex; justify-content: space-between; align-items: center;
color: #fff; z-index: 3;
font-family: var(--font-body); font-size: 10px;
letter-spacing: 0.22em; text-transform: uppercase;
pointer-events: none;
}
.hvf-cm__videohud .rec {
display: inline-flex; align-items: center; gap: 8px;
font-variant-numeric: tabular-nums;
}
.hvf-cm__videohud .rec span {
width: 7px; height: 7px; background: #FF3B30; border-radius: 50%;
animation: hvf-pulse 1.2s infinite;
}
.hvf-cm__videohud .src { color: rgba(255,255,255,0.6); }
/* ---- YouTube variant ------------------------------------------------- */
.hvf-cm__video--yt { cursor: default; }
.hvf-cm__video--yt .hvf-cm__videocorners { z-index: 4; }
.hvf-cm__ytframe {
position: absolute; inset: 0;
width: 100%; height: 100%;
border: 0;
background: #000;
z-index: 1;
}
.hvf-cm__ythead {
position: relative;
padding: 28px 36px 22px;
color: #fff;
overflow: hidden;
isolation: isolate;
}
.hvf-cm__ythead::after {
/* subtle vignette to anchor the text against the gradient */
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.18) 100%);
z-index: -1;
}
.hvf-cm__ythead__inner {
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas:
"over sub"
"title title";
align-items: end;
gap: 6px 24px;
}
.hvf-cm__ythead__over {
grid-area: over;
font-family: var(--font-body);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(255,255,255,0.78);
}
.hvf-cm__ythead__title {
grid-area: title;
margin: 0;
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: clamp(36px, 4.4vw, 64px);
line-height: 0.98;
letter-spacing: -0.005em;
color: #fff;
}
.hvf-cm__ythead__sub {
grid-area: sub;
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--font-body);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255,255,255,0.7);
}
.hvf-cm__ythead__sub .dot {
width: 7px; height: 7px; border-radius: 50%;
background: #FF3B30;
box-shadow: 0 0 0 0 rgba(255,59,48,0.55);
animation: hvf-pulse 1.4s infinite;
}
@media (max-width: 991px) {
.hvf-cm__ythead { padding: 20px 24px 16px; }
.hvf-cm__ythead__inner { grid-template-columns: 1fr; grid-template-areas: "over" "title" "sub"; }
}
.hvf-cm__playbtn {
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 96px; height: 96px; border-radius: 50%;
background: rgba(0,0,0,0.45);
color: #fff;
border: 1px solid rgba(255,255,255,0.55);
display: inline-flex; align-items: center; justify-content: center;
z-index: 4; cursor: pointer;
transition: transform .25s, background .25s, opacity .25s;
backdrop-filter: blur(8px);
}
.hvf-cm__playbtn:hover {
background: var(--color-orange, #FF5A1F);
border-color: var(--color-orange, #FF5A1F);
transform: translate(-50%, -50%) scale(1.06);
}
.hvf-cm__playbtn.is-playing { opacity: 0; pointer-events: none; }
.hvf-cm__video:hover .hvf-cm__playbtn.is-playing { opacity: 1; pointer-events: auto; }
.hvf-cm__videotitle {
position: absolute; left: 36px; bottom: 96px; z-index: 3;
color: #fff;
max-width: 60%;
}
.hvf-cm__videotitle .overline {
font-family: var(--font-body); font-size: 11px;
letter-spacing: 0.22em; text-transform: uppercase;
color: rgba(255,255,255,0.7);
}
.hvf-cm__videotitle h2 {
font-family: var(--font-display); font-style: italic; font-weight: 400;
font-size: clamp(40px, 5.5vw, 88px); line-height: 0.95;
margin: 12px 0 0;
}
.hvf-cm__videofoot {
position: absolute; left: 36px; right: 36px; bottom: 24px;
z-index: 3;
display: flex; flex-direction: column; gap: 12px;
color: #fff;
}
.hvf-cm__bar {
position: relative;
height: 3px;
background: rgba(255,255,255,0.2);
cursor: pointer;
}
.hvf-cm__bar .fill {
position: absolute; left: 0; top: 0; bottom: 0;
background: var(--color-orange, #FF5A1F);
}
.hvf-cm__bar .dot {
position: absolute; top: 50%;
width: 12px; height: 12px; border-radius: 50%;
background: #fff; transform: translate(-50%, -50%);
opacity: 0; transition: opacity .2s;
}
.hvf-cm__bar:hover .dot { opacity: 1; }
.hvf-cm__ctrls {
display: flex; align-items: center; gap: 14px;
font-family: var(--font-body); font-size: 11px;
letter-spacing: 0.18em; text-transform: uppercase;
font-variant-numeric: tabular-nums;
}
.hvf-cm__ctrls .dim { color: rgba(255,255,255,0.55); letter-spacing: 0.14em; }
.hvf-cm__ctrls .sep { width: 1px; height: 14px; background: rgba(255,255,255,0.2); }
.hvf-cm__ctrls .grow { flex: 1; }
.hvf-cm__ctrls .ico { color: rgba(255,255,255,0.7); cursor: pointer; }
.hvf-cm__ctrls .ico:hover { color: #fff; }
/* Footer info row (shared between film & design) */
.hvf-cm__finfo {
background: var(--hvf-bg);
color: var(--hvf-fg);
padding: clamp(40px, 5vw, 80px) clamp(28px, 4vw, 80px) clamp(56px, 5vw, 96px);
display: grid;
grid-template-columns: 1.4fr 1fr;
grid-template-areas: "title facts" "tags tags";
gap: 40px 56px;
align-items: start;
border-top: 1px solid var(--hvf-rule);
}
.hvf-cm__panel[data-kind="design"] .hvf-cm__finfo { border-top-color: var(--hvf-rule-soft); }
.hvf-cm__finfo__title { grid-area: title; }
.hvf-cm__finfo__title h3 {
font-family: var(--font-display); font-style: italic; font-weight: 400;
font-size: clamp(36px, 4.4vw, 64px); line-height: 1; color: var(--hvf-fg);
margin: 20px 0 18px;
}
.hvf-cm__finfo__title p {
font-family: var(--font-display); font-style: italic;
font-size: clamp(16px, 1.4vw, 20px); line-height: 1.4;
color: var(--hvf-fg-soft); max-width: 38ch; margin: 0;
}
.hvf-cm__facts {
grid-area: facts;
display: grid; grid-template-columns: 1fr 1fr; gap: 24px 32px;
margin: 0;
}
.hvf-cm__facts > div { display: flex; flex-direction: column; gap: 6px; }
.hvf-cm__facts dt {
font-family: var(--font-body); font-size: 10px;
letter-spacing: 0.22em; text-transform: uppercase;
color: var(--hvf-fg-muted);
}
.hvf-cm__facts dd {
font-family: var(--font-display); font-style: italic;
font-size: clamp(18px, 1.6vw, 24px);
color: var(--hvf-fg); margin: 0; line-height: 1.15;
}
.hvf-cm__tags {
grid-area: tags;
display: flex; gap: 8px; flex-wrap: wrap;
padding-top: 12px; border-top: 1px solid var(--hvf-rule-soft);
}
/* ====================================================================
DESIGN MOODBOARD — inside modal
==================================================================== */
.hvf-cm__mood { padding-bottom: 0; }
.hvf-cm__mhero {
position: relative; min-height: clamp(280px, 38vh, 460px);
padding: clamp(40px, 5vw, 72px) clamp(28px, 4vw, 80px);
color: #fff;
display: flex; flex-direction: column; justify-content: flex-end; gap: 12px;
}
.hvf-cm__mhero::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.35) 100%);
pointer-events: none;
}
.hvf-cm__mhero > * { position: relative; z-index: 1; }
.hvf-cm__mhero__over {
font-family: var(--font-body); font-size: 11px;
letter-spacing: 0.22em; text-transform: uppercase;
color: rgba(255,255,255,0.78);
}
.hvf-cm__mhero h2 {
font-family: var(--font-display); font-style: italic; font-weight: 400;
font-size: clamp(56px, 7vw, 120px); line-height: 0.95;
margin: 0; color: #fff;
}
.hvf-cm__mhero__sub {
font-family: var(--font-display); font-style: italic;
font-size: clamp(16px, 1.6vw, 22px);
color: rgba(255,255,255,0.85);
}
/* Moodboard grid */
.hvf-cm__mgrid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: clamp(12px, 1.4vw, 20px);
padding: clamp(28px, 4vw, 56px) clamp(28px, 4vw, 80px);
background: var(--hvf-bg);
}
.hvf-cm__mcard {
position: relative;
border-radius: 12px;
overflow: hidden;
padding: clamp(20px, 2vw, 28px);
min-height: 200px;
display: flex; flex-direction: column;
font-family: var(--font-body);
border: 1px solid var(--hvf-rule-soft);
}
.hvf-cm__mcard .over {
font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
color: rgba(0,0,0,0.55);
}
/* spans */
.hvf-cm__mcard--comp { grid-column: span 7; min-height: 320px; }
.hvf-cm__mcard--type { grid-column: span 5; background: var(--hvf-fg); color: #fff; min-height: 320px; }
.hvf-cm__mcard--swatch { grid-column: span 4; min-height: 220px; }
.hvf-cm__mcard--quote { grid-column: span 7; background: var(--hvf-bg-soft); min-height: 220px; }
.hvf-cm__mcard--tex { grid-column: span 5; min-height: 240px; }
.hvf-cm__mcard--lock { grid-column: span 7; background: var(--hvf-bg-soft); min-height: 240px; }
/* Composition card */
.hvf-cm__mcard--comp h4 {
font-family: var(--font-body); font-weight: 500;
font-size: clamp(28px, 3vw, 48px); line-height: 0.95; letter-spacing: -0.025em;
margin: 18px 0 24px; color: rgba(0,0,0,0.85);
}
.hvf-cm__mcard--comp h4 em {
font-family: var(--font-display); font-style: italic; font-weight: 400;
color: var(--color-orange, #FF5A1F);
}
.hvf-cm__mcard--comp .lines { display: flex; flex-direction: column; gap: 6px; margin-top: auto; }
.hvf-cm__mcard--comp .lines span {
display: block; height: 6px;
background: rgba(0,0,0,0.18);
width: 100%;
}
.hvf-cm__mcard--comp .page {
position: absolute; right: 24px; bottom: 20px;
font-family: var(--font-display); font-style: italic;
font-size: 12px; color: rgba(0,0,0,0.5);
}
/* Type specimen */
.hvf-cm__mcard--type .over { color: rgba(255,255,255,0.5); }
.hvf-cm__mcard--type .glyph {
font-family: var(--font-display); font-style: italic;
font-size: clamp(120px, 14vw, 220px); line-height: 0.85;
margin: 12px 0 24px;
color: var(--color-orange, #FF5A1F);
letter-spacing: -0.04em;
}
.hvf-cm__mcard--type .pair {
display: flex; flex-direction: column; gap: 4px;
padding: 10px 0;
border-top: 1px solid rgba(255,255,255,0.15);
}
.hvf-cm__mcard--type .pair strong {
font-family: var(--font-display); font-style: italic; font-weight: 400;
font-size: 22px;
}
.hvf-cm__mcard--type .pair span {
font-family: var(--font-body); font-size: 11px;
letter-spacing: 0.18em; text-transform: uppercase;
color: rgba(255,255,255,0.55);
}
/* Swatches */
.hvf-cm__mcard--swatch {
display: flex; flex-direction: column; justify-content: space-between;
color: #fff;
}
.hvf-cm__mcard--swatch .over { color: rgba(255,255,255,0.85); }
.hvf-cm__mcard--swatch .hex {
font-family: var(--font-body); font-weight: 600;
font-size: clamp(20px, 2vw, 28px);
letter-spacing: 0.04em;
margin-top: auto;
color: #fff;
text-shadow: 0 0 18px rgba(0,0,0,0.25);
}
/* Quote */
.hvf-cm__mcard--quote {
justify-content: space-between;
}
.hvf-cm__mcard--quote .mark {
position: absolute; top: 8px; right: 28px;
font-family: var(--font-display); font-style: italic;
font-size: 140px; line-height: 1;
color: var(--color-orange, #FF5A1F); opacity: 0.35;
}
.hvf-cm__mcard--quote p {
position: relative;
font-family: var(--font-display); font-style: italic;
font-size: clamp(20px, 2vw, 30px); line-height: 1.25;
color: var(--hvf-fg); margin: 12px 0 0; max-width: 26ch;
}
.hvf-cm__mcard--quote .by {
font-family: var(--font-body); font-size: 10px;
letter-spacing: 0.22em; text-transform: uppercase;
color: var(--hvf-fg-muted); margin-top: 16px;
}
/* Texture / material */
.hvf-cm__mcard--tex {
color: #fff;
justify-content: space-between;
}
.hvf-cm__mcard--tex .over { color: rgba(255,255,255,0.85); }
.hvf-cm__mcard--tex .name {
margin-top: auto;
font-family: var(--font-display); font-style: italic;
font-size: clamp(22px, 2.2vw, 32px);
color: #fff;
text-shadow: 0 0 18px rgba(0,0,0,0.25);
}
/* Lockup */
.hvf-cm__mcard--lock {
display: flex; flex-direction: column; gap: 14px;
align-items: flex-start;
padding: clamp(28px, 3vw, 40px);
}
.hvf-cm__mcard--lock .mark {
width: 56px; height: 56px;
background: var(--hvf-fg);
display: inline-flex; align-items: center; justify-content: center;
border-radius: 10px;
}
.hvf-cm__mcard--lock .mark img { width: 32px; height: 32px; filter: invert(1); }
.hvf-cm__mcard--lock strong {
font-family: var(--font-body); font-weight: 700; font-size: 28px;
letter-spacing: 0.04em; color: var(--hvf-fg);
margin-top: auto;
}
.hvf-cm__mcard--lock .sub {
font-family: var(--font-body); font-size: 11px;
letter-spacing: 0.22em; text-transform: uppercase;
color: var(--hvf-fg-muted);
}
/* ====================================================================
CASE MODAL — responsive
==================================================================== */
@media (max-width: 991px) {
.hvf-cm__panel { margin: 0; max-height: 100vh; border-radius: 0; }
.hvf-cm__videotitle { left: 24px; bottom: 92px; max-width: 80%; }
.hvf-cm__videotitle h2 { font-size: clamp(28px, 7vw, 48px); }
.hvf-cm__videofoot { left: 20px; right: 20px; }
.hvf-cm__videohud { left: 20px; right: 20px; top: 20px; }
.hvf-cm__finfo { grid-template-columns: 1fr; grid-template-areas: "title" "facts" "tags"; gap: 32px; }
.hvf-cm__mgrid {
grid-template-columns: 1fr 1fr;
}
.hvf-cm__mcard--comp,
.hvf-cm__mcard--type,
.hvf-cm__mcard--quote,
.hvf-cm__mcard--tex,
.hvf-cm__mcard--lock { grid-column: span 2; }
.hvf-cm__mcard--swatch { grid-column: span 1; }
}
@media (max-width: 575px) {
.hvf-cm__crumbs { font-size: 9px; gap: 8px; }
.hvf-cm__crumbs .kind { font-size: 12px; }
.hvf-cm__playbtn { width: 64px; height: 64px; }
.hvf-cm__mgrid { grid-template-columns: 1fr; }
.hvf-cm__mcard, .hvf-cm__mcard--swatch { grid-column: span 1; }
.hvf-cm__facts { grid-template-columns: 1fr; gap: 18px; }
.hvf-cm__videotitle { bottom: 88px; }
.hvf-tile__action { width: 44px; height: 44px; right: 12px; bottom: 12px; }
.hvf-tile__action svg { width: 16px; height: 16px; }
}
/* ====================================================================
DESIGN CASE STORY — modular pack (hero, palette, mascot, applications)
Used when case has c.pack set (modular asset folder).
==================================================================== */
.hvf-cs { padding-bottom: 0; }
/* HERO — 16:9 full-bleed image with floating meta block */
.hvf-cs__hero {
position: relative;
aspect-ratio: 16/9;
width: 100%;
background: #0c0c0a;
overflow: hidden;
}
.hvf-cs__hero__img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.hvf-cs__hero__chrome {
position: absolute; inset: 0;
display: flex; justify-content: flex-end; align-items: flex-end;
padding: clamp(20px, 3vw, 36px);
pointer-events: none;
}
.hvf-cs__hero__meta {
display: grid; grid-template-columns: repeat(3, auto);
gap: 22px 40px;
padding: 18px 26px;
background: rgba(12, 38, 89, 0.78);
backdrop-filter: blur(10px);
border: 1px solid rgba(242, 240, 216, 0.18);
color: #F2F0D8;
border-radius: 4px;
pointer-events: auto;
}
.hvf-cs__hero__meta span { display: flex; flex-direction: column; gap: 4px; }
.hvf-cs__hero__meta dt {
font-family: var(--font-body); font-size: 9px;
letter-spacing: 0.22em; text-transform: uppercase;
color: rgba(242, 240, 216, 0.6); margin: 0;
}
.hvf-cs__hero__meta dd {
font-family: var(--font-display); font-style: italic;
font-size: 18px; color: #F2F0D8; margin: 0; line-height: 1.1;
}
/* INTRO */
.hvf-cs__intro {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: clamp(32px, 6vw, 96px);
padding: clamp(48px, 6vw, 96px) clamp(28px, 4vw, 80px);
background: var(--hvf-bg);
align-items: end;
}
.hvf-cs__intro__head { display: flex; flex-direction: column; gap: 18px; }
.hvf-cs__intro__title {
font-family: var(--font-body); font-weight: 500;
font-size: clamp(40px, 4.8vw, 80px);
line-height: 0.98; letter-spacing: -0.02em; margin: 0;
color: var(--hvf-fg); text-wrap: balance;
}
.hvf-cs__intro__title em {
font-family: var(--font-display); font-style: italic; font-weight: 400;
color: var(--color-orange, #FF5A1F);
}
.hvf-cs__intro__blurb {
font-family: var(--font-display); font-style: italic;
font-size: clamp(18px, 1.5vw, 24px); line-height: 1.45;
color: var(--hvf-fg-soft); max-width: 46ch; margin: 0;
}
/* SECTION wrapper */
.hvf-cs__section {
padding: clamp(36px, 5vw, 80px) clamp(28px, 4vw, 80px) clamp(48px, 5vw, 88px);
background: var(--hvf-bg);
border-top: 1px solid var(--hvf-rule-soft);
}
.hvf-cs__sechead {
display: flex; justify-content: space-between; align-items: baseline;
gap: 24px; margin-bottom: clamp(28px, 3vw, 44px); flex-wrap: wrap;
}
.hvf-cs__sectitle {
font-family: var(--font-body); font-weight: 500;
font-size: clamp(28px, 3vw, 48px); line-height: 1; letter-spacing: -0.02em;
margin: 0; color: var(--hvf-fg);
}
.hvf-cs__sectitle em {
font-family: var(--font-display); font-style: italic; font-weight: 400;
color: var(--color-orange, #FF5A1F);
}
/* COLOUR system — 5 large swatches */
.hvf-cs__palette {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 4px;
}
.hvf-cs__sw {
position: relative;
min-height: clamp(220px, 26vw, 320px);
padding: 20px 22px 24px;
display: flex; flex-direction: column; justify-content: space-between;
border-radius: 4px;
overflow: hidden;
}
.hvf-cs__sw .num {
font-family: var(--font-body); font-size: 10px;
letter-spacing: 0.22em; text-transform: uppercase;
opacity: 0.72;
}
.hvf-cs__sw .caption { display: flex; flex-direction: column; gap: 4px; }
.hvf-cs__sw .name {
font-family: var(--font-body); font-size: 11px; font-weight: 600;
letter-spacing: 0.22em; text-transform: uppercase;
}
.hvf-cs__sw .hex {
font-family: var(--font-body); font-size: 13px;
letter-spacing: 0.08em; opacity: 0.85;
}
/* MASCOT showcase */
.hvf-cs__mascotgrid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: clamp(24px, 4vw, 56px);
align-items: stretch;
}
.hvf-cs__mascotgrid.is-solo { grid-template-columns: 1fr; }
.hvf-cs__mascotimg {
background: #589EA6;
border-radius: 4px;
overflow: hidden;
display: flex; align-items: center; justify-content: center;
min-height: clamp(320px, 38vw, 520px);
padding: clamp(24px, 3vw, 56px);
}
.hvf-cs__mascotimg img {
width: 100%; height: 100%; object-fit: contain; object-position: center;
display: block;
}
/* Render the wordmark font on the "Wordmark" font credit for character */
.hvf-cs[data-case="glanzwerkstatt"] .hvf-cs__fonts > div:first-child dd {
font-family: "Oh Chewy", var(--font-display);
font-style: normal;
font-size: clamp(28px, 2.4vw, 36px);
line-height: 1;
}
.hvf-cs[data-case="josefs-zwirn"] .hvf-cs__fonts > div:first-child dd {
font-family: "Abril Fatface", var(--font-display);
font-style: normal;
font-weight: 400;
font-size: clamp(28px, 2.4vw, 36px);
line-height: 1;
letter-spacing: 0.01em;
}
.hvf-cs[data-case="josefs-zwirn"] .hvf-cs__fonts > div:nth-child(2) dd {
font-family: "Josefin Sans", var(--font-body);
font-style: normal;
font-weight: 500;
font-size: clamp(22px, 1.8vw, 26px);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.hvf-cs__mascotnote {
padding: clamp(20px, 3vw, 40px);
background: var(--hvf-bg-soft, #F8F8F6);
border-radius: 4px;
display: flex; flex-direction: column; justify-content: space-between;
gap: 28px;
}
.hvf-cs__mascotnote p {
font-family: var(--font-display); font-style: italic;
font-size: clamp(18px, 1.5vw, 22px); line-height: 1.5;
color: var(--hvf-fg-soft); margin: 0;
max-width: 38ch;
}
.hvf-cs__fonts {
margin: 0;
display: grid; grid-template-columns: 1fr 1fr; gap: 20px 28px;
padding-top: 22px;
border-top: 1px solid var(--hvf-rule-soft);
}
.hvf-cs__fonts > div { display: flex; flex-direction: column; gap: 4px; }
.hvf-cs__fonts dt {
font-family: var(--font-body); font-size: 10px;
letter-spacing: 0.22em; text-transform: uppercase;
color: var(--hvf-fg-muted); margin: 0;
}
.hvf-cs__fonts dd {
font-family: var(--font-display); font-style: italic;
font-size: 20px; color: var(--hvf-fg); margin: 0; line-height: 1.15;
}
/* APPLICATIONS gallery — editorial 3-up, never cropped */
.hvf-cs__apps {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: clamp(20px, 2.4vw, 40px) clamp(16px, 1.6vw, 28px);
}
.hvf-cs__app { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.hvf-cs__app--0 { grid-column: span 6; }
.hvf-cs__app--1 { grid-column: span 6; }
.hvf-cs__app--2 { grid-column: span 12; }
.hvf-cs__app__img {
position: relative;
width: 100%;
aspect-ratio: 4/5;
background: var(--hvf-bg-soft, #F8F8F6);
border-radius: 4px;
overflow: hidden;
}
.hvf-cs__app--2 .hvf-cs__app__img {
aspect-ratio: auto;
max-width: 720px;
margin: 0 auto;
width: 100%;
}
.hvf-cs__app--2 .hvf-cs__app__img img {
position: static;
width: 100%; height: auto;
object-fit: contain;
}
.hvf-cs__app__img img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: contain; object-position: center;
display: block;
}
.hvf-cs__app figcaption {
display: flex; gap: 16px; align-items: baseline;
font-family: var(--font-body); font-size: 13px;
color: var(--hvf-fg-soft); line-height: 1.5;
}
.hvf-cs__app figcaption .num {
font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
color: var(--hvf-fg-muted); flex-shrink: 0;
}
/* Responsive */
@media (max-width: 991px) {
.hvf-cs__intro { grid-template-columns: 1fr; gap: 28px; }
.hvf-cs__mascotgrid { grid-template-columns: 1fr; }
.hvf-cs__palette { grid-template-columns: repeat(5, 1fr); }
.hvf-cs__apps { gap: 24px; }
.hvf-cs__app--0, .hvf-cs__app--1, .hvf-cs__app--2 { grid-column: span 12; }
.hvf-cs__hero__meta { grid-template-columns: repeat(3, 1fr); gap: 12px 24px; }
}
@media (max-width: 575px) {
.hvf-cs__palette { grid-template-columns: 1fr 1fr; }
.hvf-cs__sw { min-height: 140px; }
.hvf-cs__hero__meta { padding: 14px 18px; gap: 10px 18px; }
.hvf-cs__hero__meta dd { font-size: 15px; }
.hvf-cs__fonts { grid-template-columns: 1fr; }
}
/* ====================================================================
LEGAL PAGES (Impressum / Datenschutz)
==================================================================== */
.hvf-legal { background: var(--hvf-bg); }
.hvf-legal__head {
display: grid; grid-template-columns: 1fr 1.4fr;
gap: clamp(24px, 6vw, 80px);
padding-bottom: clamp(40px, 5vw, 72px);
border-bottom: 1px solid var(--hvf-rule);
align-items: end;
}
.hvf-legal__head .hvf-overline { grid-column: 1 / 2; align-self: start; }
.hvf-legal__title {
grid-column: 1 / 2;
font-size: clamp(56px, 9vw, 140px);
line-height: 0.96; letter-spacing: -0.02em;
margin: 16px 0 0;
color: var(--hvf-fg);
}
.hvf-legal__lede {
grid-column: 2 / 3;
font-family: var(--font-display); font-style: italic;
font-size: clamp(18px, 1.6vw, 24px); line-height: 1.45;
color: var(--hvf-fg-soft);
max-width: 50ch; margin: 0;
}
.hvf-legal__body {
display: grid; grid-template-columns: 1fr 1.4fr;
gap: clamp(24px, 6vw, 80px);
padding-top: clamp(40px, 5vw, 72px);
}
.hvf-legal__block {
grid-column: 2 / 3;
padding-bottom: clamp(28px, 3vw, 44px);
margin-bottom: clamp(28px, 3vw, 44px);
border-bottom: 1px solid var(--hvf-rule-soft);
}
.hvf-legal__block:last-child { border-bottom: 0; }
.hvf-legal__block h2 {
font-family: var(--font-body); font-weight: 600;
font-size: clamp(18px, 1.6vw, 22px);
letter-spacing: -0.005em;
margin: 0 0 14px;
color: var(--hvf-fg);
}
.hvf-legal__block p,
.hvf-legal__block ul,
.hvf-legal__block li {
font-family: var(--font-body);
font-size: 15px; line-height: 1.7;
color: var(--hvf-fg-soft);
margin: 0 0 12px;
}
.hvf-legal__block ul { padding-left: 22px; }
.hvf-legal__block li { margin-bottom: 8px; }
.hvf-legal__block a {
color: var(--hvf-fg);
text-decoration: underline; text-underline-offset: 3px;
text-decoration-thickness: 1px;
}
.hvf-legal__block a:hover { color: var(--hvf-accent); }
.hvf-legal__block code {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 13px;
background: var(--hvf-bg-soft);
padding: 2px 6px; border-radius: 3px;
}
/* Rich-text legal block (full DSGVO body) ------------------------- */
.hvf-legal__rt > h2:first-child { margin-top: 0; }
.hvf-legal__rt h2 {
margin-top: clamp(36px, 4vw, 56px);
padding-top: clamp(28px, 3vw, 40px);
border-top: 1px solid var(--hvf-rule-soft);
}
.hvf-legal__rt h3 {
font-family: var(--font-body); font-weight: 600;
font-size: 16px; letter-spacing: -0.003em;
color: var(--hvf-fg);
margin: 26px 0 10px;
}
.hvf-legal__rt h4 {
font-family: var(--font-body); font-weight: 600;
font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase;
color: var(--hvf-fg-soft);
margin: 18px 0 8px;
}
.hvf-legal__rt a { word-break: break-word; }
/* Google Analytics Opt-Out button -------------------------------- */
.hvf-legal__optout {
display: inline-flex; align-items: center;
font-family: var(--font-body); font-weight: 600; font-size: 14px;
letter-spacing: 0.01em;
color: var(--hvf-bg); background: var(--hvf-fg);
border: 0; border-radius: 999px;
padding: 14px 26px; margin-top: 4px;
cursor: pointer;
transition: background .25s, color .25s, padding .3s;
}
.hvf-legal__optout:hover {
background: var(--hvf-accent); color: var(--hvf-fg);
padding-inline: 32px;
}
@media (max-width: 991px) {
.hvf-legal__head,
.hvf-legal__body { grid-template-columns: 1fr; }
.hvf-legal__head .hvf-overline,
.hvf-legal__title,
.hvf-legal__lede,
.hvf-legal__block { grid-column: 1 / -1; }
}
/* ====================================================================
COOKIE BANNER
==================================================================== */
.hvf-cookie {
position: fixed; left: 0; right: 0; bottom: 0;
z-index: 9000;
padding: clamp(16px, 2vw, 28px);
pointer-events: none;
animation: hvf-cookie-in .4s cubic-bezier(.2,0,0,1);
}
@keyframes hvf-cookie-in {
from { transform: translateY(40px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.hvf-cookie__panel {
pointer-events: auto;
max-width: 880px;
margin: 0 auto;
background: var(--hvf-fg);
color: var(--hvf-bg);
padding: clamp(20px, 2.4vw, 32px);
border-radius: 6px;
box-shadow: 0 32px 48px rgba(0,0,0,0.32), 0 0 0 1px rgba(255,255,255,0.04);
display: flex; flex-direction: column;
gap: clamp(18px, 2vw, 24px);
}
.hvf-cookie__head { display: flex; flex-direction: column; gap: 10px; }
.hvf-cookie__head .hvf-overline { color: rgba(244,241,236,0.6); }
.hvf-cookie__head .hvf-overline::before { background: rgba(244,241,236,0.6); }
.hvf-cookie__head h2 {
font-family: var(--font-body); font-weight: 500;
font-size: clamp(22px, 2.2vw, 32px); line-height: 1.05;
letter-spacing: -0.01em;
margin: 0;
}
.hvf-cookie__head h2 em {
font-family: var(--font-display); font-style: italic; font-weight: 400;
color: var(--hvf-accent);
}
.hvf-cookie__text {
font-family: var(--font-body); font-size: 14px; line-height: 1.6;
color: rgba(244,241,236,0.78);
margin: 0; max-width: 62ch;
}
.hvf-cookie__actions {
display: flex; flex-wrap: wrap; gap: 10px;
}
.hvf-cookie__btn {
font-family: var(--font-body); font-weight: 500;
font-size: 13px; letter-spacing: 0.02em;
padding: 12px 20px;
border-radius: 4px;
border: 1px solid transparent;
background: transparent;
color: var(--hvf-bg);
cursor: pointer;
transition: background .2s, color .2s, border-color .2s;
}
@media (hover: none) { .hvf-cookie__btn { cursor: pointer; } }
.hvf-cookie__btn--ghost {
border-color: rgba(244,241,236,0.25);
}
.hvf-cookie__btn--ghost:hover {
background: rgba(244,241,236,0.08);
border-color: rgba(244,241,236,0.5);
}
.hvf-cookie__btn--primary {
background: var(--hvf-accent);
color: #111;
}
.hvf-cookie__btn--primary:hover { background: #ff7240; }
.hvf-cookie__links {
display: flex; gap: 8px;
font-family: var(--font-body); font-size: 12px;
color: rgba(244,241,236,0.55);
}
.hvf-cookie__links a {
color: rgba(244,241,236,0.85);
text-decoration: underline; text-underline-offset: 3px;
}
.hvf-cookie__links a:hover { color: var(--hvf-accent); }
/* Settings view */
.hvf-cookie__cats {
display: flex; flex-direction: column;
border-top: 1px solid rgba(244,241,236,0.12);
}
.hvf-cookie__cat {
display: flex; flex-direction: column; gap: 8px;
padding: 18px 0;
border-bottom: 1px solid rgba(244,241,236,0.12);
cursor: default;
}
.hvf-cookie__cat__head {
display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.hvf-cookie__cat__head strong {
font-family: var(--font-body); font-weight: 600; font-size: 15px;
}
.hvf-cookie__cat__desc {
font-family: var(--font-body); font-size: 13px; line-height: 1.55;
color: rgba(244,241,236,0.62);
}
.hvf-cookie__locked {
font-family: var(--font-body); font-size: 11px;
letter-spacing: 0.14em; text-transform: uppercase;
color: rgba(244,241,236,0.45);
}
/* Switch */
.hvf-cookie__switch { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }
.hvf-cookie__switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.hvf-cookie__track {
position: absolute; inset: 0;
background: rgba(244,241,236,0.18);
border-radius: 22px;
transition: background .2s;
cursor: pointer;
}
@media (hover: none) { .hvf-cookie__track { cursor: pointer; } }
.hvf-cookie__track::before {
content: ""; position: absolute;
top: 3px; left: 3px;
width: 16px; height: 16px; border-radius: 50%;
background: var(--hvf-bg);
transition: transform .2s cubic-bezier(.2,0,0,1);
}
.hvf-cookie__switch input:checked + .hvf-cookie__track {
background: var(--hvf-accent);
}
.hvf-cookie__switch input:checked + .hvf-cookie__track::before {
transform: translateX(18px);
}
.hvf-cookie__switch input:focus-visible + .hvf-cookie__track {
box-shadow: 0 0 0 3px rgba(29,122,252,0.45);
}
@media (max-width: 575px) {
.hvf-cookie__actions { flex-direction: column-reverse; }
.hvf-cookie__btn { width: 100%; }
}