/* ========================================================================== Thomas Brown Creates — main stylesheet Palette, typography and layout carried over from the original site: white ground, black ink, #aaa navigation, Georgia serif throughout. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens -------------------------------------------------------------------------- */ :root { --bg: #ffffff; --bg-alt: #f5f4f2; --bg-ink: #111111; --ink: #000000; --ink-soft: #4a4a4a; /* Greys darkened from the archive's #aaa / #777 to the darkest values that still clear WCAG AA (4.5:1) on both the white and the #f5f4f2 ground. */ --muted: #6f6f6f; --muted-strong: #5c5c5c; --line: #e4e2df; --line-strong: #cfccc7; --focus: #1a5fb4; --serif: georgia, 'Times New Roman', 'Nimbus Roman', times, serif; --step--1: 0.875rem; --step-0: 1.0625rem; --step-1: 1.3125rem; --step-2: 1.6875rem; --step-3: 2.25rem; --step-4: 3rem; --step-5: 4.25rem; --gutter: clamp(1.25rem, 4vw, 3.5rem); --wrap: 1400px; --measure: 46rem; --dur: 0.35s; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --header-h: 96px; } [data-theme='dark'] { --bg: #101010; --bg-alt: #191919; --bg-ink: #000000; --ink: #f2f0ed; --ink-soft: #b8b4ae; --muted: #8f8b85; --muted-strong: #a8a39c; --line: #2a2a2a; --line-strong: #3a3a3a; } /* -------------------------------------------------------------------------- 2. Reset -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); /* `clip` contains the off-screen drawer and AOS pre-animation offsets without turning into a scroll container (which `hidden` would). */ overflow-x: clip; } @supports not (overflow-x: clip) { html { overflow-x: hidden; } } @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; } } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--serif); font-size: var(--step-0); line-height: 1.65; overflow-x: hidden; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } img, svg, video { max-width: 100%; display: block; } img { height: auto; } h1, h2, h3, h4, h5 { font-family: var(--serif); font-weight: 700; line-height: 1.15; margin: 0 0 0.6em; letter-spacing: -0.01em; } h1 { font-size: var(--step-4); } h2 { font-size: var(--step-3); } h3 { font-size: var(--step-2); } h4 { font-size: var(--step-1); } p { margin: 0 0 1.25em; } p:last-child { margin-bottom: 0; } a { color: inherit; text-decoration: none; transition: color var(--dur) var(--ease); } ul, ol { margin: 0 0 1.25em; padding-left: 1.25em; } li { margin-bottom: 0.4em; } blockquote { margin: 2rem 0; padding: 0 0 0 1.6rem; border-left: 2px solid var(--ink); font-style: italic; font-size: var(--step-1); color: var(--ink-soft); } hr { border: 0; border-top: 1px solid var(--line); margin: 3rem 0; } figure { margin: 2.5rem 0; } figcaption { margin-top: 0.7rem; font-size: var(--step--1); color: var(--muted-strong); font-style: italic; } table { border-collapse: collapse; width: 100%; margin: 0 0 1.5em; font-size: var(--step--1); } th, td { text-align: left; padding: 0.75rem 0.9rem; border-bottom: 1px solid var(--line); vertical-align: top; } th { font-weight: 700; border-bottom-color: var(--line-strong); } code { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace; font-size: 0.9em; background: var(--bg-alt); padding: 0.15em 0.4em; border-radius: 2px; } ::selection { background: var(--ink); color: var(--bg); } :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--ink); color: var(--bg); padding: 0.75rem 1.25rem; } .skip-link:focus { left: 0; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- 3. Layout helpers -------------------------------------------------------------------------- */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .wrap--narrow { max-width: 62rem; } .wrap--text { max-width: var(--measure); } .section { padding-block: clamp(3.5rem, 8vw, 7rem); } .section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); } .section--alt { background: var(--bg-alt); } .section--ink { background: var(--bg-ink); color: #f2f0ed; } .section--ink h2, .section--ink h3 { color: #fff; } .section--ink .section-head__eyebrow { color: #8f8b85; } .grid { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); grid-template-columns: 1fr; } @media (min-width: 40rem) { .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 64rem) { .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .stack > * + * { margin-top: 1.25rem; } .text-center { text-align: center; } .section-head { max-width: 44rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); } .section-head--center { margin-inline: auto; text-align: center; } .section-head__eyebrow { display: block; font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted-strong); margin-bottom: 0.9rem; font-weight: 700; } .section-head h2 { margin-bottom: 0.5rem; } .section-head p { color: var(--ink-soft); font-size: var(--step-1); margin-bottom: 0; } .rule { width: 54px; height: 2px; background: var(--ink); margin: 0 0 1.4rem; } .section-head--center .rule { margin-inline: auto; } .section--ink .rule { background: #fff; } /* -------------------------------------------------------------------------- 4. Buttons & links -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--serif); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; padding: 1rem 2rem; border: 1px solid var(--ink); background: var(--ink); color: var(--bg); cursor: pointer; position: relative; overflow: hidden; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); } .btn:hover, .btn:focus-visible { background: transparent; color: var(--ink); transform: translateY(-2px); } .btn--ghost { background: transparent; color: var(--ink); } .btn--ghost:hover, .btn--ghost:focus-visible { background: var(--ink); color: var(--bg); } .btn--light { background: #fff; border-color: #fff; color: #111; } .btn--light:hover, .btn--light:focus-visible { background: transparent; color: #fff; } .btn--outline-light { background: transparent; border-color: rgba(255,255,255,0.6); color: #fff; } .btn--outline-light:hover, .btn--outline-light:focus-visible { background: #fff; color: #111; border-color: #fff; } .btn--sm { padding: 0.7rem 1.4rem; font-size: 0.75rem; } .btn[disabled] { opacity: 0.55; pointer-events: none; } .link-arrow { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; border-bottom: 1px solid var(--line-strong); padding-bottom: 0.35rem; } .link-arrow span[aria-hidden] { transition: transform var(--dur) var(--ease); } .link-arrow:hover { border-bottom-color: var(--ink); } .link-arrow:hover span[aria-hidden] { transform: translateX(5px); } .prose a:not(.btn):not(.link-arrow) { border-bottom: 1px solid var(--line-strong); padding-bottom: 1px; } .prose a:not(.btn):not(.link-arrow):hover { border-bottom-color: var(--ink); } /* -------------------------------------------------------------------------- 5. Header & navigation -------------------------------------------------------------------------- */ .scroll-progress { position: fixed; inset: 0 auto auto 0; height: 2px; width: 0; background: var(--ink); z-index: 120; transition: width 0.1s linear; } .site-header { position: sticky; top: 0; z-index: 100; background: var(--bg); border-bottom: 1px solid transparent; transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .site-header.is-stuck { border-bottom-color: var(--line); box-shadow: 0 1px 18px rgba(0,0,0,0.05); } .site-header.is-hidden { transform: translateY(-102%); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: var(--header-h); padding-block: 1rem; } .logo { font-size: 1.9375rem; /* 31px, as the original */ font-weight: 700; line-height: 1.1; letter-spacing: -0.015em; white-space: nowrap; } .logo a { color: var(--ink); } .logo__sub { display: block; font-size: 0.6875rem; font-weight: 400; font-style: italic; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-top: 0.35rem; } .nav { display: flex; align-items: center; gap: 1.9rem; } .nav__list { display: flex; align-items: center; gap: 1.9rem; list-style: none; margin: 0; padding: 0; } .nav__list li { margin: 0; } .nav__link { position: relative; font-size: 1rem; color: var(--muted); padding-block: 0.35rem; } .nav__link::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: var(--ink); transition: width var(--dur) var(--ease); } .nav__link:hover, .nav__link:focus-visible, .nav__link.is-active { color: var(--ink); } .nav__link:hover::after, .nav__link.is-active::after { width: 100%; } /* dropdown */ .nav__item--has-menu { position: relative; } .nav__toggle { display: inline-flex; align-items: center; gap: 0.4rem; background: none; border: 0; padding: 0.35rem 0; font: inherit; font-size: 1rem; color: var(--muted); cursor: pointer; } .nav__toggle:hover, .nav__toggle[aria-expanded='true'] { color: var(--ink); } .nav__toggle .chev { transition: transform var(--dur) var(--ease); font-size: 0.7em; } .nav__toggle[aria-expanded='true'] .chev { transform: rotate(180deg); } .nav__menu { position: absolute; top: calc(100% + 0.85rem); left: -1rem; min-width: 15rem; background: var(--bg); border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(0,0,0,0.09); padding: 0.6rem 0; margin: 0; list-style: none; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur); } .nav__item--has-menu.is-open .nav__menu { opacity: 1; visibility: visible; transform: translateY(0); } .nav__menu li { margin: 0; } .nav__menu a { display: block; padding: 0.55rem 1.35rem; font-size: 0.9375rem; color: var(--ink-soft); } .nav__menu a:hover, .nav__menu a:focus-visible { background: var(--bg-alt); color: var(--ink); } .header-tools { display: flex; align-items: center; gap: 0.85rem; } .icon-btn { width: 40px; height: 40px; display: inline-grid; place-items: center; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); } .icon-btn:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); } .icon-btn svg { width: 17px; height: 17px; fill: currentColor; } .theme-toggle .icon-moon { display: none; } [data-theme='dark'] .theme-toggle .icon-moon { display: block; } [data-theme='dark'] .theme-toggle .icon-sun { display: none; } .hamburger { display: none; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; padding: 0; position: relative; } .hamburger i { position: absolute; left: 10px; width: 24px; height: 1.5px; background: var(--ink); transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); } .hamburger i:nth-child(1) { top: 15px; } .hamburger i:nth-child(2) { top: 21px; } .hamburger i:nth-child(3) { top: 27px; } .hamburger[aria-expanded='true'] i:nth-child(1) { transform: translateY(6px) rotate(45deg); } .hamburger[aria-expanded='true'] i:nth-child(2) { opacity: 0; } .hamburger[aria-expanded='true'] i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* mobile drawer */ .drawer { position: fixed; inset: 0 0 0 auto; width: min(24rem, 88vw); background: var(--bg); border-left: 1px solid var(--line); z-index: 150; padding: 6rem var(--gutter) 3rem; overflow-y: auto; transform: translateX(100%); visibility: hidden; transition: transform var(--dur) var(--ease), visibility var(--dur); } .drawer.is-open { transform: translateX(0); visibility: visible; } .drawer__list { list-style: none; margin: 0; padding: 0; } .drawer__list li { margin: 0; border-bottom: 1px solid var(--line); } .drawer__list > li > a, .drawer__list > li > button { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 1rem 0; font-family: var(--serif); font-size: 1.0625rem; color: var(--ink-soft); background: none; border: 0; cursor: pointer; text-align: left; } .drawer__list a.is-active { color: var(--ink); font-weight: 700; } .drawer__sub { list-style: none; margin: 0; padding: 0 0 0.75rem 1rem; display: none; } .drawer__sub.is-open { display: block; } .drawer__sub li { border: 0; } .drawer__sub a { display: block; padding: 0.5rem 0; font-size: 0.9375rem; color: var(--muted-strong); } .drawer__sub a:hover { color: var(--ink); } .drawer__close { position: absolute; top: 1.6rem; right: var(--gutter); } .drawer__footer { margin-top: 2.5rem; } .overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); opacity: 0; visibility: hidden; z-index: 140; transition: opacity var(--dur) var(--ease), visibility var(--dur); } .overlay.is-open { opacity: 1; visibility: visible; } body.no-scroll { overflow: hidden; } @media (max-width: 1080px) { .nav { display: none; } .hamburger { display: block; } } /* Narrow screens: the header must never let its controls collide. */ @media (max-width: 40rem) { :root { --header-h: 74px; } .site-header__inner { gap: 0.75rem; } .logo { font-size: 1.5rem; } .logo__sub { font-size: 0.5625rem; letter-spacing: 0.16em; margin-top: 0.25rem; } .header-tools .btn { display: none; } .header-tools { gap: 0.35rem; } .icon-btn { width: 38px; height: 38px; } .drawer { padding-top: 5rem; } .drawer__close { top: 1.1rem; } } @media (max-width: 22rem) { .logo { font-size: 1.3125rem; } .theme-toggle { display: none; } } /* -------------------------------------------------------------------------- 6. Hero -------------------------------------------------------------------------- */ .hero { position: relative; background: #000; } .hero .swiper { height: clamp(30rem, 82vh, 48rem); } .hero__slide { position: relative; overflow: hidden; } .hero__slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 7s var(--ease); } .hero__slide.swiper-slide-active img { transform: scale(1); } .hero__slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.72) 45%, rgba(0,0,0,1)); z-index: 2; } .hero__content { position: relative; z-index: 3; height: 100%; display: grid; align-content: center; justify-items: center; text-align: center; color: #fff; padding: 3rem var(--gutter); max-width: 54rem; margin-inline: auto; } .hero__eyebrow { font-size: 0.75rem; letter-spacing: 0.28em; text-transform: uppercase; margin-bottom: 1.4rem; color: rgba(255,255,255,0.82); font-weight: 700; } .hero__title { font-size: clamp(2.25rem, 6vw, 4.25rem); line-height: 1.05; color: #fff; margin-bottom: 1.1rem; text-shadow: 0 2px 30px rgba(0,0,0,0.35); } .hero__text { font-size: clamp(1rem, 2vw, 1.375rem); color: rgba(255,255,255,0.9); max-width: 40rem; margin-bottom: 2.2rem; } .hero__buttons { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; } .hero .swiper-button-prev, .hero .swiper-button-next { color: #fff; --swiper-navigation-size: 26px; } .hero .swiper-pagination-bullet { background: #fff; opacity: 0.45; } .hero .swiper-pagination-bullet-active { opacity: 1; } @media (max-width: 40rem) { /* Arrows would sit on top of the headline at this width; the dots are enough. */ .hero .swiper-button-next, .hero .swiper-button-prev { display: none; } } .hero__scroll { position: absolute; bottom: 1.6rem; left: 50%; transform: translateX(-50%); z-index: 3; color: rgba(255,255,255,0.85); font-size: 0.6875rem; letter-spacing: 0.22em; text-transform: uppercase; display: grid; justify-items: center; gap: 0.5rem; } .hero__scroll::after { content: ''; width: 1px; height: 34px; background: rgba(255,255,255,0.6); animation: scrollLine 2s var(--ease) infinite; } @keyframes scrollLine { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } } /* page banner (interior pages) */ .page-hero { position: relative; min-height: clamp(18rem, 44vh, 28rem); display: grid; align-items: center; background: #111; overflow: hidden; } .page-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; } .page-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.45), rgba(0,0,0,0.65)); } .page-hero__inner { position: relative; z-index: 2; color: #fff; padding-block: 4rem; } .page-hero h1 { color: #fff; margin-bottom: 0.6rem; } .page-hero p { color: rgba(255,255,255,0.86); max-width: 42rem; font-size: var(--step-1); } .breadcrumbs { font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.7); margin-bottom: 1.2rem; } .breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; } .breadcrumbs li { margin: 0; } .breadcrumbs li + li::before { content: '/'; margin-right: 0.5rem; color: rgba(255,255,255,0.45); } .breadcrumbs a:hover { color: #fff; } .breadcrumbs [aria-current] { color: #fff; } /* -------------------------------------------------------------------------- 7. Cards & media -------------------------------------------------------------------------- */ .media { position: relative; overflow: hidden; background: var(--bg-alt); } .media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease), filter 0.8s var(--ease); } .media--4x3 { aspect-ratio: 4 / 3; } .media--3x2 { aspect-ratio: 3 / 2; } .media--16x9 { aspect-ratio: 16 / 9; } .media--1x1 { aspect-ratio: 1 / 1; } .media--4x5 { aspect-ratio: 4 / 5; } .card { display: flex; flex-direction: column; background: var(--bg); height: 100%; } .card:hover .media img { transform: scale(1.06); } .card__body { padding: 1.4rem 0 0; } .card__meta { font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted-strong); margin-bottom: 0.7rem; display: flex; flex-wrap: wrap; gap: 0.75rem; } .card__title { font-size: var(--step-1); margin-bottom: 0.55rem; } .card__title a:hover { color: var(--muted-strong); } .card__text { color: var(--ink-soft); font-size: 0.9875rem; margin-bottom: 1rem; } .card__foot { margin-top: auto; } /* gallery tile */ .tile { position: relative; display: block; overflow: hidden; background: #000; } .tile img { transition: transform 0.9s var(--ease), opacity 0.6s var(--ease); } .tile__cap { position: absolute; inset: auto 0 0 0; padding: 1.5rem 1.25rem 1.15rem; background: linear-gradient(to top, rgba(0,0,0,0.78), rgba(0,0,0,0)); color: #fff; transform: translateY(12px); opacity: 0; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); } .tile__cap strong { display: block; font-size: 1.0625rem; } .tile__cap span { font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.72); } .tile:hover img, .tile:focus-visible img { transform: scale(1.07); opacity: 0.82; } .tile:hover .tile__cap, .tile:focus-visible .tile__cap { transform: translateY(0); opacity: 1; } /* category cards on the home page */ .cat-card { position: relative; display: block; overflow: hidden; background: #000; } .cat-card img { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; opacity: 0.78; transition: transform 0.9s var(--ease), opacity var(--dur) var(--ease); } .cat-card__label { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; color: #fff; padding: 1.5rem; background: linear-gradient(to bottom, rgba(0,0,0,0.15), rgba(0,0,0,0.42) 55%, rgba(0,0,0,0.6)); text-shadow: 0 1px 14px rgba(0,0,0,0.5); transition: background var(--dur) var(--ease); } .cat-card:hover .cat-card__label { background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.55)); } .cat-card__label strong { display: block; font-size: var(--step-2); line-height: 1.1; } .cat-card__label span { display: inline-block; margin-top: 0.8rem; font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; border-bottom: 1px solid rgba(255,255,255,0.5); padding-bottom: 0.3rem; opacity: 0; transform: translateY(8px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); } .cat-card:hover img { transform: scale(1.06); opacity: 0.55; } .cat-card:hover .cat-card__label span { opacity: 1; transform: translateY(0); } /* masonry gallery (CSS columns — no holes, mixed aspect ratios) */ .gallery { column-count: 1; column-gap: 1rem; } @media (min-width: 34rem) { .gallery { column-count: 2; } } @media (min-width: 56rem) { .gallery { column-count: 3; } } @media (min-width: 82rem) { .gallery { column-count: 4; } } .gallery__item { break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; margin-bottom: 1rem; } .gallery__item.is-hidden { display: none; } .gallery__item .tile { display: block; aspect-ratio: 3 / 2; } .gallery__item.is-tall .tile { aspect-ratio: 3 / 4; } .gallery__item .tile img { width: 100%; height: 100%; object-fit: cover; } .filters { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; justify-content: center; margin-bottom: 2.5rem; padding: 0; list-style: none; } .filters li { margin: 0; } .filter-btn { background: none; border: 0; cursor: pointer; font-family: var(--serif); font-size: 0.9375rem; color: var(--muted); padding: 0.4rem 0; position: relative; } .filter-btn::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: var(--ink); transition: width var(--dur) var(--ease); } .filter-btn:hover { color: var(--ink); } .filter-btn.is-active { color: var(--ink); font-weight: 700; } .filter-btn.is-active::after, .filter-btn:hover::after { width: 100%; } .filter-btn .count { font-size: 0.7em; color: var(--muted); vertical-align: super; margin-left: 2px; } /* -------------------------------------------------------------------------- 8. Feature rows / about -------------------------------------------------------------------------- */ .split { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); } .split--reverse > *:first-child { order: 2; } @media (max-width: 60rem) { .split--reverse > *:first-child { order: 0; } } .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 2rem; } .stat { text-align: center; } .stat__num { display: block; font-size: clamp(2.5rem, 5vw, 3.5rem); font-weight: 700; line-height: 1; } .stat__label { display: block; margin-top: 0.7rem; font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted-strong); } .section--ink .stat__label { color: #8f8b85; } .timeline { list-style: none; margin: 0; padding: 0; position: relative; } .timeline::before { content: ''; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 1px; background: var(--line-strong); } .timeline li { position: relative; padding: 0 0 2rem 2.6rem; margin: 0; } .timeline li::before { content: ''; position: absolute; left: 0; top: 7px; width: 15px; height: 15px; border-radius: 50%; background: var(--bg); border: 2px solid var(--ink); } .timeline .year { display: block; font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted-strong); margin-bottom: 0.35rem; } .timeline h3 { font-size: var(--step-1); margin-bottom: 0.35rem; } .timeline p { color: var(--ink-soft); font-size: 0.9875rem; margin: 0; } /* -------------------------------------------------------------------------- 9. Services -------------------------------------------------------------------------- */ .service { border-top: 1px solid var(--line); padding-top: 2rem; } .service__num { font-size: 0.75rem; letter-spacing: 0.2em; color: var(--muted); display: block; margin-bottom: 1rem; font-weight: 700; } .service__list { list-style: none; padding: 0; margin: 0 0 1.5rem; } .service__list li { position: relative; padding-left: 1.4rem; font-size: 0.9875rem; color: var(--ink-soft); } .service__list li::before { content: ''; position: absolute; left: 0; top: 0.65em; width: 7px; height: 1px; background: var(--ink); } .service__price { font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-strong); margin-bottom: 1.2rem; } .service__price strong { color: var(--ink); font-size: 1.0625rem; letter-spacing: 0; text-transform: none; } .process { counter-reset: step; } .process__item { position: relative; padding-top: 2.5rem; border-top: 1px solid var(--line); } .process__item::before { counter-increment: step; content: '0' counter(step); position: absolute; top: 1rem; left: 0; font-size: 0.75rem; letter-spacing: 0.2em; color: var(--muted); font-weight: 700; } /* accordion */ .accordion { border-top: 1px solid var(--line); } .accordion__item { border-bottom: 1px solid var(--line); } .accordion__btn { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; width: 100%; padding: 1.4rem 0; background: none; border: 0; cursor: pointer; text-align: left; font-family: var(--serif); font-size: var(--step-1); font-weight: 700; color: var(--ink); } .accordion__btn .plus { position: relative; width: 16px; height: 16px; flex: none; } .accordion__btn .plus::before, .accordion__btn .plus::after { content: ''; position: absolute; background: var(--ink); transition: transform var(--dur) var(--ease); } .accordion__btn .plus::before { inset: 7.5px 0 auto 0; height: 1px; } .accordion__btn .plus::after { inset: 0 7.5px auto 7.5px; width: 1px; height: 16px; } .accordion__btn[aria-expanded='true'] .plus::after { transform: rotate(90deg); opacity: 0; } .accordion__panel { overflow: hidden; max-height: 0; transition: max-height 0.45s var(--ease); } .accordion__panel-inner { padding: 0 0 1.5rem; color: var(--ink-soft); max-width: 52rem; } /* -------------------------------------------------------------------------- 10. Testimonials -------------------------------------------------------------------------- */ .quote-card { border: 1px solid var(--line); padding: 2.25rem; height: auto; background: var(--bg); } .quote-card__stars { color: var(--ink); letter-spacing: 0.2em; margin-bottom: 1.1rem; font-size: 0.9rem; } .quote-card blockquote { border: 0; padding: 0; margin: 0 0 1.5rem; font-size: var(--step-1); font-style: italic; color: var(--ink); } .quote-card__who { display: flex; align-items: center; gap: 0.9rem; } .quote-card__who .avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--bg-alt); display: grid; place-items: center; font-weight: 700; font-size: 0.9rem; color: var(--ink-soft); flex: none; } .quote-card__who strong { display: block; font-size: 0.9875rem; } .quote-card__who span { font-size: 0.8125rem; color: var(--muted-strong); } .testimonial-swiper { padding-bottom: 3.5rem !important; } .testimonial-swiper .swiper-slide { height: auto; } .testimonial-swiper .swiper-pagination-bullet { background: var(--ink); } /* -------------------------------------------------------------------------- 11. Journal / articles -------------------------------------------------------------------------- */ .article-head { max-width: var(--measure); margin-inline: auto; text-align: center; } .article-head h1 { font-size: clamp(2rem, 5vw, 3.25rem); } .article-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: center; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-strong); margin-bottom: 1.5rem; } .article-lead { font-size: var(--step-1); color: var(--ink-soft); } .article-figure { margin: 0 0 clamp(2rem, 5vw, 3.5rem); } .article-figure img { width: 100%; } .prose { max-width: var(--measure); margin-inline: auto; } .prose h2 { font-size: var(--step-2); margin-top: 2.75rem; } .prose h3 { font-size: var(--step-1); margin-top: 2rem; } .prose > h2:first-child { margin-top: 0; } .prose ul, .prose ol { padding-left: 1.35rem; } .prose li { margin-bottom: 0.55rem; } .callout { background: var(--bg-alt); border-left: 2px solid var(--ink); padding: 1.5rem 1.75rem; margin: 2rem 0; } .callout strong.callout__title { display: block; font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 0.6rem; color: var(--muted-strong); } .spec-table caption { text-align: left; font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted-strong); padding-bottom: 0.8rem; } .toc { position: sticky; top: calc(var(--header-h) + 1.5rem); border-left: 1px solid var(--line); padding-left: 1.5rem; font-size: 0.9375rem; } .toc strong { display: block; font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted-strong); margin-bottom: 1rem; } .toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; } .toc li { margin-bottom: 0.65rem; } .toc a { color: var(--muted-strong); display: block; line-height: 1.35; } .toc a:hover, .toc a.is-active { color: var(--ink); } .article-layout { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: minmax(0, 1fr); } @media (min-width: 64rem) { .article-layout { grid-template-columns: 15rem minmax(0, 1fr); } .article-layout .prose { margin-inline: 0; } } @media (max-width: 63.99rem) { .toc { display: none; } } .share { display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; } .share span { font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted-strong); } .tag-list { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0; } .tag-list li { margin: 0; } .tag { display: inline-block; font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; border: 1px solid var(--line-strong); padding: 0.35rem 0.75rem; color: var(--muted-strong); transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); } a.tag:hover { border-color: var(--ink); color: var(--ink); } .post-nav { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); border-top: 1px solid var(--line); padding-top: 2rem; } .post-nav__item span { display: block; font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted-strong); margin-bottom: 0.5rem; } .post-nav__item strong { font-size: var(--step-1); } .post-nav__item--next { text-align: right; } @media (max-width: 40rem) { .post-nav__item--next { text-align: left; } } .journal-search { display: flex; gap: 0.75rem; flex-wrap: wrap; max-width: 32rem; margin: 0 auto 2rem; } .journal-search input { flex: 1 1 14rem; font-family: var(--serif); font-size: 1rem; padding: 0.85rem 1rem; border: 1px solid var(--line-strong); background: var(--bg); color: var(--ink); } .journal-search input:focus { outline: none; border-color: var(--ink); } .empty-state { text-align: center; color: var(--muted-strong); padding: 3rem 0; } /* -------------------------------------------------------------------------- 12. Forms -------------------------------------------------------------------------- */ .form-grid { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } .field { display: flex; flex-direction: column; gap: 0.5rem; } .field--full { grid-column: 1 / -1; } .field > label:not(.checkbox) { font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; } .field > label .req { color: var(--muted); } .field input, .field select, .field textarea { font-family: var(--serif); font-size: 1rem; color: var(--ink); background: var(--bg); border: 1px solid var(--line-strong); padding: 0.9rem 1rem; width: 100%; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .field textarea { min-height: 11rem; resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(0,0,0,0.05); } .field input::placeholder, .field textarea::placeholder { color: var(--muted); } .field .hint { font-size: 0.8125rem; color: var(--muted-strong); } .field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: #b3261e; background: rgba(179,38,30,0.03); } .field.is-valid input, .field.is-valid select, .field.is-valid textarea { border-color: #2b7a3d; } .field__error { font-size: 0.8125rem; color: #b3261e; min-height: 0; display: none; } .field.is-invalid .field__error { display: block; } .checkbox { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.9375rem; color: var(--ink-soft); } .checkbox input { width: 18px; height: 18px; margin-top: 0.2rem; flex: none; accent-color: #111; } .checkbox.is-invalid { color: #b3261e; } .checkbox .req { color: var(--muted); } .checkbox a { border-bottom: 1px solid var(--line-strong); } .checkbox a:hover { border-bottom-color: var(--ink); } .field--full .checkbox + .field__error { margin-top: 0.4rem; } #contact-form .form-grid { margin-bottom: 0.5rem; } .form-status { border: 1px solid var(--line-strong); padding: 1rem 1.15rem; font-size: 0.9375rem; display: none; } .form-status.is-visible { display: block; } .form-status--error { border-color: #b3261e; color: #b3261e; } .honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; } .contact-detail { border-top: 1px solid var(--line); padding-top: 1.25rem; margin-bottom: 1.75rem; } .contact-detail span { display: block; font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted-strong); margin-bottom: 0.4rem; } .contact-detail a, .contact-detail p { font-size: var(--step-1); margin: 0; } .contact-detail a { border-bottom: 1px solid var(--line-strong); } .contact-detail a:hover { border-bottom-color: var(--ink); } /* -------------------------------------------------------------------------- 13. Footer -------------------------------------------------------------------------- */ .site-footer { border-top: 1px solid var(--line); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; font-size: 0.9875rem; } .footer-grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); margin-bottom: 3rem; } .footer-grid h3 { font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted-strong); margin-bottom: 1.1rem; font-weight: 700; } .footer-grid ul { list-style: none; margin: 0; padding: 0; } .footer-grid li { margin-bottom: 0.55rem; } .footer-grid a { color: var(--ink-soft); } .footer-grid a:hover { color: var(--ink); } .footer-brand p { color: var(--ink-soft); max-width: 22rem; } .social { display: flex; gap: 0.75rem; list-style: none; padding: 0; margin: 1.25rem 0 0; } .social li { margin: 0; } .social a { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line-strong); transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); } .social a:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); } .social svg { width: 17px; height: 17px; fill: currentColor; } .footer-bottom { border-top: 1px solid var(--line); padding-top: 1.6rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; font-size: 0.8125rem; color: var(--muted-strong); } .footer-bottom ul { display: flex; flex-wrap: wrap; gap: 1.25rem; list-style: none; margin: 0; padding: 0; } .footer-bottom li { margin: 0; } .footer-bottom a:hover { color: var(--ink); } .newsletter { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1rem; } .newsletter input { flex: 1 1 12rem; font-family: var(--serif); font-size: 0.9375rem; padding: 0.75rem 0.9rem; border: 1px solid var(--line-strong); background: var(--bg); color: var(--ink); } .newsletter input:focus { outline: none; border-color: var(--ink); } .newsletter .msg { flex-basis: 100%; font-size: 0.8125rem; color: var(--muted-strong); min-height: 1.2em; } .back-to-top { position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); width: 46px; height: 46px; display: grid; place-items: center; background: var(--ink); color: var(--bg); border: 0; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur); z-index: 90; } .back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .back-to-top svg { width: 18px; height: 18px; fill: currentColor; } /* -------------------------------------------------------------------------- 14. CTA band -------------------------------------------------------------------------- */ .cta-band { position: relative; overflow: hidden; background: #111; color: #fff; } .cta-band__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.32; } .cta-band__inner { position: relative; z-index: 2; text-align: center; padding-block: clamp(4rem, 9vw, 7rem); } .cta-band h2 { color: #fff; font-size: clamp(1.85rem, 4.5vw, 3rem); } .cta-band p { color: rgba(255,255,255,0.85); max-width: 40rem; margin-inline: auto; font-size: var(--step-1); } .cta-band .btn-row { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; } /* -------------------------------------------------------------------------- 15. Misc / utilities -------------------------------------------------------------------------- */ .notice-strip { background: var(--bg-alt); font-size: 0.8125rem; letter-spacing: 0.05em; text-align: center; padding: 0.65rem 1rem; color: var(--ink-soft); border-bottom: 1px solid var(--line); } .notice-strip a { border-bottom: 1px solid var(--line-strong); } .error-page { text-align: center; padding-block: clamp(5rem, 14vw, 10rem); } .error-page__code { font-size: clamp(5rem, 20vw, 12rem); line-height: 0.9; font-weight: 700; letter-spacing: -0.04em; margin-bottom: 1rem; } .thanks-mark { width: 84px; height: 84px; margin: 0 auto 2rem; border: 1px solid var(--ink); border-radius: 50%; display: grid; place-items: center; } .thanks-mark svg { width: 34px; height: 34px; fill: none; stroke: var(--ink); stroke-width: 1.5; } .thanks-mark svg path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: tick 0.8s var(--ease) 0.25s forwards; } @keyframes tick { to { stroke-dashoffset: 0; } } .summary-box { border: 1px solid var(--line); padding: 1.75rem; text-align: left; max-width: 34rem; margin: 0 auto; } .summary-box dl { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem 1.5rem; margin: 0; } .summary-box dt { font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted-strong); padding-top: 0.25em; } .summary-box dd { margin: 0; } /* AOS fallback — if the library fails to load nothing stays invisible */ .no-aos [data-aos] { opacity: 1 !important; transform: none !important; } /* On narrow screens turn horizontal reveals into vertical ones, so the pre-animation offset can never push the layout sideways. */ @media (max-width: 64rem) { [data-aos='fade-left']:not(.aos-animate), [data-aos='fade-right']:not(.aos-animate), [data-aos='fade-up-left']:not(.aos-animate), [data-aos='fade-up-right']:not(.aos-animate) { transform: translate3d(0, 28px, 0); } } /* GLightbox tweaks */ .glightbox-clean .gslide-description { background: #111; } .glightbox-clean .gdesc-inner { padding: 18px 22px; } .glightbox-clean .gslide-title { font-family: var(--serif); color: #fff; font-size: 1rem; margin-bottom: 4px; } .glightbox-clean .gslide-desc { font-family: var(--serif); color: #aaa; font-size: 0.85rem; } /* Swiper base tweaks */ .swiper { width: 100%; } :root { --swiper-theme-color: #111; --swiper-navigation-size: 24px; } [data-theme='dark'] { --swiper-theme-color: #f2f0ed; } /* Swiper ships an icon font for its arrows; we use our own SVG instead so the controls match the rest of the site and never depend on a webfont. */ .swiper-button-next::after, .swiper-button-prev::after { display: none !important; content: '' !important; } .swiper-button-next, .swiper-button-prev { width: 46px; height: 46px; margin-top: -23px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.4); backdrop-filter: blur(3px); transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); } .swiper-button-next svg, .swiper-button-prev svg { width: 18px; height: 18px; fill: currentColor; } .hero .swiper-button-next:hover, .hero .swiper-button-prev:hover { background: rgba(255, 255, 255, 0.9); color: #111; border-color: #fff; } /* Arrows sitting on a light background (testimonials, related posts) */ .slider-nav { display: flex; gap: 0.6rem; justify-content: center; margin-top: 2rem; } .slider-nav button { position: static; width: 44px; height: 44px; margin: 0; background: transparent; border: 1px solid var(--line-strong); color: var(--ink); backdrop-filter: none; cursor: pointer; } .slider-nav button:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); } .slider-nav button.swiper-button-disabled { opacity: 0.3; pointer-events: none; } /* print */ @media print { .site-header, .site-footer, .back-to-top, .scroll-progress, .cta-band, .drawer, .overlay { display: none !important; } body { color: #000; background: #fff; } .prose { max-width: none; } }