; the
full /portfolio still uses the flex masonry above. Here we override to a
plain 3-col CSS grid with display:contents on the .masonry-col wrappers,
which neutralises the useEvenColumns JS hook (its inline max-height has
no effect on display:contents boxes). */
.gallery.gallery--preview {
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: stretch;
gap: 6px;
max-width: 1400px;
}
.gallery.gallery--preview > .masonry-col {
display: contents;
}
.gallery.gallery--preview .tile {
aspect-ratio: 3 / 4;
}
.gallery.gallery--preview .tile img,
.gallery.gallery--preview .tile video {
width: 100%;
height: 100%;
object-fit: cover;
}
/* === SERVICES — 3-col card grid full bleed === */
.services {
grid-template-columns: repeat(3, 1fr);
gap: 20px;
padding: 0 var(--pad);
max-width: 1400px;
margin: 40px auto;
}
.service {
flex-direction: column;
align-items: flex-start;
gap: 12px;
padding: 28px;
border: 1px solid var(--line);
transition: border-color 0.15s, transform 0.15s, background 0.15s;
min-height: 220px;
position: relative;
}
.service .i {
font-size: 32px;
color: var(--acid);
margin-bottom: 8px;
}
.service .name { font-size: 17px; margin-bottom: 6px; }
.service .desc { font-size: 13px; line-height: 1.55; flex: 1; }
.service .price {
align-self: stretch;
text-align: right;
padding-top: 12px;
border-top: 1px dashed var(--line);
font-size: 15px;
}
.service .from { font-size: 10px; margin-right: 4px; }
/* === SKETCHES — 4 flex columns, round-robin, even bottom === */
.sketches {
display: flex;
align-items: flex-start;
gap: 4px;
padding: 0 var(--pad);
max-width: 1600px;
margin: 0 auto;
}
.sketches > .masonry-col {
display: flex;
flex-direction: column;
flex: 1 1 0;
min-width: 0;
gap: 4px;
}
.sketch {
aspect-ratio: auto;
transition: border-color 0.2s;
}
.sketch img {
width: 100%; height: auto;
display: block;
}
/* === FAQ — full bleed on desktop === */
.faq {
margin: 0 auto;
}
.faq .q {
padding: 20px 0;
border-bottom: 1px dashed var(--line);
cursor: pointer;
}
.faq .q .text { font-size: 16px; }
.faq .a { font-size: 14px; line-height: 1.7; padding-top: 12px; }
/* === BOOK form (desktop) — 2-col layout: form left, step sidebar right ===
The .section that contains .steps becomes a CSS grid; .steps is moved
into the right column as a vertical progress trail. CTA bar (sibling of
.section) is aligned under the form column.
Mobile layout is untouched — all rules are inside the 1024+ media query. */
.screen .section:has(> .steps) {
display: grid;
grid-template-columns: minmax(0, 1fr) 260px;
grid-template-areas: "form sidebar";
gap: 56px;
max-width: 1100px;
margin: 0 auto;
padding: 28px var(--pad) 8px;
position: relative;
}
.screen .section:has(> .steps) > * { grid-area: form; min-width: 0; }
.screen .section:has(> .steps) > .steps { grid-area: sidebar; }
/* Sidebar: vertical progress trail, sticky under the marquee */
.screen .section:has(> .steps) > .steps {
position: sticky;
top: 80px;
align-self: start;
flex-direction: column;
gap: 0;
padding: 4px 0 4px 18px;
border-left: 1px dashed var(--line);
background: transparent;
border-bottom: none;
}
.screen .section:has(> .steps) > .steps::before {
content: "// PROGRESS";
display: block;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.22em;
color: var(--ink-faint);
margin: 0 0 14px -18px;
padding-left: 18px;
text-transform: uppercase;
}
.screen .section:has(> .steps) .step {
height: auto;
background: transparent;
border: none;
border-left: 2px solid var(--line);
margin-left: -19px;
padding: 11px 0 11px 16px;
flex: 0 0 auto;
transition: border-color 0.18s, background 0.18s, color 0.18s;
}
.screen .section:has(> .steps) .step.done {
border-left-color: var(--acid);
}
.screen .section:has(> .steps) .step.cur {
border-left-color: var(--ink);
background: linear-gradient(90deg, rgba(255,255,255,0.025), transparent 75%);
}
.screen .section:has(> .steps) .step .lab {
position: static;
font-size: 12px;
letter-spacing: 0.18em;
color: var(--ink-faint);
text-transform: lowercase;
transition: color 0.18s;
}
.screen .section:has(> .steps) .step.done .lab { color: var(--acid); }
.screen .section:has(> .steps) .step.cur .lab { color: var(--ink); }
/* Step heading inside form column — bigger and left-aligned */
.screen .section:has(> .steps) h3 {
font-size: 22px !important;
margin-top: 4px !important;
margin-bottom: 14px !important;
letter-spacing: 0.04em !important;
}
/* Choice grid — full form-column width, override inline 3/4-col from JSX */
.screen .section:has(> .steps) .choice-grid {
grid-template-columns: repeat(4, 1fr) !important;
max-width: none;
margin: 0;
gap: 12px;
}
.screen .section:has(> .steps) .choice {
padding: 18px 14px;
min-height: auto;
transition: background 0.15s, border-color 0.15s, transform 0.05s;
}
.screen .section:has(> .steps) .choice .lbl { font-size: 14px; }
.screen .section:has(> .steps) .choice .desc { font-size: 11px; margin-top: 4px; }
/* Calendar — wider cells, anchored to left of form column */
.screen .section:has(> .steps) .cal-month,
.screen .section:has(> .steps) .cal-head,
.screen .section:has(> .steps) .calendar {
max-width: 640px;
margin-left: 0;
margin-right: 0;
}
.screen .section:has(> .steps) .cal-month {
font-size: 14px;
margin-top: 4px;
margin-bottom: 16px;
}
.screen .section:has(> .steps) .cal-day {
min-height: 56px;
font-size: 15px;
}
/* Contact step inputs — anchored left */
.screen .section:has(> .steps) .field {
max-width: 600px;
margin-left: 0;
margin-right: 0;
}
.screen .section:has(> .steps) .field input,
.screen .section:has(> .steps) .field textarea {
font-size: 14px;
padding: 12px 14px;
}
/* Confirm (StepDone) — wider, left-aligned in form column */
.screen .section:has(> .steps) .confirm {
max-width: 760px;
margin: 24px 0 0;
padding: 30px 36px;
}
.screen .section:has(> .steps) .confirm pre { font-size: 13px; }
/* CTA bar — aligned under the form column (sibling of .section) */
.cta-bar {
max-width: 1100px;
margin: 16px auto 24px;
padding: 0 var(--pad);
gap: 12px;
justify-content: flex-start;
}
.cta-bar button {
flex: 0 1 auto;
padding: 14px 32px;
font-size: 14px;
}
.cta-bar button:not(.ghost) { min-width: 220px; }
.cta-bar button.ghost { min-width: 140px; }
/* === FLOATING BOOK BUTTON — center, max 420 === */
/* (inline width remains in JSX; only enhance shadow on hover) */
/* === HOME — главные CTA-кнопки ([полное досье] / [all works] / [все услуги]) ===
На мобиле они width:100% inline через JSX. На десктопе перетираем —
фиксированная 400px ширина по центру, единый паддинг.
Класс .home-cta добавлен в JSX к 3 целевым кнопкам. */
button.bracket.home-cta {
width: 400px !important;
margin: 0 auto !important;
padding: 14px 18px !important;
display: block;
}
/* === LIGHTBOX — large image area on desktop ===
Reduced max-height to leave a breathing strip at the bottom for the
prev/next buttons; pushed the meta strip left of the close button so the
style label ("blackwork", etc.) no longer overlaps the X. */
.lightbox img,
.lightbox video {
max-width: 90vw;
max-height: 80vh;
}
.lb-close {
font-size: 24px;
width: 56px;
height: 56px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
/* Meta strip — leave a clear gutter on the right for the close button */
.lightbox .lb-meta {
right: 96px;
font-size: 13px;
}
/* Prev/next bar — sits further below the photo, with bigger buttons */
.lightbox .nav {
bottom: 40px;
gap: 18px;
}
.lightbox .nav button {
width: 72px;
height: 44px;
font-size: 14px;
letter-spacing: 0.06em;
}
/* === FOOTER MARKS, TERM-FOOT — center, wider === */
.term-foot, .marks {
max-width: 1400px;
margin: 0 auto;
padding-left: var(--pad);
padding-right: var(--pad);
}
/* === Topbar — full-width with content centered === */
.topbar {
max-width: 1400px;
margin: 0 auto;
padding: 14px var(--pad);
font-size: 20px;
}
.topbar .back { font-size: 18px; }
.topbar .title { font-size: 20px; letter-spacing: 0.15em; }
/* === Confirm (StepDone) === */
.confirm {
max-width: 720px;
margin: 24px auto;
padding: 24px var(--pad);
}
.confirm pre { font-size: 13px; }
/* === Terminal block — bigger on desktop, anchored to right edge === */
.term-dock-inner {
max-width: none;
}
.term-toggle {
bottom: max(24px, env(safe-area-inset-bottom, 24px));
right: 24px;
}
.term-shell {
left: auto;
right: 24px;
width: min(880px, 60vw);
height: min(70vh, 600px);
}
.term-foot, .term-out, .term-input {
font-size: 13.5px;
}
/* === Deco watermarks — scale up & spread === */
.deco-wm {
transform: scale(1.5);
}
/* === About page (desktop) — scoped overrides ===
About is the only screen rendering WITHOUT the
--home modifier (Home uses .portrait--home). This :has() pin scopes
every rule below to /about only — other screens stay untouched. */
/* Portrait card shrinks to its content (image + metadata) instead of
stretching to 900px — kills the empty space to the right of the text.
align-items: center vertically centers both the photo and the meta in
their grid row, so the photo no longer sticks to the top of the card. */
.screen:has(.portrait:not(.portrait--home)) .portrait {
width: max-content;
max-width: 100%;
grid-template-columns: 320px auto;
align-items: center;
}
.screen:has(.portrait:not(.portrait--home)) .portrait img {
height: auto;
align-self: center;
}
/* Topbar title — readable on desktop */
.screen:has(.portrait:not(.portrait--home)) .topbar .title {
font-size: 22px;
letter-spacing: 0.18em;
}
/* Section headings ("identity", "manifest", "studio") — readable on desktop */
.screen:has(.portrait:not(.portrait--home)) .section h2 {
font-size: 26px;
letter-spacing: 0.1em;
color: var(--ink);
margin: 28px 0 20px;
}
.screen:has(.portrait:not(.portrait--home)) .section h2 .num {
font-size: 14px;
letter-spacing: 0.08em;
}
}
/* === Wider screens === */
@media (min-width: 1280px) {
.portrait--home { grid-template-columns: 440px 1fr; }
:root { --pad: 80px; }
}
/* === Even wider: content cap 1600 === */
@media (min-width: 1536px) {
.gallery { max-width: 1700px; }
.sketches { max-width: 1700px; }
.chalk-rows, .icon-strip, .services, .section, .deco-divider, .topbar, .term-foot, .marks {
max-width: 1600px;
}
.portrait--home { grid-template-columns: 480px 1fr; max-width: 1100px; }
:root { --pad: 100px; }
}
/* === Ultra-wide (4K etc.): cap content, big padding === */
@media (min-width: 1920px) {
.gallery { max-width: 1800px; }
.sketches { max-width: 1800px; }
.chalk-rows, .icon-strip, .services, .section, .deco-divider, .topbar, .term-foot, .marks {
max-width: 1700px;
}
:root { --pad: 140px; }
}
/* === HOVER EFFECTS — only on pointer devices ≥1024px === */
@media (hover: hover) and (min-width: 1024px) {
.bracket:hover {
background: rgba(200,255,46,0.06);
border-color: var(--acid);
color: var(--acid);
}
.bracket.acid:hover { background: rgba(200,255,46,0.14); }
.bracket.blood:hover { background: rgba(255,50,50,0.10); border-color: var(--blood); }
.chalk-row:hover {
background: rgba(200,255,46,0.04);
transform: translateY(-3px);
border-color: var(--acid);
}
.icon-cell:hover { transform: translateY(-4px); }
.icon-cell:hover .icon-box {
border-color: var(--acid);
background: rgba(200,255,46,0.06);
}
.gallery .tile:hover {
border-color: var(--acid);
transform: none;
}
.gallery .tile:hover img,
.gallery .tile:hover video {
filter: grayscale(0) contrast(1.15) brightness(1.05);
transform: none;
}
.service:hover {
border-color: var(--acid);
transform: translateY(-3px);
background: rgba(200,255,46,0.02);
}
.sketch:not(.taken):hover {
border-color: var(--acid);
}
.sketch:not(.taken):hover img {
filter: contrast(1.15);
}
.choice:not(.sel):hover {
background: rgba(200,255,46,0.05);
border-color: var(--ink-dim);
}
.cal-day:not(.dim):not(.busy):not(.sel):hover {
background: rgba(200,255,46,0.08);
border-color: var(--ink);
}
.faq .q:hover .text { color: var(--acid); }
.cta-bar button:not(:disabled):hover {
background: rgba(200,255,46,0.10);
border-color: var(--acid);
}
/* Cursor pointer on all interactive */
.bracket, .chalk-row, .icon-cell, .tile, .service,
.sketch:not(.taken), .choice, .step, .faq .q, .lb-close,
.cal-day:not(.dim):not(.busy):not(.sel) {
cursor: pointer;
}
}