/* ============================================================ Marka fontları — MİM Marka Kılavuzu s. 33-35 Başlık: NOCTADO Regular · Gövde: McQueen ============================================================ */ @font-face { font-family: "NOCTADO"; src: url("../fonts/NOCTADO.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "McQueen"; src: url("../fonts/McQueen-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "McQueen"; src: url("../fonts/McQueen-LightItalic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: "McQueen"; src: url("../fonts/McQueen-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "McQueen"; src: url("../fonts/McQueen-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "McQueen"; src: url("../fonts/McQueen-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "McQueen"; src: url("../fonts/McQueen-BoldItalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; } /* ============================================================ MİM PROJECT CONSTRUCTION ------------------------------------------------------------ Signature: "the waterline" — a 1px cyan datum that runs through the page the way a coastline runs through every one of these projects. It is the nav underline, the rule beside every section title, the line the hero headline sits on, and the edge that draws across a project plate on hover. It is the only ornament on the page; everything else stays quiet. ============================================================ */ :root { /* Brand */ --navy: #01273e; --deep: #011b2c; --cream: #eeeae7; --cyan: #70d3ef; --stone: #bcb5af; /* Extended neutrals */ --paper: #f7f5f3; --white: #ffffff; --cyan-ink: #10728d; /* Deniz metin tonu — AA on paper/cream */ --ink-70: rgba(1, 39, 62, 0.72); --ink-50: rgba(1, 39, 62, 0.5); --ink-30: rgba(1, 39, 62, 0.3); --line: rgba(1, 39, 62, 0.14); --line-soft: rgba(1, 39, 62, 0.08); --cream-70: rgba(238, 234, 231, 0.72); --cream-45: rgba(238, 234, 231, 0.45); --cream-line: rgba(238, 234, 231, 0.18); --shadow-sm: 0 1px 2px rgba(1, 39, 62, 0.05); --shadow-md: 0 24px 50px -34px rgba(1, 39, 62, 0.45); --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --header-h: 78px; --gutter: clamp(20px, 5vw, 76px); --wrap: 1280px; --pad-y: clamp(76px, 10vw, 148px); } /* ============================================================ Base ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); } body { margin: 0; background: var(--paper); color: var(--navy); font-family: "McQueen", system-ui, -apple-system, sans-serif; font-weight: 300; font-size: clamp(15.5px, 0.4vw + 14.2px, 17px); line-height: 1.75; -webkit-font-smoothing: antialiased; /* `clip` not `hidden`: hidden would make a scroll container and break anchor scrolling on the root element. */ overflow-x: clip; } /* Scroll lock for the open mobile drawer. `overflow: hidden` alone does not hold on iOS Safari — the page keeps rubber-banding underneath — so the body is pinned and main.js restores the offset on close. */ body.is-locked { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } :focus-visible { outline: 2px solid var(--cyan-ink); outline-offset: 3px; } ::selection { background: var(--cyan); color: var(--navy); } .skip { position: absolute; left: -9999px; } .skip:focus { position: fixed; left: 16px; top: 16px; z-index: 300; padding: 10px 20px; background: var(--navy); color: var(--cream); } /* ============================================================ Type ============================================================ */ h1, h2, h3, h4 { font-family: "NOCTADO", Georgia, serif; font-weight: 400; line-height: 1.06; letter-spacing: -0.015em; margin: 0; } /* Basliktaki vurgu kelimesi. NOCTADO tek agirlikli — italik veya ince varyanti yok, tarayici sahte stil uretmesin diye stil sabitleniyor; vurgu Deniz ile tasiniyor. Acik zeminde AA'yi geceni kullan. */ h1 em, h2 em, h3 em { font-style: normal; font-weight: 400; color: var(--cyan-ink); } .hero__title em, .page-hero__title em, .section--navy :is(h1, h2, h3) em { color: var(--cyan); } p { margin: 0 0 1.1em; } p:last-child { margin-bottom: 0; } strong { font-weight: 500; } /* The utility voice: NOCTADO set small, upright and widely tracked. Used only for labels, statuses and breadcrumbs. */ .label { font-family: "NOCTADO", Georgia, serif; font-weight: 400; font-size: 0.75rem; letter-spacing: 0.26em; text-transform: uppercase; line-height: 1.4; } .wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .wrap--narrow { max-width: 880px; } /* ============================================================ Waterline — the page's one ornament ============================================================ */ .waterline { display: block; height: 1px; background: var(--cyan); transform-origin: left; transform: scaleX(0); transition: transform 1.1s var(--ease); } .is-in .waterline, .waterline.is-in { transform: scaleX(1); } /* ============================================================ Header ============================================================ */ .site-header { position: fixed; inset: 0 0 auto; z-index: 100; height: var(--header-h); display: flex; align-items: center; transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease); } .site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--cream-line); opacity: 1; transition: background 0.4s var(--ease); } .site-header.is-solid { background: rgba(247, 245, 243, 0.94); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); box-shadow: var(--shadow-sm); } .site-header.is-solid::after { background: var(--line-soft); } .header__inner { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); display: flex; align-items: center; gap: 24px; } .brand { display: block; flex: none; line-height: 0; } .brand img { width: 108px; height: auto; } .brand__light { display: block; } .brand__dark { display: none; } .is-solid .brand__light { display: none; } .is-solid .brand__dark { display: block; } .nav { margin-left: auto; display: flex; align-items: center; gap: clamp(18px, 2.4vw, 38px); } .nav__link { position: relative; font-size: 0.95rem; color: var(--cream); padding-block: 6px; transition: color 0.3s var(--ease), opacity 0.3s var(--ease); } .is-solid .nav__link { color: var(--navy); } .nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--cyan); transform: scaleX(0); transform-origin: right; transition: transform 0.4s var(--ease); } .nav__link:hover::after, .nav__link:focus-visible::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; } .header__tools { display: flex; align-items: center; gap: 18px; flex: none; } .lang { display: flex; align-items: center; gap: 7px; font-size: 0.82rem; letter-spacing: 0.08em; } .lang__btn { position: relative; padding: 3px 1px; color: var(--cream-45); transition: color 0.3s var(--ease); } /* EN / TR are small by design; the touch target is grown invisibly instead */ .lang__btn::after { content: ""; position: absolute; inset: -13px -7px; } .lang__sep { color: var(--cream-45); } .is-solid .lang__btn, .is-solid .lang__sep { color: var(--ink-30); } .lang__btn:hover, .lang__btn.is-active { color: var(--cream); } .is-solid .lang__btn:hover, .is-solid .lang__btn.is-active { color: var(--navy); } .lang__btn.is-active { border-bottom: 1px solid var(--cyan); } .burger { display: none; width: 30px; height: 22px; position: relative; flex: none; } /* the bars are 30x22; the tappable area has to be finger-sized. The horizontal reach stays under the 18px gap so it cannot steal taps meant for the TR button next to it. */ .burger::after { content: ""; position: absolute; inset: -11px -8px; } .burger span { position: absolute; left: 0; right: 0; height: 1px; background: var(--cream); transition: transform 0.35s var(--ease), opacity 0.25s var(--ease), background 0.4s var(--ease); } .is-solid .burger span { background: var(--navy); } .burger span:nth-child(1) { top: 3px; } .burger span:nth-child(2) { top: 11px; } .burger span:nth-child(3) { top: 19px; } .burger[aria-expanded="true"] span { background: var(--cream); } .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } @media (max-width: 900px) { .burger { display: block; } /* the open drawer fills the header too, so the logo and the tools have to sit above it — and the logo has to be the light one on the navy panel */ .brand, .header__tools { position: relative; z-index: 2; } /* `.nav` is taken out of flow here, so its margin-left:auto no longer pushes anything: the language switch and the burger have to claim the gap themselves, otherwise they sit stranded next to the logo. */ .header__tools { margin-left: auto; } body.is-locked .site-header { background: transparent; box-shadow: none; /* backdrop-filter makes the header a containing block for fixed children, which would trap the full-screen drawer inside the 78px header */ -webkit-backdrop-filter: none; backdrop-filter: none; } body.is-locked .brand__light { display: block; } body.is-locked .brand__dark { display: none; } body.is-locked .lang__btn, body.is-locked .lang__sep { color: var(--cream-45); } body.is-locked .lang__btn.is-active { color: var(--cream); } /* the header hairline would draw a seam across the open panel */ body.is-locked .site-header::after { background: transparent; } /* The panel fades in as one piece. A wipe reveals a half-drawn drawer on slower phones, which reads as a rendering glitch rather than a menu. */ .nav { position: fixed; inset: 0; margin: 0; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; padding: calc(var(--header-h) + 8px) var(--gutter) 40px; background: var(--navy); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px); transition: opacity 0.26s var(--ease), transform 0.26s var(--ease), visibility 0s linear 0.26s; } .nav.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: opacity 0.26s var(--ease), transform 0.26s var(--ease), visibility 0s; } .nav__link, .is-solid .nav__link { color: var(--cream); font-family: "NOCTADO", Georgia, serif; font-weight: 400; font-size: clamp(2rem, 8vw, 2.8rem); line-height: 1.5; padding-block: 2px; opacity: 0; transform: translateY(10px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); } .nav.is-open .nav__link { opacity: 1; transform: none; } .nav.is-open .nav__link:nth-child(1) { transition-delay: 0.08s; } .nav.is-open .nav__link:nth-child(2) { transition-delay: 0.13s; } .nav.is-open .nav__link:nth-child(3) { transition-delay: 0.18s; } .nav.is-open .nav__link:nth-child(4) { transition-delay: 0.23s; } .nav.is-open .nav__link:nth-child(5) { transition-delay: 0.28s; } .nav__link::after { display: none; } .nav__link[aria-current="page"] { color: var(--cyan); } } /* Landscape phones: five centred links no longer fit, so stack from the top and let the panel scroll rather than clipping the last item. */ @media (max-width: 900px) and (max-height: 540px) { .nav { justify-content: flex-start; overflow-y: auto; padding-bottom: 24px; } .nav__link, .is-solid .nav__link { font-size: 1.5rem; line-height: 1.45; } } /* ============================================================ Hero ============================================================ */ .hero { position: relative; min-height: min(94svh, 900px); display: flex; align-items: flex-end; overflow: hidden; background: var(--navy); isolation: isolate; } .hero__slides { position: absolute; inset: 0; z-index: -2; } .hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s var(--ease); } .hero__slide.is-active { opacity: 1; } .hero__slide img { width: 100%; height: 100%; object-fit: cover; } .hero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient( 100deg, rgba(1, 27, 44, 0.72) 0%, rgba(1, 27, 44, 0.36) 46%, rgba(1, 27, 44, 0.12) 78% ), linear-gradient(to top, rgba(1, 27, 44, 0.6), transparent 42%); } .hero__inner { width: 100%; max-width: var(--wrap); margin-inline: auto; padding: calc(var(--header-h) + 60px) var(--gutter) clamp(44px, 7vw, 84px); color: var(--cream); } .hero__eyebrow { display: flex; align-items: center; gap: 14px; color: var(--cyan); margin-bottom: clamp(18px, 3vw, 30px); } .hero__eyebrow::before { content: ""; width: clamp(28px, 5vw, 56px); height: 1px; background: var(--cyan); } /* the headline sits on the waterline: the rule leaves the last line of the title and runs off the right edge of the screen */ .hero__title { position: relative; font-size: clamp(2.9rem, 7.6vw, 6.1rem); max-width: 15ch; width: -moz-fit-content; width: fit-content; color: var(--cream); } .hero__title::after { content: ""; position: absolute; left: calc(100% + 28px); bottom: 0.32em; width: 100vw; height: 1px; background: var(--cyan); opacity: 0.55; } .hero__rotator { position: relative; margin-top: clamp(22px, 3.4vw, 36px); min-height: 2.1em; } .hero__rot { position: absolute; inset: 0; margin: 0; max-width: 34ch; font-size: clamp(1rem, 1.5vw, 1.2rem); color: var(--cream-70); opacity: 0; transform: translateY(8px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); } .hero__rot.is-active { opacity: 1; transform: none; } .hero__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-top: clamp(34px, 5vw, 58px); } .hero__cue { position: relative; display: inline-flex; align-items: center; gap: 12px; color: var(--cream-70); transition: color 0.3s var(--ease); } .hero__cue:hover { color: var(--cream); } .hero__cue::after { content: ""; position: absolute; inset: -12px -8px; } .hero__cue svg { width: 14px; height: 22px; overflow: visible; } .hero__cue svg line { animation: cue 2.4s var(--ease) infinite; } @keyframes cue { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(5px); opacity: 0.4; } } .hero__dots { display: flex; gap: 10px; } .hero__dot { position: relative; width: 34px; height: 1px; background: var(--cream-45); transition: background 0.35s var(--ease); } /* a 1px-tall rule is impossible to tap — widen the target, not the rule */ .hero__dot::after { content: ""; position: absolute; inset: -18px -3px; } .hero__dot.is-active { background: var(--cyan); } /* ============================================================ Page hero (inner pages) ============================================================ */ .page-hero { background: var(--navy); color: var(--cream); padding: calc(var(--header-h) + clamp(64px, 9vw, 116px)) 0 clamp(48px, 7vw, 84px); } .page-hero__crumbs { display: flex; align-items: center; gap: 10px; color: var(--cream-45); margin-bottom: 20px; } .page-hero__crumbs a:hover { color: var(--cyan); } .page-hero__title { font-size: clamp(2.6rem, 6.4vw, 4.6rem); color: var(--cream); } .page-hero__lead { margin: 26px 0 0; max-width: 56ch; color: var(--cream-70); } .page-hero .waterline { margin-top: clamp(32px, 5vw, 52px); background: var(--cyan); } /* ============================================================ Sections — asymmetric editorial split ============================================================ */ .section { padding-block: var(--pad-y); } .section--tight { padding-block: clamp(56px, 7vw, 92px); } .section--cream { background: var(--cream); } .section--navy { background: var(--navy); color: var(--cream); } .split { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; } .split__label { display: flex; align-items: baseline; gap: 12px; color: var(--cyan-ink); padding-top: 0.7em; } .section--navy .split__label { color: var(--cyan); } .split__label::before { content: ""; width: 24px; height: 1px; background: currentColor; flex: none; transform: translateY(-0.32em); } .section__title { font-size: clamp(2.1rem, 4.2vw, 3.5rem); max-width: 18ch; } .section__lead { margin-top: clamp(20px, 3vw, 30px); max-width: 62ch; color: var(--ink-70); font-size: clamp(1rem, 1.3vw, 1.1rem); } .section--navy .section__lead { color: var(--cream-70); } @media (max-width: 800px) { .split { grid-template-columns: 1fr; gap: 18px; } .split__label { padding-top: 0; } } /* ============================================================ Link with a rule that slides ============================================================ */ .arrow-link { display: inline-flex; align-items: center; gap: 12px; margin-top: clamp(26px, 3.4vw, 40px); font-size: 0.95rem; letter-spacing: 0.02em; color: var(--navy); } .section--navy .arrow-link, .plate__body .arrow-link { color: inherit; } .arrow-link__rule { width: 34px; height: 1px; background: currentColor; opacity: 0.45; transition: width 0.4s var(--ease), opacity 0.4s var(--ease); } .arrow-link:hover .arrow-link__rule, .arrow-link:focus-visible .arrow-link__rule { width: 54px; opacity: 1; } /* ============================================================ Project plates (home) — alternating full-bleed halves ============================================================ */ .plates { display: grid; gap: clamp(48px, 7vw, 96px); margin-top: clamp(44px, 6vw, 72px); } .plate { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(26px, 4vw, 60px); align-items: center; } .plate:nth-child(even) .plate__media { order: 2; } .plate__media { position: relative; overflow: hidden; background: var(--cream); } .plate__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 1.2s var(--ease); } .plate:hover .plate__media img { transform: scale(1.035); } .plate__media::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--cyan); transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease); } .plate:hover .plate__media::after { transform: scaleX(1); } .plate__status { color: var(--cyan-ink); margin-bottom: 16px; display: block; } .plate__title { font-size: clamp(1.9rem, 3.4vw, 2.9rem); } .plate__text { margin-top: 16px; max-width: 42ch; color: var(--ink-70); } /* ============================================================ Stats — the credibility band ============================================================ */ .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--cream-line); } .stat { padding: clamp(30px, 4.4vw, 52px) clamp(18px, 3vw, 40px); border-left: 1px solid var(--cream-line); } .stat:first-child { border-left: none; padding-left: 0; } .stat__num { margin: 0; font-family: "NOCTADO", Georgia, serif; font-weight: 400; font-size: clamp(2.8rem, 6vw, 4.6rem); line-height: 1; color: var(--cream); } .stat__num span { color: var(--cyan); } .stat__label { margin-top: 14px; color: var(--cream-70); font-size: 0.92rem; max-width: 22ch; } @media (max-width: 720px) { .stats { grid-template-columns: 1fr; } .stat { border-left: none; border-top: 1px solid var(--cream-line); padding-inline: 0; } .stat:first-child { border-top: none; } } /* ============================================================ Project grid (projects page) ============================================================ */ .filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(34px, 5vw, 52px); } .filter { padding: 9px 20px; border: 1px solid var(--line); border-radius: 999px; font-size: 0.86rem; color: var(--ink-70); transition: border-color 0.3s var(--ease), color 0.3s var(--ease), background 0.3s var(--ease); } .filter:hover { border-color: var(--ink-30); color: var(--navy); } .filter.is-active { background: var(--navy); border-color: var(--navy); color: var(--cream); } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: clamp(26px, 3.4vw, 44px); } .card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line-soft); transition: box-shadow 0.45s var(--ease), transform 0.45s var(--ease); } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .card__media { position: relative; overflow: hidden; } .card__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1.1s var(--ease); } .card:hover .card__media img { transform: scale(1.05); } .card__media::after { content: ""; position: absolute; inset: auto 0 0; height: 2px; background: var(--cyan); transform: scaleX(0); transform-origin: left; transition: transform 0.55s var(--ease); } .card:hover .card__media::after { transform: scaleX(1); } .card__body { padding: clamp(22px, 2.6vw, 30px); display: flex; flex-direction: column; flex: 1; } .card__status { color: var(--cyan-ink); margin-bottom: 12px; } .card__title { font-size: clamp(1.4rem, 2vw, 1.75rem); } .card__text { margin-top: 12px; color: var(--ink-70); font-size: 0.95rem; } .card .arrow-link { margin-top: auto; padding-top: 22px; } .card.is-hidden { display: none; } /* ============================================================ Prose (about, blog post, legal) ============================================================ */ .prose { max-width: 68ch; } .prose h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin-top: clamp(44px, 5vw, 64px); margin-bottom: 18px; } .prose h2:first-child { margin-top: 0; } .prose h3 { font-family: "McQueen", sans-serif; font-weight: 500; font-size: 1.05rem; letter-spacing: 0.01em; line-height: 1.5; margin-top: 34px; margin-bottom: 10px; } .prose p, .prose li { color: var(--ink-70); } .prose ul, .prose ol { margin: 0 0 1.1em; padding-left: 1.1em; } .prose li { margin-bottom: 8px; } .prose li::marker { color: var(--cyan-ink); } .prose a { color: var(--cyan-ink); border-bottom: 1px solid currentColor; } /* Legal texts stay in the language they were written in — the language switch chooses which of the two notices is shown, it does not translate. */ body[data-lang="tr"] [data-lang-only="en"], body[data-lang="en"] [data-lang-only="tr"] { display: none; } .prose--legal { max-width: 76ch; font-size: 0.94rem; } .prose--legal h2 { font-size: clamp(1.3rem, 2vw, 1.6rem); margin-top: 40px; } .pull { margin: clamp(40px, 5vw, 60px) 0; padding-left: clamp(20px, 3vw, 32px); border-left: 1px solid var(--cyan); font-family: "NOCTADO", Georgia, serif; font-weight: 400; font-style: normal; font-size: clamp(1.3rem, 2.4vw, 1.75rem); line-height: 1.4; color: var(--navy); } /* ============================================================ Timeline (about) ============================================================ */ .timeline { margin-top: clamp(44px, 6vw, 68px); border-top: 1px solid var(--line); } .tl { display: grid; grid-template-columns: minmax(0, 160px) minmax(0, 1fr); gap: clamp(18px, 4vw, 48px); padding: clamp(24px, 3.2vw, 36px) 0; border-bottom: 1px solid var(--line); } .tl__year { font-family: "NOCTADO", Georgia, serif; font-weight: 400; font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1; color: var(--cyan-ink); } .tl__title { font-family: "McQueen", sans-serif; font-weight: 500; font-size: 1.02rem; line-height: 1.5; margin-bottom: 8px; } .tl__text { color: var(--ink-70); max-width: 56ch; } @media (max-width: 640px) { .tl { grid-template-columns: 1fr; gap: 10px; } } /* ============================================================ Blog list ============================================================ */ .post { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(22px, 4vw, 52px); align-items: center; padding-block: clamp(30px, 4vw, 48px); border-bottom: 1px solid var(--line); } .post:first-child { border-top: 1px solid var(--line); } .post__media { overflow: hidden; } .post__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 1.1s var(--ease); } .post:hover .post__media img { transform: scale(1.04); } .post__title { font-size: clamp(1.5rem, 2.6vw, 2.15rem); max-width: 20ch; } .post__text { margin-top: 14px; color: var(--ink-70); max-width: 46ch; } @media (max-width: 760px) { .post { grid-template-columns: 1fr; } } .post-head__meta { color: var(--cyan); margin-bottom: 18px; display: block; } .post-cover { margin-top: calc(var(--pad-y) * -0.4); margin-bottom: clamp(40px, 5vw, 64px); } .post-cover img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; } /* ============================================================ Contact ============================================================ */ .contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(38px, 6vw, 84px); align-items: start; } @media (max-width: 900px) { .contact { grid-template-columns: 1fr; } } .detail { padding-block: 22px; border-top: 1px solid var(--line); } .detail:last-of-type { border-bottom: 1px solid var(--line); } .detail__label { color: var(--cyan-ink); display: block; margin-bottom: 8px; } .detail__value { font-size: 1.02rem; line-height: 1.6; } .detail__value a:hover { color: var(--cyan-ink); } .map { margin-top: clamp(40px, 6vw, 72px); border: 1px solid var(--line); line-height: 0; } .map iframe { width: 100%; height: clamp(300px, 44vw, 460px); border: 0; filter: saturate(0.75); } /* ============================================================ Form ============================================================ */ .cta { position: relative; background: var(--navy); color: var(--cream); isolation: isolate; overflow: hidden; } .cta__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; } /* the photograph stays a texture, never a background the type has to fight */ .cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient( 100deg, rgba(1, 27, 44, 0.96) 0%, rgba(1, 27, 44, 0.92) 45%, rgba(1, 27, 44, 0.86) 100% ); } .form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 26px; margin-top: clamp(30px, 4vw, 44px); } .field { display: flex; flex-direction: column; gap: 8px; } .field--full { grid-column: 1 / -1; } .field > label { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream-70); } .field input, .field select, .field textarea { font: inherit; color: inherit; background: transparent; border: none; border-bottom: 1px solid var(--cream-line); padding: 10px 0; border-radius: 0; transition: border-color 0.3s var(--ease); } .field select option { color: var(--navy); } .field textarea { resize: vertical; min-height: 110px; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--cyan); } .field input::placeholder, .field textarea::placeholder { color: var(--cream-45); } .hp { position: absolute; left: -9999px; } .consent { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 12px; font-size: 0.88rem; color: var(--cream-70); } .consent input { margin-top: 6px; accent-color: var(--cyan); width: 15px; height: 15px; flex: none; } .consent a { border-bottom: 1px solid var(--cream-45); } .consent a:hover { border-bottom-color: var(--cyan); } .form__foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 6px; } .btn { display: inline-flex; align-items: center; gap: 12px; padding: 15px 34px; background: var(--cyan); color: var(--navy); font-size: 0.9rem; letter-spacing: 0.06em; border-radius: 999px; transition: background 0.3s var(--ease), transform 0.3s var(--ease); } .btn:hover { background: var(--cream); transform: translateY(-2px); } .btn[disabled] { opacity: 0.5; pointer-events: none; } .form__note { font-size: 0.8rem; color: var(--cream-45); } .form__msg { grid-column: 1 / -1; font-size: 0.92rem; padding: 14px 18px; border-left: 2px solid var(--cyan); background: rgba(238, 234, 231, 0.08); } .form__msg:empty { display: none; } .form__msg.is-error { border-left-color: #ff9a8b; } @media (max-width: 640px) { .form { grid-template-columns: 1fr; } } /* ============================================================ Footer ============================================================ */ .site-footer { background: var(--deep); color: var(--cream-70); padding-block: clamp(56px, 7vw, 84px) 34px; font-size: 0.92rem; } .footer__top { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 64px); padding-bottom: clamp(40px, 5vw, 56px); border-bottom: 1px solid var(--cream-line); } .footer__brand img { width: 116px; } .footer__addr { margin-top: 22px; max-width: 30ch; line-height: 1.7; } .footer__addr a:hover { color: var(--cyan); } .footer__heading { color: var(--cyan); margin-bottom: 18px; display: block; } .footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .footer__list a { display: inline-block; padding-block: 6px; } .footer__list a:hover { color: var(--cream); } .footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding-top: 26px; font-size: 0.84rem; color: var(--cream-45); } .social { display: flex; gap: 14px; } .social a { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--cream-line); border-radius: 50%; transition: border-color 0.3s var(--ease), color 0.3s var(--ease); } .social a:hover { border-color: var(--cyan); color: var(--cyan); } .social svg { width: 15px; height: 15px; } @media (max-width: 760px) { .footer__top { grid-template-columns: 1fr; gap: 34px; } } /* ============================================================ Cookie strip ============================================================ */ .cookie { position: fixed; left: var(--gutter); right: var(--gutter); bottom: 20px; z-index: 120; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; max-width: var(--wrap); margin-inline: auto; padding: 16px 22px; background: var(--navy); color: var(--cream-70); font-size: 0.84rem; box-shadow: var(--shadow-md); transform: translateY(140%); transition: transform 0.6s var(--ease); } .cookie.is-in { transform: none; } .cookie a { color: var(--cyan); border-bottom: 1px solid transparent; } .cookie a:hover { border-bottom-color: currentColor; } .cookie button { padding: 8px 22px; border: 1px solid var(--cream-line); border-radius: 999px; color: var(--cream); font-size: 0.84rem; transition: border-color 0.3s var(--ease), color 0.3s var(--ease); } .cookie button:hover { border-color: var(--cyan); color: var(--cyan); } /* on a phone the notice was covering a quarter of the hero */ @media (max-width: 600px) { .cookie { left: 12px; right: 12px; bottom: 12px; gap: 12px; padding: 14px 16px; font-size: 0.8rem; line-height: 1.6; } } /* ============================================================ Reveal ============================================================ */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); } .reveal.is-in { opacity: 1; transform: none; } .reveal--d1 { transition-delay: 0.09s; } .reveal--d2 { transition-delay: 0.18s; } .reveal--d3 { transition-delay: 0.27s; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .reveal, .hero__rot { opacity: 1; transform: none; } .waterline { transform: scaleX(1); } } /* ============================================================ Responsive tail ============================================================ */ @media (max-width: 860px) { .plate { grid-template-columns: 1fr; } .plate:nth-child(even) .plate__media { order: 0; } } @media (max-width: 520px) { .hero__title::after { display: none; } .hero__foot { align-items: center; } }