/* Override the design-system display font to a heavier, more impactful black */
:root {
--font-display: 'Archivo Black', 'Unbounded', system-ui, sans-serif;
--font-condensed: 'Anton', 'Archivo Black', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; max-width: 100%; }
body { background: #FFFFFF; color: var(--ddh-ink); font-family: var(--font-sans); }
a { color: inherit; }
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 32px; }
.display { font-family: var(--font-display); font-weight: 900; letter-spacing: -0.04em; line-height: 0.92; }
.italic { font-style: italic; font-weight: 800; }
/* The four service-word fills - same visual treatment as "want" */
.fill { padding: 0 .14em; box-decoration-break: clone; -webkit-box-decoration-break: clone; display: inline; }
.fill-cyan { background: var(--ddh-cyan); }
.fill-magenta { background: var(--ddh-magenta); color: #fff; }
.fill-yellow { background: var(--ddh-yellow); }
.fill-black { background: var(--ddh-black); color: #fff; }
/* ================ HEADER (left logo, right menu trigger) ================ */
.header {
position: fixed; top: 0; left: 0; right: 0; z-index: 60;
display: flex; align-items: center; justify-content: space-between;
padding: 22px 32px;
background: rgba(255,255,255,0.0);
transition: background 220ms cubic-bezier(.2,.8,.2,1),
border-color 220ms,
transform 360ms cubic-bezier(.2,.8,.2,1);
border-bottom: 1px solid transparent;
will-change: transform;
}
.header.scrolled { background: rgba(255,255,255,0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--ddh-chalk); }
/* Hide on scroll-down, reveal on scroll-up */
.header.is-hidden { transform: translateY(-110%); }
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ddh-ink); }
.logo img { width: 38px; height: 38px; display: block; }
.logo .word { font-family: var(--font-display); font-weight: 800; font-size: 16px; letter-spacing: -0.01em; line-height: 1; }
.logo .word b { font-weight: 900; }
.logo .word .light { font-family: var(--font-sans); font-weight: 500; }
.menu-btn { display: flex; align-items: center; gap: 16px; cursor: pointer; background: transparent; border: 0; padding: 8px 4px; font: inherit; color: var(--ddh-ink); }
.menu-btn .lbl {
font-family: var(--font-display); font-size: 22px; font-weight: 900;
letter-spacing: 0.04em; text-transform: uppercase;
line-height: 1;
}
.menu-btn .bars { display: inline-flex; flex-direction: column; gap: 6px; width: 38px; }
.menu-btn .bars i { display: block; height: 4px; background: var(--ddh-ink); transition: all 220ms cubic-bezier(.2,.8,.2,1); }
.menu-btn .bars i:nth-child(1) { width: 100%; }
.menu-btn .bars i:nth-child(2) { width: 70%; margin-left: auto; }
/* ================ OFF-CANVAS MENU PANEL ================ */
.menu-overlay { position: fixed; inset: 0; background: rgba(10,10,10,0.45); opacity: 0; pointer-events: none; transition: opacity 320ms ease; z-index: 80; }
body.menu-open .menu-overlay { opacity: 1; pointer-events: auto; }
.menu-panel {
position: fixed; top: 0; right: 0; height: 100vh; width: min(620px, 96vw);
background: var(--ddh-bone); color: var(--ddh-ink);
z-index: 90; transform: translateX(100%); transition: transform 420ms cubic-bezier(.7,0,.2,1);
display: flex; flex-direction: column; overflow-y: auto;
border-left: 3px solid var(--ddh-black);
}
body.menu-open .menu-panel { transform: translateX(0); }
.menu-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.menu-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ddh-slate); }
.menu-close { background: transparent; border: 2px solid var(--ddh-black); width: 44px; height: 44px; cursor: pointer; font-family: var(--font-display); font-size: 20px; font-weight: 900; transition: background 180ms; }
.menu-close:hover { background: var(--ddh-yellow); }
/* ============ MENU OPTION A · Color Picker ============ */
/* Top: 2x2 grid of giant colored swatches (the 4 services as visual cards).
Below: secondary list (Hub, Δουλειές, FAQ, Επικοινωνία).
Then: live Mykonos clock + greeting card.
Then: print partner. Then: contact info. */
.menu-panel { padding: 0; } /* override default padding so swatches go edge-to-edge */
.menu-top {
padding: 22px 32px;
border-bottom: 1px solid var(--ddh-stone);
margin-bottom: 0;
}
.menu-a__swatches {
display: grid; grid-template-columns: 1fr 1fr; gap: 0;
border-bottom: 3px solid var(--ddh-black);
}
.menu-a__swatch {
position: relative;
padding: 28px 22px 24px;
text-decoration: none; color: var(--ddh-ink);
border: 1.5px solid var(--ddh-black);
margin: -0.75px;
cursor: pointer;
transition: transform 220ms cubic-bezier(.2,.8,.2,1), opacity 220ms, box-shadow 220ms;
aspect-ratio: 1.05/1;
display: flex; flex-direction: column; justify-content: space-between;
}
.menu-a__swatch:hover {
transform: scale(1.025);
z-index: 3;
box-shadow: 0 8px 24px rgba(0,0,0,0.22);
}
.menu-a__swatch--cyan { background: var(--ddh-cyan); }
.menu-a__swatch--magenta { background: var(--ddh-magenta); color: #fff; }
.menu-a__swatch--yellow { background: var(--ddh-yellow); }
.menu-a__swatch--black { background: var(--ddh-black); color: #fff; }
/* Override the global a:hover { color: var(--accent) } which was making
text on the magenta swatch turn invisible (magenta = bg color) */
.menu-a__swatch--cyan:hover { color: var(--ddh-ink); }
.menu-a__swatch--magenta:hover { color: #fff; }
.menu-a__swatch--yellow:hover { color: var(--ddh-ink); }
.menu-a__swatch--black:hover { color: #fff; }
.menu-a__num {
font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em;
text-transform: uppercase; opacity: 0.8;
font-weight: 700;
}
.menu-a__name {
font-family: var(--font-display); font-weight: 900;
font-size: clamp(20px, 2.4vw, 28px);
letter-spacing: -0.02em; line-height: 0.95;
text-transform: uppercase;
margin-top: auto;
}
.menu-a__sub {
font-family: var(--font-sans); font-size: 12px; line-height: 1.4;
margin-top: 6px;
opacity: 0.78;
}
.menu-a__arrow {
position: absolute; top: 22px; right: 22px;
font-family: var(--font-display); font-weight: 900; font-size: 20px;
transition: transform 220ms cubic-bezier(.2,.8,.2,1);
}
.menu-a__swatch:hover .menu-a__arrow { transform: translate(4px, -4px); }
/* Active service: subtle dim on the others (inset ring already signals which one is active), ring + scale the matching one */
body[data-active-service] .menu-a__swatch { opacity: 0.85; }
body[data-active-service="photography"] .menu-a__swatch--cyan,
body[data-active-service="marketing"] .menu-a__swatch--magenta,
body[data-active-service="web"] .menu-a__swatch--yellow,
body[data-active-service="prints"] .menu-a__swatch--black {
opacity: 1;
box-shadow: inset 0 0 0 5px rgba(0,0,0,0.9), 0 8px 24px rgba(0,0,0,0.18);
z-index: 2;
}
body[data-active-service="prints"] .menu-a__swatch--black {
box-shadow: inset 0 0 0 5px var(--ddh-yellow), 0 8px 24px rgba(0,0,0,0.18);
}
/* Secondary list */
.menu-a__list { padding: 8px 0; }
.menu-a__list a {
display: flex; align-items: baseline; gap: 16px;
padding: 16px 32px;
text-decoration: none; color: var(--ddh-ink);
font-family: var(--font-display); font-weight: 800;
font-size: 22px; letter-spacing: -0.02em; line-height: 1;
text-transform: uppercase;
border-bottom: 1px solid var(--ddh-stone);
transition: background 200ms, color 200ms, padding-left 200ms;
}
.menu-a__list a:hover { background: var(--ddh-black); color: #fff; padding-left: 40px; }
.menu-a__list a:hover .num { color: rgba(255,255,255,0.7); }
.menu-a__list .num {
font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em;
color: var(--ddh-slate); min-width: 28px; transition: color 200ms;
}
/* Live clock + greeting card (inside menu) */
.menu-a__clock-card {
margin: 16px 28px 0;
padding: 18px 18px 20px;
background: var(--ddh-bone);
border: 2px solid var(--ddh-black);
box-shadow: 4px 4px 0 0 var(--ddh-black);
}
.menu-a__clock-card .eyebrow {
font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em;
text-transform: uppercase; color: var(--ddh-slate);
margin-bottom: 8px;
}
.menu-a__clock-card .greeting {
font-family: var(--font-display); font-weight: 900;
font-size: 22px; letter-spacing: -0.02em; line-height: 1;
text-transform: uppercase;
margin-bottom: 6px;
}
.menu-a__clock-card .clock {
font-family: var(--font-display); font-weight: 900;
font-size: 36px; letter-spacing: -0.02em; line-height: 1;
}
.menu-a__clock-card .hours {
display: block;
font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em;
color: var(--ddh-slate);
text-transform: uppercase; margin-top: 8px;
}
/* Print partner block */
.menu-a__partner {
margin: 20px 28px 0;
padding: 18px 0 0;
border-top: 2px solid var(--ddh-black);
}
.menu-a__partner .eyebrow {
font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em;
text-transform: uppercase; color: var(--ddh-slate);
margin-bottom: 6px;
}
.menu-a__partner a {
font-family: var(--font-display); font-weight: 900; font-size: 18px;
letter-spacing: -0.01em;
color: var(--ddh-ink); text-decoration: none;
transition: color 200ms;
}
.menu-a__partner a:hover { color: var(--ddh-magenta); }
/* Contact block */
.menu-a__contact {
padding: 16px 28px 28px;
display: flex; flex-direction: column; gap: 4px;
font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em;
line-height: 1.7;
}
.menu-a__contact a { color: var(--ddh-ink); text-decoration: none; }
.menu-a__contact a:hover { color: var(--ddh-magenta); }
.menu-a__contact .small { color: var(--ddh-slate); font-size: 11px; }
/* ================ MANIFESTO HERO ================ */
.manifesto { padding: 168px 0 96px; background: #FFFFFF; }
.manifesto .eyebrow {
font-family: var(--font-mono); font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
color: var(--ddh-slate); display: flex; align-items: center; gap: 12px; margin-bottom: 32px;
}
.manifesto .eyebrow .bar { display: inline-block; width: 28px; height: 2px; background: var(--ddh-ink); }
.manifesto h1 {
font-family: var(--font-display); font-weight: 900;
font-size: clamp(40px, 7.4vw, 124px);
letter-spacing: -0.045em; line-height: 0.96;
margin: 0; text-wrap: balance;
max-width: 1180px;
}
.manifesto h1 .it { font-style: italic; font-weight: 800; }
.manifesto h1 .pad { display: inline-block; }
.manifesto .sub {
margin-top: 56px;
display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: end;
border-top: 2px solid var(--ddh-black); padding-top: 32px;
}
.manifesto .sub p {
font-size: 18px; line-height: 1.55; max-width: 560px; margin: 0;
}
.manifesto .sub p strong { font-weight: 700; }
.manifesto .actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
.btn-primary, .btn-ghost {
font-family: var(--font-sans); font-weight: 700; font-size: 14px; padding: 16px 22px;
cursor: pointer; transition: all 180ms cubic-bezier(.2,.8,.2,1); border: 2px solid var(--ddh-black);
display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ddh-ink);
}
.btn-primary { background: var(--ddh-black); color: #fff; box-shadow: 4px 4px 0 0 var(--ddh-black); }
.btn-primary:hover { transform: translate(2px,2px); box-shadow: 0 0 0 0 var(--ddh-black); }
.btn-ghost { background: transparent; }
.btn-ghost:hover { background: var(--ddh-yellow); }
.arrow { font-family: var(--font-display); font-weight: 900; }
@media (max-width: 800px) {
.manifesto .sub { grid-template-columns: 1fr; gap: 24px; }
.manifesto .actions { justify-content: flex-start; }
}
/* ================ MARQUEE ================ */
.marquee { background: var(--ddh-black); color: #fff; padding: 22px 0; overflow: hidden; }
.mq-track { display: none; gap: 56px; white-space: nowrap; animation: scroll 36s linear infinite; }
.mq-track span { font-family: var(--font-display); font-weight: 800; font-size: 26px; letter-spacing: -0.02em; display: inline-flex; align-items: center; gap: 56px; }
.mq-track span::after { content: '✦'; color: var(--ddh-yellow); }
/* Show only the track that matches the active service (default when no service active) */
body:not([data-active-service]) .mq-track--default,
body[data-active-service="photography"] .mq-track--photography,
body[data-active-service="marketing"] .mq-track--marketing,
body[data-active-service="web"] .mq-track--web,
body[data-active-service="prints"] .mq-track--prints { display: flex; }
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* ================ SECTIONS ================ */
.section { padding: 120px 0; background: #FFFFFF; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 56px; gap: 24px; flex-wrap: wrap; }
.section-head h2 { font-family: var(--font-display); font-weight: 900; font-size: clamp(48px, 6.5vw, 116px); letter-spacing: -0.045em; line-height: 0.92; margin: 14px 0 0; text-transform: uppercase; }
.section-head h2 .it { font-style: italic; font-weight: 800; }
.section-head .ctx { max-width: 380px; font-size: 16px; line-height: 1.55; color: var(--ddh-slate); }
.eyebrow-row { font-family: var(--font-mono); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--ddh-slate); }
/* ================ SERVICES (FULL-WIDTH ROWS) ================ */
/* The svc-list lives OUTSIDE the .wrap so its rows extend edge-to-edge.
Each row has matching internal padding so the content uses ~90vw of the
available width (was capped at 1320px — bumped to 1640px for bigger fills). */
.svc-list {
display: flex; flex-direction: column;
width: 100%;
border-top: 3px solid var(--ddh-black);
border-bottom: 3px solid var(--ddh-black);
}
.svc-row {
display: grid; grid-template-columns: 100px 72px 1fr auto; gap: 28px; align-items: center;
/* Edge-aware padding: extends to 1640px content cap on wide screens */
padding: 44px max(40px, calc((100% - 1640px) / 2));
border-top: 2px solid var(--ddh-black);
transition: padding 280ms cubic-bezier(.2,.8,.2,1), background 220ms;
cursor: pointer; position: relative; overflow: hidden;
}
.svc-row:first-child { border-top: 0; }
.svc-row:hover { padding-top: 50px; padding-bottom: 50px; }
.svc-row .num { font-family: var(--font-mono); font-size: 14px; font-weight: 700; letter-spacing: .2em; color: var(--ddh-slate); }
.svc-row h3 {
font-family: var(--font-display); font-weight: 900;
font-size: clamp(36px, 7vw, 96px);
letter-spacing: -0.035em; line-height: 1; margin: 0;
white-space: nowrap;
}
.svc-row .arr { font-family: var(--font-display); font-weight: 900; font-size: 36px; transition: transform 240ms cubic-bezier(.2,.8,.2,1); }
.svc-row:hover .arr { transform: translateX(8px); }
/* On narrower screens, allow wrapping again so headlines don't overflow */
@media (max-width: 1100px) {
.svc-row { grid-template-columns: 80px 60px 1fr auto; gap: 20px; }
.svc-row h3 { white-space: normal; font-size: clamp(28px, 5.5vw, 56px); }
}
.svc-row[data-svc="photography"]:hover { background: var(--ddh-cyan); }
.svc-row[data-svc="marketing"]:hover { background: var(--ddh-magenta); }
.svc-row[data-svc="marketing"]:hover .num,
.svc-row[data-svc="marketing"]:hover .arr,
.svc-row[data-svc="marketing"]:hover .svc-icon { color: #fff; }
.svc-row[data-svc="web"]:hover { background: var(--ddh-yellow); }
.svc-row[data-svc="prints"]:hover { background: var(--ddh-black); }
.svc-row[data-svc="prints"]:hover .num,
.svc-row[data-svc="prints"]:hover .arr,
.svc-row[data-svc="prints"]:hover .svc-icon { color: #fff; }
/* ================ WORK GRID (FULL-WIDTH) ================ */
.work-bleed {
max-width: 1640px;
margin: 0 auto;
padding: 0 32px;
}
.work-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 26px; }
.work-card { grid-column: span 2; background: #fff; border: 3px solid var(--ddh-black); padding: 0; cursor: pointer; transition: transform 220ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms; box-shadow: 6px 6px 0 0 var(--ddh-black); display: flex; flex-direction: column; text-align: left; font: inherit; color: inherit; }
.work-card:hover { transform: translate(-3px,-3px); box-shadow: 10px 10px 0 0 var(--ddh-black); }
.work-card.featured { grid-column: span 6; flex-direction: row; box-shadow: 8px 8px 0 0 var(--ddh-magenta); }
.work-card.featured:hover { box-shadow: 12px 12px 0 0 var(--ddh-magenta); }
.work-img { aspect-ratio: 4/3; position: relative; border-bottom: 3px solid var(--ddh-black); overflow: hidden; }
.work-card.featured .work-img { aspect-ratio: auto; flex: 1.6; min-height: 420px; border-bottom: 0; border-right: 3px solid var(--ddh-black); }
.work-img .pattern { position: absolute; inset: 0; background-image: url(assets/images/mosaic-pattern.svg); background-size: 200px; opacity: 0.18; }
.work-img .num { position: absolute; top: 14px; left: 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }
.work-img .glyph { position: absolute; bottom: 10px; right: 18px; font-family: var(--font-display); font-weight: 900; font-size: clamp(64px, 10vw, 140px); line-height: 1; letter-spacing: -0.05em; }
.work-img.dark .num, .work-img.dark .glyph { color: #fff; }
.work-img.dark .pattern { filter: invert(1); opacity: 0.25; }
.work-meta { padding: 22px; }
.work-card.featured .work-meta { flex: 1; padding: 32px; display: flex; flex-direction: column; justify-content: space-between; }
.work-meta h3 { font-family: var(--font-display); font-weight: 900; font-size: 30px; line-height: 1; letter-spacing: -0.02em; margin: 0 0 10px; }
.work-card.featured .work-meta h3 { font-size: 52px; }
.work-meta .row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.work-meta .kind { font-size: 14px; color: var(--ddh-slate); }
.work-meta .yr { font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; color: var(--ddh-slate); }
@media (max-width: 1100px) {
.work-card { grid-column: span 3; }
}
@media (max-width: 800px) {
.work-card { grid-column: span 6; }
.work-card.featured { flex-direction: column; }
.work-card.featured .work-img { border-right: 0; border-bottom: 3px solid var(--ddh-black); min-height: 240px; }
}
/* ================ WORK · GALLERY CARDS ================
Each card has a kicker, a media stage (gallery / video / placeholder)
and a row of brand-style numbered buttons (01 · 02 · 03).
360° card buttons link out to Matterport tours (target=_blank).
Other cards' buttons swap which item is active in the stage. */
.gal { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; padding: 28px; }
.gal.dark { color: #fff; }
.gal__kicker { font-family: var(--font-display); font-weight: 900; font-size: clamp(20px, 2vw, 28px); letter-spacing: -0.02em; line-height: 1; text-transform: uppercase; margin: 0 0 4px; }
.gal__sub { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; opacity: .8; }
.gal__stage { flex: 1; margin: 18px 0; border: 2px dashed currentColor; background: rgba(255,255,255,0.18); position: relative; overflow: hidden; min-height: 160px; }
.gal.dark .gal__stage { background: rgba(0,0,0,0.18); }
.gal__item { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; flex-direction: column; gap: 8px; padding: 18px; text-align: center; }
.gal__item.is-active { display: flex; }
.gal__item iframe, .gal__item img, .gal__item video { width: 100%; height: 100%; object-fit: cover; border: 0; display: block; }
.gal__placeholder { font-family: var(--font-display); font-weight: 900; font-size: clamp(18px, 1.8vw, 24px); letter-spacing: -0.02em; text-transform: uppercase; }
.gal__placeholder small { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; margin-top: 6px; opacity: .7; font-weight: 400; }
.gal__nav { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.gal__btn { display: inline-flex; align-items: center; justify-content: center; padding: 7px 11px; font-family: var(--font-display); font-weight: 900; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; border: 2px solid currentColor; background: transparent; color: inherit; cursor: pointer; text-decoration: none; transition: all 180ms cubic-bezier(.2,.8,.2,1); box-shadow: 3px 3px 0 0 currentColor; white-space: nowrap; }
.gal__btn:hover, .gal__btn.is-active { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 0 currentColor; }
.gal:not(.dark) .gal__btn:hover, .gal:not(.dark) .gal__btn.is-active { background: var(--ddh-black); color: #fff; box-shadow: 5px 5px 0 0 var(--ddh-black); }
.gal.dark .gal__btn:hover, .gal.dark .gal__btn.is-active { background: #fff; color: var(--ddh-black); box-shadow: 5px 5px 0 0 #fff; }
.gal__btn .ext { font-size: 11px; margin-left: 6px; opacity: .7; }
/* Stats slide: big numbers in a row, small labels below */
.gal__stats { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: flex-end; padding: 14px 18px; }
.gal__stat { display: flex; flex-direction: column; gap: 2px; }
.gal__stat-num { font-family: var(--font-display); font-weight: 900; font-size: clamp(28px, 4vw, 48px); letter-spacing: -0.04em; line-height: 0.95; }
/* Inserts an invisible space character after each stat-num so AI text extractors
and copy-paste don't concatenate "24/7Plesk hosting" into one word. */
.gal__stat-num::after { content: ' '; font-size: 0; }
.gal__stat-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; opacity: .8; }
/* Stack slide: vertical list of capabilities */
.gal__stack { padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.gal__stack-eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; opacity: .75; }
.gal__stack-list { font-family: var(--font-display); font-weight: 900; font-size: clamp(15px, 1.5vw, 19px); letter-spacing: -0.01em; line-height: 1.35; text-transform: uppercase; }
/* Cover slide on the 360° card — visible in stage by default; clicking a button opens the lightbox instead of swapping */
.gal__cover { padding: 14px 18px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.gal__cover-eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; opacity: .75; }
.gal__cover-h { font-family: var(--font-display); font-weight: 900; font-size: clamp(20px, 2.4vw, 30px); letter-spacing: -0.02em; line-height: 0.95; text-transform: uppercase; margin: 0; }
.gal__cover-sub { font-family: var(--font-sans); font-size: 13px; line-height: 1.45; opacity: .85; }
/* ================ MATTERPORT LIGHTBOX ================
Full-screen overlay with the Matterport iframe centered.
Opened via .gal__btn[data-tour]. Closes on ESC, X click, or overlay click. */
.lb { position: fixed; inset: 0; z-index: 200; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 32px; background: rgba(10,10,10,0.85); backdrop-filter: blur(6px); overflow-y: auto; }
.lb.is-open { display: flex; }
body.lb-open { overflow: hidden; }
.lb__frame { position: relative; width: 100%; max-width: 1280px; aspect-ratio: 16 / 9; background: #000; border: 3px solid #fff; box-shadow: 12px 12px 0 0 var(--ddh-yellow); overflow: hidden; flex-shrink: 0; }
.lb__frame iframe,
.lb__frame img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.lb__frame iframe[hidden],
.lb__frame img[hidden],
.lb__controls[hidden],
.lb__counter[hidden] { display: none !important; }
.lb__frame img { object-fit: contain; background: #000; }
.lb__close { position: absolute; top: -22px; right: -22px; width: 48px; height: 48px; border: 3px solid #fff; background: var(--ddh-black); color: #fff; font-family: var(--font-display); font-size: 22px; font-weight: 900; cursor: pointer; transition: background 180ms; z-index: 5; }
.lb__close:hover { background: var(--ddh-yellow); color: var(--ddh-black); }
.lb__counter { position: absolute; top: 16px; left: 16px; background: var(--ddh-black); color: #fff; font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; padding: 6px 12px; border: 2px solid #fff; z-index: 5; }
.lb__caption { font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #fff; opacity: .8; text-align: center; }
.lb__controls { display: flex; gap: 14px; align-items: center; }
.lb__arrow { width: 48px; height: 48px; background: transparent; border: 2px solid #fff; color: #fff; font-family: var(--font-display); font-size: 22px; font-weight: 900; cursor: pointer; transition: all 180ms; }
.lb__arrow:hover { background: #fff; color: var(--ddh-black); }
.lb__autoplay { background: transparent; border: 2px solid #fff; color: #fff; font-family: var(--font-display); font-weight: 900; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; padding: 12px 18px; cursor: pointer; transition: all 180ms; }
.lb__autoplay.is-on, .lb__autoplay:hover { background: var(--ddh-yellow); color: var(--ddh-black); border-color: var(--ddh-yellow); }
@media (max-width: 720px) {
.lb__close { top: -16px; right: -16px; width: 38px; height: 38px; font-size: 18px; }
.lb__caption { font-size: 10px; }
.lb__controls { gap: 8px; }
}
/* ================ CTA ================ */
.cta { background: #FFFFFF; padding: 120px 0; border-top: 2px solid var(--ddh-black); }
.cta h2 { font-family: var(--font-display); font-weight: 900; font-size: clamp(48px, 8vw, 132px); letter-spacing: -0.045em; line-height: 0.92; margin: 0; max-width: 1100px; }
.cta h2 .it { font-style: italic; font-weight: 800; }
.cta-row { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: end; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--ddh-stone); }
.cta-row .meta { font-family: var(--font-mono); font-size: 13px; letter-spacing: .12em; line-height: 1.7; }
.cta-row .meta b { letter-spacing: .2em; text-transform: uppercase; color: var(--ddh-slate); font-weight: 700; }
.cta-row .actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-end; align-self: end; }
@media (max-width: 800px) { .cta-row { grid-template-columns: 1fr; } .cta-row .actions { justify-content: flex-start; } }
/* ================ FOOTER ================ */
footer { background: #FFFFFF; padding: 48px 0 28px; border-top: 1px solid var(--ddh-chalk); }
.ft-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 18px; }
.ft-row .small { font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ddh-slate); }
.ft-dots { display: flex; gap: 6px; }
.ft-dots i { width: 12px; height: 12px; border-radius: 999px; border: 1.5px solid var(--ddh-black); }
/* ================ MANIFESTO BODY (the new hero copy) ================ */
.manifesto__wrap { position: relative; }
/* CMYK chromatic-aberration glitch: each channel (cyan/magenta/yellow) has
its own X/Y offset, jittered continuously by JS. Resting state is subtle
(~1px), glitch bursts spike to 6-10px for ~200ms every few seconds.
Same effect is shared by .svc-screen__h on each of the 4 service overlays. */
.hub-h1,
.svc-screen__h {
--g-c-x: -1px; --g-c-y: 0px;
--g-m-x: 1px; --g-m-y: 0px;
--g-y-x: 0px; --g-y-y: 0px;
text-shadow:
var(--g-c-x) var(--g-c-y) 0 var(--ddh-cyan),
var(--g-m-x) var(--g-m-y) 0 var(--ddh-magenta),
var(--g-y-x) var(--g-y-y) 0 var(--ddh-yellow);
will-change: text-shadow;
position: relative;
}
.hub-h1 {
font-family: var(--font-display); font-weight: 900;
font-size: clamp(46px, 8vw, 134px);
letter-spacing: -0.05em; line-height: 0.92;
margin: 0 0 22px; max-width: 1180px; text-wrap: balance;
text-transform: uppercase;
}
.hub-h1 .italic { font-style: italic; font-weight: 800; text-transform: uppercase; }
/* Each line wrapper allows staggered slide-up reveal on entry */
.hub-h1__line {
display: block;
transform: translateY(48px);
opacity: 0;
animation: hubLineIn 850ms cubic-bezier(.2,.8,.2,1) calc(var(--i, 0) * 130ms + 250ms) forwards;
}
/* Insert a space character after each line for AI/copy-paste text extraction
(display:block already handles visual line breaks). Keeps the rendered
output "ΦΤΙΑΓΜΕΝΟ ΣΤΗ ΜΥΚΟΝΟ. ΧΤΙΣΜΕΝΟ ΓΙΑ ΚΥΡΙΑΡΧΙΑ." in plain text. */
.hub-h1__line::after { content: ' '; font-size: 0; }
@keyframes hubLineIn {
0% { transform: translateY(48px); opacity: 0; }
55% { transform: translateY(-6px); opacity: 1; }
100% { transform: translateY(0); opacity: 1; }
}
/* Blue terminal-style blinking cursor at end of last line.
The literal "_" inside the span is hidden via font-size:0 so AI text
extractors don't pick it up; the visible cursor is rendered via ::before
pseudo-content (invisible to text-only parsers). */
.hub-h1__cursor {
display: inline-block;
margin-left: 0.08em;
font-size: 0;
line-height: 0;
vertical-align: baseline;
}
.hub-h1__cursor::before {
content: '';
display: none;
}
@keyframes cursorBlink {
0%, 49% { opacity: 1; }
50%, 100%{ opacity: 0; }
}
/* Optional rare horizontal "tear" that JS toggles via .is-glitching for ~120ms */
.hub-h1.is-glitching,
.svc-screen__h.is-glitching {
filter: contrast(1.05) saturate(1.15);
}
.hub-h1.is-glitching::before, .svc-screen__h.is-glitching::before,
.hub-h1.is-glitching::after, .svc-screen__h.is-glitching::after {
content: '';
position: absolute; left: -2%; right: -2%;
height: 2px;
background: rgba(255, 230, 0, 0.55);
mix-blend-mode: screen;
pointer-events: none;
}
.hub-h1.is-glitching::before, .svc-screen__h.is-glitching::before { top: 30%; box-shadow: 0 18px 0 rgba(46, 197, 241, 0.4); }
.hub-h1.is-glitching::after, .svc-screen__h.is-glitching::after { top: 70%; box-shadow: 0 -22px 0 rgba(236, 42, 142, 0.4); }
@media (prefers-reduced-motion: reduce) {
.hub-h1, .svc-screen__h { --g-c-x: -1px; --g-m-x: 1px; --g-y-x: 0px; }
.hub-h1__line { animation: none; transform: none; opacity: 1; }
.hub-h1__cursor { animation: none; }
}
/* Dymo embossed label - for eyebrow tags, numbers, etc. */
.dymo {
display: inline-block;
background: var(--ddh-black);
color: #fff;
padding: 5px 12px;
font-family: var(--font-display); font-weight: 900;
font-size: 13px; letter-spacing: .12em;
text-transform: uppercase;
border: 1px solid #000;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.08),
inset 0 -1px 0 rgba(0,0,0,0.5);
text-shadow:
0 -1px 0 rgba(0,0,0,0.55),
0 1px 0 rgba(255,255,255,0.16);
position: relative;
}
.dymo--white { background: #fff; color: var(--ddh-black); border-color: var(--ddh-black);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -1px 0 rgba(0,0,0,0.12);
text-shadow: 0 -1px 0 rgba(255,255,255,0.4), 0 1px 0 rgba(0,0,0,0.18);
}
.dymo--cyan { background: var(--ddh-cyan); color: var(--ddh-black); border-color: var(--ddh-black); }
.dymo--yellow { background: var(--ddh-yellow); color: var(--ddh-black); border-color: var(--ddh-black); }
.dymo--magenta { background: var(--ddh-magenta); color: #fff; border-color: var(--ddh-black); }
/* Large variant: scales with parent font-size, used inside huge headlines.
Keeps the embossed plastic-tape feel but at headline proportions. */
.dymo--lg {
font-family: inherit;
font-size: 0.78em;
letter-spacing: -0.01em;
padding: 0.04em 0.22em;
border-width: 2px;
transform: rotate(-1.2deg);
margin: 0 0.05em;
box-shadow:
inset 0 2px 0 rgba(255,255,255,0.10),
inset 0 -2px 0 rgba(0,0,0,0.45),
2px 2px 0 0 rgba(0,0,0,0.18);
text-shadow:
0 -2px 0 rgba(0,0,0,0.4),
0 2px 0 rgba(255,255,255,0.18);
}
.dymo--lg.dymo--white { box-shadow: inset 0 2px 0 rgba(255,255,255,0.5), inset 0 -2px 0 rgba(0,0,0,0.12), 2px 2px 0 0 rgba(0,0,0,0.18); text-shadow: 0 -2px 0 rgba(255,255,255,0.4), 0 2px 0 rgba(0,0,0,0.18); }
.hub-meta {
font-family: var(--font-display); font-weight: 900;
font-size: clamp(22px, 2.6vw, 38px); letter-spacing: -0.02em; line-height: 1.15;
color: var(--ddh-ink); margin: 0 0 40px; max-width: 720px;
text-transform: uppercase;
}
.hub-block {
font-family: var(--font-sans); font-weight: 500;
font-size: clamp(18px, 1.85vw, 24px); line-height: 1.55;
margin: 24px 0; max-width: 820px;
}
.hub-block strong { font-weight: 700; }
.hub-services {
font-family: var(--font-display); font-weight: 900;
font-size: clamp(32px, 4.6vw, 72px);
letter-spacing: -0.03em; line-height: 1.1;
margin: 44px 0 14px; max-width: 1180px;
text-transform: uppercase;
}
.hub-bold {
font-family: var(--font-display); font-weight: 900;
font-size: clamp(28px, 3.4vw, 52px);
letter-spacing: -0.03em; line-height: 1.1;
margin: 36px 0 10px;
text-transform: uppercase;
}
.hub-cta {
font-family: var(--font-display); font-weight: 900;
font-size: clamp(40px, 5.4vw, 88px);
letter-spacing: -0.03em; line-height: 0.95; margin: 12px 0 0;
text-transform: uppercase;
}
.hub-cta .italic { font-style: italic; }
.hub-actions { margin-top: 40px; display: flex; gap: 14px; flex-wrap: wrap; }
/* ================ POST-IT BOARD (overlay) ================ */
.postit-board {
position: absolute; top: 80px; right: -8px;
width: 460px; height: 640px;
pointer-events: none; z-index: 30;
}
.postit {
position: absolute;
width: 270px; padding: 22px 22px 34px;
border: 2px solid var(--ddh-black);
box-shadow: 6px 6px 0 0 rgba(10,10,10,0.18);
pointer-events: auto;
cursor: grab; user-select: none;
/* Combined transform: home rotation + drag offset + scroll-driven offset/rotation */
transform:
rotate(calc(var(--rot, 0deg) + var(--rot-scroll, 0deg)))
translate(
calc(var(--x, 0px) + var(--tx-scroll, 0px)),
calc(var(--y, 0px) + var(--ty-scroll, 0px))
);
transform-origin: center;
transition: box-shadow 220ms cubic-bezier(.2,.8,.2,1);
z-index: var(--z, 5);
will-change: transform;
}
.postit:active { cursor: grabbing; }
.postit.is-dragging { cursor: grabbing; transition: none; box-shadow: 10px 10px 0 0 rgba(10,10,10,0.24); z-index: 200; }
.postit:hover { box-shadow: 8px 8px 0 0 rgba(10,10,10,0.24); }
.postit[data-svc="photography"] { top: 0; left: 60px; }
.postit[data-svc="marketing"] { top: 200px; left: 200px; }
.postit[data-svc="web"] { top: 350px; left: 40px; }
.postit[data-svc="prints"] { top: 480px; left: 200px; }
.postit--cyan { background: var(--ddh-cyan); color: var(--ddh-black); }
.postit--magenta { background: var(--ddh-magenta); color: #fff; }
.postit--yellow { background: var(--ddh-yellow); color: var(--ddh-black); }
.postit--black { background: var(--ddh-black); color: #fff; }
/* Original simple sticker tape — translucent rectangle */
.postit__tape {
position: absolute; top: -10px; left: 50%;
transform: translateX(-50%) rotate(-2deg);
width: 78px; height: 18px;
background: rgba(255,255,255,0.55);
border: 1px solid rgba(0,0,0,0.08);
pointer-events: none;
}
.postit--black .postit__tape,
.postit--magenta .postit__tape {
background: rgba(255,255,255,0.22);
border-color: rgba(255,255,255,0.18);
}
.postit__num {
font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em;
text-transform: uppercase; opacity: 0.78;
}
.postit__h {
font-family: var(--font-display); font-weight: 900;
font-size: 26px; letter-spacing: -0.02em; line-height: 1.05;
margin: 8px 0 6px;
color: inherit; /* override the design-system h3 color */
word-wrap: break-word;
hyphens: auto;
}
.postit__sub {
display: block;
font-family: var(--font-sans); font-size: 13px; line-height: 1.4;
margin-bottom: 14px; opacity: 0.92;
}
.postit__link {
display: inline-block;
font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
text-transform: uppercase;
text-decoration: underline; text-underline-offset: 3px;
color: inherit;
}
.postit__drag {
position: absolute; bottom: 8px; right: 12px;
font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em;
text-transform: uppercase; opacity: 0.55;
pointer-events: none;
}
/* ================ ACTIVE-SERVICE STATE (FULL solid color page + text auto-flip) ================ */
body {
transition: background-color 600ms cubic-bezier(.2,.8,.2,1), color 600ms;
--svc-fg: var(--ddh-ink);
--svc-fg-2: var(--ddh-slate);
--svc-line: var(--ddh-black);
}
body[data-active-service="photography"] { background-color: var(--ddh-cyan); --svc-bg: var(--ddh-cyan); --svc-fg: var(--ddh-ink); --svc-fg-2: rgba(10,10,10,0.65); --svc-line: var(--ddh-black); }
body[data-active-service="marketing"] { background-color: var(--ddh-magenta); --svc-bg: var(--ddh-magenta); --svc-fg: #fff; --svc-fg-2: rgba(255,255,255,0.78); --svc-line: #fff; }
body[data-active-service="web"] { background-color: var(--ddh-yellow); --svc-bg: var(--ddh-yellow); --svc-fg: var(--ddh-ink); --svc-fg-2: rgba(10,10,10,0.65); --svc-line: var(--ddh-black); }
body[data-active-service="prints"] { background-color: var(--ddh-black); --svc-bg: var(--ddh-black); --svc-fg: #fff; --svc-fg-2: rgba(255,255,255,0.78); --svc-line: #fff; }
/* All section backgrounds become transparent so the body's solid color shows through */
body[data-active-service] .manifesto,
body[data-active-service] .section,
body[data-active-service] .cta,
body[data-active-service] footer { background-color: transparent !important; transition: background-color 600ms cubic-bezier(.2,.8,.2,1); }
/* Marquee inverts to body color on active state */
body[data-active-service] .marquee { background: var(--svc-fg); color: var(--svc-bg, #fff); }
body[data-active-service] .marquee .mq-track span::after { color: var(--svc-fg-2); }
/* Text colors flip uniformly */
body[data-active-service],
body[data-active-service] h1,
body[data-active-service] h2,
body[data-active-service] h3,
body[data-active-service] h4,
body[data-active-service] p,
body[data-active-service] a:not(.postit__link):not(.btn-primary):not(.btn-ghost):not(.pkg-card__cta):not(.cross-card) { color: var(--svc-fg); }
/* Cross-services cards keep their own foreground color (set per-variant in page CSS) */
body[data-active-service] .cross-card--magenta,
body[data-active-service] .cross-card--magenta *,
body[data-active-service] .cross-card--black,
body[data-active-service] .cross-card--black * { color: #fff; }
body[data-active-service] .cross-card--cyan,
body[data-active-service] .cross-card--cyan *,
body[data-active-service] .cross-card--yellow,
body[data-active-service] .cross-card--yellow * { color: var(--ddh-ink); }
/* SEO content sections (appended on standalone service pages after the svc-screen).
The global "body[data-active-service] h2/h3/p" rule above forces svc-fg color,
which makes text invisible inside .seo-band bone/white bands. Override here. */
body[data-active-service] .seo-band h1,
body[data-active-service] .seo-band h2,
body[data-active-service] .seo-band h3,
body[data-active-service] .seo-band h4,
body[data-active-service] .seo-band p,
body[data-active-service] .seo-band li,
body[data-active-service] .seo-band .lede { color: var(--ddh-ink); }
body[data-active-service] .seo-band--magenta h1,
body[data-active-service] .seo-band--magenta h2,
body[data-active-service] .seo-band--magenta h3,
body[data-active-service] .seo-band--magenta h4,
body[data-active-service] .seo-band--magenta p,
body[data-active-service] .seo-band--magenta .lede,
body[data-active-service] .seo-band--black h1,
body[data-active-service] .seo-band--black h2,
body[data-active-service] .seo-band--black h3,
body[data-active-service] .seo-band--black h4,
body[data-active-service] .seo-band--black p,
body[data-active-service] .seo-band--black .lede { color: #fff; }
body[data-active-service] .seo-band .type-card p,
body[data-active-service] .seo-band .feat-card .desc,
body[data-active-service] .seo-band .platform-card .desc,
body[data-active-service] .seo-band .channel-card .desc { color: var(--ddh-slate); }
/* Secondary / muted text */
body[data-active-service] .eyebrow-row,
body[data-active-service] .menu-eyebrow,
body[data-active-service] .section-head .ctx,
body[data-active-service] .work-meta .kind,
body[data-active-service] .work-meta .yr,
body[data-active-service] .cf__hint,
body[data-active-service] .cf__small,
body[data-active-service] .cf__field > span,
body[data-active-service] .ft-row .small,
body[data-active-service] .cta-quickrow .meta,
body[data-active-service] .hub-meta { color: var(--svc-fg-2); }
body[data-active-service] .cta-quickrow .meta b,
body[data-active-service] .hub-block strong { color: var(--svc-fg); }
/* Form: input borders flip */
body[data-active-service] .cf__field input,
body[data-active-service] .cf__field select,
body[data-active-service] .cf__field textarea {
border-bottom-color: var(--svc-line); color: var(--svc-fg);
}
body[data-active-service] .cf__field select {
background-image: linear-gradient(45deg, transparent 50%, var(--svc-fg) 50%), linear-gradient(135deg, var(--svc-fg) 50%, transparent 50%);
background-position: calc(100% - 14px) center, calc(100% - 8px) center;
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
}
/* Borders / dividers */
body[data-active-service] .cf__group,
body[data-active-service] .cf__bottom,
body[data-active-service] .cta-quickrow,
body[data-active-service] .manifesto .sub,
body[data-active-service] .svc-row,
body[data-active-service] .cta { border-color: var(--svc-line); }
/* Form svc swatches: flip border + offset-shadow to --svc-line so the white cards stay framed against the dark magenta/black page bg */
body[data-active-service] .cf__svc { border-color: var(--svc-line); box-shadow: 4px 4px 0 0 var(--svc-line); }
body[data-active-service] .cf__svc:hover { box-shadow: 6px 6px 0 0 var(--svc-line); }
/* Menu panel keeps its own ink/bone palette regardless of active service —
the global "body[data-active-service] a { color: var(--svc-fg) }" rule has
higher specificity than scoped class overrides (4× :not() chains add up).
!important is the right tool here: the menu panel is meant to be a self-
contained style island regardless of which service overlay is active. */
body[data-active-service] .menu-panel,
body[data-active-service] .menu-panel a { color: var(--ddh-ink) !important; }
body[data-active-service] .menu-panel .menu-a__swatch--magenta,
body[data-active-service] .menu-panel .menu-a__swatch--black { color: #fff !important; }
body[data-active-service] .menu-panel .menu-a__list a:hover { color: #fff !important; }
/* Header sticky-state: keep transparent on active service so color is fully visible */
body[data-active-service] .header.scrolled { background: transparent; border-bottom-color: var(--svc-line); }
body[data-active-service] .header { color: var(--svc-fg); }
body[data-active-service] .menu-btn,
body[data-active-service] .menu-btn .lbl,
body[data-active-service] .logo,
body[data-active-service] .logo .word { color: var(--svc-fg); }
body[data-active-service] .menu-btn .bars i { background: var(--svc-fg); }
body[data-active-service] .cf__legend { color: var(--svc-fg); }
/* Buttons: flip primary on dark active services */
body[data-active-service="marketing"] .btn-primary,
body[data-active-service="prints"] .btn-primary { background: #fff; color: var(--svc-bg, var(--ddh-ink)); border-color: #fff; box-shadow: 4px 4px 0 0 #fff; }
body[data-active-service="marketing"] .btn-ghost,
body[data-active-service="prints"] .btn-ghost { color: #fff; border-color: #fff; }
body[data-active-service="marketing"] .btn-ghost:hover,
body[data-active-service="prints"] .btn-ghost:hover { background: #fff; color: var(--ddh-ink); }
/* Service rows: when other service is active, dim them */
body[data-active-service] .svc-row { opacity: 0.5; transition: opacity 320ms ease, padding-left 240ms cubic-bezier(.2,.8,.2,1); }
body[data-active-service="photography"] .svc-row[data-svc="photography"],
body[data-active-service="marketing"] .svc-row[data-svc="marketing"],
body[data-active-service="web"] .svc-row[data-svc="web"],
body[data-active-service="prints"] .svc-row[data-svc="prints"] { opacity: 1; padding-left: 22px; }
/* Top accent strip - slides in when a service is active */
body::after {
content: '';
position: fixed; top: 0; left: 0; right: 0; height: 4px;
background: var(--strip-color, transparent);
transform: scaleX(0); transform-origin: left;
transition: transform 420ms cubic-bezier(.2,.8,.2,1);
z-index: 200; pointer-events: none;
}
body[data-active-service]::after { transform: scaleX(1); }
body[data-active-service="photography"] { --strip-color: var(--ddh-cyan); }
body[data-active-service="marketing"] { --strip-color: var(--ddh-magenta); }
body[data-active-service="web"] { --strip-color: var(--ddh-yellow); }
body[data-active-service="prints"] { --strip-color: var(--ddh-black); }
/* Service rows: when one is active, others dim, the matching row pre-applies its color */
body[data-active-service] .svc-row { opacity: 0.4; transition: opacity 320ms ease, padding-left 240ms cubic-bezier(.2,.8,.2,1), background 320ms ease; }
body[data-active-service="photography"] .svc-row[data-svc="photography"],
body[data-active-service="marketing"] .svc-row[data-svc="marketing"],
body[data-active-service="web"] .svc-row[data-svc="web"],
body[data-active-service="prints"] .svc-row[data-svc="prints"] { opacity: 1; padding-left: 18px; }
/* Active row: emphasis via opacity + padding-left (page bg is already the solid service color) */
/* Active post-it gets a subtle ring */
body[data-active-service="photography"] .postit[data-svc="photography"],
body[data-active-service="marketing"] .postit[data-svc="marketing"],
body[data-active-service="web"] .postit[data-svc="web"],
body[data-active-service="prints"] .postit[data-svc="prints"] {
box-shadow: 0 0 0 4px rgba(10,10,10,0.85), 8px 8px 0 0 rgba(10,10,10,0.24);
}
@media (max-width: 1100px) {
.postit-board {
position: relative; inset: auto;
width: 100%; height: auto;
margin-top: 48px;
display: flex; flex-wrap: wrap; gap: 20px;
}
.postit { position: relative; top: auto !important; left: auto !important; flex: 1 1 240px; max-width: 320px; }
}
/* ================ CONTACT FORM ================
Hub-style form, mosaic-line dividers, CMYK service swatches,
hard offset shadows. Posts to submit.php (existing PHP handler).
*/
.cf__form {
margin-top: 56px;
display: grid;
gap: 56px;
max-width: 1100px;
}
.cf__group {
border: 0; padding: 32px 0 0; margin: 0;
border-top: 3px solid var(--ddh-black);
}
.cf__legend {
font-family: var(--font-display);
font-size: clamp(26px, 3.2vw, 44px);
letter-spacing: -0.03em; line-height: 1;
text-transform: uppercase;
margin: 0 0 14px;
color: var(--ddh-ink);
}
.cf__hint {
font-family: var(--font-mono);
font-size: 12px; letter-spacing: .14em;
color: var(--ddh-slate);
text-transform: uppercase;
margin: 0 0 28px;
}
.cf__row { display: grid; gap: 24px; margin-bottom: 24px; }
.cf__row--2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 700px) { .cf__row--2 { grid-template-columns: 1fr; } }
.cf__field {
display: flex; flex-direction: column; gap: 8px;
}
.cf__field > span {
font-family: var(--font-mono);
font-size: 11px; letter-spacing: .16em;
color: var(--ddh-slate);
text-transform: uppercase;
}
.cf__field input,
.cf__field select,
.cf__field textarea {
font-family: var(--font-sans);
font-size: 17px;
border: 0;
border-bottom: 2px solid var(--ddh-black);
background: transparent;
padding: 12px 0;
outline: none;
color: var(--ddh-ink);
transition: border-color 220ms;
border-radius: 0;
-webkit-appearance: none;
appearance: none;
}
.cf__field select {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 4px center;
padding-right: 28px;
}
.cf__field input:focus,
.cf__field select:focus,
.cf__field textarea:focus { border-bottom-color: var(--ddh-magenta); }
.cf__field textarea { resize: vertical; min-height: 130px; line-height: 1.5; }
/* Native dropdown option list — force dark text on white bg so options stay readable on every service overlay (otherwise white-on-white on prints/marketing) */
.cf__field select option { color: var(--ddh-ink); background: #fff; }
/* Service swatch picker - multi-select, 4 cards */
.cf__svc-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
@media (max-width: 700px) { .cf__svc-grid { grid-template-columns: 1fr; } }
.cf__svc {
position: relative;
display: flex; flex-direction: column; gap: 6px;
padding: 22px 22px 22px 60px;
border: 2px solid var(--ddh-black);
background: #fff;
cursor: pointer;
transition: all 220ms cubic-bezier(.2,.8,.2,1);
box-shadow: 4px 4px 0 0 var(--ddh-black);
user-select: none;
}
.cf__svc:hover { transform: translate(-1px, -1px); box-shadow: 6px 6px 0 0 var(--ddh-black); }
.cf__svc input[type="checkbox"] {
position: absolute; left: 22px; top: 26px;
width: 22px; height: 22px;
accent-color: var(--ddh-black);
margin: 0;
}
.cf__svc-num {
font-family: var(--font-mono);
font-size: 11px; letter-spacing: .18em;
color: var(--ddh-slate);
text-transform: uppercase;
}
.cf__svc-name {
font-family: var(--font-display); font-weight: 900;
font-size: 22px; letter-spacing: -0.02em; line-height: 1.05;
text-transform: uppercase;
color: var(--ddh-ink);
}
.cf__svc-sub {
font-size: 13px; line-height: 1.4; color: var(--ddh-slate);
}
.cf__svc:has(input:checked) {
background: var(--ddh-bone);
}
.cf__svc--cyan:has(input:checked) { box-shadow: 6px 6px 0 0 var(--ddh-cyan); background: color-mix(in oklab, var(--ddh-cyan) 18%, #fff); }
.cf__svc--magenta:has(input:checked) { box-shadow: 6px 6px 0 0 var(--ddh-magenta); background: color-mix(in oklab, var(--ddh-magenta) 16%, #fff); }
.cf__svc--yellow:has(input:checked) { box-shadow: 6px 6px 0 0 var(--ddh-yellow); background: var(--ddh-yellow); }
.cf__svc--black:has(input:checked) { box-shadow: 6px 6px 0 0 var(--ddh-black); background: var(--ddh-black); color: #fff; }
.cf__svc--black:has(input:checked) .cf__svc-num { color: rgba(255,255,255,0.65); }
.cf__svc--black:has(input:checked) .cf__svc-name { color: #fff; }
.cf__svc--black:has(input:checked) .cf__svc-sub { color: rgba(255,255,255,0.85); }
/* Bottom: GDPR + submit + status */
.cf__bottom {
border-top: 3px solid var(--ddh-black);
padding-top: 32px;
}
.cf__check {
display: flex; align-items: flex-start; gap: 12px;
margin-bottom: 12px;
font-size: 14px; line-height: 1.5;
cursor: pointer;
}
.cf__check input {
margin-top: 3px; accent-color: var(--ddh-black);
width: 18px; height: 18px; flex: none;
}
.cf__check a { font-weight: 600; }
.cf__hp {
position: absolute; left: -9999px; opacity: 0; pointer-events: none;
}
.cf__actions {
margin-top: 28px;
display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.cf__submit { font-size: 16px; padding: 18px 28px; cursor: pointer; }
.cf__small {
font-family: var(--font-mono);
font-size: 11px; letter-spacing: .14em;
color: var(--ddh-slate);
text-transform: uppercase;
margin: 0;
}
.cf__status {
margin-top: 18px;
font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em;
min-height: 20px;
}
.cf__status.is-ok { color: var(--ddh-ink); font-weight: 700; padding: 10px 14px; background: color-mix(in oklab, var(--ddh-cyan) 25%, #fff); border: 2px solid var(--ddh-black); display: inline-block; }
.cf__status.is-error { color: #fff; font-weight: 700; padding: 10px 14px; background: var(--ddh-magenta); border: 2px solid var(--ddh-black); display: inline-block; }
/* Quick-contact fallback strip below the form */
.cta-quickrow {
margin-top: 56px;
padding-top: 32px;
border-top: 1px solid var(--ddh-stone);
display: flex; justify-content: space-between; align-items: center;
flex-wrap: wrap; gap: 24px;
}
.cta-quickrow .meta {
font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em;
line-height: 1.7; color: var(--ddh-slate);
}
.cta-quickrow .meta b { color: var(--ddh-ink); letter-spacing: .2em; text-transform: uppercase; }
/* ================ SERVICE ICONS (minimal line) ================
Hand-drawn-feeling SVG icons for each service row.
*/
.svc-icon {
width: 64px; height: 64px;
color: var(--ddh-ink);
transition: transform 240ms cubic-bezier(.2,.8,.2,1);
}
@media (max-width: 1100px) {
.svc-icon { width: 48px; height: 48px; }
}
.svc-row:hover .svc-icon { transform: rotate(-6deg) scale(1.06); }
.svc-icon svg { width: 100%; height: 100%; display: block; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body[data-active-service] .svc-icon { color: var(--svc-fg); }
/* ================ ROTATING CONTACT STAMP (floating, bottom-right) ================
Always-visible animated badge. Hover scales it. Clicking scrolls to #contact.
*/
.contact-stamp {
position: fixed; bottom: 28px; right: 28px;
width: 132px; height: 132px;
z-index: 55;
text-decoration: none;
border-radius: 50%;
display: grid; place-items: center;
transition: transform 320ms cubic-bezier(.22,.61,.36,1);
cursor: pointer;
}
.contact-stamp:hover { transform: scale(1.08); }
.contact-stamp__bg {
position: absolute; inset: 0;
border-radius: 50%;
background: var(--ddh-yellow);
border: 2px solid var(--ddh-black);
box-shadow: 4px 4px 0 0 var(--ddh-black);
transition: background 240ms;
}
.contact-stamp:hover .contact-stamp__bg { background: var(--ddh-magenta); }
.contact-stamp__rotating {
position: absolute; inset: 0; width: 100%; height: 100%;
animation: stampSpin 14s linear infinite;
}
.contact-stamp__rotating text {
fill: var(--ddh-black);
font-family: var(--font-mono);
font-size: 9.5px;
letter-spacing: .08em;
text-transform: uppercase;
font-weight: 600;
}
.contact-stamp:hover .contact-stamp__rotating text { fill: #fff; }
.contact-stamp__arrow {
position: relative; z-index: 2;
width: 28px; height: 28px;
color: var(--ddh-black);
transition: color 240ms, transform 240ms;
}
.contact-stamp:hover .contact-stamp__arrow { color: #fff; transform: rotate(45deg); }
@keyframes stampSpin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
body[data-active-service] .contact-stamp__bg { background: var(--svc-fg); border-color: var(--svc-fg); box-shadow: 4px 4px 0 0 var(--svc-fg); }
body[data-active-service] .contact-stamp__rotating text,
body[data-active-service] .contact-stamp__arrow { fill: var(--svc-bg, #fff); color: var(--svc-bg, #fff); }
@media (max-width: 700px) {
.contact-stamp { width: 96px; height: 96px; bottom: 16px; right: 16px; }
.contact-stamp__rotating text { font-size: 8px; }
}
/* ================ SCROLL-DRIVEN BIG TEXT ("SUIVEZ-LE" style) ================
Massive uppercase text that translates horizontally as the user scrolls.
Combines an autonomous CSS marquee with a scroll-driven boost via JS.
*/
.scrolltext {
background: var(--ddh-black);
color: #fff;
padding: 80px 0 80px;
overflow: hidden;
position: relative;
border-top: 3px solid var(--ddh-black);
border-bottom: 3px solid var(--ddh-black);
}
body[data-active-service] .scrolltext { background: var(--svc-fg); color: var(--svc-bg, #fff); }
body[data-active-service="marketing"] .scrolltext { background: #fff; color: var(--ddh-magenta); }
body[data-active-service="prints"] .scrolltext { background: #fff; color: var(--ddh-black); }
body[data-active-service="photography"] .scrolltext { background: var(--ddh-ink); color: var(--ddh-cyan); }
body[data-active-service="web"] .scrolltext { background: var(--ddh-ink); color: var(--ddh-yellow); }
.scrolltext__track {
display: flex; align-items: center; gap: 60px;
white-space: nowrap;
will-change: transform;
transform: translateX(var(--bigshift, 0px));
}
.scrolltext__track span {
font-family: var(--font-display);
font-weight: 900;
font-size: clamp(72px, 12vw, 200px);
letter-spacing: -0.05em;
line-height: 0.9;
text-transform: uppercase;
}
.scrolltext__track em {
font-family: var(--font-display);
font-style: italic;
font-weight: 800;
color: var(--ddh-yellow);
margin: 0 .2em;
}
.scrolltext__star {
color: var(--ddh-yellow);
font-size: clamp(40px, 6vw, 80px);
}
/* ================ SERVICE SCREENS (single-page mode) ================
Each service has a hidden
that becomes the entire page content when the user activates that service.
Default landing sections (manifesto, services list, work grid, hub callout)
hide; the service screen + marquee + scrolltext + contact + footer remain.
*/
.svc-screen {
display: none;
padding: 168px 0 96px;
min-height: 100vh;
position: relative;
}
body[data-active-service="photography"] .svc-screen[data-svc-page="photography"],
body[data-active-service="marketing"] .svc-screen[data-svc-page="marketing"],
body[data-active-service="web"] .svc-screen[data-svc-page="web"],
body[data-active-service="prints"] .svc-screen[data-svc-page="prints"] {
display: block;
animation: svcScreenIn 600ms cubic-bezier(.2,.8,.2,1);
}
@keyframes svcScreenIn {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
/* When in active-service view, hide the default hub sections */
body[data-active-service] .manifesto,
body[data-active-service] #services,
body[data-active-service] #work,
body[data-active-service] #hub { display: none; }
.svc-screen__num {
font-family: var(--font-mono); font-size: 13px; letter-spacing: .22em;
text-transform: uppercase; opacity: 0.8;
display: inline-flex; align-items: center; gap: 12px;
margin-bottom: 32px;
}
.svc-screen__num .bar { width: 28px; height: 2px; background: currentColor; }
.svc-screen__h {
font-family: var(--font-display); font-weight: 900;
font-size: clamp(46px, 9vw, 144px);
letter-spacing: -0.05em; line-height: 0.9;
margin: 0 0 28px;
text-transform: uppercase;
text-wrap: balance;
}
.svc-screen__h .line { display: block; }
.svc-screen__h .italic { font-style: italic; font-weight: 800; }
.svc-screen__lede {
font-family: var(--font-sans); font-weight: 500;
font-size: clamp(20px, 2vw, 28px); line-height: 1.45;
max-width: 760px; margin: 0 0 56px;
}
.svc-screen__points {
list-style: none; padding: 0; margin: 0 0 56px;
display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px;
max-width: 1100px;
}
.svc-screen__points li {
border-top: 3px solid currentColor;
padding: 20px 0 0;
display: flex; flex-direction: column; gap: 10px;
}
.svc-screen__points .num {
font-family: var(--font-mono); font-size: 12px; letter-spacing: .22em;
text-transform: uppercase; opacity: 0.7;
}
.svc-screen__points strong {
font-family: var(--font-display); font-weight: 900;
font-size: clamp(24px, 2.6vw, 36px); letter-spacing: -0.02em;
line-height: 1.05; text-transform: uppercase;
}
.svc-screen__points span:last-child {
font-size: 16px; line-height: 1.55; max-width: 460px;
}
@media (max-width: 800px) {
.svc-screen__points { grid-template-columns: 1fr; gap: 20px; }
}
.svc-screen__pricing {
border: 3px solid currentColor;
padding: 28px 32px;
margin-bottom: 56px;
max-width: 720px;
display: flex; flex-direction: column; gap: 8px;
}
.svc-screen__pricing-eyebrow {
font-family: var(--font-mono); font-size: 12px; letter-spacing: .22em;
text-transform: uppercase; opacity: 0.7;
}
.svc-screen__pricing-row {
display: flex; justify-content: space-between; align-items: baseline;
gap: 16px; padding: 8px 0;
border-bottom: 1px dashed currentColor;
}
.svc-screen__pricing-row:last-child { border-bottom: 0; }
.svc-screen__pricing-row .name { font-family: var(--font-sans); font-weight: 600; font-size: 15px; }
.svc-screen__pricing-row .price { font-family: var(--font-display); font-weight: 900; font-size: clamp(22px, 2.6vw, 32px); letter-spacing: -0.02em; }
/* ================ SUBSCRIPTION PACKAGES (per-service screen) ================
New 3-tier subscription packages on Marketing / Web / Print screens.
Includes a Monthly / Annual toggle that swaps the price + suffix and reveals an annual-savings line.
360° screen keeps the project-based .svc-screen__pricing rows. */
.svc-pkg { margin-bottom: 56px; }
.svc-pkg__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.svc-pkg__eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; opacity: 0.78; }
.svc-pkg__toggle { display: inline-flex; border: 2px solid currentColor; padding: 4px; gap: 4px; }
.svc-pkg__toggle-btn { background: transparent; border: 0; color: inherit; font-family: var(--font-display); font-weight: 900; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; padding: 8px 16px; cursor: pointer; transition: all 180ms cubic-bezier(.2,.8,.2,1); }
.svc-pkg__toggle-btn.is-active { background: currentColor; }
.svc-pkg__toggle-btn.is-active > * { color: var(--ddh-bone); }
.svc-pkg__toggle-btn .save { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; margin-left: 6px; opacity: .7; }
.svc-pkg__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 980px) { .svc-pkg__grid { grid-template-columns: 1fr; } }
.pkg-card {
position: relative;
background: #fff; color: var(--ddh-ink);
border: 3px solid var(--ddh-black);
box-shadow: 6px 6px 0 0 var(--ddh-black);
padding: 26px 24px 24px;
display: flex; flex-direction: column; gap: 14px;
transition: transform 220ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms;
}
.pkg-card:hover { transform: translate(-3px, -3px); box-shadow: 10px 10px 0 0 var(--ddh-black); }
.pkg-card--popular { box-shadow: 8px 8px 0 0 var(--ddh-magenta); }
.pkg-card--popular:hover { box-shadow: 12px 12px 0 0 var(--ddh-magenta); }
.pkg-card__badge {
position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
background: var(--ddh-black); color: #fff;
font-family: var(--font-display); font-weight: 900; font-size: 11px; letter-spacing: .18em;
text-transform: uppercase;
padding: 6px 14px; white-space: nowrap;
}
.pkg-card__tier { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ddh-slate); }
.pkg-card__name { font-family: var(--font-display); font-weight: 900; font-size: clamp(28px, 3vw, 38px); letter-spacing: -0.03em; line-height: 1; margin: 0; text-transform: uppercase; }
.pkg-card__desc { font-family: var(--font-sans); font-size: 13px; line-height: 1.5; color: var(--ddh-slate); margin: 0; }
.pkg-card__setup {
background: var(--ddh-bone); border: 1px dashed var(--ddh-black);
padding: 10px 12px;
display: flex; justify-content: space-between; align-items: baseline;
}
.pkg-card__setup-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ddh-slate); }
.pkg-card__setup-price { font-family: var(--font-display); font-weight: 900; font-size: 18px; letter-spacing: -0.02em; }
.pkg-card__price { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; }
.pkg-card__price-num { font-family: var(--font-display); font-weight: 900; font-size: clamp(34px, 3.6vw, 48px); letter-spacing: -0.04em; line-height: 1; }
.pkg-card__price-suffix { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ddh-slate); }
.pkg-card__save { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #1a8a3d; }
.pkg-card__features { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-direction: column; gap: 6px; }
.pkg-card__features li { font-family: var(--font-sans); font-size: 13px; line-height: 1.45; padding-left: 18px; position: relative; }
.pkg-card__features li::before { content: '→'; position: absolute; left: 0; font-family: var(--font-display); font-weight: 900; }
.pkg-card__cta {
margin-top: auto;
align-self: flex-start;
padding: 10px 18px;
border: 2px solid var(--ddh-black);
background: var(--ddh-black); color: #fff;
font-family: var(--font-display); font-weight: 900; font-size: 13px; letter-spacing: .04em;
text-transform: uppercase; text-decoration: none;
box-shadow: 4px 4px 0 0 var(--ddh-black);
transition: all 180ms cubic-bezier(.2,.8,.2,1);
}
.pkg-card__cta:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 0 var(--ddh-black); }
.svc-pkg__foot {
margin-top: 28px;
font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; line-height: 1.7;
text-transform: uppercase; opacity: 0.78;
max-width: 880px;
}
.svc-pkg__foot strong { font-weight: 700; opacity: 1; }
/* Package cards keep their own ink/white palette regardless of active service overlay.
Without these overrides, the global "body[data-active-service] h3, p" rules would
repaint the card name/description white on Marketing (magenta) + Prints (black),
making them invisible on the white card background. */
body[data-active-service] .pkg-card { color: var(--ddh-ink); }
body[data-active-service] .pkg-card .pkg-card__name { color: var(--ddh-ink); }
body[data-active-service] .pkg-card .pkg-card__desc { color: var(--ddh-slate); }
body[data-active-service] .pkg-card .pkg-card__features li { color: var(--ddh-ink); }
body[data-active-service] .pkg-card .pkg-card__tier,
body[data-active-service] .pkg-card .pkg-card__price-suffix,
body[data-active-service] .pkg-card .pkg-card__setup-label { color: var(--ddh-slate); }
/* Toggle: active button uses the page text+bg colors swapped, so the label stays readable on every overlay (otherwise white-on-white on Marketing/Prints). */
.svc-pkg__toggle-btn.is-active { background: var(--svc-fg, var(--ddh-black)); color: var(--svc-bg, var(--ddh-bone)); }
.svc-pkg__toggle-btn.is-active > * { color: var(--svc-bg, var(--ddh-bone)); }
.svc-screen__cta {
display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
margin-top: 16px;
}
/* In active-service mode, btn-primary inverts to white-on-color for contrast */
body[data-active-service="photography"] .svc-screen .btn-primary,
body[data-active-service="web"] .svc-screen .btn-primary { background: var(--ddh-black); color: #fff; border-color: var(--ddh-black); box-shadow: 4px 4px 0 0 var(--ddh-black); }
body[data-active-service="marketing"] .svc-screen .btn-primary,
body[data-active-service="prints"] .svc-screen .btn-primary { background: #fff; color: var(--ddh-black); border-color: #fff; box-shadow: 4px 4px 0 0 #fff; }
body[data-active-service="marketing"] .svc-screen .btn-ghost,
body[data-active-service="prints"] .svc-screen .btn-ghost { color: #fff; border-color: #fff; }
body[data-active-service="marketing"] .svc-screen .btn-ghost:hover,
body[data-active-service="prints"] .svc-screen .btn-ghost:hover { background: #fff; color: var(--ddh-ink); border-color: #fff; }
/* ================ HUB BAR (floating service switcher) ================
Visible only when in active-service mode. Bottom-left, 4 mini "post-it"
squares + a back-to-hub chip. Lets user hop between services without
opening the hamburger menu.
*/
.hub-bar {
position: fixed; bottom: 24px; left: 24px;
z-index: 56;
display: none;
align-items: center; gap: 10px;
background: rgba(255,255,255,0.95);
border: 2px solid var(--ddh-black);
box-shadow: 4px 4px 0 0 var(--ddh-black);
padding: 8px 10px;
backdrop-filter: blur(6px);
transition: transform 320ms cubic-bezier(.2,.8,.2,1), opacity 320ms;
}
body[data-active-service] .hub-bar { display: inline-flex; }
.hub-bar__back {
background: var(--ddh-bone);
border: 1.5px solid var(--ddh-black);
padding: 6px 10px;
font-family: var(--font-mono); font-size: 11px; font-weight: 700;
letter-spacing: .14em; text-transform: uppercase;
text-decoration: none; color: var(--ddh-ink);
cursor: pointer;
transition: all 180ms;
}
.hub-bar__back:hover { background: var(--ddh-yellow); transform: translate(-1px,-1px); box-shadow: 2px 2px 0 0 var(--ddh-black); }
.hub-bar__divider { width: 1px; height: 24px; background: var(--ddh-stone); }
.hub-bar__dot {
width: 28px; height: 28px;
border: 1.5px solid var(--ddh-black);
cursor: pointer;
transition: transform 200ms cubic-bezier(.2,.8,.2,1);
position: relative;
background: transparent;
padding: 0;
}
.hub-bar__dot:hover { transform: translate(-1px,-1px) rotate(-3deg); box-shadow: 2px 2px 0 0 var(--ddh-black); }
.hub-bar__dot--cyan { background: var(--ddh-cyan); }
.hub-bar__dot--magenta { background: var(--ddh-magenta); }
.hub-bar__dot--yellow { background: var(--ddh-yellow); }
.hub-bar__dot--black { background: var(--ddh-black); }
.hub-bar__dot.is-active { box-shadow: 0 0 0 3px var(--ddh-black), inset 0 0 0 2px #fff; }
body[data-active-service="prints"] .hub-bar__dot--black.is-active { box-shadow: 0 0 0 3px var(--ddh-yellow), inset 0 0 0 2px var(--ddh-yellow); }
/* Hide-on-mobile-tiny: keep it visible but smaller */
@media (max-width: 480px) {
.hub-bar { bottom: 16px; left: 16px; padding: 6px 8px; gap: 8px; }
.hub-bar__dot { width: 24px; height: 24px; }
.hub-bar__back { padding: 4px 8px; font-size: 10px; }
}
/* ================ LANDMARKS (Mykonos PNG decorations) ================
Pelican + windmills as draggable, parallax-scrolling decorative elements.
Position: absolute inside .manifesto__wrap (so they live on the hub view).
Cycle through CMYK colors via animated drop-shadow glow.
White glow stays from the PNG itself. */
.landmark {
position: absolute;
z-index: 4;
cursor: grab;
user-select: none;
pointer-events: auto;
transform-origin: center;
transform:
rotate(calc(var(--rot, 0deg) + var(--rot-scroll, 0deg)))
translate(
calc(var(--x, 0px) + var(--tx-scroll, 0px)),
calc(var(--y, 0px) + var(--ty-scroll, 0px))
);
transition: filter 800ms ease-in-out;
animation: landmarkCycle 10s ease-in-out infinite;
will-change: transform, filter;
}
.landmark img {
display: block; width: 100%; height: auto;
pointer-events: none;
-webkit-user-drag: none;
}
/* Inner bob wrapper: independent looping float so each landmark drifts
organically around its anchor point. Composes with drag (.landmark
transforms) and scroll parallax. */
.landmark__bob {
display: block;
will-change: transform;
}
.landmark--pelican .landmark__bob { animation: bobPelican 18s ease-in-out infinite; }
.landmark--windmill .landmark__bob { animation: bobWindmill 22s ease-in-out infinite; }
.landmark.is-dragging .landmark__bob { animation-play-state: paused; }
@keyframes bobPelican {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
20% { transform: translate(18px, -22px) rotate(2deg); }
40% { transform: translate(-12px, -42px) rotate(-2deg); }
60% { transform: translate(8px, -28px) rotate(1.5deg); }
80% { transform: translate(-16px, -10px) rotate(-1deg); }
}
@keyframes bobWindmill {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
25% { transform: translate(-14px, -18px) rotate(-1.5deg); }
50% { transform: translate(20px, -38px) rotate(2deg); }
75% { transform: translate(-8px, -20px) rotate(-1deg); }
}
.landmark:active { cursor: grabbing; }
.landmark.is-dragging {
z-index: 200;
transition: none;
cursor: grabbing;
animation-play-state: paused;
}
.landmark--pelican {
top: 360px;
left: -40px;
width: 220px;
--rot: -4deg;
}
.landmark--windmill {
top: 880px;
right: -30px;
width: 290px;
--rot: 3deg;
}
/* Color cycle (hub view): rotates through CMYK every 10s */
@keyframes landmarkCycle {
0%, 100% { filter: drop-shadow(0 0 28px var(--ddh-cyan)); }
25% { filter: drop-shadow(0 0 28px var(--ddh-magenta)); }
50% { filter: drop-shadow(0 0 28px var(--ddh-yellow)); }
75% { filter: drop-shadow(0 0 28px var(--ddh-black)); }
}
/* When in active service mode, freeze the cycle on the active color */
body[data-active-service="photography"] .landmark { animation: none; filter: drop-shadow(0 0 36px var(--ddh-cyan)); }
body[data-active-service="marketing"] .landmark { animation: none; filter: drop-shadow(0 0 36px var(--ddh-magenta)); }
body[data-active-service="web"] .landmark { animation: none; filter: drop-shadow(0 0 36px var(--ddh-yellow)); }
body[data-active-service="prints"] .landmark { animation: none; filter: drop-shadow(0 0 36px var(--ddh-black)); }
/* Hide on narrow screens to keep manifesto readable */
@media (max-width: 900px) {
.landmark { display: none; }
}
/* ================ GDPR COOKIE BANNER ================
Bottom-center pill card. Black border + offset shadow + tape sticker on
top to match the post-it / scrapbook aesthetic. localStorage persists the
choice as `tddh_cookie_consent` (accepted | rejected). */
.cookie-banner {
position: fixed;
bottom: 24px;
left: 50%;
transform: translate(-50%, 200%);
z-index: 100;
width: min(640px, calc(100vw - 32px));
background: var(--ddh-bone);
border: 3px solid var(--ddh-black);
box-shadow: 6px 6px 0 0 var(--ddh-black);
padding: 22px 24px 22px;
transition: transform 480ms cubic-bezier(.2,.8,.2,1);
color: var(--ddh-ink);
}
.cookie-banner.is-open {
transform: translate(-50%, 0);
}
.cookie-banner__tape {
position: absolute;
top: -10px; left: 30px;
width: 78px; height: 18px;
background: rgba(255,255,255,0.55);
border: 1px solid rgba(0,0,0,0.08);
transform: rotate(-2deg);
pointer-events: none;
}
.cookie-banner__inner {
display: grid;
grid-template-columns: 1fr auto;
gap: 24px; align-items: center;
}
.cookie-banner__copy {
font-family: var(--font-sans);
font-size: 14px;
line-height: 1.55;
color: var(--ddh-ink);
}
.cookie-banner__copy b {
font-family: var(--font-display);
font-size: 16px; font-weight: 900;
letter-spacing: -0.01em;
text-transform: uppercase;
display: block;
margin-bottom: 6px;
}
.cookie-banner__copy a {
font-weight: 700;
text-decoration: underline;
text-underline-offset: 2px;
color: var(--ddh-ink);
}
.cookie-banner__copy a:hover { color: var(--ddh-magenta); }
.cookie-banner__actions {
display: flex; gap: 10px; flex-wrap: wrap; flex: none;
}
.cookie-banner__btn {
font-family: var(--font-sans); font-weight: 700;
font-size: 13px; letter-spacing: 0.02em;
padding: 12px 18px;
cursor: pointer;
border: 2px solid var(--ddh-black);
background: transparent;
color: var(--ddh-ink);
transition: all 180ms cubic-bezier(.2,.8,.2,1);
text-transform: uppercase;
white-space: nowrap;
}
.cookie-banner__btn--accept {
background: var(--ddh-black);
color: #fff;
box-shadow: 4px 4px 0 0 var(--ddh-black);
}
.cookie-banner__btn--accept:hover {
transform: translate(2px, 2px);
box-shadow: 0 0 0 0 var(--ddh-black);
background: var(--ddh-magenta);
border-color: var(--ddh-magenta);
}
.cookie-banner__btn--reject:hover {
background: var(--ddh-yellow);
}
@media (max-width: 700px) {
.cookie-banner__inner { grid-template-columns: 1fr; }
.cookie-banner__actions { justify-content: stretch; }
.cookie-banner__btn { flex: 1; padding: 10px 14px; font-size: 12px; }
}
/* ================ QR CARD (office location) ================
Same draggable + parallax + color-glow style as landmarks. Polaroid-feel
white card with the QR centered, "ΣΚΑΝΑΡΕ" label below. */
.qr-card {
position: fixed;
/* Sits just above the .contact-stamp circle (bottom: 28px, height: 132px) */
bottom: 178px;
right: 36px;
z-index: 54;
width: 116px;
background: #fff;
border: 2px solid var(--ddh-black);
padding: 9px 9px 11px;
user-select: none;
transform-origin: center;
transform: rotate(-4deg);
transition: filter 800ms ease-in-out, transform 320ms cubic-bezier(.22,.61,.36,1);
animation: qrCycle 10s ease-in-out infinite;
}
.qr-card:hover { transform: rotate(-2deg) scale(1.05); }
.qr-card__qr {
width: 100%; aspect-ratio: 1;
display: grid; place-items: center;
background: #fff;
overflow: hidden;
}
.qr-card__qr svg, .qr-card__qr img {
width: 100%; height: 100%; display: block;
}
.qr-card__label {
font-family: var(--font-mono);
font-size: 7.5px; letter-spacing: 0.16em;
text-transform: uppercase;
text-align: center;
color: var(--ddh-ink);
line-height: 1.35;
margin-top: 6px;
}
.qr-card__label b { font-weight: 700; }
/* Cycle the colored glow same as landmarks */
@keyframes qrCycle {
0%, 100% { filter: drop-shadow(0 0 22px var(--ddh-cyan)); }
25% { filter: drop-shadow(0 0 22px var(--ddh-magenta)); }
50% { filter: drop-shadow(0 0 22px var(--ddh-yellow)); }
75% { filter: drop-shadow(0 0 22px var(--ddh-black)); }
}
body[data-active-service="photography"] .qr-card { animation: none; filter: drop-shadow(0 0 28px var(--ddh-cyan)); }
body[data-active-service="marketing"] .qr-card { animation: none; filter: drop-shadow(0 0 28px var(--ddh-magenta)); }
body[data-active-service="web"] .qr-card { animation: none; filter: drop-shadow(0 0 28px var(--ddh-yellow)); }
body[data-active-service="prints"] .qr-card { animation: none; filter: drop-shadow(0 0 28px var(--ddh-black)); }
@media (max-width: 900px) {
.qr-card { display: none; }
}
/* ================ FLOATING TIME CARD (greeting + Mykonos clock) ================
Like the post-its: draggable, sessionStorage-persisted position.
Fixed top-left so it stays visible across hub view + service screens.
*/
.time-card {
position: fixed;
top: 110px; left: 28px;
z-index: 55;
width: 210px;
background: var(--ddh-bone);
border: 2px solid var(--ddh-black);
box-shadow: 4px 4px 0 0 var(--ddh-black);
padding: 14px 16px 22px;
cursor: grab;
user-select: none;
color: var(--ddh-ink);
font-family: var(--font-sans);
/* Mirror the post-it transform pattern: home rotation + drag offset */
transform:
rotate(calc(var(--rot, -2deg) + var(--rot-scroll, 0deg)))
translate(
calc(var(--x, 0px) + var(--tx-scroll, 0px)),
calc(var(--y, 0px) + var(--ty-scroll, 0px))
);
transform-origin: top left;
transition: box-shadow 220ms cubic-bezier(.2,.8,.2,1);
will-change: transform;
}
.time-card:active { cursor: grabbing; }
.time-card.is-dragging { cursor: grabbing; transition: none; box-shadow: 8px 8px 0 0 var(--ddh-black); z-index: 200; }
.time-card:hover { box-shadow: 6px 6px 0 0 var(--ddh-black); }
.time-card__eyebrow {
font-family: var(--font-mono);
font-size: 10px; letter-spacing: 0.22em;
text-transform: uppercase; color: var(--ddh-slate);
margin-bottom: 8px;
}
.time-card__greeting {
font-family: var(--font-display); font-weight: 900;
font-size: 22px; letter-spacing: -0.02em; line-height: 1;
text-transform: uppercase;
margin-bottom: 6px;
color: var(--ddh-ink);
}
.time-card__clock {
font-family: var(--font-display); font-weight: 900;
font-size: 38px; letter-spacing: -0.02em; line-height: 1;
color: var(--ddh-ink);
}
.time-card__hours {
display: block;
font-family: var(--font-mono);
font-size: 10px; letter-spacing: 0.18em;
color: var(--ddh-slate);
text-transform: uppercase;
margin-top: 8px;
}
.time-card__drag {
position: absolute;
bottom: 6px; right: 10px;
font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ddh-slate);
opacity: 0.6;
pointer-events: none;
}
/* Hide on tiny mobile to avoid clutter near the hero */
@media (max-width: 640px) { .time-card { display: none; } }
/* Header dot indicating which service is active (small ribbon next to logo) */
.header__svc-tag {
display: none;
font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em;
text-transform: uppercase; font-weight: 700;
padding: 4px 10px;
border: 1.5px solid currentColor;
margin-left: 14px;
}
body[data-active-service] .header__svc-tag { display: inline-flex; align-items: center; gap: 8px; }
body[data-active-service="photography"] .header__svc-tag::before { content: ''; width: 8px; height: 8px; background: var(--ddh-cyan); border: 1px solid currentColor; }
body[data-active-service="marketing"] .header__svc-tag::before { content: ''; width: 8px; height: 8px; background: var(--ddh-magenta); border: 1px solid currentColor; }
body[data-active-service="web"] .header__svc-tag::before { content: ''; width: 8px; height: 8px; background: var(--ddh-yellow); border: 1px solid currentColor; }
body[data-active-service="prints"] .header__svc-tag::before { content: ''; width: 8px; height: 8px; background: var(--ddh-black); border: 1px solid currentColor; }
/* ================ PERFORMANCE: defer below-the-fold rendering ================
Tells the browser to skip layout/paint for these sections until the user
scrolls near them. Big LCP/TBT win on slow devices. `contain-intrinsic-size`
gives the browser a placeholder size so the scrollbar isn't jumpy. */
#work, #hub, #contact, footer {
content-visibility: auto;
contain-intrinsic-size: auto 1200px;
}
/* ================ MOBILE POLISH (≤ 720px) ================
Tightens spacing, type, and layout for phones. The desktop
CSS above relies on `clamp()` and flex-wrap for most things,
but a few sections need explicit small-screen overrides. */
@media (max-width: 720px) {
/* Side padding — 32px wastes precious mobile width */
.wrap { padding: 0 18px; }
.section { padding: 60px 0; }
/* Header — give the menu button breathing room */
.header { padding: 14px 18px; }
.logo .word { font-size: 13px; }
.menu-btn .lbl { font-size: 16px; }
.menu-btn .bars { width: 28px; }
/* Manifesto headline scales down further */
.manifesto { padding: 100px 0 56px; }
.hub-h1 { font-size: clamp(36px, 11vw, 64px); }
/* Service screens — drop the big top padding */
.svc-screen { padding: 100px 0 56px; }
.svc-screen__h { font-size: clamp(34px, 11vw, 56px); margin: 0 0 18px; }
.svc-screen__lede { font-size: 16px; margin: 0 0 32px; }
.svc-screen__points { grid-template-columns: 1fr; gap: 18px; margin: 0 0 32px; }
.svc-screen__points li { padding: 14px 16px; }
/* Service-screen pricing rows + cta layout */
.svc-screen__pricing { padding: 18px 20px; }
.svc-screen__cta { gap: 10px; }
.svc-screen__cta .btn-primary, .svc-screen__cta .btn-ghost { font-size: 13px; padding: 10px 14px; }
/* Package cards — already 1fr at 980px, just tighten internals */
.svc-pkg__top { flex-direction: column; align-items: flex-start; gap: 12px; }
.svc-pkg__toggle { width: 100%; justify-content: center; }
.svc-pkg__toggle-btn { flex: 1; padding: 8px 12px; font-size: 12px; }
.pkg-card { padding: 22px 20px 20px; }
.pkg-card__name { font-size: 30px; }
/* Gallery card stays compact, button row keeps wrapping cleanly.
Top padding is bumped to 42px so .gal__kicker doesn't overlap with the
absolute-positioned `№ 01 · 360° Photography` label at top:14px. */
.gal { padding: 42px 18px 18px !important; position: relative !important; height: auto !important; display: flex !important; flex-direction: column !important; }
.gal__btn { font-size: 11px !important; padding: 6px 9px !important; }
.gal__nav { margin-top: 14px !important; display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }
/* Stats slide: prevent the long combos (e.g. "In-house Παραγωγή Μύκονος") from overflowing the card */
.gal__stats { gap: 10px 14px !important; padding: 10px 14px !important; }
.gal__stat { min-width: 0 !important; flex: 1 1 auto; }
.gal__stat-num { font-size: clamp(18px, 5.5vw, 26px) !important; word-break: break-word; }
.gal__stat-label { font-size: 9px !important; word-break: break-word; }
/* Stack slide: same word-wrap protection for long capability lists */
.gal__stack { padding: 10px 14px !important; }
.gal__stack-list { font-size: clamp(12px, 1.4vw, 15px) !important; word-break: break-word; line-height: 1.4 !important; }
/* Image-gallery slideshows are awkward on small screens — hide the
"03 Δείγματα" button on mobile (image lightbox doesn't work well on
phones). Matterport tour buttons (data-tour) stay but open externally
in a new tab via JS instead of the in-page lightbox. */
.gal__btn[data-slideshow] { display: none !important; }
/* Card meta heading sizes — featured card's 52px overflows narrow phones */
.work-meta h3 { font-size: 22px !important; word-wrap: break-word; overflow-wrap: break-word; }
.work-card.featured .work-meta h3 { font-size: clamp(26px, 7vw, 36px) !important; line-height: 1; }
/* Work cards on mobile: drop the fixed 4:3 aspect-ratio on .work-img.
At narrow widths it produces a card too short to fit kicker + stage + buttons,
so the gallery buttons get clipped by overflow: hidden. Letting the
content drive height fixes this for Marketing/Web/Print cards. */
.work-card .work-img { aspect-ratio: auto !important; height: auto !important; min-height: 340px !important; overflow: visible !important; padding-bottom: 12px; }
.work-card.featured .work-img { aspect-ratio: auto !important; height: auto !important; min-height: 400px !important; overflow: visible !important; }
/* Restore overflow:hidden on the inner .gal__stage so its content is contained,
not the whole work-img (which would re-clip the buttons). */
.gal__stage { overflow: hidden !important; min-height: 120px !important; }
/* The .pattern overlay: prevent it from covering button click targets */
.work-img > .pattern { pointer-events: none !important; }
/* Hub stats row stacks */
#hub .wrap { grid-template-columns: 1fr !important; gap: 36px !important; }
/* Mobile menu — full-width panel + 1-column swatches stacked vertically.
The 96vw + 2-column 2x2 grid felt cramped on small phones. */
.menu-panel { width: 100vw !important; max-width: 100vw !important; border-left: 0 !important; }
.menu-overlay { display: none !important; } /* full-width panel covers everything anyway */
.menu-a__swatches { grid-template-columns: 1fr !important; }
.menu-a__swatch { aspect-ratio: auto !important; padding: 22px 22px 20px !important; min-height: 0 !important; }
.menu-a__name { font-size: 22px !important; }
.menu-a__sub { font-size: 12px !important; }
/* Hide the secondary bits on mobile to keep the menu uncluttered */
.menu-a__clock-card { display: none !important; }
.menu-a__contact { padding: 16px 22px 22px !important; font-size: 11px !important; }
/* Hub-bar (the floating service switcher) — keep visible but compact */
.hub-bar { bottom: 14px; right: 14px; padding: 6px 10px; gap: 8px; }
.hub-bar__back { font-size: 11px; padding: 5px 9px; }
.hub-bar__dot { width: 18px; height: 18px; }
/* Contact stamp — smaller on mobile so it doesn't dominate */
.contact-stamp { width: 92px; height: 92px; bottom: 16px; right: 16px; }
/* Header service-tag (the tiny pill that shows current service) — hide on phones to declutter */
body[data-active-service] .header__svc-tag { display: none; }
/* Floating draggable post-its — they're a desktop affordance (drag to interact);
on mobile they collide with the layout and feel like flying boxes. Hide them. */
.postit-board, .postit { display: none !important; }
/* Hub callout (Σημείωμα από το Hub) - quote font shrink */
#hub .it { font-size: 28px !important; line-height: 1.05 !important; }
/* Footer — keep neat */
footer { padding: 40px 0 60px; }
/* Lightbox — frame uses full width, controls compact */
.lb { padding: 20px 14px; gap: 14px; }
.lb__frame { aspect-ratio: 4 / 3; box-shadow: 6px 6px 0 0 var(--ddh-yellow); }
.lb__close { width: 36px; height: 36px; top: -14px; right: -14px; font-size: 16px; }
.lb__counter { font-size: 9px; padding: 4px 8px; }
.lb__autoplay { font-size: 10px; padding: 8px 12px; }
.lb__arrow { width: 36px; height: 36px; font-size: 16px; }
}
/* Extra-small phones (iPhone SE etc) */
@media (max-width: 380px) {
.wrap { padding: 0 14px; }
.hub-h1 { font-size: clamp(30px, 12vw, 42px); }
.svc-screen__h { font-size: clamp(28px, 12vw, 40px); }
.pkg-card__price-num { font-size: 30px; }
.gal__btn { font-size: 10px; padding: 5px 7px; }
}