/*
Theme Name: MT Landscape Design
Theme URI: https://mtlandscapedesign.it
Author: MT Landscape Design Dev
Description: Custom theme for MT Landscape Design — studio di architettura del paesaggio a Genova. Editorial, Mediterranean design system (bone/sage palette, Cormorant Garamond + Inter), trilingual-ready (IT/EN/ZH), Gutenberg-native content.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mt-landscape
Tags: editor-style, custom-menu, custom-logo, translation-ready
*/
/* =========================================================
1. TOKENS
========================================================= */
:root {
--bone: #f5f1e9;
--bone-deep: #ece6da;
--bone-soft: #faf8f3;
--ink: #1c1c19;
--ink-soft: #3d3d37;
--mute: #8c877b;
--sage: #6b7358;
--sage-deep: #545b44;
--sage-ink: #424837;
--clay: #b0603c;
--clay-deep: #96502f;
/* 一句话定位 accent: was #ff4e00 (100% saturation) — darkened + toned down
per client 2026-10-27 (research categories, svc "Adatto a" lines) */
--accent-red: #b3421a;
--line: rgba(28, 28, 25, .14);
--line-soft: rgba(28, 28, 25, .08);
--white: #fff;
--serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", "Songti SC", "Noto Serif CJK SC", "SimSun", serif;
--sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
/* type scale 2026-10-26 meeting: fixed rem = client px spec @ 1920 ÷ 16.
No vw fluidity — vw sizes shrank under DPI scaling (client 10-23).
Mobile steps live in the media queries at the end of §2. */
--fs-hero: 4.5rem; /* hero 标题 72 */
--fs-h2: 3.375rem; /* 区块标题 54 */
--fs-h3: 2rem; /* 内容小标题 32 */
--fs-h4: 1.125rem; /* 内容副标题 18, bold */
--fs-body: 1rem; /* 内容 16 */
--container: 1240px;
--wide: 1440px;
--gutter: clamp(1.25rem, 4vw, 3rem);
--sec-pad: clamp(4.5rem, 9vw, 8.5rem);
--r: 2px;
--shadow: 0 18px 50px -18px rgba(28, 28, 25, .18);
--ease: cubic-bezier(.22, .61, .21, 1);
}
/* =========================================================
2. BASE
========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--bone);
color: var(--ink);
/* unified editorial serif: headings and body copy share one family (修改内容02) */
font-family: var(--serif);
font-weight: 500;
font-size: var(--fs-body);
line-height: 1.6; /* 内容行距: 正常行距（10-26 客户反馈 1.7 太高） */
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* One family site-wide: nav, header CTA, form controls and footer fine print inherit the body serif.
Form controls need this spelled out (UA default font would otherwise leak in). */
.mt-menu a, .mt-lang a, .mt-header__cta, .mt-burger, .mt-hero__scroll,
.mt-drawer__menu a, .mt-drawer__cta, .mt-field input, .mt-field select, .mt-field textarea,
.mt-footer__bottom, .mt-footer__meta {
font-family: var(--serif);
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
p a:not(.mt-btn) { border-bottom: 1px solid rgba(107, 115, 88, .5); transition: border-color .2s; }
p a:not(.mt-btn):hover { border-color: var(--sage-deep); }
::selection { background: var(--sage); color: var(--bone); }
h1, h2, h3, h4, h5 {
font-family: var(--serif);
font-weight: 500;
line-height: 1.14;
letter-spacing: -.01em;
margin: 0 0 .5em;
color: var(--ink);
}
h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-weight: 600; } /* 内容副标题 18 粗体 */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--wide { max-width: var(--wide); }
.container--text { max-width: 820px; }
/* small-caps label */
.mt-label {
display: inline-flex;
align-items: center;
gap: .75rem;
font-family: var(--serif);
font-size: .75rem;
font-weight: 600;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--sage-deep);
margin-bottom: 1.5rem;
}
.mt-label::before { content: ""; width: 2.25rem; height: 1px; background: var(--sage); }
.mt-label--center { justify-content: center; }
.mt-label--center::after { content: ""; width: 2.25rem; height: 1px; background: var(--sage); }
.mt-label--light { color: rgba(245, 241, 233, .85); }
.mt-label--light::before, .mt-label--light::after { background: rgba(245, 241, 233, .5); }
.lead {
font-size: var(--fs-secsub); /* 区块副标题 27 @ 1920 */
line-height: 1.5; /* 副标题行距: 正常行距 */
color: var(--ink-soft);
font-weight: 400;
}
/* =========================================================
3. BUTTONS
========================================================= */
.wp-block-buttons { gap: 1rem !important; }
.wp-block-button__link, .mt-btn {
/* button text same serif family as body copy, slightly smaller */
font-family: var(--serif);
font-size: var(--fs-btn);
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
padding: 1.05rem 2.1rem !important;
border-radius: var(--r) !important;
transition: transform .25s var(--ease), background-color .25s, color .25s, border-color .25s, box-shadow .25s;
cursor: pointer;
}
.wp-block-button:not(.is-style-outline) > .wp-block-button__link {
background: var(--sage-deep) !important;
color: var(--bone) !important;
}
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover {
background: var(--sage-ink) !important;
transform: translateY(-2px);
box-shadow: 0 12px 28px -12px rgba(66, 72, 55, .55);
}
.wp-block-button.is-style-outline > .wp-block-button__link {
background: transparent !important;
color: var(--ink) !important;
border: 1px solid rgba(28, 28, 25, .35) !important;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
border-color: var(--sage-deep) !important;
color: var(--sage-ink) !important;
transform: translateY(-2px);
}
/* buttons on dark imagery */
.mt-on-dark .wp-block-button.is-style-outline > .wp-block-button__link {
color: var(--bone) !important;
border-color: rgba(245, 241, 233, .55) !important;
}
.mt-on-dark .wp-block-button.is-style-outline > .wp-block-button__link:hover {
border-color: var(--bone) !important;
color: var(--bone) !important;
}
/* text link with arrow */
.mt-textlink {
display: inline-flex;
align-items: center;
gap: .6rem;
font-size: var(--fs-btn); /* 按钮 16 @ 1920 */
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--sage-ink);
}
/* unified "view more" chip: disc melts into the surrounding background by
default, picks up colour only on hover */
.mt-textlink .arr {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.8em;
height: 1.8em;
border-radius: 50%;
background: transparent;
color: inherit;
transition: background-color .25s, color .25s, transform .25s var(--ease);
}
.mt-textlink:hover .arr,
.mt-jcard:hover .mt-textlink .arr,
.mt-scopecard:hover .mt-textlink .arr {
background: var(--sage-deep);
color: var(--bone);
transform: translateX(3px);
}
/* =========================================================
4. HEADER
========================================================= */
.mt-header {
position: fixed;
inset: 0 0 auto;
z-index: 90;
transition: background-color .35s, box-shadow .35s, transform .35s;
background: transparent;
}
.mt-header.is-solid {
background: rgba(245, 241, 233, .94);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
box-shadow: 0 1px 0 var(--line-soft);
}
.mt-header.is-hidden { transform: translateY(-100%); }
.mt-header__bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
min-height: 84px;
transition: min-height .3s;
}
.mt-header.is-solid .mt-header__bar { min-height: 70px; }
.mt-brand {
display: inline-flex;
align-items: center;
gap: .8rem;
color: var(--bone);
transition: color .3s;
}
.mt-brand__slogan {
font-family: var(--serif);
font-style: italic;
font-size: .6875rem;
line-height: 1.42;
letter-spacing: .03em;
opacity: .88;
white-space: nowrap;
}
.mt-brand__name {
font-family: var(--serif);
font-size: 1.25rem;
font-weight: 600;
letter-spacing: .045em;
line-height: 1.1;
white-space: nowrap;
}
.mt-header:not(.is-solid):not(.is-light) .mt-brand__slogan,
.mt-header:not(.is-solid):not(.is-light) .mt-brand__name {
text-shadow: 0 1px 10px rgba(28, 28, 25, .45);
}
.mt-header.is-solid .mt-brand, .mt-header.is-light .mt-brand { color: var(--ink); }
.mt-brand__logo {
height: 46px;
width: auto;
transition: filter .3s;
}
/* green logo needs light halo over dark imagery; keeps brand color */
.mt-header:not(.is-solid):not(.is-light) .mt-brand__logo {
filter: drop-shadow(0 1px 10px rgba(28, 28, 25, .35));
}
.mt-nav { display: flex; align-items: center; gap: 2.1rem; }
.mt-menu { display: flex; align-items: center; gap: 1.9rem; margin: 0; padding: 0; list-style: none; }
.mt-menu a {
font-size: var(--fs-nav);
font-weight: 500;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--bone);
opacity: .92;
padding: .4rem 0;
position: relative;
transition: color .3s, opacity .2s;
}
.mt-menu a::after {
content: "";
position: absolute;
left: 0; bottom: 0;
width: 100%; height: 1px;
background: currentColor;
transform: scaleX(0);
transform-origin: right;
transition: transform .3s var(--ease);
}
.mt-menu a:hover::after, .mt-menu .current-menu-item > a::after, .mt-menu .current_page_item > a::after, .mt-menu .is-active > a::after {
transform: scaleX(1);
transform-origin: left;
}
.mt-header:not(.is-solid) .mt-menu a { color: var(--bone); }
.mt-header.is-solid .mt-menu a, .mt-header.is-light .mt-menu a { color: var(--ink); }
.mt-menu .current-menu-item > a, .mt-menu .current_page_item > a, .mt-menu .is-active > a { opacity: 1; font-weight: 600; }
/* transparent nav over imagery: soft dark halo keeps bone text readable on
bright cover tops (light sky washed it out) */
.mt-header:not(.is-solid):not(.is-light) .mt-menu a,
.mt-header:not(.is-solid):not(.is-light) .mt-lang a,
.mt-header:not(.is-solid):not(.is-light) .mt-header__cta {
text-shadow: 0 1px 14px rgba(28, 28, 25, .55), 0 0 2px rgba(28, 28, 25, .3);
}
.mt-header:not(.is-solid):not(.is-light) .mt-header__cta { border-color: rgba(245, 241, 233, .78); }
/* 2026-10-29 client: SERVIZI becomes a dropdown of the five service pages;
the top-level item has no default page (href '#') — its hover underline is
replaced by a caret as the affordance. Panel reads on transparent and solid
headers alike; opens on hover and keyboard focus. */
.mt-menu .menu-item-has-children { position: relative; }
.mt-menu .menu-item-has-children > a::after {
content: "▾";
position: static;
display: inline-block;
width: auto; height: auto;
margin-left: .5em;
font-size: .62em;
transform: none;
background: none;
}
.mt-menu .menu-item-has-children:hover > a::after { transform: translateY(2px); }
.mt-menu .sub-menu {
position: absolute;
top: calc(100% + 10px);
left: 50%;
min-width: 300px;
margin: 0;
padding: .8rem 0;
list-style: none;
display: flex;
flex-direction: column;
background: var(--bone);
border: 1px solid var(--line-soft);
border-radius: var(--r);
box-shadow: var(--shadow);
opacity: 0;
visibility: hidden;
transform: translateX(-50%) translateY(6px);
transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s linear .25s;
z-index: 60;
}
.mt-menu .sub-menu::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; } /* hover bridge over the gap */
.mt-menu .menu-item-has-children:hover > .sub-menu,
.mt-menu .menu-item-has-children:focus-within > .sub-menu {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.mt-menu .sub-menu a {
display: block;
padding: .6rem 1.5rem;
font-size: .95rem;
letter-spacing: .02em;
text-transform: none;
white-space: nowrap;
/* the panel is always bone — ink text regardless of the transparent/solid
header state, whose bone link colour otherwise out-specifies this rule */
color: var(--ink-soft) !important;
text-shadow: none !important;
opacity: 1;
}
.mt-menu .sub-menu a::after { content: none; }
.mt-menu .sub-menu a:hover { color: var(--sage-deep) !important; background: var(--bone-soft); }
.mt-menu .sub-menu .is-active > a { color: var(--sage-deep); font-weight: 600; }
.mt-menu .menu-item-has-children:has(.is-active) > a { opacity: 1; font-weight: 600; }
/* language switcher */
.mt-lang { display: flex; align-items: center; gap: .1rem; margin-left: .4rem; }
.mt-lang li { list-style: none; }
.mt-lang a, .mt-lang .pll-parent-menu-item {
font-size: .75rem;
font-weight: 600;
letter-spacing: .12em;
padding: .3rem .45rem;
color: var(--bone);
opacity: .75;
transition: opacity .2s, color .3s;
}
.mt-header.is-solid .mt-lang a, .mt-header.is-light .mt-lang a { color: var(--ink); }
.mt-lang a:hover { opacity: 1; }
.mt-lang .current-lang a, .mt-lang [class*="current"] { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.mt-lang .lang-item { display: inline-flex; }
.mt-lang .lang-item + .lang-item::before { content: "/"; opacity: .4; margin-right: .45rem; font-weight: 400; }
/* CTA in header */
.mt-header__cta {
font-size: var(--fs-btn);
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
padding: .78rem 1.5rem;
border: 1px solid rgba(245, 241, 233, .55);
border-radius: var(--r);
color: var(--bone);
white-space: nowrap;
transition: background-color .25s, color .25s, border-color .25s;
}
.mt-header__cta:hover { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.mt-header.is-solid .mt-header__cta, .mt-header.is-light .mt-header__cta {
border-color: rgba(28, 28, 25, .35);
color: var(--ink);
}
.mt-header.is-solid .mt-header__cta:hover, .mt-header.is-light .mt-header__cta:hover {
background: var(--sage-deep); color: var(--bone); border-color: var(--sage-deep);
}
/* burger */
.mt-burger {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: 0;
padding: .6rem .2rem;
cursor: pointer;
z-index: 95;
}
.mt-burger span {
width: 26px; height: 1.5px;
background: var(--bone);
transition: transform .3s var(--ease), opacity .2s, background-color .3s;
}
.mt-header.is-solid .mt-burger span, .mt-header.is-light .mt-burger span { background: var(--ink); }
body.nav-open .mt-burger span { background: var(--ink) !important; }
body.nav-open .mt-burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
body.nav-open .mt-burger span:nth-child(2) { opacity: 0; }
body.nav-open .mt-burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
/* mobile drawer */
.mt-drawer {
position: fixed;
inset: 0;
z-index: 92;
background: var(--bone);
display: flex;
flex-direction: column;
justify-content: center;
padding: 6rem var(--gutter) 3rem;
opacity: 0;
visibility: hidden;
transform: translateY(-2%);
transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
}
body.nav-open .mt-drawer { opacity: 1; visibility: visible; transform: none; }
body.nav-open { overflow: hidden; }
.mt-drawer__menu { list-style: none; margin: 0 0 2.5rem; padding: 0; }
.mt-drawer__menu li { border-bottom: 1px solid var(--line-soft); }
.mt-drawer__menu a {
display: block;
padding: 1.1rem 0;
font-family: var(--serif);
font-size: clamp(1.8rem, 7vw, 2.5rem);
color: var(--ink);
transition: padding-left .25s var(--ease), color .2s;
}
.mt-drawer__menu a:hover { padding-left: .8rem; color: var(--sage-deep); }
.mt-drawer__menu .current-menu-item > a, .mt-drawer__menu .current_page_item > a, .mt-drawer__menu .is-active > a { padding-left: .8rem; color: var(--sage-deep); font-weight: 600; }
/* 2026-10-29: service sub-pages nest flat and indented under their parent in
the drawer — no dropdown behaviour, parent item is a plain group label */
.mt-drawer__menu .sub-menu {
position: static;
opacity: 1;
visibility: visible;
transform: none;
min-width: 0;
padding: 0;
margin: 0;
display: block;
list-style: none;
background: none;
border: 0;
box-shadow: none;
}
.mt-drawer__menu .sub-menu::before { content: none; }
.mt-drawer__menu .sub-menu li { border-bottom: 0; }
.mt-drawer__menu .sub-menu a {
padding: .5rem 0 .5rem 1.5rem;
font-size: .95rem;
letter-spacing: .02em;
text-transform: none;
white-space: normal;
color: var(--ink-soft);
opacity: 1;
}
.mt-drawer__menu .sub-menu a::after { content: none; }
.mt-drawer__foot { display: flex; flex-direction: column; gap: 1.2rem; }
.mt-drawer__lang { display: flex; gap: 1rem; }
.mt-drawer__lang a {
font-size: .8125rem; font-weight: 600; letter-spacing: .14em;
color: var(--mute); text-transform: uppercase;
}
.mt-drawer__lang .current-lang a { color: var(--sage-deep); text-decoration: underline; text-underline-offset: 5px; }
.mt-drawer__cta {
align-self: flex-start;
background: var(--sage-deep); color: var(--bone);
font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
padding: 1rem 1.9rem; border-radius: var(--r);
}
/* =========================================================
5. HERO (home)
========================================================= */
.mt-hero {
position: relative;
min-height: 100svh;
display: flex;
align-items: flex-end;
isolation: isolate;
overflow: hidden;
}
.mt-hero__bg {
position: absolute; inset: 0; z-index: -2;
background-size: cover;
background-position: center;
transform: scale(1.06);
animation: heroZoom 2.6s var(--ease) forwards;
}
/* cover-block hero variant */
.mt-hero img.wp-block-cover__image-background {
transform: scale(1.06);
animation: heroZoom 2.6s var(--ease) forwards;
}
.mt-hero .wp-block-cover__inner-container { width: 100%; }
.mt-hero .container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
@keyframes heroZoom { to { transform: scale(1); } }
.mt-hero::after {
content: "";
position: absolute; inset: 0; z-index: -1;
background:
linear-gradient(to bottom, rgba(28,28,25,.5) 0, rgba(28,28,25,0) clamp(110px, 14vh, 170px)),
linear-gradient(12deg, rgba(28,28,25,.78) 0%, rgba(28,28,25,.42) 34%, rgba(28,28,25,.12) 62%, rgba(28,28,25,.28) 100%);
}
.mt-hero__inner { padding-block: clamp(7rem, 14vh, 11rem) clamp(4rem, 9vh, 6.5rem); width: 100%; }
.mt-hero__tag {
font-family: var(--serif);
font-style: italic;
font-size: var(--fs-herosub);
color: rgba(245, 241, 233, .92);
margin-bottom: 1.4rem;
}
.mt-hero h1 {
color: var(--bone);
max-width: none;
margin-bottom: 1.2rem;
text-shadow: 0 2px 26px rgba(28, 28, 25, .45);
}
.mt-hero__sub {
font-size: var(--fs-herosub);
color: rgba(245, 241, 233, .9);
max-width: 52ch;
line-height: 1.6;
text-wrap: balance; /* zh 副标题两行更均衡，避免词语在行尾被拆得过碎 */
}
/* hero 内容 = 工作室定位一句话（10-26 起 meta 只保留这一句，字号缩小到 18） */
.mt-hero__meta {
margin-top: 1.6rem;
font-size: var(--fs-herobody);
line-height: 1.6;
color: rgba(245, 241, 233, .95);
max-width: 66ch;
text-shadow: 0 1px 16px rgba(28, 28, 25, .6);
}
.mt-hero__studio { font-size: inherit; }
/* home hero deck line: plain bold paragraph between h1 and .mt-hero__meta
(no .mt-hero__sub class in the markup — style the :not() selector).
balance only: it/en fit one line; zh wraps into two even lines. */
.mt-hero__inner > p:not(.mt-hero__meta) {
font-size: var(--fs-herosub);
line-height: 1.4;
text-wrap: balance;
}
.mt-hero__actions { margin-top: 2.4rem; }
/* hero buttons sit below hero body copy: 16 < 18 (client 10-26) */
/* hero buttons: 14px type + compact padding, so they read clearly smaller
than the 18px hero copy (client 2026-10-27) */
.mt-hero .mt-btn, .mt-hero .wp-block-buttons .wp-block-button__link {
font-size: var(--fs-herobtn);
padding: .72rem 1.35rem !important;
}
.mt-hero__scroll {
position: absolute;
right: var(--gutter);
bottom: 2.2rem;
display: inline-flex;
flex-direction: column;
align-items: center;
gap: .7rem;
color: rgba(245, 241, 233, .75);
font-size: .6875rem;
letter-spacing: .28em;
text-transform: uppercase;
writing-mode: vertical-rl;
}
.mt-hero__scroll::after {
content: "";
width: 1px; height: 3.4rem;
background: linear-gradient(rgba(245,241,233,.8), transparent);
animation: scrollPulse 2.2s ease-in-out infinite;
}
@keyframes scrollPulse { 0%,100% { opacity: .35; transform: scaleY(.7);} 50% { opacity: 1; transform: none;} }
/* =========================================================
6. PAGE HERO (inner pages)
========================================================= */
.mt-pagehero {
padding: clamp(9.5rem, 20vh, 13rem) 0 clamp(3.2rem, 6vw, 5rem);
background: var(--bone);
}
.mt-pagehero--image {
position: relative;
isolation: isolate;
color: var(--bone);
background-size: cover;
background-position: center;
padding: clamp(10rem, 22vh, 15rem) 0 clamp(4rem, 7vw, 6rem);
}
.mt-pagehero--image::after {
content: "";
position: absolute; inset: 0; z-index: -1;
background:
linear-gradient(to bottom, rgba(28,28,25,.5) 0, rgba(28,28,25,0) clamp(110px, 14vh, 170px)),
linear-gradient(10deg, rgba(28,28,25,.72), rgba(28,28,25,.32) 60%, rgba(28,28,25,.25));
}
.mt-pagehero--image h1 { color: var(--bone); }
.mt-pagehero--image .mt-label { color: rgba(245,241,233,.85); }
.mt-pagehero--image .mt-label::before { background: rgba(245,241,233,.5); }
.mt-pagehero h1 { max-width: 20ch; margin-bottom: .35em; text-wrap: balance; }
.mt-pagehero__sub {
font-family: var(--serif);
font-style: italic;
font-size: 2.25rem; /* 内页 hero 副标题 36 @ 1920（首页 42，见 --fs-herosub） */
line-height: 1.4;
color: var(--ink-soft);
max-width: 58ch;
}
.mt-pagehero--image .mt-pagehero__sub { color: rgba(245,241,233,.88); }
/* =========================================================
7. SECTIONS
========================================================= */
.mt-section { padding-block: var(--sec-pad); }
.mt-section--bone { background: var(--bone); }
.mt-section--deep { background: var(--bone-deep); }
.mt-section--dark { background: var(--sage-ink); color: rgba(245,241,233,.88); }
.mt-section--dark h2, .mt-section--dark h3 { color: var(--bone); }
.mt-section--ink { background: var(--ink); color: rgba(245,241,233,.85); }
.mt-section--ink h2, .mt-section--ink h3 { color: var(--bone); }
.mt-section__head { max-width: 780px; margin-bottom: clamp(2.6rem, 5vw, 4.2rem); }
.mt-section__head--center { margin-inline: auto; text-align: center; }
.mt-section--cta .wp-block-buttons { justify-content: center; }
.mt-section__head h2 { text-wrap: balance; }
.mt-section__head .lead { margin-top: 1rem; }
/* --- service cards --- */
.mt-cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.25rem;
}
.mt-card {
position: relative;
background: var(--bone-soft);
border: 1px solid var(--line-soft);
border-radius: var(--r);
padding: clamp(1.8rem, 3vw, 2.6rem);
display: flex;
flex-direction: column;
gap: .9rem;
transition: transform .3s var(--ease), box-shadow .3s, border-color .3s;
}
.mt-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow);
border-color: rgba(107,115,88,.35);
}
.mt-card__num {
font-family: var(--serif);
font-size: 1rem;
color: var(--clay);
letter-spacing: .1em;
}
.mt-card h3 { font-size: var(--fs-h3); margin: 0; max-width: 26ch; }
.mt-card__tag { font-size: .8125rem; color: var(--mute); }
.mt-card p { margin: 0; color: var(--ink-soft); font-size: var(--fs-cardtext); line-height: 1.7; }
.mt-card .mt-textlink { margin-top: auto; padding-top: .6rem; }
.mt-card--wide { grid-column: 1 / -1; flex-direction: row; align-items: flex-end; gap: 2rem; flex-wrap: wrap; }
.mt-card--wide > div:first-child { flex: 1 1 420px; display: flex; flex-direction: column; gap: .9rem; }
/* --- audience strip --- */
.mt-audience {
display: grid;
grid-template-columns: repeat(6, 1fr);
border-block: 1px solid var(--line);
}
.mt-audience a {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 2.2rem;
min-height: 168px;
padding: 1.6rem 1.4rem;
border-right: 1px solid var(--line);
font-family: var(--serif);
font-size: 1.25rem;
line-height: 1.25;
color: var(--ink);
transition: background-color .3s, color .3s;
}
.mt-audience a:last-child { border-right: 0; }
.mt-audience a .mt-audience__arr { font-family: var(--serif); transition: transform .3s var(--ease); }
.mt-audience a:hover { background: var(--sage-deep); color: var(--bone); }
.mt-audience a:hover .mt-audience__arr { transform: translate(4px, 4px); }
/* --- 5C method --- */
.mt-5c {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 1rem;
counter-reset: c5;
}
.mt-5c__item {
background: rgba(245,241,233,.06);
border: 1px solid rgba(245,241,233,.16);
border-radius: var(--r);
padding: 1.8rem 1.5rem 1.9rem;
transition: background-color .3s, transform .3s var(--ease);
}
.mt-5c__item:hover { background: rgba(245,241,233,.1); transform: translateY(-4px); }
.mt-5c__icon {
width: 52px;
height: 52px;
margin-bottom: 1.1rem;
background: var(--bone-soft);
border-radius: 50%;
padding: .55rem;
}
.mt-5c__icon img { width: 100%; height: 100%; object-fit: contain; }
.mt-5c__item h3 { font-size: var(--fs-h3); margin-bottom: .5rem; color: var(--bone); }
.mt-5c__item p { margin: 0; font-size: var(--fs-cardtext); line-height: 1.65; color: rgba(245,241,233,.75); }
/* light variant (used on Studio/Metodo light backgrounds) */
.mt-5c--light .mt-5c__item { background: var(--bone-soft); border-color: var(--line-soft); }
.mt-5c--light .mt-5c__item h3 { color: var(--ink); }
.mt-5c--light .mt-5c__item p { color: var(--ink-soft); }
/* --- process steps --- */
.mt-process {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 1px;
background: var(--line);
border-block: 1px solid var(--line);
}
.mt-process__step {
background: var(--bone);
padding: 2rem 1.5rem 2.2rem;
display: flex;
flex-direction: column;
gap: .8rem;
min-height: 240px;
transition: background-color .3s;
}
.mt-process__step:hover { background: var(--bone-soft); }
.mt-process__num {
font-family: var(--serif);
font-size: 2.6rem;
line-height: 1;
color: rgba(107,115,88,.45);
}
.mt-process__step h3 { font-size: var(--fs-h3); margin: 0; }
.mt-process__step p { margin: 0; font-size: var(--fs-cardtext); color: var(--ink-soft); line-height: 1.65; }
.mt-process__tag {
margin-top: auto;
font-size: .6875rem;
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--clay);
}
/* --- image + text split --- */
.mt-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center; }
.mt-split--rev > figure { order: 2; }
.mt-split figure { margin: 0; overflow: hidden; border-radius: var(--r); }
.mt-split figure img { transition: transform 1.2s var(--ease); width: 100%; }
.mt-split figure:hover img { transform: scale(1.045); }
.mt-split__body h2 { margin-bottom: 1rem; }
.mt-split__body p { color: var(--ink-soft); }
/* --- journal preview --- */
.mt-journal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.mt-jcard {
display: flex;
flex-direction: column;
background: var(--bone-soft);
border: 1px solid var(--line-soft);
border-radius: var(--r);
overflow: hidden;
transition: transform .3s var(--ease), box-shadow .3s;
}
.mt-jcard:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.mt-jcard__img { aspect-ratio: 4 / 2.7; overflow: hidden; }
.mt-jcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.mt-jcard:hover .mt-jcard__img img { transform: scale(1.05); }
.mt-jcard__body { padding: 1.6rem 1.6rem 1.8rem; display: flex; flex-direction: column; gap: .7rem; flex: 1; }
.mt-jcard__cat {
font-size: .6875rem; font-weight: 600; letter-spacing: .2em;
text-transform: uppercase; color: var(--clay);
}
.mt-jcard h3 { font-size: var(--fs-h3); margin: 0; }
.mt-jcard p { margin: 0; font-size: var(--fs-cardtext); color: var(--ink-soft); }
.mt-jcard .mt-textlink { margin-top: auto; padding-top: .8rem; }
/* --- CTA band --- */
.mt-ctaband {
position: relative;
isolation: isolate;
text-align: center;
color: var(--bone);
background-size: cover;
background-position: center;
padding: clamp(6rem, 13vw, 10.5rem) var(--gutter);
}
.mt-ctaband::after {
content: "";
position: absolute; inset: 0; z-index: -1;
background: linear-gradient(rgba(28,28,25,.66), rgba(28,28,25,.66));
}
.mt-ctaband h2 { color: var(--bone); max-width: 22ch; margin-inline: auto; text-wrap: balance; }
.mt-ctaband p { max-width: 56ch; margin: 1rem auto 0; font-size: var(--fs-secsub); color: rgba(245,241,233,.85); } /* subtitle level, client 2026-10-29 */
.mt-ctaband .wp-block-buttons { justify-content: center; margin-top: 2.4rem; }
/* right-anchored variant (metodo CTA, client sketch 2026-10-24) */
.mt-ctaband--right { text-align: right; }
.mt-ctaband--right h2, .mt-ctaband--right p { margin-inline: auto 0; }
.mt-ctaband--right .wp-block-buttons { justify-content: flex-end; }
@media (max-width: 640px) {
.mt-ctaband--right { text-align: left; }
.mt-ctaband--right h2, .mt-ctaband--right p { margin-inline: 0; }
.mt-ctaband--right .wp-block-buttons { justify-content: flex-start; }
}
/* =========================================================
8. CONTENT (Gutenberg output)
========================================================= */
.mt-content > * { max-width: 820px; margin-inline: auto; }
.mt-content > .alignwide { max-width: var(--wide); }
.mt-content > .alignfull { max-width: none; }
.mt-content h2 { margin-top: 2.4em; }
.mt-content h3 { margin-top: 2em; }
.mt-content h2 + h3 { margin-top: 1.2em; }
.mt-content ul, .mt-content ol { padding-left: 1.3em; color: var(--ink-soft); }
.mt-content li + li { margin-top: .45em; }
.mt-content li::marker { color: var(--sage); }
.mt-content blockquote {
margin: 2.5rem 0;
padding-left: 1.6rem;
border-left: 2px solid var(--clay);
font-family: var(--serif);
font-size: var(--fs-lead);
font-style: italic;
color: var(--ink-soft);
}
.mt-content hr { border: 0; border-top: 1px solid var(--line); margin: 3.5rem auto; width: 120px; }
.mt-content figure.wp-block-image { margin: 2.6rem 0; }
.mt-content figure.wp-block-image.alignwide, .mt-content figure.wp-block-image.alignfull { margin-inline: auto; }
.mt-content figcaption { font-size: .8125rem; color: var(--mute); text-align: center; margin-top: .6rem; }
/* group sections generated inside content */
.mt-content > .wp-block-group { padding-block: var(--sec-pad); }
.mt-content .mt-intro-center { text-align: center; }
/* generic group-with-bg helpers used in block markup */
.has-bone-deep-background-color { background-color: var(--bone-deep) !important; }
.has-sage-ink-background-color { background-color: var(--sage-ink) !important; }
.has-ink-background-color { background-color: var(--ink) !important; }
.has-bone-background-color { background-color: var(--bone) !important; }
.has-bone-color { color: var(--bone) !important; }
.has-ink-color { color: var(--ink) !important; }
/* packages table */
.wp-block-table.mt-packages { margin: 0; }
.wp-block-table.mt-packages table {
width: 100%;
border-collapse: collapse;
font-size: var(--fs-cardtext);
background: var(--bone-soft);
}
.wp-block-table.mt-packages thead th {
font-family: var(--serif);
font-size: .75rem;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--bone);
background: var(--sage-deep);
padding: 1.1rem 1rem;
text-align: center;
border: 0;
}
.wp-block-table.mt-packages thead th:first-child { text-align: left; }
.wp-block-table.mt-packages tbody td, .wp-block-table.mt-packages tbody th {
border: 0;
border-bottom: 1px solid var(--line-soft);
padding: .95rem 1rem;
vertical-align: top;
text-align: center;
color: var(--ink-soft);
}
.wp-block-table.mt-packages tbody th { text-align: left; font-weight: 600; color: var(--ink); }
.wp-block-table.mt-packages tbody td:first-child { text-align: left; }
.wp-block-table.mt-packages .mt-check { color: var(--sage-deep); font-weight: 700; }
.wp-block-table.mt-packages .mt-dash { color: var(--mute); }
.wp-block-table.mt-packages .mt-opt { color: var(--clay); font-size: .78rem; }
/* pricing cards (online design) */
.mt-pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
.mt-price {
background: var(--bone-soft);
border: 1px solid var(--line-soft);
border-radius: var(--r);
padding: 2.2rem 1.8rem;
display: flex;
flex-direction: column;
gap: .5rem;
transition: transform .3s var(--ease), box-shadow .3s;
}
.mt-price:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.mt-price--hl { background: var(--sage-ink); color: rgba(245,241,233,.88); border-color: transparent; }
.mt-price--hl h3 { color: var(--bone); }
.mt-price__name {
font-size: .75rem; font-weight: 600; letter-spacing: .2em;
text-transform: uppercase; color: var(--clay);
}
.mt-price--hl .mt-price__name { color: #e0b39c; }
.mt-price h3 { font-size: var(--fs-h3); margin: .2rem 0 .6rem; }
.mt-price ul { list-style: none; margin: 0 0 1.4rem; padding: 0; font-size: var(--fs-cardtext); display: grid; gap: .5rem; }
.mt-price ul li { padding-left: 1.4rem; position: relative; }
.mt-price ul li::before { content: "—"; position: absolute; left: 0; color: var(--sage); }
.mt-price--hl ul li::before { color: var(--clay); }
.mt-price .mt-btn { margin-top: auto; text-align: center; }
.mt-price .mt-btn--solid { display: block; background: var(--sage-deep); color: var(--bone); }
.mt-price .mt-btn--solid:hover { background: var(--sage-ink); }
.mt-price .mt-btn--ghost { display: block; text-align: center; border: 1px solid rgba(28,28,25,.3); color: var(--ink); }
.mt-price .mt-btn--ghost:hover { border-color: var(--sage-deep); color: var(--sage-ink); }
/* steps (horizontal how-it-works) */
.mt-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.3rem; counter-reset: st; }
.mt-steps__item { position: relative; padding-top: 2.6rem; }
.mt-steps__item::before {
counter-increment: st;
content: "0" counter(st);
position: absolute; top: 0; left: 0;
font-family: var(--serif);
font-size: 2.1rem;
color: var(--clay);
}
.mt-steps__item h3 { font-size: var(--fs-h3); margin-bottom: .4rem; }
.mt-steps__item p { margin: 0; font-size: var(--fs-cardtext); color: var(--ink-soft); }
/* FAQ */
.mt-faq { max-width: 820px; margin-inline: auto; }
.mt-faq details {
border-bottom: 1px solid var(--line);
padding: 1.2rem 0;
}
.mt-faq summary {
cursor: pointer;
font-family: var(--serif);
font-size: var(--fs-h3);
font-weight: 500;
list-style: none;
position: relative;
padding-right: 2.4rem;
}
.mt-faq summary::-webkit-details-marker { display: none; }
.mt-faq summary::after {
content: "+";
position: absolute;
right: 0; top: 50%;
transform: translateY(-50%);
font-family: var(--serif);
font-size: 1.4rem;
color: var(--sage-deep);
transition: transform .25s var(--ease);
}
.mt-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.mt-faq details p { color: var(--ink-soft); margin: .8rem 0 0; }
/* =========================================================
9. CONSULTATION FORM
========================================================= */
.mt-form-wrap { max-width: 860px; margin-inline: auto; }
.mt-form-steps {
display: flex;
align-items: center;
gap: .8rem;
margin: 2.6rem 0 2.8rem;
flex-wrap: wrap;
}
.mt-form-steps__item {
display: inline-flex;
align-items: center;
gap: .55rem;
font-size: .75rem;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--mute);
}
.mt-form-steps__item i {
font-style: normal;
font-family: var(--serif);
font-size: 1.05rem;
width: 2rem; height: 2rem;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--line);
border-radius: 50%;
transition: background-color .3s, color .3s, border-color .3s;
}
.mt-form-steps__item.is-active { color: var(--ink); }
.mt-form-steps__item.is-active i { background: var(--sage-deep); border-color: var(--sage-deep); color: var(--bone); }
.mt-form-steps__item.is-done i { background: var(--sage); border-color: var(--sage); color: var(--bone); }
.mt-form-steps__sep { flex: 1 1 18px; height: 1px; background: var(--line); min-width: 14px; }
.mt-fstep { display: none; }
.mt-fstep.is-active { display: block; animation: stepIn .45s var(--ease); }
@keyframes stepIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.mt-fstep__title {
font-family: var(--serif);
font-size: 1.5rem;
margin-bottom: .3rem;
}
.mt-fstep__hint { font-size: var(--fs-cardtext); color: var(--mute); margin-bottom: 1.8rem; }
.mt-field { margin-bottom: 1.4rem; }
.mt-field label, .mt-legend {
display: block;
font-size: .75rem;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ink-soft);
margin-bottom: .55rem;
}
.mt-field .req { color: var(--clay); }
.mt-field input[type="text"],
.mt-field input[type="email"],
.mt-field input[type="tel"],
.mt-field input[type="url"],
.mt-field select,
.mt-field textarea {
width: 100%;
padding: .9rem 1rem;
font-family: var(--serif);
font-size: var(--fs-cardtext); /* 16px: inputs no longer trigger iOS focus zoom */
color: var(--ink);
background: var(--bone-soft);
border: 1px solid var(--line);
border-radius: var(--r);
transition: border-color .25s, background-color .25s, box-shadow .25s;
appearance: none;
}
.mt-field select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23545b44' stroke-width='1.5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1rem center;
padding-right: 2.6rem;
}
.mt-field textarea { min-height: 140px; resize: vertical; }
.mt-field input:focus, .mt-field select:focus, .mt-field textarea:focus {
outline: none;
border-color: var(--sage);
background: var(--white);
box-shadow: 0 0 0 3px rgba(107,115,88,.14);
}
.mt-field ::placeholder { color: rgba(140,135,123,.75); }
.mt-field--half { width: calc(50% - .65rem); display: inline-block; vertical-align: top; margin-right: 1.3rem; }
.mt-field--half:nth-of-type(even) { margin-right: 0; }
.mt-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.3rem; }
.mt-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 1.3rem; }
.mt-choices { display: grid; gap: .55rem; }
.mt-choice { position: relative; display: block; }
.mt-choice input { position: absolute; opacity: 0; }
.mt-choice span {
display: flex;
align-items: center;
gap: .8rem;
padding: .85rem 1.1rem;
background: var(--bone-soft);
border: 1px solid var(--line);
border-radius: var(--r);
font-size: var(--fs-cardtext);
cursor: pointer;
transition: border-color .2s, background-color .2s;
}
.mt-choice span::before {
content: "";
width: 15px; height: 15px;
flex: none;
border: 1.5px solid var(--mute);
border-radius: 50%;
transition: border-color .2s, box-shadow .2s;
}
.mt-choice--check span::before { border-radius: 3px; }
.mt-choice input:checked + span { border-color: var(--sage-deep); background: var(--white); }
.mt-choice input:checked + span::before { border-color: var(--sage-deep); box-shadow: inset 0 0 0 4px var(--sage-deep); }
.mt-choice--check input:checked + span::before { box-shadow: inset 0 0 0 3.5px var(--sage-deep); }
.mt-choice input:focus-visible + span { box-shadow: 0 0 0 3px rgba(107,115,88,.2); }
.mt-choices--cols { grid-template-columns: 1fr 1fr; }
.mt-upload {
border: 1.5px dashed rgba(140,135,123,.55);
border-radius: var(--r);
background: var(--bone-soft);
padding: 2.2rem 1.4rem;
text-align: center;
cursor: pointer;
transition: border-color .25s, background-color .25s;
}
.mt-upload:hover, .mt-upload.is-drag { border-color: var(--sage); background: var(--white); }
.mt-upload__txt { font-size: .9rem; color: var(--ink-soft); }
.mt-upload__txt strong { color: var(--sage-deep); }
.mt-upload__fmt { font-size: .75rem; color: var(--mute); margin-top: .4rem; }
.mt-upload__list { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .35rem; font-size: .8125rem; }
.mt-upload__list li { display: flex; justify-content: space-between; gap: 1rem; color: var(--ink-soft); }
.mt-upload__list .rm { color: var(--clay); cursor: pointer; border: 0; background: none; font-size: .8125rem; }
.mt-privacy { display: flex; gap: .8rem; align-items: flex-start; font-size: .85rem; color: var(--ink-soft); }
.mt-privacy input { margin-top: .3rem; accent-color: var(--sage-deep); width: 16px; height: 16px; }
.mt-privacy a { text-decoration: underline; text-underline-offset: 3px; }
.mt-form-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.4rem; }
.mt-form-nav .back { background: none; border: 0; cursor: pointer; font-size: .8125rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); padding: 1rem .4rem; transition: color .2s; }
.mt-form-nav .back:hover { color: var(--ink); }
.mt-form-nav .next, .mt-form-nav .send {
background: var(--sage-deep);
color: var(--bone);
border: 0;
cursor: pointer;
font-size: .8125rem;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
padding: 1.05rem 2.4rem;
border-radius: var(--r);
transition: background-color .25s, transform .25s var(--ease);
}
.mt-form-nav .next:hover, .mt-form-nav .send:hover { background: var(--sage-ink); transform: translateY(-2px); }
.mt-form-msg { display: none; margin-top: 1.4rem; padding: 1rem 1.2rem; border-radius: var(--r); font-size: .9rem; }
.mt-form-msg.is-err { display: block; background: rgba(176,96,60,.1); color: var(--clay-deep); border: 1px solid rgba(176,96,60,.3); }
.mt-form-success {
text-align: center;
padding: clamp(3rem, 7vw, 5rem) 1rem;
}
.mt-form-success h3 { font-size: 2rem; }
.mt-form-success p { color: var(--ink-soft); }
/* honeypot */
.mt-hp { position: absolute !important; left: -9999px !important; opacity: 0; height: 0; overflow: hidden; }
/* =========================================================
10. NEWSLETTER / FOOTER
========================================================= */
.mt-footer {
background: var(--ink);
color: rgba(245,241,233,.78);
font-size: .9rem;
}
.mt-footer a { transition: color .2s; }
.mt-footer a:hover { color: var(--bone); }
.mt-footer__top {
display: grid;
grid-template-columns: 1.35fr 1fr 1fr 1.35fr;
gap: clamp(2rem, 4vw, 3.5rem);
padding-block: clamp(3.5rem, 7vw, 5.5rem) 3rem;
}
.mt-footer h4 {
color: var(--bone);
font-family: var(--serif);
font-size: .75rem;
font-weight: 600;
letter-spacing: .2em;
text-transform: uppercase;
margin-bottom: 1.3rem;
}
.mt-footer__brand .mt-brand { color: var(--bone); margin-bottom: 1.2rem; }
.mt-footer__brand p { margin: 0 0 .4rem; line-height: 1.7; }
.mt-footer__brand .mt-footer__tag {
font-family: var(--serif);
font-style: italic;
font-size: 1.05rem;
color: rgba(245,241,233,.65);
margin-bottom: 1rem;
}
.mt-footer__contacts a { text-decoration: none; }
.mt-footer__social { display: flex; gap: .9rem; margin-top: 1.1rem; }
.mt-footer__social a {
width: 38px; height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(245,241,233,.25);
border-radius: 50%;
transition: border-color .25s, background-color .25s, transform .25s var(--ease);
}
.mt-footer__social a:hover { border-color: var(--bone); background: rgba(245,241,233,.08); transform: translateY(-2px); }
.mt-footer__social svg { width: 16px; height: 16px; fill: var(--bone); }
.mt-footer__menu, .mt-footer__services { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.mt-footer__menu a, .mt-footer__services a { font-size: .9rem; }
.mt-news p { margin: 0 0 1.1rem; font-size: .875rem; line-height: 1.7; }
.mt-news__row { display: flex; gap: .6rem; }
.mt-news__row input[type="email"] {
flex: 1;
min-width: 0;
padding: .9rem 1rem;
font-family: var(--serif);
font-size: .9rem;
color: var(--bone);
background: rgba(245,241,233,.07);
border: 1px solid rgba(245,241,233,.22);
border-radius: var(--r);
transition: border-color .25s, background-color .25s;
}
.mt-news__row input[type="email"]::placeholder { color: rgba(245,241,233,.45); }
.mt-news__row input[type="email"]:focus { outline: none; border-color: var(--sage); background: rgba(245,241,233,.1); }
.mt-news__row button {
background: var(--sage-deep);
color: var(--bone);
border: 0;
cursor: pointer;
padding: .9rem 1.4rem;
border-radius: var(--r);
font-size: .75rem;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
transition: background-color .25s;
white-space: nowrap;
}
.mt-news__row button:hover { background: var(--sage); }
.mt-news__msg { font-size: .8125rem; margin-top: .7rem; display: none; }
.mt-news__msg.ok { display: block; color: #a8b58f; }
.mt-news__msg.err { display: block; color: #d99a77; }
.mt-news__privacy { font-size: .72rem; color: rgba(245,241,233,.45); margin-top: .8rem !important; }
.mt-news__privacy a { text-decoration: underline; }
.mt-footer__map {
margin-top: 1.2rem;
border: 1px solid rgba(245,241,233,.18);
border-radius: var(--r);
overflow: hidden;
filter: grayscale(1) invert(.92) contrast(.9);
}
.mt-footer__map iframe { display: block; width: 100%; height: 170px; border: 0; }
.mt-footer__bottom {
border-top: 1px solid rgba(245,241,233,.12);
padding-block: 1.6rem 2rem;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1rem;
font-size: .78rem;
color: rgba(245,241,233,.45);
}
.mt-footer__legal { display: flex; gap: 1.6rem; }
.mt-footer__legal a { color: rgba(245,241,233,.55); }
.mt-footer__legal a:hover { color: var(--bone); }
.mt-footer__word {
overflow: hidden;
line-height: .8;
pointer-events: none;
user-select: none;
}
.mt-footer__word span {
display: block;
font-family: var(--serif);
font-weight: 500;
font-size: clamp(3.4rem, 11.5vw, 10.5rem);
letter-spacing: .01em;
color: transparent;
-webkit-text-stroke: 1px rgba(245,241,233,.16);
white-space: nowrap;
text-align: center;
transform: translateY(12%);
}
/* =========================================================
11. JOURNAL ARCHIVE + SINGLE
========================================================= */
.mt-archive-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.mt-article {
font-size: var(--fs-body);
}
.mt-article__head { max-width: var(--wide); margin-inline: auto; padding-block: clamp(9rem, 18vh, 12rem) clamp(2rem, 4vw, 3.4rem); }
.mt-article__head h1 { font-size: var(--fs-h2); max-width: 24ch; text-wrap: balance; }
.mt-article__meta {
display: flex;
gap: 1.2rem;
align-items: center;
font-size: .8125rem;
color: var(--mute);
margin-top: 1.4rem;
}
.mt-article__meta .cat { color: var(--clay); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; font-size: .6875rem; }
.mt-article__hero { max-width: var(--wide); margin-inline: auto; padding-inline: var(--gutter); }
.mt-article__hero img { border-radius: var(--r); width: 100%; max-height: 68vh; object-fit: cover; }
.mt-article .mt-content { padding-block: clamp(2.5rem, 5vw, 4rem) var(--sec-pad); }
/* post navigation */
.mt-postnav {
border-top: 1px solid var(--line);
display: grid;
grid-template-columns: 1fr 1fr;
}
.mt-postnav a { padding: 2.2rem var(--gutter); transition: background-color .25s; }
.mt-postnav a:hover { background: var(--bone-deep); }
.mt-postnav a + a { border-left: 1px solid var(--line); text-align: right; }
.mt-postnav .dir { font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase; color: var(--mute); display: block; margin-bottom: .5rem; }
.mt-postnav .ttl { font-family: var(--serif); font-size: 1.35rem; }
/* =========================================================
12. PROJECTS
========================================================= */
.mt-projects-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; }
.mt-project { position: relative; overflow: hidden; border-radius: var(--r); display: block; }
.mt-project img { width: 100%; aspect-ratio: 4 / 2.9; object-fit: cover; transition: transform 1.1s var(--ease); }
.mt-project:hover img { transform: scale(1.05); }
.mt-project__cap {
position: absolute;
inset: auto 0 0;
padding: 2.4rem 1.8rem 1.6rem;
color: var(--bone);
background: linear-gradient(transparent, rgba(28,28,25,.72));
}
.mt-project__cap h3 { margin: 0; font-size: 1.5rem; color: var(--bone); }
.mt-project__cap span { font-size: .8125rem; opacity: .85; }
.mt-empty {
text-align: center;
padding: clamp(3rem, 7vw, 5rem);
border: 1px dashed rgba(140,135,123,.5);
border-radius: var(--r);
color: var(--ink-soft);
}
/* =========================================================
13. ANIMATIONS
========================================================= */
.mt-reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.mt-reveal.is-in { opacity: 1; transform: none; }
.mt-reveal-d1 { transition-delay: .1s; }
.mt-reveal-d2 { transition-delay: .2s; }
.mt-reveal-d3 { transition-delay: .3s; }
@media (prefers-reduced-motion: reduce) {
.mt-reveal { opacity: 1; transform: none; transition: none; }
.mt-hero__bg { animation: none; transform: none; }
html { scroll-behavior: auto; }
}
/* =========================================================
14. GUTENBERG ALIGNMENT HELPERS
========================================================= */
body :where(.wp-site-blocks, .mt-content) > * { max-width: none; }
.alignwide { max-width: var(--wide); margin-inline: auto; }
.alignfull { width: 100%; }
.wp-block-group { position: relative; }
.wp-block-group.mt-pd { padding-block: var(--sec-pad); }
.wp-block-buttons .wp-block-button { margin: 0 !important; }
/* =========================================================
15. RESPONSIVE
========================================================= */
@media (max-width: 1120px) {
.mt-5c { grid-template-columns: repeat(3, 1fr); }
.mt-process { grid-template-columns: repeat(3, 1fr); }
.mt-audience { grid-template-columns: repeat(3, 1fr); }
.mt-audience a { border-bottom: 1px solid var(--line); }
.mt-footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
.mt-nav { display: none; }
.mt-burger { display: flex; }
.mt-header__cta { display: none; }
.mt-cards { grid-template-columns: 1fr; }
.mt-split, .mt-split--rev { grid-template-columns: 1fr; }
.mt-split--rev > figure { order: 0; }
.mt-journal-grid, .mt-archive-grid { grid-template-columns: 1fr 1fr; }
.mt-pricing { grid-template-columns: 1fr; }
.mt-steps { grid-template-columns: 1fr 1fr; gap: 2rem 1.3rem; }
.mt-projects-grid { grid-template-columns: 1fr; }
.mt-grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.mt-5c { grid-template-columns: 1fr 1fr; }
.mt-process { grid-template-columns: 1fr; }
.mt-process__step { min-height: 0; }
.mt-audience { grid-template-columns: 1fr 1fr; }
.mt-journal-grid, .mt-archive-grid { grid-template-columns: 1fr; }
.mt-steps { grid-template-columns: 1fr; }
.mt-grid-2 { grid-template-columns: 1fr; }
.mt-field--half { width: 100%; margin-right: 0; }
.mt-choices--cols { grid-template-columns: 1fr; }
.mt-footer__top { grid-template-columns: 1fr; }
.mt-postnav { grid-template-columns: 1fr; }
.mt-postnav a + a { border-left: 0; border-top: 1px solid var(--line); text-align: left; }
.mt-brand__logo { height: 38px; }
.mt-hero__scroll { display: none; }
}
/* hero outline button: solid bone at rest, translucent ghost on hover */
.mt-hero .wp-block-button.is-style-outline > .wp-block-button__link {
background: var(--bone) !important;
border-color: var(--bone) !important;
color: var(--ink) !important;
}
.mt-hero .wp-block-button.is-style-outline > .wp-block-button__link:hover {
background: rgba(28, 28, 25, .28) !important;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
border-color: rgba(245, 241, 233, .65) !important;
color: var(--bone) !important;
}
/* CJK line breaking. `keep-all` was original intent (never break inside a
word) but Chinese has no spaces, so it suppressed every break: long zh
titles could not wrap and blew their grid track past the viewport
(605px page on a 390px phone, 2026-10-23). `normal` still keeps Latin
words intact while letting CJK wrap; `line-break: strict` keeps the
no-break-before-punctuation rule that keep-all was there for. */
.lang-zh h1, .lang-zh h2, .lang-zh h3, .lang-zh .mt-hero h1 {
word-break: normal;
line-break: strict;
}
.lang-zh .mt-hero h1 { max-width: 17ch; }
/* capture mode: neutralize viewport-height sections for full-page rendering */
.mt-capture .mt-hero { min-height: 760px !important; }
.mt-capture .mt-hero__inner { padding-block: 8rem 4.5rem; }
.mt-capture .mt-ctaband { min-height: 0 !important; }
/* outline buttons on dark sections: keep them legible */
.mt-section--dark .wp-block-button.is-style-outline > .wp-block-button__link,
.mt-section--ink .wp-block-button.is-style-outline > .wp-block-button__link,
.mt-5c-wrap .wp-block-button.is-style-outline > .wp-block-button__link {
color: var(--bone) !important;
border-color: rgba(245, 241, 233, .55) !important;
}
.mt-section--dark .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.mt-section--ink .wp-block-button.is-style-outline > .wp-block-button__link:hover {
background: rgba(245, 241, 233, .12) !important;
border-color: var(--bone) !important;
}
/* cards inside dark sections keep normal text colors (cards have light bg) */
.mt-section--dark .mt-card h3, .mt-section--ink .mt-card h3,
.mt-section--dark .mt-card p, .mt-section--ink .mt-card p {
color: var(--ink);
}
.mt-section--dark .mt-card p, .mt-section--ink .mt-card p {
color: var(--ink-soft);
}
.mt-section--dark .mt-card, .mt-section--ink .mt-card {
background: var(--bone-soft);
border-color: var(--line-soft);
}
/* 7-step process: fit columns, never break words */
.mt-process { grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); }
.mt-process__step { padding: 1.7rem 1.2rem 1.9rem; }
.mt-process__step h3 { font-size: var(--fs-h3); overflow-wrap: normal; hyphens: none; }
/* 7-step process: 4+3 rows, wider columns */
.mt-process { grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); }
.mt-process__step { min-height: 200px; }
.mt-process__step h3 { font-size: var(--fs-h3); }
/* WP layout flex wins over single-class overrides — force our grids */
.wp-block-columns.mt-cards,
.wp-block-columns.mt-process,
.wp-block-columns.mt-5c,
.wp-block-columns.mt-audience,
.wp-block-columns.mt-pricing,
.wp-block-columns.mt-steps,
.wp-block-columns.mt-split {
display: grid !important;
}
.wp-block-columns.mt-cards { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important; gap: 1.25rem !important; }
.wp-block-columns.mt-process { grid-template-columns: repeat(auto-fit, minmax(225px, 1fr)) !important; }
.wp-block-columns.mt-5c { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important; gap: 1rem !important; }
.wp-block-columns.mt-audience { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important; }
.wp-block-columns.mt-pricing { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important; }
.wp-block-columns.mt-steps { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important; gap: 2rem 1.3rem !important; }
.wp-block-columns.mt-split:not(.mt-split--edge .mt-split) { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important; }
/* readable lead text on dark sections */
.mt-section--dark .lead, .mt-section--ink .lead,
.mt-section--dark .mt-label, .mt-section--ink .mt-label {
color: rgba(245, 241, 233, .82);
}
.mt-section--dark .mt-label::before, .mt-section--ink .mt-label::before,
.mt-section--dark .mt-label::after, .mt-section--ink .mt-label::after {
background: rgba(245, 241, 233, .5);
}
/* 5C icon: the span wrapper is inline by default — make it a fixed-size flex circle */
span.mt-5c__icon {
display: flex;
align-items: center;
justify-content: center;
width: 58px;
height: 58px;
flex: none;
background: var(--bone-soft);
border-radius: 50%;
padding: 11px;
margin-bottom: 1.1rem;
}
span.mt-5c__icon img {
width: 100% !important;
height: 100% !important;
object-fit: contain;
}
.mt-5c__item {
display: flex;
flex-direction: column;
align-items: flex-start;
}
/* inner pages: light editorial hero (immersive image hero is homepage-only) */
.mt-pagehero { border-bottom: 1px solid var(--line-soft); }
/* non-immersive image banner hero (inner pages): solid header above,
image banner with title overlay below it */
.mt-pagehero--banner {
margin-top: 70px;
padding: 2.5rem 0 clamp(2rem, 4vw, 3rem);
min-height: clamp(340px, 50vh, 520px);
display: flex;
align-items: flex-end;
border-bottom: 0;
}
.mt-pagehero--banner::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(8deg, rgba(28, 28, 25, .62), rgba(28, 28, 25, .22) 55%, rgba(28, 28, 25, .12));
}
.mt-pagehero--banner .container { position: relative; z-index: 1; width: 100%; }
.mt-pagehero--banner h1 { color: var(--bone); }
.mt-pagehero--banner .mt-label { color: rgba(245, 241, 233, .85); }
.mt-pagehero--banner .mt-label::before { background: rgba(245, 241, 233, .5); }
.mt-pagehero--banner .mt-pagehero__sub { color: rgba(245, 241, 233, .9); }
/* anchor the banner gradient inside the banner (was covering the viewport) */
.mt-pagehero--banner { position: relative; }
.mt-pagehero--banner::after {
background: linear-gradient(8deg, rgba(28, 28, 25, .66), rgba(28, 28, 25, .38) 55%, rgba(28, 28, 25, .22));
}
.mt-pagehero--banner .mt-pagehero__sub { color: rgba(245, 241, 233, .95); text-shadow: 0 1px 14px rgba(28, 28, 25, .45); }
.mt-pagehero--banner .mt-label { text-shadow: 0 1px 10px rgba(28, 28, 25, .4); }
.mt-pagehero--banner h1 { text-shadow: 0 2px 18px rgba(28, 28, 25, .35); }
/* audience strip: editorial index list (one full-width row per client type) */
.wp-block-columns.mt-audience { display: block !important; border: 0 !important; background: none !important; }
.mt-audience .wp-block-column { display: block !important; border: 0 !important; padding: 0 !important; margin: 0 !important; }
.mt-audience .wp-block-column p { margin: 0 !important; }
.mt-audience { border-top: 1px solid var(--line) !important; }
.mt-audience a {
display: flex !important;
flex-direction: row !important;
align-items: baseline !important;
justify-content: space-between !important;
gap: 1.2rem;
min-height: 0 !important;
padding: 1.3rem .5rem !important;
border-right: 0 !important;
border-bottom: 1px solid var(--line) !important;
font-family: var(--serif) !important;
font-size: 1.8rem !important; /* fixed: vw shrank under DPI scaling */
line-height: 1.3 !important;
transition: background-color .25s, color .25s, padding-left .25s;
}
.mt-audience a:hover {
background: var(--sage-deep) !important;
color: var(--bone) !important;
padding-left: 1.3rem !important;
}
.mt-audience__arr { font-family: var(--serif) !important; font-size: 1.1rem; transition: transform .25s var(--ease); }
.mt-audience a:hover .mt-audience__arr { transform: translateX(6px); }
/* footer social: minimal bare glyphs (atelier aop style, no circles) */
.mt-footer__social { gap: 1.6rem !important; margin-top: 1.4rem !important; }
.mt-footer__social a {
width: auto !important;
height: auto !important;
border: 0 !important;
border-radius: 0 !important;
background: none !important;
transform: none !important;
}
.mt-footer__social a:hover { background: none !important; transform: none !important; }
.mt-footer__social svg { width: 19px !important; height: 19px !important; fill: rgba(245, 241, 233, .85); transition: fill .2s; }
.mt-footer__social a:hover svg { fill: var(--bone); }
/* =========================================================
16. V2 REDESIGN (2026-10 revision)
Large-whitespace editorial layout, centered hero,
identity modal, light footer, image cards.
========================================================= */
/* content width aligned with header/footer (--wide, 1440) */
:root { --container: var(--wide); }
/* --- tokens: bigger titles vs body, more whitespace --- */
:root {
--fs-h2: 3.375rem; /* 区块标题 54 */
--fs-h3: 2rem; /* 内容小标题 32 */
--sec-pad: clamp(5.5rem, 11vw, 10.5rem);
/* type scale 2026-10-26 meeting: fixed rem = client px spec @ 1920 ÷ 16, no
vw fluidity (vw shrank under DPI scaling). Table:
nav 15 / hero 72 / hero sub 36 / hero body 18 /
hero btn 16 / section title 54 / standfirst 27 / content h3 32 /
content h4 + one-liner 18 bold / body 16 / button 14 (< body, client 10-26) */
--fs-herosub: 1.75rem; /* 28, home hero deck/sub (client 2026-10-27, was 36) */
--fs-herobody: 1.125rem; /* 18, hero 内容 */
--fs-herobtn: 0.875rem; /* 14, buttons inside .mt-hero — visibly smaller than hero body 18 (client 2026-10-27) */
--fs-btn: 0.875rem; /* 14, buttons (< 内容 16, client 10-26) */
--fs-nav: 0.9375rem; /* 15, 导航条（客户 10-26: 字变小） */
--fs-secsub: 1.6875rem; /* 27, 区块副标题 */
--fs-lead: 1.125rem; /* 18, used bold + #ff4e00 (一句话定位) */
--fs-cardtext: 1rem; /* 16 */
}
/* mobile steps for the fixed scale: same tiers at roughly the old clamp
floors so phone layout stays as approved; must sit AFTER the :root
blocks above to win the cascade */
@media (max-width: 900px) {
:root {
--fs-hero: 3.25rem;
--fs-herosub: 1.625rem;
--fs-herobody: 1.125rem;
--fs-herobtn: 0.875rem;
--fs-h2: 2.6rem;
--fs-secsub: 1.5rem;
--fs-h3: 1.375rem;
--fs-h4: 1.0625rem;
--fs-lead: 1.0625rem;
}
}
@media (max-width: 640px) {
:root {
--fs-hero: 2.5rem;
--fs-herosub: 1.375rem;
--fs-herobody: 1.0625rem;
--fs-herobtn: 0.875rem;
--fs-h2: 2.125rem;
--fs-secsub: 1.3125rem;
--fs-h3: 1.25rem;
}
}
.mt-content p, .mt-section p { max-width: 70ch; }
.mt-section__head { margin-bottom: clamp(3rem, 6vw, 5rem); }
/* --- highlight mark (划重点, used sparingly) --- */
.mt-mark {
background: linear-gradient(to top, rgba(107, 115, 88, .42) 0, rgba(107, 115, 88, .42) 9%, transparent 9%);
padding: 0 .06em;
}
/* --- header: mark-only logo + studio name at its right, compact bar --- */
.mt-nav { display: flex; align-items: center; }
.mt-nav__row { display: flex; align-items: center; gap: 2rem; }
.mt-nav__row .mt-lang { margin: -.1rem .2rem -.1rem -.6rem; }
.mt-nav__row .mt-lang a { font-size: .72rem; }
.mt-header__bar { min-height: 84px; }
.mt-header.is-solid .mt-header__bar { min-height: 70px; }
.mt-brand__logo { height: 44px; }
.mt-header.is-solid .mt-brand__logo { height: 38px; }
.mt-brand__logo { transition: filter .3s; }
.mt-header:not(.is-solid):not(.is-light) .mt-brand__logo {
filter: brightness(0) invert(1) drop-shadow(0 1px 8px rgba(28, 28, 25, .25));
}
.mt-header.is-solid .mt-brand__logo, .mt-header.is-light .mt-brand__logo { filter: brightness(0); opacity: .85; }
/* moved to §22: footer logo rendered white on a sage chip */
@media (max-width: 900px) {
.mt-header__bar { min-height: 72px; }
.mt-brand__logo { height: 38px; }
.mt-brand__name { font-size: 1.1rem; }
}
@media (max-width: 640px) {
.mt-header__bar { min-height: 64px; }
.mt-brand__logo { height: 32px; }
.mt-brand__name { font-size: 1rem; }
}
/* client 2026-10-27: the studio name must be visible at EVERY width — the
old 901–1280px `display:none` is replaced by a compact lockup: name kept,
menu gaps and type tighten so everything fits between burger and desktop */
@media (max-width: 1280px) and (min-width: 901px) {
.mt-brand__logo { height: 40px; }
.mt-brand__name { font-size: .95rem; }
.mt-nav__row { gap: .9rem; }
.mt-menu { gap: .95rem; }
.mt-menu a { font-size: .8rem; letter-spacing: .1em; }
.mt-lang { margin-left: 0; }
.mt-header__cta { padding: .5rem .85rem; font-size: .8rem; }
}
/* --- hero: centered content, taller --- */
.mt-hero { align-items: center; text-align: center; }
.mt-hero__inner { padding-block: clamp(8rem, 16vh, 12rem) clamp(6rem, 12vh, 9rem); margin-inline: auto; }
.mt-hero h1 { max-width: 22ch; margin-inline: auto; }
.mt-hero__sub { margin-inline: auto; }
.mt-hero__meta { margin-inline: auto; }
.mt-hero .wp-block-buttons { justify-content: center; }
/* zh hero title: the
in the copy owns the 2-line break — never let the
measure force a wrap (a lone dangling character was the 10-26 complaint).
Size caps so the longer line (10 glyphs) always fits the viewport. */
.lang-zh .mt-hero h1 { max-width: 100%; font-size: min(4.5rem, calc((100vw - 3.5rem) / 10)); line-height: 1.25; }
/* en hero title: same treatment as zh — the
owns the 2-line break and
the measure must never dangle a lone word (client 2026-10-27). Line 2
"designed for today's climate" is ~12.3em wide; cap the size to the
viewport so it always fits on one line. */
.lang-en .mt-hero h1 { max-width: none; }
@media (min-width: 641px) {
.lang-en .mt-hero h1 { font-size: min(var(--fs-hero), calc((100vw - 4rem) / 13)); }
}
.mt-hero .wp-block-cover__inner-container { width: 100%; }
.mt-capture .mt-hero { min-height: 760px !important; }
/* --- buttons: stronger hover (bg + text both deepen/invert) --- */
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover {
background: var(--ink) !important;
color: var(--bone) !important;
transform: translateY(-2px);
box-shadow: 0 14px 30px -12px rgba(28, 28, 25, .5);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
background: var(--sage-deep) !important;
color: var(--bone) !important;
border-color: var(--sage-deep) !important;
transform: translateY(-2px);
}
/* (.mt-hero / .mt-on-dark outline hover lives with the .mt-hero rule above:
solid bone at rest → translucent ghost on hover) */
.mt-btn--solid { display: inline-block; background: var(--sage-deep); color: var(--bone); font-family: var(--serif); font-size: var(--fs-btn); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: 1.05rem 2.1rem; border-radius: var(--r); transition: background-color .25s, color .25s, transform .25s var(--ease), box-shadow .25s; }
.mt-btn--solid:hover { background: var(--ink); color: var(--bone); transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(28,28,25,.5); }
/* --- inner-page cover hero (metodo / servizi / contatti / service pages) --- */
.mt-pagecover {
position: relative;
isolation: isolate;
display: flex;
align-items: flex-end;
overflow: hidden;
}
.mt-pagecover img.wp-block-cover__image-background { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.mt-pagecover .wp-block-cover__background { position: absolute; inset: 0; z-index: -1; }
.mt-pagecover::after {
content: "";
position: absolute; inset: 0; z-index: -1;
background:
linear-gradient(to bottom, rgba(28,28,25,.5) 0, rgba(28,28,25,0) clamp(110px, 14vh, 170px)),
linear-gradient(10deg, rgba(28,28,25,.72), rgba(28,28,25,.34) 55%, rgba(28,28,25,.22));
}
.mt-pagecover .container { position: relative; width: 100%; }
.mt-pagecover__inner { padding: clamp(11rem, 22vh, 15rem) 0 clamp(4rem, 8vw, 6.5rem); max-width: 860px; }
.mt-pagecover__inner--center { text-align: center; margin-inline: auto; }
.mt-pagecover__inner--center .mt-pagecover__inner-text, .mt-pagecover__inner--center p { margin-inline: auto; }
.mt-pagecover h1 { color: var(--bone); text-wrap: balance; }
.mt-pagecover .lead { color: rgba(245, 241, 233, .92); }
.mt-pagecover__inner .mt-label { color: rgba(245,241,233,.85); }
.mt-pagecover__inner .mt-label::before { background: rgba(245,241,233,.5); }
.mt-contatti-cover__text { color: rgba(245,241,233,.92); font-size: var(--fs-cardtext); max-width: 62ch; }
.mt-contatti-cover__text a { color: var(--bone); }
/* --- audience image cards (small, clickable) --- */
.wp-block-columns.mt-audcards { display: grid !important; grid-template-columns: repeat(5, 1fr) !important; gap: 1.2rem !important; }
.mt-audcard-col { display: flex !important; }
.mt-audcard {
display: flex; flex-direction: column; width: 100%;
background: var(--bone-soft);
border: 1px solid var(--line-soft);
border-radius: var(--r);
overflow: hidden;
transition: transform .3s var(--ease), box-shadow .3s, border-color .3s;
}
.mt-audcard:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: rgba(107,115,88,.35); }
.mt-audcard__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.mt-audcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.mt-audcard:hover .mt-audcard__img img { transform: scale(1.06); }
.mt-audcard__name { font-family: var(--serif); font-size: var(--fs-h3); line-height: 1.3; padding: 1.1rem 1.2rem 0; color: var(--ink); }
.mt-audcard__desc { font-size: var(--fs-cardtext); line-height: 1.6; color: var(--ink-soft); padding: .45rem 1.2rem 0; }
.mt-audcard__arr {
display: inline-flex; align-items: center; justify-content: center;
width: 46px; height: 46px;
margin: 1rem 1.2rem 1.2rem;
margin-top: auto;
border-radius: 50%;
background: transparent;
color: var(--sage-deep);
font-size: 1.2rem;
transition: background-color .25s, color .25s, transform .25s var(--ease);
}
.mt-audcard:hover .mt-audcard__arr { background: var(--sage-deep); color: var(--bone); transform: translateX(4px); }
/* --- identity trigger row --- */
.mt-ident-trigger { text-align: center; margin-top: 2.6rem; }
/* --- scope cards: horizontal, tall images --- */
.mt-scopecards {
display: grid;
grid-auto-flow: column;
grid-auto-columns: clamp(240px, 22vw, 300px);
gap: 1.2rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding-bottom: 1rem;
-webkit-overflow-scrolling: touch;
}
.mt-scopecards::-webkit-scrollbar { height: 6px; }
.mt-scopecards::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.mt-scopecards { user-select: none; -webkit-user-select: none; }
.mt-scopecards.is-draggable { cursor: grab; }
.mt-scopecards.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.mt-scopecards.is-dragging .mt-scopecard { pointer-events: none; transform: none; }
.mt-scopecard {
scroll-snap-align: start;
display: flex; flex-direction: column;
background: var(--bone-soft);
border: 1px solid var(--line-soft);
border-radius: var(--r);
overflow: hidden;
transition: transform .3s var(--ease), box-shadow .3s, border-color .3s;
}
.mt-scopecard:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: rgba(107,115,88,.35); }
.mt-scopecard__img { display: block; aspect-ratio: 3 / 3.6; overflow: hidden; }
.mt-scopecard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.mt-scopecard:hover .mt-scopecard__img img { transform: scale(1.06); }
.mt-scopecard__title { font-family: var(--serif); font-size: var(--fs-h3); line-height: 1.3; padding: 1.2rem 1.3rem 0; color: var(--ink); }
.mt-scopecard__desc { font-size: var(--fs-cardtext); line-height: 1.65; color: var(--ink-soft); padding: .5rem 1.3rem 0; }
.mt-scopecard .mt-textlink { padding: 1rem 1.3rem 1.2rem; margin-top: auto; }
/* --- 5C cards (light, image + logo) --- */
.mt-c5wrap { background: var(--bone-deep)
; }
.mt-c5head { text-align: center; margin-bottom: 1.2rem; }
.mt-c5head h2 { margin-bottom: .4rem; }
.mt-c5head__kicker { display: inline-flex; align-items: center; gap: 1rem; font-family: var(--serif); font-size: .78rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--sage-deep); }
.mt-c5head__kicker::before, .mt-c5head__kicker::after { content: ""; width: 2.4rem; height: 1px; background: var(--sage); }
.mt-c5cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.1rem; margin-top: 3rem; }
.mt-c5card {
background: var(--bone-soft);
border: 1px solid var(--line-soft);
border-radius: var(--r);
overflow: hidden;
display: flex; flex-direction: column;
transition: transform .3s var(--ease), box-shadow .3s;
}
.mt-c5card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.mt-c5card__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.mt-c5card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.mt-c5card:hover .mt-c5card__img img { transform: scale(1.05); }
.mt-c5card__logo { display: flex; justify-content: center; margin-top: 1.3rem; }
.mt-c5card__logo img { width: 58px; height: 58px; object-fit: contain; }
.mt-c5card__name { font-family: var(--serif); font-size: var(--fs-h3); text-align: center; margin-top: .5rem; }
.mt-c5card__desc { font-size: var(--fs-cardtext); line-height: 1.6; color: var(--ink-soft); text-align: center; padding: .3rem 1.1rem 1.4rem; }
/* --- process steps with icons + continuous line --- */
.mt-procsteps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.4rem; position: relative; }
.mt-procstep { display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; }
.mt-procstep::before {
content: "";
position: absolute;
top: 34px; left: calc(-50% + 34px); right: calc(50% + 34px);
height: 1px; background: var(--line);
}
.mt-procstep:first-child::before { display: none; }
.mt-procstep__icon {
width: 68px; height: 68px;
display: flex; align-items: center; justify-content: center;
background: var(--bone-soft);
border: 1px solid var(--line-soft);
border-radius: 50%;
overflow: hidden;
position: relative; z-index: 1;
}
.mt-procstep__icon img { width: 100%; height: 100%; object-fit: cover; }
.mt-procstep__num { font-family: var(--serif); font-size: .72rem; font-weight: 600; letter-spacing: .24em; color: var(--clay); margin-top: 1rem; }
.mt-procstep h3 { font-size: var(--fs-h3); margin: .35rem 0 .4rem; }
.mt-procstep p { margin: 0; font-size: var(--fs-cardtext); color: var(--ink-soft); line-height: 1.6; max-width: 30ch; }
.mt-procstep__tag { font-size: .68rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--sage-deep); margin-top: .4rem; }
/* --- research / selected projects (3 across) --- */
/* client feedback 2026-10-23: head centred on its own (no side link), the
"all projects" link dropped to a centred row under the grid */
.mt-rshead {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: .8rem;
margin-bottom: clamp(2.4rem, 5vw, 3.6rem);
}
.mt-rshead .mt-section__head { margin-bottom: 0; }
.mt-rshead > div { max-width: 900px; }
.mt-rsall { display: flex; justify-content: center; margin-top: clamp(2.4rem, 5vw, 3.6rem); }
.mt-rsall .mt-textlink { white-space: nowrap; }
.mt-research-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.mt-research {
display: flex; flex-direction: column;
background: var(--bone-soft);
border: 1px solid var(--line-soft);
border-radius: var(--r);
overflow: hidden;
transition: transform .3s var(--ease), box-shadow .3s;
}
.mt-research:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.mt-research__img { display: block; aspect-ratio: 4 / 2.8; overflow: hidden; }
.mt-research__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.mt-research:hover .mt-research__img img { transform: scale(1.05); }
.mt-research__title { font-family: var(--serif); font-size: var(--fs-h3); line-height: 1.35; padding: 1.3rem 1.4rem 0; color: var(--ink); }
/* 项目类型 = 一句话定位样式: 18 粗体 var(--accent-red), own line under the title (client 10-26; colour darkened 10-27) */
.mt-research__title em { display: block; margin-top: .4rem; font-style: normal; font-size: var(--fs-lead); font-weight: 700; font-family: var(--serif); line-height: 1.4; color: var(--accent-red); letter-spacing: .01em; }
.mt-research__desc { font-size: var(--fs-cardtext); line-height: 1.65; color: var(--ink-soft); padding: .5rem 1.4rem 0; }
.mt-research__arr {
display: inline-flex; align-items: center; justify-content: center;
width: 46px; height: 46px;
margin: 1rem 1.4rem 1.3rem;
margin-top: auto;
border-radius: 50%;
background: transparent;
color: var(--sage-deep);
font-size: 1.2rem;
transition: background-color .25s, color .25s, transform .25s var(--ease);
}
.mt-research:hover .mt-research__arr { background: var(--sage-deep); color: var(--bone); transform: translateX(4px); }
/* --- studio page --- */
.mt-studio-hero {
padding-top: clamp(8rem, 15vh, 11rem);
display: grid;
gap: 0;
/* breakout grid: bleed | gutter | content-half | content-half | gutter | bleed —
same reference frame as .container, so text stays inside the 1440 content
width at any viewport while the media keeps bleeding to the right edge */
grid-template-columns:
max(0px, calc((100% - var(--wide)) / 2))
var(--gutter)
minmax(0, .82fr)
minmax(0, 1.18fr)
var(--gutter)
max(0px, calc((100% - var(--wide)) / 2));
align-items: center;
}
.mt-studio-hero .mt-studio-hero__text { grid-column: 3 / 4; padding-inline-end: clamp(2.5rem, 5vw, 4.5rem); }
.mt-studio-hero .mt-studio-hero__media { grid-column: 4 / 7; }
.mt-studio-hero__text h1 { font-size: var(--fs-hero); margin-bottom: .5em; }
.mt-studio-hero__sub { display: block; font-size: 2.25rem; font-weight: 500; color: var(--ink-soft); margin-top: .6rem; } /* 内页 36 @ 1920 */
.mt-studio-hero__media { position: relative; }
/* bigger image, left edge dissolving into the bone background (修改内容02).
2026-10-29: client asked for a softer, more natural transition — the old
single-stop ramp (band ≈20%, hard end) read as a wipe; this eased multi-stop
curve spreads the dissolve over ~half the image and reaches full opacity
without a visible stop */
.mt-studio-hero__media > img:first-child {
width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r);
-webkit-mask-image: linear-gradient(to right, transparent 0, rgba(0,0,0,.06) 7%, rgba(0,0,0,.2) 15%, rgba(0,0,0,.42) 24%, rgba(0,0,0,.66) 33%, rgba(0,0,0,.86) 42%, rgba(0,0,0,.97) 49%, #000 54%);
mask-image: linear-gradient(to right, transparent 0, rgba(0,0,0,.06) 7%, rgba(0,0,0,.2) 15%, rgba(0,0,0,.42) 24%, rgba(0,0,0,.66) 33%, rgba(0,0,0,.86) 42%, rgba(0,0,0,.97) 49%, #000 54%);
}
.mt-thingshead { display: flex; align-items: center; justify-content: center; gap: 2rem; text-align: center; margin-bottom: 3rem; }
/* 2026-10-29 client comp: narrow two-line centred title, no flanking dashes
(the
+ .mt-mark emphasis live in the content) */
.mt-thingshead__line { display: none; }
/* client feedback 2026-10-23: icons +50% (74 → 111px) */
.mt-thing__icon { width: 111px; height: 111px; object-fit: contain; margin: 0 auto 1.4rem; }
.mt-things { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
.mt-thing { text-align: center; padding: 0 1rem; }
.mt-thing h3 { font-size: var(--fs-h3); }
.mt-thing p { margin: 0 auto; font-size: var(--fs-cardtext); color: var(--ink-soft); max-width: 34ch; }
/* client feedback 2026-10-23: one whole block-height of extra breathing room
between the hero/statement above and the "what we do" block. The section is
identified by its own head, so this needs no content edit and stays
language-agnostic across the three studio pages. */
.mt-section:has(> .container > .mt-thingshead) {
padding-top: calc(2 * clamp(5.5rem, 11vw, 10.5rem));
}
.mt-intro { padding-block: clamp(4.5rem, 9vw, 8rem); }
.mt-intro__lead {
font-size: var(--fs-secsub); /* 32 @ 1920 */
line-height: 1.35;
letter-spacing: -.01em;
margin: 0 0 1.4rem;
max-width: 24em;
}
.mt-intro__para {
font-size: var(--fs-cardtext); /* 16 @ 1920 */
line-height: 1.55;
color: var(--ink-soft);
margin: 0 0 1.1rem;
max-width: 30em;
}
.mt-careband {
background: var(--bone-deep);
padding-block: clamp(3.5rem, 7vw, 6rem);
margin-block: 0;
}
/* client feedback 2026-10-23: the "care" band gets a centred title above both
columns (it used to sit inside the image column, which pushed the photo out
of line with the copy); the vertical divider is gone and the image now
stretches to the text block so both columns share the same top and bottom */
.mt-carehead {
text-align: center;
max-width: 900px;
margin: 0 auto clamp(2.4rem, 4.5vw, 3.4rem);
}
.mt-carehead h2 { margin: 0; font-size: var(--fs-h2); line-height: 1.18; text-wrap: balance; }
.mt-split--care { align-items: stretch; }
.mt-split--care > div:first-child {
padding-right: 0;
border-right: 0;
display: flex;
flex-direction: column;
}
.mt-careband__img {
position: relative;
margin: 0;
border-radius: var(--r);
overflow: hidden;
flex: 1 1 auto;
min-height: 260px;
}
.mt-careband__img img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
aspect-ratio: auto;
object-fit: cover;
}
.mt-careband .mt-quote { margin-top: 1.8rem; font-size: 1.25rem; } /* 20 — one step above fs-lead 18 (client 2026-10-29) */
.mt-quote {
margin: 2.2rem 0 0; padding-left: 0; border: none;
font-family: var(--serif); font-size: var(--fs-lead); font-style: italic; color: var(--ink-soft);
}
.mt-centerhead { text-align: center; max-width: 780px; margin: 0 auto clamp(2.6rem, 5vw, 4rem); }
.mt-centerhead__sub { font-size: var(--fs-secsub); color: var(--ink-soft); margin: 1rem auto 0; }
.mt-centerhead__sub--wide { max-width: 66ch; }
/* icon sits left of the heading per the client's marked-up reference
(red boxes beside each category title); tag + list run full width below.
(2026-10-29: the old .mt-phases 4-column row was replaced by the
.mt-helpband band — §41 — items keep these .mt-phase rules.) */
.mt-phase { border-top: 1px solid var(--line); padding-top: 1.4rem; display: grid; grid-template-columns: 56px 1fr; column-gap: .9rem; align-items: center; }
.mt-phase__icon { grid-row: 1; grid-column: 1; width: 56px; height: 56px; object-fit: contain; margin: 0; }
.mt-phase h3 { grid-row: 1; grid-column: 2; font-size: var(--fs-h3); }
.mt-phase__tag { grid-column: 1 / -1; font-size: .875rem; font-weight: 600; color: var(--clay); margin: 1rem 0 .5rem; }
.mt-phase__desc { grid-column: 1 / -1; margin: 0; font-size: var(--fs-cardtext); color: var(--ink-soft); line-height: 1.65; }
.mt-coll { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1rem; margin-top: 2.6rem; }
.mt-coll__item { display: flex; flex-direction: column; align-items: center; gap: .7rem; text-align: center; }
.mt-coll__item img { width: 62px; height: 62px; object-fit: cover; border-radius: 50%; }
.mt-coll__item span { font-size: .9rem; color: var(--ink-soft); }
.mt-split--cta { align-items: stretch; }
.mt-split--cta figure img { height: 100%; object-fit: cover; }
.mt-label--noLine::before { display: none; }
/* --- metodo alternating sections --- */
.mt-metodo { padding-block: clamp(4rem, 8vw, 7rem); border-bottom: 1px solid var(--line-soft); }
.mt-metodo .container { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.mt-metodo--rev .container { grid-template-columns: 5fr 6fr; }
.mt-metodo--rev .container > .mt-metodo__media { order: 2; }
.mt-metodo__media { margin: 0; }
.mt-metodo__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); }
/* 2026-10-29 client: the small section mark moves inline AFTER the title
(was stacked above it). Flex + order — no content change; the icon rides
on the h2 line, everything below runs full width. */
.mt-metodo__body { display: flex; flex-wrap: wrap; align-items: center; column-gap: 1.1rem; }
.mt-metodo__body h2 { order: 1; margin: 0; }
.mt-metodo__body > p, .mt-metodo__body > div { order: 3; flex-basis: 100%; }
.mt-metodo__logo { order: 2; width: 48px; height: 48px; object-fit: contain; margin-bottom: 0; }
.mt-metodo__body h2 { margin-bottom: 0; }
.mt-metodo__body p { color: var(--ink-soft); }
/* 2026-10-29 client: the APPROFONDISCI / READ MORE article links read as a
sentence-case underlined text link, not an all-caps button label (the
sentence-case wording itself lives in the content). These are the only
buttons inside .mt-metodo sections. */
.mt-metodo .wp-block-button__link {
text-transform: none;
text-decoration: underline;
text-underline-offset: .28em;
text-decoration-thickness: 1px;
}
/* --- principle cards (dark + light) --- */
.mt-prcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
.mt-prcard {
background: rgba(245,241,233,.06);
border: 1px solid rgba(245,241,233,.16);
border-radius: var(--r);
padding: 1.8rem 1.6rem;
}
.mt-prcard h3 { color: var(--bone); font-size: var(--fs-h3); margin-bottom: .6rem; }
.mt-prcard p { margin: 0; font-size: var(--fs-cardtext); line-height: 1.65; color: rgba(245,241,233,.78); }
.mt-prcard__val { margin-top: .8rem !important; font-weight: 600; color: #d8c9a3 !important; }
.mt-prcard--light { background: var(--bone-soft); border: 1px solid var(--line-soft); }
.mt-prcard--light h3 { color: var(--ink); }
.mt-prcard--light p { color: var(--ink-soft); }
.mt-prcard--light .mt-prcard__val { color: var(--sage-deep) !important; }
/* 5C principles — white bg, five text columns with hairline separators
(metodo page; client feedback 2026-10-24: icon badges removed, section
stacks title/sub → content → button) */
.mt-5cgrid { display: grid; grid-template-columns: repeat(5, 1fr); }
.mt-5cgrid__item { padding: .4rem clamp(.9rem, 1.6vw, 1.5rem) .4rem 0; }
.mt-5cgrid__item + .mt-5cgrid__item { border-left: 1px solid var(--line-soft); padding-left: clamp(.9rem, 1.6vw, 1.5rem); }
.mt-5cgrid__item h3 { font-size: 1.15rem; margin-bottom: .55rem; }
.mt-5cgrid__item p { margin: 0; font-size: .875rem; line-height: 1.65; color: var(--ink-soft); }
.mt-5cgrid__vlabel { margin-top: .9rem !important; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-red) !important; } /* red, client 2026-10-29 "更突出" */
.mt-5cgrid__val { margin-top: .25rem !important; font-weight: 600; color: var(--accent-red) !important; }
.mt-5cgrid__btnrow { margin-top: 2.8rem; }
.mt-5cgrid__btnrow .wp-block-buttons { justify-content: center; }
/* --- service page blocks --- */
.mt-svcblocks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
.mt-svcblock { background: var(--bone-soft); border: 1px solid var(--line-soft); border-radius: var(--r); padding: clamp(1.6rem, 3vw, 2.4rem); }
.mt-svcblock__head h3 { font-size: var(--fs-h3); margin-bottom: .4rem; }
.mt-svcblock__head p { color: var(--mute); font-size: var(--fs-cardtext); margin-bottom: 1rem; }
.mt-svcblock ul { margin: 0; }
.mt-chips { display: flex; flex-wrap: wrap; gap: .7rem; }
.mt-chips span { display: inline-block; padding: .55rem 1.2rem; border: 1px solid var(--line); border-radius: 999px; font-family: var(--serif); font-size: 1rem; color: var(--ink-soft); }
.mt-pull { border-left: 3px solid var(--sage); padding: .4rem 0 .4rem 1.8rem; }
.mt-pull .lead { color: var(--ink); }
/* --- projects archive: 2 columns, right card spans both rows
so left and right columns end at exactly the same height --- */
.mt-projects-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: clamp(2rem, 4vw, 3.2rem) !important; align-items: stretch; }
.mt-projects-grid .mt-project { display: flex; flex-direction: column; transform: none !important; }
.mt-projects-grid .mt-project:nth-child(2) { grid-column: 2; grid-row: 1 / span 2; }
.mt-projects-grid .mt-project img { aspect-ratio: 3 / 3.3 !important; }
.mt-projects-grid .mt-project:nth-child(2) img { height: 100% !important; aspect-ratio: auto !important; flex: 1 1 auto; object-fit: cover; }
.mt-project__cap h3 { font-size: 1.6rem; }
@media (max-width: 900px) {
.mt-projects-grid { grid-template-columns: 1fr !important; }
.mt-projects-grid .mt-project:nth-child(even) { transform: none; }
}
/* --- season/condition blocks inside project articles --- */
.mt-projgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 2rem 0; }
.mt-projgrid span { display: block; overflow: hidden; border-radius: var(--r); }
.mt-projgrid img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.mt-condgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 2rem 0; }
.mt-season { display: grid; grid-template-columns: 5fr 6fr; gap: 2rem; margin: 2.2rem 0; align-items: center; }
.mt-season__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); }
.mt-season__title { font-weight: 600; color: var(--clay); margin-top: -.4rem; }
.mt-season__focus { font-size: .85rem; color: var(--mute); }
/* =========================================================
17. FOOTER (light redesign)
========================================================= */
.mt-footer {
background: var(--bone);
color: var(--ink-soft);
border-top: 1px solid var(--line-soft);
font-size: .9rem;
}
.mt-footer a { transition: color .2s; }
.mt-footer a:hover { color: var(--sage-deep); }
.mt-footer__top {
display: grid;
/* client 2026-10-27: nav + services collapse into one column (two stacked
rows) so the map can take their track. The map and links columns carry
minmax floors — nowrap menu links used to steal the map's space and
squeeze it into a strip on mid-size viewports. Brand/news stay plain fr:
the nowrap studio name and the submit button set their own auto minimum,
so those tracks can never shrink under their content. */
grid-template-columns: 1.05fr 1.35fr minmax(360px, 2.7fr) minmax(195px, .8fr);
gap: clamp(1.8rem, 3.5vw, 3rem);
padding-block: clamp(2.8rem, 5.5vw, 4rem) 2.6rem;
}
/* below 1281px the four track minimums (nowrap name ~292px, submit button,
360px map floor, links floor) would outnumber the container — fall back
to the 2×2 arrangement before they can overflow it.
2026-10-27: lowered from 1360px, laptop windows (~1333 logical at 150%
DPI scaling) must keep the 4-column layout */
@media (max-width: 1280px) {
.mt-footer__top { grid-template-columns: 1fr 1fr; }
}
.mt-footer h4 {
color: var(--ink);
font-family: var(--serif);
font-size: .75rem;
font-weight: 600;
letter-spacing: .2em;
text-transform: uppercase;
margin-bottom: 1.3rem;
}
.mt-footer__brand .mt-brand { color: var(--ink); margin-bottom: 0; }
.mt-footer .mt-brand__logo {
filter: brightness(0);
height: 64px;
display: block;
}
.mt-footer__brandrow { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 1.1rem; }
.mt-footer__name { font-family: var(--serif); font-size: 1.5rem; line-height: 1.2; color: var(--ink); margin: 0; }
.mt-footer__name--zh { font-size: .95rem; color: var(--ink-soft); margin-top: .3rem; letter-spacing: .06em; }
.mt-footer__brand .mt-footer__tag { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--ink-soft) !important; margin: 0 0 .8rem; max-width: 12rem; line-height: 1.5; }
.mt-footer__meta { font-size: .8rem; color: var(--mute); margin: 0 0 1.2rem; }
.mt-footer__social { display: flex; gap: 1.4rem; align-items: center; }
.mt-footer__social a, .mt-social-btn {
width: auto; height: auto;
display: inline-flex; align-items: center; justify-content: center;
background: none; border: 0; padding: 0; cursor: pointer;
}
.mt-footer__social svg { width: 19px; height: 19px; fill: var(--ink-soft); transition: fill .2s, transform .2s; }
.mt-footer__social a:hover svg, .mt-social-btn:hover svg { fill: var(--sage-deep); transform: translateY(-2px); }
.mt-social-btn.is-disabled { cursor: default; opacity: .55; }
.mt-footer__news p { margin: 0 0 .85rem; font-size: .84rem; line-height: 1.7; }
.mt-footer__news .mt-news__row { display: grid; grid-template-columns: 1fr 1.2fr; gap: .6rem; margin-bottom: .55rem; }
.mt-news__row input[type="text"], .mt-news__row input[type="email"] {
flex: 1; min-width: 0; width: 100%;
padding: .85rem 1rem;
font-family: var(--serif); font-size: .9rem; color: var(--ink);
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--r);
transition: border-color .25s;
}
.mt-news__row input:focus { outline: none; border-color: var(--sage); }
/* light footer: the legacy dark-footer rule still paints the email
placeholder cream-on-white — invisible, so the field reads as missing
(client 2026-10-27). Match the gray the Nome placeholder gets. */
.mt-footer .mt-news__row input::placeholder { color: #757575; opacity: 1; }
.mt-news__interest { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-size: .8rem; color: var(--ink-soft); margin-bottom: .8rem; }
.mt-news__interest > span { flex-basis: 100%; color: var(--mute); }
.mt-news__interest label { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; }
.mt-news__interest input { accent-color: var(--sage-deep); }
.mt-news button[type="submit"] {
display: inline-flex; align-items: center; gap: .6rem;
background: var(--sage-deep); color: var(--bone);
border: 0; cursor: pointer; padding: .85rem 1.5rem;
border-radius: var(--r);
font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
transition: background-color .25s, transform .25s var(--ease);
}
.mt-news button[type="submit"]:hover { background: var(--ink); transform: translateY(-2px); }
.mt-footer .mt-news__privacy { font-size: .72rem; color: var(--mute); margin-top: .8rem !important; margin-bottom: 0; }
.mt-footer .mt-news__msg.ok { color: var(--sage-deep); }
.mt-footer .mt-news__msg.err { color: var(--clay-deep); }
/* map column: legacy dark-footer rules still push it down 1.2rem and invert
the whole column — reset those, then let the box fill the grid row so its
bottom edge sits flush with the newsletter column */
.mt-footer__map { display: flex; flex-direction: column; margin-top: 0; border: 0; filter: none; }
.mt-footer__mapbox {
position: relative;
flex: 1 1 auto;
min-height: 340px;
margin-top: 0;
border: 0;
border-radius: var(--r);
overflow: hidden;
/* filter moved to the tile pane below so the Genova circle keeps brand sage;
isolation keeps Leaflet's high pane z-indexes inside this box */
isolation: isolate;
}
.mt-footer__mapbox iframe,
.mt-footer__mapbox .mt-footer__mapinner {
display: block; position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: .9;
}
.mt-footer__mapbox .leaflet-tile-pane { filter: grayscale(1) contrast(.92); }
.mt-footer__mapbox .leaflet-container { background: #e9e5db; font: inherit; }
.mt-footer__mapbox .leaflet-control-attribution {
font-size: .58rem; color: var(--mute);
background: rgba(250,248,243,.85); padding: 0 .4rem;
}
.mt-footer__mapbox .leaflet-control-attribution a { color: var(--mute); }
.mt-footer__mapbox .leaflet-bar a { color: var(--sage-ink); }
/* legacy rule `.mt-footer__services{display:grid}` turned the COLUMN itself
into a grid (title/list stretched apart) — force plain block + top align */
.mt-footer__nav, .mt-footer__services { display: block !important; align-self: start; }
/* links column: Navigazione and Servizi stacked as two rows (client 2026-10-27) */
.mt-footer__links { display: flex; flex-direction: column; gap: 2.1rem; align-self: start; min-width: 0; }
.mt-footer__menu, .mt-footer__servlist { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; align-content: start; }
.mt-footer__menu a, .mt-footer__servlist a { font-size: .8rem; color: var(--ink-soft); white-space: nowrap; }
.mt-footer__nav h4, .mt-footer__services h4 { margin-bottom: 1rem; line-height: 1.4; }
.mt-footer__img { display: none; } /* legacy: sketch now lives in the bottom row */
.mt-footer__bottom {
/* divider removed; compact row: fine print beside the smaller sketch (修改内容02) */
padding-block: 1.2rem 1.4rem;
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem;
font-size: .78rem; color: var(--mute);
}
.mt-footer__sketch {
margin: 0;
flex: 0 1 auto;
min-width: 0;
}
.mt-footer__sketch img {
display: block;
width: auto;
height: clamp(64px, 9vw, 120px);
mix-blend-mode: multiply;
opacity: .92;
}
.mt-footer__legal { display: flex; gap: 1.6rem; }
.mt-footer__legal a { color: var(--mute); }
.mt-footer__word span {
color: transparent;
-webkit-text-stroke: 1px rgba(28, 28, 25, .1);
}
/* =========================================================
18. MODALS
========================================================= */
.mt-modal { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: var(--gutter); }
.mt-modal[hidden] { display: none; }
.mt-modal__backdrop { position: absolute; inset: 0; background: rgba(28, 28, 25, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.mt-modal__panel {
position: relative;
background: var(--bone-soft);
border-radius: var(--r);
box-shadow: var(--shadow);
padding: clamp(2rem, 4vw, 3rem);
max-width: 520px;
width: 100%;
max-height: 86vh;
overflow: auto;
}
.mt-modal__panel h3 { font-size: 1.6rem; margin-bottom: 1.4rem; padding-right: 2.4rem; }
.mt-modal__panel p { color: var(--ink-soft); }
.mt-modal__panel img { margin: 1.2rem auto 0; border: 1px solid var(--line-soft); border-radius: var(--r); }
.mt-modal__close {
position: absolute; top: .9rem; right: 1rem;
background: none; border: 0; cursor: pointer;
font-size: 1.8rem; line-height: 1; color: var(--mute);
transition: color .2s;
}
.mt-modal__close:hover { color: var(--ink); }
.mt-modal__opts { display: grid; gap: .6rem; }
.mt-identopt {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
padding: 1rem 1.3rem;
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--r);
font-family: var(--serif);
font-size: 1.15rem;
color: var(--ink);
transition: background-color .25s, color .25s, border-color .25s, padding-left .25s;
}
.mt-identopt .arr { transition: transform .25s var(--ease); }
.mt-identopt:hover { background: var(--sage-deep); color: var(--bone); border-color: var(--sage-deep); padding-left: 1.7rem; }
.mt-identopt:hover .arr { transform: translateX(5px); }
body.mt-modal-open { overflow: hidden; }
/* =========================================================
19. FORM FIXES + picks
========================================================= */
.mt-upload { position: relative; overflow: hidden; }
.mt-pick { font-weight: 400; letter-spacing: .04em; text-transform: none; color: var(--mute); font-size: .72rem; margin-left: .5rem; }
/* =========================================================
20. IMAGE PROTECTION
========================================================= */
img { -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; }
/* =========================================================
21. RESPONSIVE (v2 components)
========================================================= */
@media (max-width: 1120px) {
.wp-block-columns.mt-audcards { grid-template-columns: repeat(3, 1fr) !important; }
.mt-c5cards { grid-template-columns: repeat(3, 1fr); }
.mt-procsteps { grid-template-columns: repeat(3, 1fr); row-gap: 2.4rem; }
.mt-procstep::before { display: none; }
.mt-coll { grid-template-columns: repeat(4, 1fr); }
.mt-prcards { grid-template-columns: repeat(2, 1fr); }
.mt-5cgrid { grid-template-columns: repeat(2, 1fr); row-gap: 2.2rem; }
.mt-5cgrid__item + .mt-5cgrid__item { border-left: 0; padding-left: 0; }
.mt-footer__top { grid-template-columns: 1fr 1fr; }
.mt-svcblocks { grid-template-columns: 1fr; }
.mt-studio-hero { grid-template-columns: 1fr; padding-top: 8rem; padding-inline: var(--gutter); gap: 2.5rem; }
.mt-studio-hero .mt-studio-hero__text, .mt-studio-hero .mt-studio-hero__media { grid-column: auto; padding-inline: 0; }
/* stacked layout: the wide desktop feather would eat half the image — keep
the old narrow dissolve here */
.mt-studio-hero__media > img:first-child {
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 20%);
mask-image: linear-gradient(to right, transparent 0, #000 20%);
}
}
@media (max-width: 900px) {
.mt-nav { display: none; }
.mt-research-grid { grid-template-columns: 1fr 1fr; }
.mt-things { grid-template-columns: 1fr; gap: 2.2rem; }
.mt-split--care > div:first-child { padding-right: 0; border-right: 0; }
/* stacked: the absolute-fill image would need a height, so restore a ratio */
.mt-careband__img { flex: 0 0 auto; min-height: 0; aspect-ratio: 4 / 3; }
.mt-metodo .container { grid-template-columns: 1fr; }
.mt-metodo--rev .container > .mt-metodo__media { order: 0; }
.mt-season { grid-template-columns: 1fr; }
.mt-projgrid, .mt-condgrid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
.wp-block-columns.mt-audcards { grid-template-columns: 1fr 1fr !important; }
.mt-c5cards { grid-template-columns: 1fr 1fr; }
.mt-procsteps { grid-template-columns: 1fr 1fr; }
.mt-research-grid { grid-template-columns: 1fr; }
.mt-phases { grid-template-columns: 1fr; }
.mt-coll { grid-template-columns: repeat(2, 1fr); }
.mt-prcards { grid-template-columns: 1fr; }
.mt-5cgrid { grid-template-columns: 1fr; }
.mt-footer__top { grid-template-columns: 1fr; }
.mt-footer__news .mt-news__row { grid-template-columns: 1fr; }
.mt-rshead { align-items: center; }
.mt-scopecards { grid-auto-columns: 78vw; }
.mt-projgrid, .mt-condgrid { grid-template-columns: 1fr 1fr; }
}
/* =========================================================
22. PARALLAX SPLIT FIGURES
fixed-ratio frame; oversized image slides inside it
========================================================= */
.mt-split figure.mt-parallax, .mt-split--edge figure {
overflow: hidden;
aspect-ratio: 4 / 3;
margin: 0;
}
.mt-split--edge figure.mt-parallax, .mt-split--edge figure { aspect-ratio: 16 / 10; }
figure.mt-parallax img {
position: relative;
display: block;
width: 100%;
height: 118%;
top: -9%;
object-fit: cover;
transition: none !important;
will-change: transform;
}
figure.mt-parallax:hover img { transform: none !important; }
/* =========================================================
23. 4-TIER PACKAGE ACCORDION (privati v3)
========================================================= */
.mt-packs { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.mt-pack {
background: var(--bone-soft);
border: 1px solid var(--line-soft);
border-radius: var(--r);
padding: 0;
overflow: hidden;
transition: border-color .25s, box-shadow .25s;
}
.mt-pack[open] { border-color: rgba(107,115,88,.4); box-shadow: var(--shadow); }
.mt-pack summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.5rem 1.7rem;
}
.mt-pack summary::-webkit-details-marker { display: none; }
.mt-pack__name { font-family: var(--serif); font-size: var(--fs-h3); color: var(--ink); }
.mt-pack__plus {
flex: none;
width: 2rem; height: 2rem;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--line);
border-radius: 50%;
font-family: var(--serif);
font-size: 1.15rem;
color: var(--sage-deep);
transition: transform .25s var(--ease), background-color .25s, color .25s;
}
.mt-pack[open] .mt-pack__plus { transform: rotate(45deg); background: var(--sage-deep); color: var(--bone); border-color: var(--sage-deep); }
.mt-pack__body { padding: 0 1.7rem 1.7rem; display: grid; gap: .9rem; }
.mt-pack__body > p { margin: 0; font-size: var(--fs-cardtext); line-height: 1.7; color: var(--ink-soft); }
.mt-pack__row { border-top: 1px solid var(--line-soft); padding-top: .9rem; }
.mt-pack__row strong { font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--clay); }
@media (max-width: 900px) { .mt-packs { grid-template-columns: 1fr; } }
/* =========================================================
24. EDGE-TO-EDGE SPLITS (studio, per design comp)
image column bleeds to the viewport edge,
text column stays aligned to the 1440 container
========================================================= */
.mt-split--edge { display: block !important; max-width: none !important; padding: 0 !important; }
.mt-split--edge .mt-split {
display: grid !important;
gap: 0;
/* breakout grid on the full-width element: bleed | gutter | content-half |
content-half | gutter | bleed — text columns land inside the 1440 container
halves, image columns span through the bleed track to the viewport edge */
grid-template-columns:
max(0px, calc((100% - var(--wide)) / 2))
var(--gutter)
minmax(0, 1fr)
minmax(0, 1fr)
var(--gutter)
max(0px, calc((100% - var(--wide)) / 2));
align-items: center;
max-width: none !important;
}
.mt-split--edge .mt-split > .wp-block-column { display: block !important; min-width: 0; }
.mt-split--edge figure { margin: 0; }
.mt-split--edge figure img { width: 100%; }
.mt-split--edge-left .mt-split > .wp-block-column:first-child { grid-column: 1 / 4; }
.mt-split--edge-left .mt-split > .wp-block-column:last-child {
grid-column: 4 / 5;
padding-inline-start: clamp(2rem, 4vw, 3.5rem);
}
.mt-split--edge-right .mt-split > .wp-block-column:first-child {
grid-column: 3 / 4;
padding-inline-end: clamp(2rem, 4vw, 3.5rem);
}
.mt-split--edge-right .mt-split > .wp-block-column:last-child { grid-column: 4 / 7; }
.mt-split--edge.mt-split--cta .mt-split { align-items: stretch; }
@media (max-width: 900px) {
.mt-split--edge .mt-split, .mt-split--edge-left .mt-split, .mt-split--edge-right .mt-split, .mt-split--edge.mt-split--cta .mt-split { grid-template-columns: 1fr; padding-inline: var(--gutter); gap: 2rem; }
.mt-split--edge .mt-split > .wp-block-column { grid-column: auto !important; padding-inline: 0 !important; }
}
/* =========================================================
25. FLOATING WHATSAPP BUTTON
========================================================= */
.mt-wa-float {
position: fixed;
right: clamp(1rem, 2.2vw, 1.7rem);
bottom: clamp(1rem, 2.2vw, 1.7rem);
z-index: 100;
width: 56px;
height: 56px;
border-radius: 50%;
background: #25d366;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 12px 28px -10px rgba(28, 28, 25, .45);
transition: transform .25s var(--ease), box-shadow .25s, background-color .25s;
}
.mt-wa-float svg { width: 30px; height: 30px; fill: #fff; }
.mt-wa-float:hover {
transform: translateY(-3px);
background: #1eb85a;
box-shadow: 0 18px 34px -12px rgba(28, 28, 25, .5);
}
@media (max-width: 640px) { .mt-wa-float { width: 50px; height: 50px; } .mt-wa-float svg { width: 26px; height: 26px; } }
/* =========================================================
26. FORM GRID ALIGNMENT
pick annotations wrap as a unit; side-by-side controls
bottom-align so fields stay on the same baseline
========================================================= */
.mt-field label:not(.mt-choice), .mt-legend {
display: flex;
flex-wrap: wrap;
align-items: baseline;
column-gap: .45rem;
line-height: 1.55;
}
.mt-field label .req { line-height: 1; }
.mt-pick { white-space: nowrap; margin-left: 0; }
.mt-grid-2 .mt-field, .mt-grid-3 .mt-field { display: flex; flex-direction: column; align-items: stretch; }
.mt-grid-2 .mt-field select, .mt-grid-2 .mt-field input,
.mt-grid-3 .mt-field select, .mt-grid-3 .mt-field input { margin-top: auto; }
/* =========================================================
27. PACK THUMBS + COMPARISON TABLE (privati v3.1)
========================================================= */
.mt-pack summary { align-items: center; }
.mt-pack__thumb {
display: block;
flex: none;
width: 88px;
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: var(--r);
margin-right: 1.1rem;
}
.mt-pack__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mt-pack__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mt-pack__name { flex: 1; }
.mt-footer__mapbox { border: 0; }
/* comparison table spans wider than text column */
.mt-section .container--wide { max-width: var(--wide); }
.mt-packages { margin-inline: auto; }
.mt-packages table { width: 100%; border-collapse: collapse; background: var(--bone-soft); font-size: var(--fs-cardtext); }
.mt-packages thead th {
background: var(--sage-deep); color: var(--bone);
font-family: var(--serif); font-size: .72rem; font-weight: 600;
letter-spacing: .12em; text-transform: uppercase;
padding: 1rem .9rem; text-align: center;
}
.mt-packages thead th:first-child { text-align: left; }
.mt-packages tbody th {
text-align: left; font-weight: 500; color: var(--ink);
padding: .85rem 1rem; font-size: var(--fs-cardtext);
}
.mt-packages tbody td {
text-align: center; padding: .85rem .9rem;
border-bottom: 1px solid var(--line-soft);
color: var(--ink-soft);
}
.mt-packages tbody tr:last-child td { border-bottom: 0; }
.mt-packages .mt-check { color: var(--sage-deep); font-weight: 700; }
.mt-packages .mt-dash { color: rgba(140,135,123,.5); }
.mt-packages .mt-opt { color: var(--clay); font-weight: 600; }
@media (max-width: 900px) {
.mt-packages table, .mt-packages thead, .mt-packages tbody, .mt-packages tr, .mt-packages th, .mt-packages td { display: block; }
.mt-packages thead { display: none; }
.mt-packages tbody th { background: var(--bone-deep); padding: .7rem 1rem; }
.mt-packages tbody td { text-align: left; padding: .5rem 1rem; border-bottom: 0; }
.mt-packages tbody td::before { content: attr(data-col) ": "; color: var(--mute); }
}
/* =========================================================
28. ARTICLE COLUMN WIDTH (align with page scale)
========================================================= */
.mt-article .mt-content > * { max-width: none; }
.mt-article .mt-content { max-width: var(--wide); margin-inline: auto; }
/* post nav aligns with the 1440 content column */
.mt-postnav { max-width: var(--wide); margin-inline: auto; }
/* =========================================================
29. SECTION LABELS RETIRED + AUDIENCE ICON GRID
(client feedback 2026-10-21: drop the "-- Servizi --"
kickers everywhere; audience block per client comp)
========================================================= */
.mt-label { display: none !important; }
.mt-audhead {
display: flex;
align-items: center;
justify-content: center;
gap: 1.4rem;
margin: 0 0 clamp(2.2rem, 4.5vw, 3rem);
}
.mt-audhead::before, .mt-audhead::after {
content: "";
flex: none;
width: clamp(2.2rem, 5.5vw, 4rem);
height: 1px;
background: var(--sage);
opacity: .6;
}
.mt-audhead h2 { margin: 0; font-size: var(--fs-h2); text-align: center; }
/* five cards on a three-column rhythm: the last row is centred instead of
left-aligned, so flex-wrap replaces the fixed grid (client request 2026-10-23) */
.mt-audgrid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.1rem;
}
.mt-audlink {
flex: 0 1 calc((100% - 2.2rem) / 3 - .05px);
display: flex;
align-items: center;
justify-content: flex-start;
gap: 1.1rem;
min-height: 108px;
padding: 1.4rem 1.2rem;
background: var(--bone-soft);
border: 1px solid var(--line);
border-radius: var(--r);
color: var(--ink);
transition: transform .3s var(--ease), box-shadow .3s, border-color .3s;
}
.mt-audlink:hover {
transform: translateY(-4px);
box-shadow: var(--shadow);
border-color: rgba(107, 115, 88, .4);
}
.mt-audlink svg { width: 46px; height: 46px; flex: none; }
/* client 2026-10-27 (structure 1.2): Agenzia immobiliari + Chi vive balconi
e terrazze are in the grid markup but hidden until their service pages go
live — restore = drop the class */
.mt-audlink--hidden { display: none !important; }
.mt-audlink__name { font-family: var(--serif); font-size: 1rem; line-height: 1.35; } /* 16px, client request */
@media (max-width: 900px) {
.mt-audlink { flex-basis: calc((100% - 1.1rem) / 2 - .05px); }
}
@media (max-width: 560px) {
.mt-audlink { flex-basis: 100%; min-height: 92px; }
}
/* =========================================================
30. SERVICES EDITORIAL GRID (home, client comp 2026-10-21)
numbered photo cards, centered head title, "all services"
button on the section footer; 3 columns, staggered second row
========================================================= */
.mt-svchead {
display: flex;
justify-content: center;
text-align: center;
margin-bottom: clamp(2.4rem, 5vw, 3.4rem);
}
.mt-svchead__titleblock h2 { margin: 0; font-size: var(--fs-h2); }
.mt-svchead__sub {
font-size: .7rem;
font-weight: 600;
letter-spacing: .32em;
text-transform: uppercase;
color: var(--sage-deep);
}
.mt-svcall { display: flex; justify-content: center; margin-top: clamp(2.4rem, 5vw, 3.6rem); }
/* client feedback 2026-10-21: bottom "all services" CTA as a plain text line, no box */
.mt-svcall__link {
font-family: var(--serif);
font-size: var(--fs-cardtext);
letter-spacing: .02em;
color: var(--ink);
transition: color .25s;
}
.mt-svcall__link span { display: inline-block; transition: transform .25s var(--ease); }
.mt-svcall__link:hover { color: var(--sage-deep); }
.mt-svcall__link:hover span { transform: translateX(.35rem); }
.mt-svccards {
display: grid;
/* client 2026-10-27: two columns (was three) */
grid-template-columns: repeat(2, 1fr);
gap: 2.6rem 1.4rem;
align-items: stretch;
}
.mt-svccard { display: flex; flex-direction: column; align-items: flex-start; }
.mt-svccard__img { display: block; width: 100%; aspect-ratio: 4 / 2.9; overflow: hidden; }
.mt-svccard__img img { width: 100%; height: 100%; object-fit: cover; }
.mt-svccard__num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 34px;
margin-top: -17px;
position: relative;
background: var(--bone-deep);
font-family: var(--serif);
font-size: .8rem;
font-weight: 600;
letter-spacing: .1em;
color: var(--ink-soft);
}
/* client feedback 2026-10-26: clear hierarchy inside the card —
title 32 (内容小标题) / lead 18 bold / 一句话定位 18 bold #ff4e00 /
body 16, normal leading */
.mt-svccard__title { font-size: var(--fs-h3); line-height: 1.3; margin: .7rem 0 .45rem; } /* 32px */
.mt-svccard__lead { margin: 0 0 .55rem; font-size: 1.125rem; font-weight: 700; line-height: 1.55; color: var(--ink); } /* 18px bold */
.mt-svccard__applies { margin: 0 0 .7rem; font-size: var(--fs-lead); font-weight: 700; line-height: 1.5; color: var(--accent-red); } /* 一句话定位 18 粗体 变色 */
.mt-svccard__para { margin: 0 0 1rem; font-size: var(--fs-cardtext); line-height: 1.6; color: var(--ink-soft); }
.mt-svccard__list { margin: 0 0 1rem; padding: 0; list-style: none; display: grid; gap: .3rem; }
.mt-svccard__list li {
position: relative;
padding-left: .95rem;
font-size: var(--fs-cardtext);
line-height: 1.6;
color: var(--ink-soft);
}
.mt-svccard__list li::before {
content: "";
position: absolute;
left: 0; top: .58em;
width: 4px; height: 4px;
border-radius: 50%;
background: var(--sage);
}
.mt-svccard__btn {
display: inline-flex;
align-items: center;
gap: .55rem;
margin-top: auto;
padding: .68rem 1.25rem;
border: 1px solid rgba(28, 28, 25, .35);
border-radius: var(--r);
font-size: var(--fs-btn); /* 按钮 16 @ 1920 */
font-weight: 600;
letter-spacing: .06em;
color: var(--ink);
transition: background-color .25s, color .25s, border-color .25s;
}
.mt-svccard__btn:hover {
background: var(--sage-deep);
border-color: var(--sage-deep);
color: var(--bone);
}
/* client 2026-10-27: the long body (para/list) hides behind an expand
toggle; the card face keeps title + lead + 适用对象, and the grid sits
as two tidy rows of three */
.mt-svccard__toggle {
display: inline-flex;
align-items: center;
margin: 0 0 1.1rem; /* breathing room above the jump button (client 2026-10-27) */
background: none;
border: 0;
padding: 0;
cursor: pointer;
font-family: var(--serif);
font-size: .9375rem;
font-weight: 600;
letter-spacing: .05em;
color: var(--sage-deep);
text-decoration: underline; /* underlined text label, no + glyph (client 2026-10-27) */
text-underline-offset: .28em;
text-decoration-thickness: 1px;
}
.mt-svccard__toggle i { display: none; }
.mt-svccard__toggle:hover { color: var(--ink); }
.mt-svccard__more { width: 100%; }
.mt-svccard__more[hidden] { display: none; }
@media (max-width: 900px) {
.mt-svccards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
.mt-svccards { gap: 2.2rem 1.2rem; }
}
@media (max-width: 600px) {
.mt-svccards { grid-template-columns: 1fr; gap: 2.2rem; }
}
/* =========================================================
31. HOME 5C — METHOD BAND (client comp 2026-10-21)
head: title + method name left, bold thesis + intro right;
5 centered icon cards on the tinted band
========================================================= */
/* client feedback 2026-10-26: restore the left/right editorial head —
title block on the left, thesis + intro on the right (the 10-23
centred stack is reverted); the "5C" line returns under the title */
.mt-met5c__head {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
gap: clamp(2rem, 5vw, 4.5rem);
text-align: left;
margin-bottom: clamp(2.4rem, 5vw, 3.4rem);
}
.mt-met5c__titleblock { flex: 0 0 auto; }
.mt-met5c__titleblock h2 { margin: 0; font-size: var(--fs-h2); }
.mt-met5c__sub {
display: block;
margin-top: .5rem;
font-size: 1rem;
letter-spacing: .02em;
color: var(--mute);
}
.mt-met5c__intro { width: auto; max-width: 640px; margin: 0; }
.mt-met5c__lead {
margin: 0 0 .7rem;
font-size: var(--fs-secsub); /* 区块副标题 27 */
font-weight: 500;
line-height: 1.5;
color: var(--ink);
}
.mt-met5c__intro p:not(.mt-met5c__lead) {
margin: 0;
font-size: var(--fs-cardtext);
line-height: 1.6;
color: var(--ink-soft);
}
.mt-met5c__grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 1rem;
}
.mt-met5c__card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 2.1rem 1.2rem 1.9rem;
background: var(--bone-soft);
border-radius: var(--r);
transition: transform .3s var(--ease), box-shadow .3s;
}
.mt-met5c__card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.mt-met5c__icon { display: flex; color: var(--ink); margin-bottom: 1.15rem; }
.mt-met5c__icon svg { width: 52px; height: 52px; }
.mt-met5c__name { font-family: var(--serif); font-size: var(--fs-h3); line-height: 1.2; margin-bottom: .5rem; } /* 内容小标题 32, client 10-26 */
/* client 2026-10-27: zh card names stack as two lines (never split a CJK
word: Clima｜气/候 was wrapping mid-word); lead balances so the last line
never carries only one or two glyphs */
.mt-met5c__name-zh { display: block; }
.mt-met5c__lead { text-wrap: balance; }
.mt-met5c__desc { font-size: var(--fs-cardtext); line-height: 1.6; color: var(--ink-soft); }
.mt-met5c__btnrow { text-align: center; margin-top: 2.6rem; }
@media (max-width: 1100px) {
.mt-met5c__grid { grid-template-columns: repeat(3, 1fr); }
.mt-met5c__name { font-size: 1.75rem; }
}
@media (max-width: 900px) {
.mt-met5c__head { flex-direction: column; gap: 1.4rem; }
}
@media (max-width: 640px) {
.mt-met5c__grid { grid-template-columns: 1fr 1fr; gap: .8rem; }
.mt-met5c__name { font-size: 1.5rem; }
}
/* =========================================================
32. WORKFLOW TIMELINE (home, client comp 2026-10-21)
vertical alternating photo/text rows around ONE continuous
centre line that runs from node 01 to node 05 and never
sticks out past the end nodes
========================================================= */
.mt-flow { --flow-dot: 3.4rem; --flow-pad: 1.7rem; position: relative; }
.mt-flowhead { text-align: center; margin-bottom: clamp(2.6rem, 5vw, 3.8rem); }
.mt-flowhead h2 { margin: 0 0 .6rem; font-size: var(--fs-h2); }
.mt-flowhead__sub {
display: inline-flex;
align-items: center;
gap: 1rem;
font-size: .7rem;
font-weight: 600;
letter-spacing: .32em;
text-transform: uppercase;
color: var(--mute);
}
.mt-flowhead__sub::before, .mt-flowhead__sub::after {
content: "";
width: 2.2rem;
height: 1px;
background: var(--line);
}
.mt-flow__row {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: clamp(4.5rem, 9vw, 8rem);
align-items: start;
padding: var(--flow-pad) 0;
}
/* every row carries its centre-line segment; rows stack with no gap so the
segments join into a single unbroken line */
.mt-flow__row::before {
content: "";
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 1px;
background: var(--sage);
opacity: .45;
}
/* first/last row trim the line to their node — no overshoot */
.mt-flow__row:first-child::before { top: var(--flow-dot); }
.mt-flow__row:last-child::before { bottom: calc(100% - var(--flow-dot)); }
.mt-flow__dot {
position: absolute;
left: 50%;
top: var(--flow-dot);
transform: translate(-50%, -50%);
width: 13px;
height: 13px;
border: 1.5px solid var(--sage-deep);
border-radius: 50%;
background: var(--bone);
z-index: 1;
}
.mt-flow__dot::after {
content: "";
position: absolute;
inset: 3.5px;
border-radius: 50%;
background: var(--sage-deep);
}
.mt-flow__media { margin: 0; }
.mt-flow__media img {
display: block;
width: 100%;
aspect-ratio: 3 / 2;
object-fit: cover;
}
/* client feedback 2026-10-23: text block starts level with the centre-line
node (was vertically centred), is wider, and mirrors its alignment —
right-hand rows align left, left-hand rows align right */
.mt-flow__text {
max-width: 31.25rem;
margin-top: calc(var(--flow-dot) - var(--flow-pad));
}
.mt-flow__num {
font-family: var(--serif);
font-size: 2.75rem;
line-height: 1;
color: var(--sage-deep);
opacity: .85;
}
.mt-flow__title { font-size: 2rem; line-height: 1.35; margin: .5rem 0 0; } /* 内容小标题 32 (client 2026-10-27, was --fs-h3 ≈ 24 @1920) */
.mt-flow__dash { display: block; width: 2rem; height: 1px; background: var(--sage-deep); margin: .6rem 0 .75rem; }
.mt-flow__desc { margin: 0; font-size: var(--fs-cardtext); line-height: 1.75; color: var(--ink-soft); } /* 内容 16 @ 1920 */
.mt-flow__row--flip .mt-flow__media { order: 2; }
.mt-flow__row--flip .mt-flow__text { order: 1; margin-left: auto; text-align: right; }
.mt-flow__row--flip .mt-flow__dash { margin-left: auto; }
@media (max-width: 820px) {
.mt-flow__row { grid-template-columns: 1fr; row-gap: 1.2rem; padding: 2.1rem 0; }
.mt-flow__row::before, .mt-flow__dot { display: none; }
.mt-flow__row--flip .mt-flow__media { order: 0; }
.mt-flow__row--flip .mt-flow__text { order: 0; }
.mt-flow__text { max-width: none; margin-top: 0; text-align: left; }
.mt-flow__row--flip .mt-flow__text { text-align: left; }
}
/* =========================================================
33. ABOUT — EDITORIAL SPLIT (home, client comp 2026-10-21)
text block with kicker / title / paras / rule / italic
tagline / solid CTA / rotated index, tall portrait right
========================================================= */
.mt-about2 {
display: grid;
grid-template-columns: 1.04fr .96fr;
gap: clamp(3rem, 7vw, 6rem);
align-items: center;
}
.mt-about2__kicker {
display: inline-flex;
align-items: center;
gap: 1rem;
font-size: .72rem;
font-weight: 600;
letter-spacing: .32em;
text-transform: uppercase;
color: var(--mute);
margin-bottom: 1.5rem;
}
.mt-about2__kicker i { width: 2.2rem; height: 1px; background: var(--sage); }
.mt-about2__body h2 {
font-size: var(--fs-h2);
line-height: 1.18;
margin: 0 0 1.5rem;
max-width: 24ch;
}
.mt-about2__body p {
margin: 0 0 1.05rem;
font-size: var(--fs-cardtext); /* 内容 16 @ 1920 */
line-height: 1.75;
color: var(--ink-soft);
max-width: 36rem;
}
.mt-about2__rule {
border: 0;
border-top: 1px solid var(--line);
width: min(100%, 21rem);
margin: 1.7rem 0;
}
/* client feedback 2026-10-24: tagline = 一句话定位 → 18 bold (spec row
"一句话定位 14.4 改到 18粗体"); keeps the italic serif voice. Needs
element+class specificity to beat the `.mt-about2__body p` rule. */
.mt-about2__body p.mt-about2__tagline {
font-family: var(--serif);
font-style: italic;
font-size: var(--fs-lead);
font-weight: 600;
line-height: 1.6;
color: var(--ink);
margin: 0 0 2rem !important;
max-width: 36rem;
}
/* 2026-10-27: client reversed the 10-26 orange (#ff4e00) — the marked
phrases in the tagline must NOT change colour. The 10-26 override is
gone, so they inherit the tagline ink and fall back to the base
.mt-mark sage underline band. */
.mt-about2__actions .mt-btn { letter-spacing: .12em; }
/* client feedback 2026-10-23: drop the rotated "01" index under the CTA */
.mt-about2__index { display: none; }
.mt-about2__media { margin: 0; }
.mt-about2__media img {
display: block;
width: 100%;
aspect-ratio: 2 / 3;
object-fit: cover;
}
@media (max-width: 900px) {
.mt-about2 { grid-template-columns: 1fr; gap: 2.2rem; }
.mt-about2__media { order: -1; }
}
/* =========================================================
34. FOOTER BRAND & SOCIAL REFINEMENTS (client feedback 2026-10-21)
monogram-only mark, larger and undistorted; studio name moved
under the mark; social glyphs equalised and enlarged
========================================================= */
.mt-footer__brandcol {
display: flex;
/* client 2026-10-27: studio name moves BELOW the mark (was beside it, 10-26) */
flex-direction: column;
align-items: flex-start;
gap: .7rem;
margin-bottom: 1.1rem;
}
.mt-footer__mark {
display: block;
height: 58px;
width: auto;
max-width: none;
flex: none;
/* client rule: the green logo must never appear — footer mark is black */
filter: brightness(0);
}
/* 工作室名字在 logo 右边，单行不折行 (client 10-26) */
.mt-footer__brandcol .mt-footer__name {
font-size: 1.12rem;
letter-spacing: .02em;
margin: 0;
white-space: nowrap;
}
.mt-footer__social svg { width: 21px !important; height: 21px !important; }
.mt-social-btn.is-disabled { opacity: .8; }
/* =========================================================
35. SPLITS — IMAGE COLUMN STRETCHES TO ROW HEIGHT
(client feedback 2026-10-21: image and text bottoms must align).
The figure fills its column; the img overscans by 10% top/bottom
so the parallax shift never exposes the figure edges.
========================================================= */
.mt-split .wp-block-column > .wp-block-image {
height: 100%;
position: relative;
overflow: hidden;
}
.mt-split .wp-block-column > .wp-block-image img {
position: absolute;
inset: -10% 0;
height: 120%;
object-fit: cover;
}
/* stacked splits (≤900px): the stretch rule above would collapse a figure
whose children are absolute — restore a 16:10 ratio there */
@media (max-width: 900px) {
.mt-split .wp-block-column > .wp-block-image {
height: auto;
aspect-ratio: 16 / 10;
}
}
/* client feedback 2026-10-21: remove ALL line-flanked small-caps kickers
(LO STUDIO / HOW WE WORK / OUR SERVICES …) everywhere */
.mt-about2__kicker, .mt-flowhead__sub, .mt-svchead__sub, .mt-c5head__kicker {
display: none !important;
}
/* 5C on the plaster texture: supplied artwork icons */
.mt-met5c__icon svg { display: none; }
.mt-met5c__icon img {
width: 78px;
height: 78px;
object-fit: contain;
}
.mt-c5wrap { background-color: var(--bone-deep); }
/* client feedback 2026-10-21: identity CTA melts into the page background,
colours only on hover */
.mt-ident-trigger .mt-btn {
background: transparent;
border: 1px solid rgba(28, 28, 25, .35);
color: var(--ink);
transition: background-color .25s, color .25s, border-color .25s;
}
.mt-ident-trigger .mt-btn:hover {
background: var(--sage-deep);
border-color: var(--sage-deep);
color: var(--bone);
}
/* client feedback 2026-10-21: section CTAs on light/texture backgrounds melt
into the page and colour only on hover (5C method + about studio + services) */
.mt-met5c__btnrow .mt-btn, .mt-about2__actions .mt-btn {
background: transparent;
border: 1px solid rgba(28, 28, 25, .35);
color: var(--ink);
transition: background-color .25s, color .25s, border-color .25s;
}
.mt-met5c__btnrow .mt-btn:hover, .mt-about2__actions .mt-btn:hover {
background: var(--sage-deep);
border-color: var(--sage-deep);
color: var(--bone);
}
/* =========================================================
36. FOOTER — client feedback 2026-10-23
small print was too small to read; slogan breaks after the comma;
social glyphs +20%; map line is a sentence (not a small-caps label);
newsletter copy splits into lead + paragraph; the hand-drawn sketch
grows and centres on its own row above the fine print.
========================================================= */
/* --- type scale: raise every small-footer size ~2px while keeping the
existing hierarchy (labels > links > fine print) --- */
.mt-footer { font-size: 1rem; }
.mt-footer h4 { font-size: .875rem; letter-spacing: .18em; } /* 14px */
.mt-footer__menu a, .mt-footer__servlist a { font-size: .9375rem; } /* 15px, was 12.8 */
.mt-footer__menu, .mt-footer__servlist { gap: .7rem; }
.mt-footer__meta { font-size: .875rem; } /* 14px, was 12.8 */
/* --- slogan: one phrase per line, break after the comma --- */
.mt-footer__tag { max-width: 16rem !important; }
.mt-footer__tag span { display: block; }
.mt-footer__tag span + span { margin-top: .15em; }
/* --- social glyphs: IG/FB stay 23px; email + WeChat +20% → 28px (client 10-26) --- */
.mt-footer__social svg { width: 23px !important; height: 23px !important; }
.mt-footer__social a[href^="mailto:"] svg,
.mt-footer__social .mt-social-btn svg { width: 28px !important; height: 28px !important; }
.mt-footer__social { gap: 1.5rem !important; align-items: center; }
/* --- newsletter: lead sentence then body paragraph, both readable ---
element+class specificity so the older `.mt-footer__news p` rule
(13.4px) does not win — it sits earlier but with equal weight */
.mt-footer .mt-footer__news p.mt-footer__newslead,
.mt-footer .mt-footer__news p.mt-footer__newstext {
margin: 0 0 .6rem;
font-size: .9375rem; /* 15px */
line-height: 1.65;
color: var(--ink-soft);
}
/* 订阅表单三行文案 (client 10-26): lead 句加粗，第三行点分词条常规 */
.mt-footer .mt-footer__news p.mt-footer__newslead { color: var(--ink); font-weight: 700; }
.mt-footer .mt-footer__news p.mt-footer__newstext { margin-bottom: .95rem; font-weight: 400; }
.mt-footer__news .mt-news__interest { font-size: .875rem; }
.mt-footer .mt-news__privacy { font-size: .8125rem; } /* 13px */
/* --- map: the caption is a full sentence, so drop the small-caps label
treatment it inherited from the column headings --- */
.mt-footer__map h4.mt-footer__maptitle {
font-size: .9375rem; /* 15px */
font-weight: 500;
letter-spacing: .01em;
text-transform: none;
line-height: 1.5;
margin-bottom: 1rem;
}
/* --- fine print row: slightly larger, no longer 12px, no divider; sits
BELOW the sketch since 10-26 --- */
.mt-footer__bottom { font-size: .875rem; border-top: 0; padding-bottom: clamp(1.4rem, 3vw, 2.4rem); } /* 14px, was 12.5 */
.mt-footer__legal a { font-size: .875rem; }
/* --- sketch: own row, centred; copyright/legal fine print moved BELOW it
(client 10-26), and the drawing shrunk 20% (1344 → 1075) --- */
.mt-footer__sketch {
display: flex;
justify-content: center;
margin: 0;
/* no extra inline padding: the row inherits the container gutter, so the
drawing can use the full column width */
padding: clamp(1.6rem, 3vw, 2.6rem) 0 clamp(.9rem, 2vw, 1.4rem);
}
.mt-footer__sketch img {
display: block;
width: 100%;
max-width: 1075px; /* 1344 − 20% (client 10-26) */
height: auto;
max-height: 288px;
object-fit: contain;
object-position: center bottom;
mix-blend-mode: multiply;
opacity: .95;
}
@media (max-width: 900px) {
.mt-footer__sketch img { max-height: 160px; }
}
/* =========================================================
37. STUDIO — "YOUR GARDEN" BAND (client feedback 2026-10-23)
title on its own line above a two-column pair; image left, copy right,
both starting on the same line (per the supplied reference).
Replaces the old edge-bleed split, whose figure carried a 16:10
aspect-ratio AND height:100% — that computed its width from the row
height (942px in an 800px column) and slid under the text column.
2026-10-29: copy column was cramped by a 40ch cap (text wrapped at
~320px inside a ~520px cell); per the reference the copy now fills
its column and the grid leans a little more image-heavy (1.1/.9).
========================================================= */
.mt-yoursband { padding-block: clamp(3.5rem, 7vw, 6.5rem); }
.mt-yoursband__head {
margin: 0 auto clamp(2.2rem, 4vw, 3.2rem);
font-size: var(--fs-h2);
line-height: 1.16;
text-align: center;
text-wrap: balance;
max-width: 20ch;
}
/* .mt-mark rides on body text; at --fs-h2 the 9% band is too thin to read
as a marker stroke, so thicken it inside the h2 headings that use it. */
.mt-yoursband__head .mt-mark,
.mt-carehead h2 .mt-mark,
.mt-manifesto__head .mt-mark,
.mt-thingshead h2 .mt-mark {
background: linear-gradient(to top, rgba(107, 115, 88, .45) 0, rgba(107, 115, 88, .45) 14%, transparent 14%);
}
.mt-yoursband__grid {
display: grid;
grid-template-columns: 1.1fr .9fr;
gap: clamp(2rem, 5vw, 4.5rem);
align-items: start;
}
.mt-yoursband__media { margin: 0; border-radius: var(--r); overflow: hidden; }
.mt-yoursband__media img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
}
.mt-yoursband__body p {
margin: 0 0 1.05rem;
font-size: var(--fs-cardtext); /* 内容 16 @ 1920 */
line-height: 1.7;
color: var(--ink-soft);
/* no max-width: copy fills its grid column (2026-10-29, per reference) */
}
.mt-yoursband__body p:last-child { margin-bottom: 0; }
/* closing sentence: full ink + bold. Both class spellings are covered — the
page markup emits .mt-yours__closing, the older draft used the band prefix.
Needs the parent class too: `.mt-yoursband__body p` (class+element) would
otherwise outrank a bare single-class rule. */
.mt-yoursband__body p.mt-yours__closing,
.mt-yoursband__body p.mt-yoursband__closing { color: var(--ink); }
.mt-yoursband__body p.mt-yours__closing strong,
.mt-yoursband__body p.mt-yoursband__closing strong { font-weight: 700; }
@media (max-width: 900px) {
.mt-yoursband__grid { grid-template-columns: 1fr; gap: 2rem; }
.mt-yoursband__head { max-width: none; }
.mt-yoursband__media img { aspect-ratio: 4 / 3; }
}
/* =========================================================
38. STUDIO — COLLABORATION BAND (client feedback 2026-10-23)
centred title, intro split over two centred lines, a bold partner
summary line, then the seven icons. The small labels inherit the
serif family from the body so title and labels share one typeface
(the reference comp uses a different face for them; the client
explicitly asked for the same one).
========================================================= */
.mt-centerhead__sub + .mt-centerhead__sub { margin-top: .55rem; }
.mt-coll__partners {
margin: clamp(1.6rem, 2.6vw, 2.2rem) auto clamp(2.4rem, 4vw, 3.2rem);
max-width: 860px;
text-align: center;
font-size: var(--fs-cardtext); /* 内容 16 @ 1920 */
line-height: 1.7;
color: var(--ink);
}
.mt-coll__partners strong { font-weight: 600; }
/* 2026-10-29 client markup: the two paragraphs under "Da Genova, in tutta
Italia" sit at the section-subtitle level (same as .mt-centerhead__sub —
yellow box "区块副标题层级"). Only the studio pages use --edge-right. */
.mt-split--edge-right p.wp-block-paragraph {
font-size: var(--fs-secsub); /* 27 @ 1920 */
color: var(--ink-soft);
}
/* 2026-10-29 client markup on this band: head becomes a two-column editorial
layout — title left ("区块标题"), subtitle + body right ("副标题"/"内容") —
and the partners summary line is crossed out. Scoped with :has() so every
other centered head keeps its stacked centered layout; language-agnostic
and zero content changes (the line stays in the DB, easily restored). */
.mt-centerhead:has(> .mt-coll__partners) {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
column-gap: clamp(2.5rem, 4.5vw, 5rem);
align-items: start;
text-align: left;
max-width: none;
}
.mt-centerhead:has(> .mt-coll__partners) > h2 {
grid-column: 1;
grid-row: 1 / span 2;
margin: 0;
text-align: left;
}
.mt-centerhead:has(> .mt-coll__partners) > .mt-centerhead__sub {
grid-column: 2;
margin: 0;
text-align: left;
}
.mt-centerhead:has(> .mt-coll__partners) > .mt-centerhead__sub + .mt-centerhead__sub { margin-top: 1.1rem; }
.mt-centerhead:has(> .mt-coll__partners) > .mt-coll__partners { display: none; }
@media (max-width: 900px) {
.mt-centerhead:has(> .mt-coll__partners) { grid-template-columns: 1fr; row-gap: 1.4rem; }
.mt-centerhead:has(> .mt-coll__partners) > h2 { grid-column: 1; grid-row: auto; }
.mt-centerhead:has(> .mt-coll__partners) > .mt-centerhead__sub { grid-column: 1; }
}
/* labels: same serif as the rest of the block, a touch larger and calmer */
.mt-coll__item span {
font-family: var(--serif);
font-size: 1rem;
line-height: 1.4;
color: var(--ink-soft);
max-width: 14ch;
}
.mt-coll__item img { opacity: .9; }
/* =========================================================
39. STUDIO — MANIFESTO INTRO (client feedback 2026-10-24)
pure-text band before "Cosa facciamo": large left-aligned
heading with a .mt-mark emphasis on the closing phrase,
body copy in two columns (per the supplied reference).
2026-10-29: the small mt-intro lead-in above was removed as a
duplicate (it repeated the head sentence for sentence), so this
band now follows the hero directly — standard section rhythm —
and the head runs the container width instead of a 23ch column
(font stays the framework's standard section-title size --fs-h2).
========================================================= */
.mt-manifesto { padding-block: var(--sec-pad); }
/* 2026-10-29 client comp: the head no longer runs the container width — it
indents right (~30%) with a hand-drawn arrow in the left margin, and the
two text columns align with the head's left edge */
.mt-manifesto .container { position: relative; }
.mt-manifesto .container::before {
content: "";
position: absolute;
left: 0;
top: clamp(.3rem, .9vw, .8rem);
width: clamp(72px, 7.5vw, 112px);
aspect-ratio: 96 / 44;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 44' fill='none' stroke='%231c1c19' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 26 C 32 21, 58 19, 90 22'/%3E%3Cpath d='M76 10 C 81 15, 86 19, 91 22 C 84 25, 78 30, 74 36'/%3E%3C/svg%3E") no-repeat center / contain;
}
.mt-manifesto__head {
margin: 0 0 clamp(2.6rem, 5vw, 4rem);
margin-left: 30%;
font-size: var(--fs-h2);
line-height: 1.2;
text-wrap: balance;
}
.mt-manifesto__cols {
margin-left: 30%;
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(2rem, 5vw, 4.5rem);
max-width: 1000px;
}
.mt-manifesto__cols p {
margin: 0 0 1.2rem;
font-size: var(--fs-lead, 1.375rem);
line-height: 1.65;
color: var(--ink-soft);
max-width: 44ch;
}
.mt-manifesto__cols p strong { color: var(--ink); font-weight: 700; }
.mt-manifesto__cols p:last-child { margin-bottom: 0; }
@media (max-width: 1280px) {
.mt-manifesto__head, .mt-manifesto__cols { margin-left: 20%; }
}
@media (max-width: 900px) {
.mt-manifesto__cols { grid-template-columns: 1fr; }
.mt-manifesto__head, .mt-manifesto__cols { margin-left: 0; }
.mt-manifesto .container::before { display: none; }
}
/* =========================================================
40. TYPOGRAPHY — no single-word lines (client feedback 2026-10-27)
the CTA-band lead ended with a lone "progetto." on its own line.
`text-wrap: pretty` optimises paragraph endings so the last line
always carries at least two words; unsupported browsers just keep
today's rendering. Headings get `balance` globally as a safety net
(most already set it per component — same value, no conflict).
========================================================= */
h1, h2, h3, h4 { text-wrap: balance; }
p, li, figcaption, blockquote { text-wrap: pretty; }
/* =========================================================
41. STUDIO — HELP BAND (client feedback 2026-10-29)
"Ti aiutiamo…" becomes "Vogliamo aiutarti…" and adopts the
supplied reference layout: heading + 2×2 phase grid on the
left, one tall photo on the right (reference colours/forms
ignored per the client's note). Replaces the centred-head +
four-column .mt-phases row; the phase item markup keeps the
.mt-phase classes (icon left of the title, tag + list below)
but is scoped and compacted under .mt-helpband.
========================================================= */
.mt-helpband {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: clamp(2.5rem, 5vw, 5rem);
align-items: stretch;
}
.mt-helpband__body h2 {
margin: 0 0 clamp(2.4rem, 4.5vw, 3.6rem);
font-size: var(--fs-h2);
line-height: 1.16;
}
.mt-helpband__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(2.2rem, 3.5vw, 3.2rem) clamp(2rem, 3.5vw, 3.2rem);
}
/* scoped compact overrides — .mt-phase defaults (§ below .mt-phases) were
tuned for a 4-across row; cells here are half as wide again */
.mt-helpband .mt-phase { border-top: 1px solid var(--line); padding-top: 1.2rem; grid-template-columns: 64px 1fr; column-gap: 1rem; }
.mt-helpband .mt-phase__icon { width: 64px; height: 64px; } /* 44 → 64, client 2026-10-29 "太小了" */
.mt-helpband .mt-phase h3 { font-size: 1.5rem; /* 24 @ 1920 */ line-height: 1.25; }
.mt-helpband .mt-phase__tag { font-size: .875rem; margin: .9rem 0 .45rem; }
.mt-helpband .mt-phase__desc { font-size: var(--fs-cardtext); line-height: 1.65; }
.mt-helpband__media {
margin: 0;
border-radius: var(--r);
overflow: hidden;
min-height: 420px;
}
.mt-helpband__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
.mt-helpband { grid-template-columns: 1fr; }
.mt-helpband__grid { grid-template-columns: 1fr; gap: 2rem; }
.mt-helpband__media { min-height: 0; }
.mt-helpband__media img { aspect-ratio: 4 / 3; height: auto; }
}
/* =========================================================
42. HOME — tighter rhythm + only controls look clickable
(client feedback 2026-11-02)
1) "区块之间的空间太多，稍微紧凑点": shrink .mt-section paddings
inside .home only — inner pages keep the airy rhythm.
2) "点到哪里都会跳转/小手": markup verified clean on 2026-11-02
(no anchors outside buttons in services/metodo/flow/studio),
but stale browser CSS from earlier card-link builds can still
fake the pointer hand — force default cursors on every
non-interactive block of the complained sections, and drop
the .mt-met5c__card hover lift that also read as clickable.
MT_VERSION bumped in the same release so cached CSS refreshes.
========================================================= */
.home .mt-section { padding-block: clamp(3.6rem, 6.5vw, 5.25rem); }
.home .mt-ctaband { padding-block: clamp(4.5rem, 9vw, 7rem); }
.mt-svccard > :not(.mt-svccard__btn):not(.mt-svccard__toggle),
.mt-svchead, .mt-flowhead, .mt-rshead, .mt-rsall,
.mt-met5c__head, .mt-met5c__intro, .mt-met5c__card,
.mt-flow__media, .mt-flow__text,
.mt-about2__body > :not(.mt-about2__actions), .mt-about2__media { cursor: auto; }
.mt-met5c__card:hover { transform: none; box-shadow: none; }
/* =========================================================
43. FOOTER — newsletter + map share the centre column
(client feedback 2026-11-02: "footer 的版式跟之前说的不一样")
The agreed v2 layout (交付文档 10-16) centres the subscription
form and the Genova range map; brand+social stay one block on
the left, nav/services on the right.
========================================================= */
.mt-footer__top {
/* 3 tracks: brand / centre (news + map) / links — supersedes the
4-track compromise of 2026-10-27 */
grid-template-columns: 1.02fr minmax(360px, 2.15fr) minmax(200px, .88fr);
}
.mt-footer__center { display: flex; flex-direction: column; min-width: 0; }
.mt-footer__center .mt-footer__map { margin-top: 2.4rem; }
.mt-footer__center .mt-footer__mapbox { min-height: 300px; }
@media (max-width: 1280px) {
.mt-footer__top { grid-template-columns: 1fr 1fr; }
.mt-footer__center { grid-column: 1 / -1; grid-row: 2; }
.mt-footer__links { grid-column: 2; grid-row: 1; }
}
@media (max-width: 640px) {
.mt-footer__top { grid-template-columns: 1fr; }
.mt-footer__center, .mt-footer__links { grid-column: auto; grid-row: auto; }
.mt-footer__center .mt-footer__mapbox { min-height: 260px; }
}
/* =========================================================
44. GLOBAL — headings & paragraphs are never clickable
(client feedback 2026-11-03: hero/subtitles "still linked")
DB + templates re-audited clean on 2026-11-03: no anchor
wraps or sits inside any heading on any page (it/en/zh),
so a hand cursor on titles/subtitles can only come from a
stale cached stylesheet. Belt-and-braces beyond §42 (which
only covered home sections): text elements always get the
default cursor site-wide. Links keep their pointer — the
UA pointer rule on `a` itself beats the inherited value,
and the second rule re-asserts it for headings/paragraphs
nested inside a real card link.
========================================================= */
:is(h1,h2,h3,h4,h5,h6,p) { cursor: auto; }
:is(a) :is(h1,h2,h3,h4,h5,h6,p) { cursor: inherit; }