/* ========================================================================== ASPEN — brand studio site Hand-built. No frameworks. One stylesheet. No image dependencies: every texture below is generated in CSS or inline SVG. 1. Tokens 6. Cards & work grid 2. Texture layers 7. Rows, tiers, tables 3. Reset & base 8. Case study 4. Type 9. Forms 5. Header & nav 10. Footer, responsive ========================================================================== */ /* ========================================================================== 1. TOKENS ========================================================================== */ :root { /* --- Ink (backgrounds) --- */ --ink: #0A0A09; --ink-2: #0F0F0D; --ink-3: #151512; --ink-4: #1C1C18; /* --- Foreground --- */ --bone: #F1ECE0; --fg: var(--bone); --muted: #8E8A7E; --muted-dim:#6B6860; --line: #24241F; --line-2: #33332C; /* --- Palette --- */ --clay: #0E5C63; /* deep teal — primary */ --brand: #2E9AA4; /* fixed brand accent, never varies by page theme */ --brand-dk: #0E5C63; /* light-mode variant, clears AA on bone */ --teal: #2F7078; /* deep water */ --ochre: #C9973F; /* sand, brass */ --olive: #6E7A52; /* wadi scrub */ --plum: #7A4A5C; /* dusk */ --clay-lt: #2E9AA4; --teal-lt: #4E9AA3; --ochre-lt: #E0B563; /* --- Active theme (overridden per page) --- */ --theme: var(--clay); --theme-lt: var(--clay-lt); --theme-rgb: 14, 92, 99; --btn-bg: #2E9AA4; /* ink text on this clears WCAG AA */ --accent: var(--theme); /* --card-rgb is set per-card inline; every use has a var() fallback to --theme-rgb */ /* --- Type --- */ --display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif; --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* --- Space --- */ --gutter: 24px; --max: 1280px; --nav-h: 72px; --ease: cubic-bezier(0.22, 1, 0.36, 1); } /* --- Per-page themes: --- */ [data-theme="clay"] { --theme: var(--clay); --theme-lt: var(--clay-lt); --theme-rgb: 14, 92, 99; --btn-bg: #2E9AA4; } [data-theme="teal"] { --theme: var(--teal); --theme-lt: var(--teal-lt); --theme-rgb: 47, 112, 120; --btn-bg: #4C848B; } [data-theme="ochre"] { --theme: var(--ochre); --theme-lt: var(--ochre-lt); --theme-rgb: 201, 151, 63; --btn-bg: #C9973F; } [data-theme="olive"] { --theme: var(--olive); --theme-lt: #93A173; --theme-rgb: 110, 122, 82; --btn-bg: #747F59; } [data-theme="plum"] { --theme: var(--plum); --theme-lt: #A9738A; --theme-rgb: 122, 74, 92; --btn-bg: #977280; } /* ========================================================================== 2. TEXTURE LAYERS Grain, grids and halftones — all procedural, zero HTTP requests. ========================================================================== */ /* Film grain over the entire document */ body::after { content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0.055; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Reusable texture utilities */ .tex-dots { background-image: radial-gradient(rgba(241,236,224,0.09) 1px, transparent 1px); background-size: 22px 22px; } .tex-grid { background-image: linear-gradient(rgba(241,236,224,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(241,236,224,0.045) 1px, transparent 1px); background-size: 64px 64px; } .tex-lines { background-image: repeating-linear-gradient( -45deg, rgba(241,236,224,0.035) 0 1px, transparent 1px 9px); } .tex-halftone { background-image: radial-gradient(rgba(var(--theme-rgb), 0.30) 1.6px, transparent 1.7px); background-size: 12px 12px; } /* Coloured atmospheric fields */ .field { position: relative; isolation: isolate; } .field::before { content: ""; position: absolute; inset: -10% -20%; z-index: -1; pointer-events: none; background: radial-gradient(52% 60% at 12% 18%, rgba(var(--theme-rgb), 0.20), transparent 62%), radial-gradient(46% 52% at 88% 76%, rgba(47, 112, 120, 0.16), transparent 60%); filter: blur(24px); } .field--soft::before { opacity: 0.55; } /* A raised, textured panel */ .panel { position: relative; background: radial-gradient(120% 90% at 0% 0%, rgba(var(--theme-rgb), 0.10), transparent 55%), linear-gradient(180deg, var(--ink-3), var(--ink-2)); border: 1px solid var(--line); overflow: hidden; } .panel::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(241,236,224,0.055) 1px, transparent 1px); background-size: 20px 20px; opacity: 0.9; } .panel > * { position: relative; } /* ========================================================================== 3. RESET & BASE ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { position: relative; background: var(--ink); color: var(--fg); font-family: var(--display); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } /* Warm vignette so the page isn't a flat black rectangle */ body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(80% 55% at 50% -8%, rgba(var(--theme-rgb), 0.13), transparent 70%), radial-gradient(70% 60% at 100% 100%, rgba(47, 112, 120, 0.10), transparent 68%), radial-gradient(60% 50% at 0% 88%, rgba(201, 151, 63, 0.07), transparent 66%); } img, video { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } ::selection { background: var(--theme); color: #0A0A09; } :focus-visible { outline: 2px solid var(--theme-lt); outline-offset: 3px; } .skip { position: absolute; left: -9999px; top: 0; z-index: 10000; background: var(--bone); color: var(--ink); padding: 12px 20px; font-family: var(--mono); font-size: 12px; } .skip:focus { left: 12px; top: 12px; } /* ========================================================================== 4. LAYOUT & TYPE ========================================================================== */ .wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); } .wrap--narrow { max-width: 860px; } .section { padding: 96px 0; position: relative; } .section--tight { padding: 64px 0; } .section--tint { background: linear-gradient(180deg, rgba(var(--theme-rgb),0.055), transparent 42%), var(--ink-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .rule { height: 1px; border: 0; background: linear-gradient(90deg, var(--line), var(--line-2), var(--line)); } .rule--theme { background: linear-gradient(90deg, var(--theme), transparent 70%); height: 2px; } .mono { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--theme-lt); font-weight: 500; display: flex; align-items: center; gap: 12px; margin-bottom: 32px; } .eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--theme); flex: none; } .eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--line); } h1, h2, h3, h4 { font-weight: 500; letter-spacing: -0.03em; line-height: 1.05; } .h-xl { font-size: clamp(44px, 8.5vw, 116px); } .h-lg { font-size: clamp(34px, 5.5vw, 68px); } .h-md { font-size: clamp(26px, 3.4vw, 42px); } .h-sm { font-size: clamp(20px, 2.2vw, 26px); } /* Gradient headline treatment */ .grad { background: linear-gradient(102deg, var(--bone) 32%, var(--theme-lt) 72%, var(--ochre-lt)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .lede { font-size: clamp(19px, 2.1vw, 25px); line-height: 1.45; letter-spacing: -0.015em; color: var(--fg); max-width: 62ch; } .body { color: var(--muted); max-width: 68ch; } .body p + p { margin-top: 1.1em; } .body strong { color: var(--fg); font-weight: 500; } .body a { color: var(--theme-lt); text-decoration: underline; text-underline-offset: 3px; } .dim { color: var(--muted); } .accent { color: var(--theme-lt); } .pull { font-size: clamp(22px, 2.6vw, 32px); line-height: 1.3; letter-spacing: -0.025em; color: var(--fg); max-width: 24ch; padding-left: 24px; border-left: 2px solid var(--theme); } /* ========================================================================== 5. HEADER & NAV ========================================================================== */ .nav { position: sticky; top: 0; z-index: 100; height: var(--nav-h); display: flex; align-items: center; background: rgba(10, 10, 9, 0.78); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-bottom: 1px solid var(--line); } .nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, var(--theme), transparent 55%); opacity: 0.7; } .nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); } .logo { font-weight: 700; font-size: 21px; letter-spacing: -0.06em; } .logo span { color: var(--brand); } .nav__links { display: flex; align-items: center; gap: 24px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; } .nav__links a { color: var(--muted); transition: color 0.2s var(--ease); } .nav__links a:hover { color: var(--fg); } .nav__links a[aria-current="page"] { color: var(--theme-lt); } .nav__cta { border: 1px solid var(--line-2); padding: 9px 16px; border-radius: 999px; background: rgba(var(--theme-rgb), 0.10); transition: border-color 0.2s var(--ease), background 0.2s var(--ease); } .nav__cta:hover { border-color: var(--theme); background: rgba(var(--theme-rgb), 0.20); } .nav__toggle { display: none; } /* ========================================================================== 6. BUTTONS ========================================================================== */ .btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; padding: 15px 26px; border-radius: 999px; border: 1px solid var(--bone); background: var(--bone); color: var(--ink); transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); } .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -12px rgba(241,236,224,0.4); } .btn--theme { background: var(--btn-bg); border-color: var(--btn-bg); color: #0A0A09; } .btn--theme:hover { box-shadow: 0 12px 34px -12px rgba(var(--theme-rgb), 0.75); } .btn--ghost { background: transparent; color: var(--fg); border-color: var(--line-2); } .btn--ghost:hover { border-color: var(--theme); box-shadow: none; } .btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; } /* ========================================================================== 7. HERO ========================================================================== */ .hero { padding: clamp(72px, 12vw, 150px) 0 clamp(56px, 8vw, 96px); position: relative; } .hero__title { max-width: 16ch; } .hero__sub { margin-top: 36px; } .hero__meta { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); } .hero__meta .mono { display: flex; align-items: center; gap: 8px; } .hero__meta .mono::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--theme); flex: none; } /* ========================================================================== 8. CARDS & WORK GRID ========================================================================== */ .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; } .grid--3 { grid-template-columns: repeat(3, 1fr); } .card { position: relative; display: block; overflow: hidden; background: linear-gradient(180deg, var(--ink-3), var(--ink-2)); border: 1px solid var(--line); transition: border-color 0.3s var(--ease), transform 0.4s var(--ease); } .card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 55%, rgba(var(--card-rgb, var(--theme-rgb)), 0.16)); opacity: 0; transition: opacity 0.4s var(--ease); } .card:hover { border-color: rgba(var(--card-rgb, var(--theme-rgb)), 0.5); transform: translateY(-3px); } .card:hover::after { opacity: 1; } .card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ink-2); } .card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); } .card:hover .card__media img { transform: scale(1.04); } .card__body { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 22px 24px 26px; border-top: 1px solid var(--line); position: relative; z-index: 1; } .card__name { font-size: 21px; letter-spacing: -0.03em; } .card__disc { margin-top: 6px; } /* Colour-coded strip at the top of each card */ .card__strip { height: 3px; background: rgb(var(--card-rgb, var(--theme-rgb))); } .tag { display: inline-block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; white-space: nowrap; border: 1px solid var(--line-2); color: var(--muted); } .tag--lab { border-color: rgba(var(--card-rgb, var(--theme-rgb)), 0.45); color: rgb(var(--card-rgb, var(--theme-rgb))); background: rgba(var(--card-rgb, var(--theme-rgb)), 0.08); filter: brightness(1.35); } /* ========================================================================== 9. PLACEHOLDER IMAGE SLOT ========================================================================== */ .slot { position: relative; display: flex; align-items: center; justify-content: center; min-height: 260px; height: 100%; background: radial-gradient(90% 80% at 30% 20%, rgba(var(--card-rgb, var(--theme-rgb)), 0.16), transparent 60%), repeating-linear-gradient(45deg, var(--ink-3) 0 12px, var(--ink-2) 12px 24px); border: 1px dashed var(--line-2); color: var(--muted-dim); font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; text-align: center; padding: 24px; } /* ========================================================================== 10. NOTICE ========================================================================== */ .notice { position: relative; border: 1px solid var(--line); border-left: 2px solid var(--theme); background: radial-gradient(120% 100% at 0% 0%, rgba(var(--theme-rgb), 0.10), transparent 58%), var(--ink-2); padding: 26px 28px; max-width: 74ch; } .notice p { color: var(--muted); font-size: 15.5px; } .notice p + p { margin-top: 0.9em; } .notice strong { color: var(--fg); font-weight: 500; } /* ========================================================================== 11. COLUMNS & ROWS ========================================================================== */ .cols { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; } .cols--even { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cols--sticky > :first-child { position: sticky; top: calc(var(--nav-h) + 40px); } .rows { border-top: 1px solid var(--line); } .row { display: grid; grid-template-columns: 56px minmax(0, 4fr) minmax(0, 6fr); gap: 28px; padding: 30px 0; border-bottom: 1px solid var(--line); align-items: start; transition: background 0.3s var(--ease); } .row:hover { background: linear-gradient(90deg, rgba(var(--theme-rgb), 0.05), transparent 60%); } .row__num { font-family: var(--mono); font-size: 11px; color: var(--theme); padding-top: 6px; } .row__title { font-size: 22px; letter-spacing: -0.03em; } .row__desc { color: var(--muted); font-size: 15.5px; } .row__desc ul { list-style: none; margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; } .row__desc li { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line-2); border-radius: 999px; padding: 4px 9px; background: rgba(var(--theme-rgb), 0.05); } /* ========================================================================== 12. PRICING TIERS ========================================================================== */ .tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .tier { position: relative; display: flex; flex-direction: column; background: linear-gradient(180deg, var(--ink-3), var(--ink-2)); border: 1px solid var(--line); padding: 34px 30px 36px; overflow: hidden; } .tier::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--line-2); } .tier--feature { border-color: rgba(var(--theme-rgb), 0.45); } .tier--feature::before { background: linear-gradient(90deg, var(--theme), var(--ochre)); } .tier--feature::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(90% 60% at 50% 0%, rgba(var(--theme-rgb), 0.13), transparent 62%); } .tier > * { position: relative; z-index: 1; } .tier__name { font-size: 24px; letter-spacing: -0.03em; } .tier__price { font-family: var(--mono); font-size: 30px; letter-spacing: -0.04em; margin: 20px 0 4px; color: var(--fg); } .tier--feature .tier__price { color: var(--theme-lt); } .tier__price small { font-size: 12px; letter-spacing: 0.1em; color: var(--muted); } .tier__meta { margin-bottom: 26px; } .tier ul { list-style: none; display: flex; flex-direction: column; gap: 11px; flex: 1; } .tier li { position: relative; padding-left: 20px; font-size: 15px; color: var(--muted); line-height: 1.45; } .tier li::before { content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 1px; background: var(--muted-dim); } .tier li.is-key { color: var(--fg); } .tier li.is-key::before { background: var(--theme); width: 9px; height: 2px; } .tier .btn { margin-top: 30px; justify-content: center; } /* ========================================================================== 13. CASE STUDY ========================================================================== */ .cs-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 28px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .cs-meta div p { font-size: 15px; margin-top: 8px; } .cs-meta div .mono { color: var(--theme-lt); } .cs-block { padding: 88px 0; border-bottom: 1px solid var(--line); position: relative; } .cs-block:last-of-type { border-bottom: 0; } .figure { margin-top: 48px; } .figure figcaption { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-dim); margin-top: 14px; } .swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 40px; } .swatch { aspect-ratio: 1 / 1.15; display: flex; align-items: flex-end; padding: 16px; border: 1px solid rgba(241,236,224,0.10); } .swatch span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; } .pager { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 52px 0; border-top: 1px solid var(--line); } .pager a:last-child { transition: color 0.2s var(--ease); } .pager a:last-child:hover { color: var(--theme-lt); } /* ========================================================================== 14. FOUNDER ========================================================================== */ .founder { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; align-items: start; } .founder__photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ink-2); border: 1px solid var(--line); } .founder__photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(200deg, transparent 45%, rgba(var(--theme-rgb), 0.22)); } .founder__photo img { width: 100%; height: 100%; object-fit: cover; } /* ========================================================================== 15. JOURNAL ========================================================================== */ .posts { border-top: 1px solid var(--line); } .post-link { display: grid; grid-template-columns: 130px minmax(0, 1fr) 140px; gap: 32px; align-items: baseline; padding: 32px 0; border-bottom: 1px solid var(--line); transition: background 0.3s var(--ease), padding-left 0.3s var(--ease); } .post-link:hover { background: linear-gradient(90deg, rgba(var(--theme-rgb), 0.07), transparent 60%); padding-left: 12px; } .post-link h3 { font-size: clamp(21px, 2.4vw, 28px); letter-spacing: -0.03em; } .post-link p { color: var(--muted); font-size: 15px; margin-top: 8px; max-width: 60ch; } .prose { max-width: 68ch; } .prose > * + * { margin-top: 1.15em; } .prose p { color: var(--muted); } .prose strong { color: var(--fg); font-weight: 500; } .prose h2 { font-size: clamp(24px, 3vw, 34px); margin-top: 2em; color: var(--fg); } .prose h3 { font-size: clamp(19px, 2.2vw, 23px); margin-top: 1.7em; color: var(--fg); } .prose ul, .prose ol { padding-left: 22px; color: var(--muted); } .prose li + li { margin-top: 0.5em; } .prose li::marker { color: var(--theme); } .prose blockquote { border-left: 2px solid var(--theme); padding-left: 22px; font-size: 20px; line-height: 1.4; color: var(--fg); letter-spacing: -0.02em; } .prose hr { height: 1px; border: 0; background: var(--line); margin: 2.4em 0; } .prose a { color: var(--theme-lt); text-decoration: underline; text-underline-offset: 3px; } .prose code { font-family: var(--mono); font-size: 0.88em; background: var(--ink-3); border: 1px solid var(--line); padding: 2px 6px; border-radius: 3px; color: var(--theme-lt); } /* ========================================================================== 16. FORMS ========================================================================== */ .field-group { display: flex; flex-direction: column; gap: 9px; margin-bottom: 22px; } .field-group label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .field-group input, .field-group select, .field-group textarea { font-family: var(--display); font-size: 16px; color: var(--fg); background: var(--ink-2); border: 1px solid var(--line-2); border-radius: 4px; padding: 14px 16px; width: 100%; transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease); } .field-group input:focus, .field-group select:focus, .field-group textarea:focus { border-color: var(--theme); outline: none; box-shadow: 0 0 0 3px rgba(var(--theme-rgb), 0.16); } .field-group textarea { min-height: 150px; resize: vertical; } .field-group select { appearance: none; cursor: pointer; } ::placeholder { color: var(--muted-dim); } /* Legacy alias so existing markup keeps working */ .field:not(.field--soft) > label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .contact-list { list-style: none; } .contact-list li { padding: 20px 0; border-bottom: 1px solid var(--line); } .contact-list li:first-child { border-top: 1px solid var(--line); } .contact-list a { font-size: 19px; letter-spacing: -0.02em; transition: color 0.2s var(--ease); } .contact-list a:hover { color: var(--theme-lt); } /* ========================================================================== 17. CTA BAND ========================================================================== */ .cta { position: relative; overflow: hidden; border-top: 1px solid var(--line); padding: clamp(72px, 10vw, 128px) 0; text-align: center; background: radial-gradient(70% 130% at 50% 0%, rgba(var(--theme-rgb), 0.16), transparent 68%), var(--ink-2); } .cta::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(var(--theme-rgb), 0.22) 1.4px, transparent 1.5px); background-size: 14px 14px; -webkit-mask-image: radial-gradient(60% 70% at 50% 50%, #000, transparent 72%); mask-image: radial-gradient(60% 70% at 50% 50%, #000, transparent 72%); opacity: 0.55; } .cta > * { position: relative; } .cta .h-lg { max-width: 18ch; margin: 0 auto; } .cta .eyebrow { justify-content: center; } .cta .eyebrow::after { display: none; } .cta .btn-row { justify-content: center; } /* ========================================================================== 18. FOOTER ========================================================================== */ .foot { border-top: 1px solid var(--line); padding: 56px 0 44px; background: linear-gradient(180deg, transparent, rgba(var(--theme-rgb), 0.05)); } .foot__grid { display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2fr)); gap: 40px; margin-bottom: 48px; } .foot__grid ul { list-style: none; display: flex; flex-direction: column; gap: 11px; margin-top: 18px; } .foot__grid ul a { font-size: 15px; color: var(--muted); transition: color 0.2s var(--ease); } .foot__grid ul a:hover { color: var(--theme-lt); } .foot__base { display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; align-items: center; padding-top: 28px; border-top: 1px solid var(--line); } /* ========================================================================== 19. RESPONSIVE ========================================================================== */ @media (max-width: 1000px) { .foot__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 900px) { .cols, .founder { grid-template-columns: 1fr; gap: 40px; } .cols--sticky > :first-child { position: static; } .tiers, .grid, .grid--3 { grid-template-columns: 1fr; } .cs-meta { grid-template-columns: repeat(2, 1fr); } .row { grid-template-columns: 32px 1fr; } .row__desc { grid-column: 2; } .post-link { grid-template-columns: 1fr; gap: 10px; } .section { padding: 72px 0; } .cs-block { padding: 64px 0; } } @media (max-width: 640px) { body { font-size: 16px; } .nav__links { display: none; } .nav__links.is-open { display: flex; position: absolute; top: var(--nav-h); left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: 0; background: var(--ink); border-bottom: 1px solid var(--line); padding: 8px var(--gutter) 22px; } .nav__links.is-open a { padding: 13px 0; width: 100%; } .nav__links.is-open .nav__cta { margin-top: 10px; text-align: center; } .nav__toggle { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); } .swatches { grid-template-columns: repeat(2, 1fr); } .foot__grid { grid-template-columns: 1fr; } .cs-meta { grid-template-columns: 1fr; gap: 18px; } .pager { flex-direction: column; align-items: flex-start; } .pull { font-size: 20px; } } /* ========================================================================== 20. MOTION PREFERENCES ========================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } } @media print { body::before, body::after, .nav, .cta, .foot { display: none; } body { background: #fff; color: #000; } } /* ========================================================================== 21. LANDING PAGE COMPONENTS Used only on index.html so the home page doesn't share the interior pages' hero → cols → rows rhythm. ========================================================================== */ /* --- Kinetic stacked display type --- */ .kinetic { display: flex; flex-direction: column; margin: 0; } .kinetic span { display: block; font-size: clamp(46px, 11.5vw, 158px); line-height: 0.86; letter-spacing: -0.055em; font-weight: 500; text-transform: none; } .kinetic span:nth-child(2) { padding-left: clamp(0px, 7vw, 120px); } .kinetic span:nth-child(3) { padding-left: clamp(0px, 3vw, 52px); } .kinetic span:nth-child(4) { padding-left: clamp(0px, 11vw, 190px); } .kinetic em { font-style: normal; color: var(--theme-lt); } .k-hero { padding: clamp(56px, 9vw, 110px) 0 clamp(40px, 6vw, 72px); } .coords { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; margin-bottom: clamp(28px, 5vw, 54px); } .coords span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); } .coords span:first-child { color: var(--theme-lt); } /* Floating plates inside the hero */ .plates { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; margin-top: clamp(32px, 5vw, 64px); } .plate { position: relative; overflow: hidden; border: 1px solid var(--line); } .plate:nth-child(1) { grid-column: 1 / 6; aspect-ratio: 4/3; } .plate:nth-child(2) { grid-column: 6 / 10; aspect-ratio: 1/1; margin-top: 40px; } .plate:nth-child(3) { grid-column: 10 / 13; aspect-ratio: 3/4; } /* --- Marquee --- */ .marquee { overflow: hidden; white-space: nowrap; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: linear-gradient(90deg, rgba(var(--theme-rgb),0.09), transparent 55%, rgba(201,151,63,0.07)); padding: 20px 0; } .marquee__track { display: inline-flex; animation: slide 42s linear infinite; } .marquee__track > span { font-size: clamp(22px, 3.2vw, 40px); letter-spacing: -0.03em; padding-right: 28px; color: var(--muted); } .marquee__track > span b { color: var(--fg); font-weight: 500; } .marquee__track > span i { font-style: normal; color: var(--theme); padding: 0 12px; } @keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } } .marquee:hover .marquee__track { animation-play-state: paused; } /* --- Big service blocks --- */ .svc { display: grid; grid-template-columns: minmax(0,4fr) minmax(0,5fr) auto; gap: 44px; align-items: start; padding: clamp(38px, 5vw, 62px) 0; border-bottom: 1px solid var(--line); transition: background 0.35s var(--ease); } .svc:first-of-type { border-top: 1px solid var(--line); } .svc:hover { background: linear-gradient(90deg, rgba(var(--theme-rgb),0.06), transparent 65%); } .svc__n { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; color: var(--theme-lt); } .svc__t { font-size: clamp(34px, 5.2vw, 66px); letter-spacing: -0.045em; line-height: 0.95; margin-top: 14px; } .svc__list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; } .svc__list li { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid var(--line-2); border-radius: 999px; padding: 7px 13px; color: var(--muted); background: rgba(var(--theme-rgb), 0.05); } .svc__go { display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid var(--line-2); border-radius: 50%; font-size: 19px; color: var(--muted); flex: none; transition: 0.3s var(--ease); } .svc:hover .svc__go { border-color: var(--theme); color: var(--theme-lt); transform: rotate(-45deg); } /* --- Asymmetric work feature --- */ .feature { display: grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr); gap: 6px; align-items: stretch; } .feature__media { position: relative; overflow: hidden; border: 1px solid var(--line); min-height: 380px; } .feature__body { display: flex; flex-direction: column; justify-content: space-between; border: 1px solid var(--line); background: radial-gradient(120% 90% at 100% 0%, rgba(var(--card-rgb, var(--theme-rgb)),0.14), transparent 58%), var(--ink-3); padding: 34px 32px 30px; } .feature__title { font-size: clamp(32px, 4.4vw, 54px); letter-spacing: -0.045em; line-height: 0.98; } .mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 6px; } .mini a { display: block; border: 1px solid var(--line); background: linear-gradient(180deg, var(--ink-3), var(--ink-2)); transition: border-color 0.3s var(--ease), transform 0.35s var(--ease); } .mini a:hover { border-color: rgba(var(--card-rgb, var(--theme-rgb)),0.55); transform: translateY(-3px); } .mini .slot { min-height: 150px; aspect-ratio: auto; } .mini__cap { padding: 14px 16px 17px; border-top: 1px solid var(--line); } .mini__cap h3 { font-size: 16px; letter-spacing: -0.02em; } /* --- Oversized statement --- */ .statement { font-size: clamp(26px, 3.9vw, 52px); line-height: 1.14; letter-spacing: -0.04em; max-width: 20ch; color: var(--fg); } .statement b { color: var(--theme-lt); font-weight: 500; } /* --- Availability band --- */ .avail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .avail div { border: 1px solid var(--line); padding: 26px 24px 28px; background: linear-gradient(180deg, var(--ink-3), var(--ink-2)); } .avail strong { display: block; font-size: clamp(26px, 3.4vw, 40px); letter-spacing: -0.04em; font-weight: 500; color: var(--theme-lt); } .avail p { margin-top: 10px; font-size: 14px; color: var(--muted); } /* --- Landing responsive --- */ @media (max-width: 900px) { .svc { grid-template-columns: 1fr; gap: 22px; } .svc__go { display: none; } .feature { grid-template-columns: 1fr; } .feature__media { min-height: 260px; } .mini { grid-template-columns: repeat(2, 1fr); } .avail { grid-template-columns: repeat(2, 1fr); } .plates { grid-template-columns: repeat(6, 1fr); } .plate:nth-child(1) { grid-column: 1 / 5; } .plate:nth-child(2) { grid-column: 5 / 7; margin-top: 0; } .plate:nth-child(3) { display: none; } .kinetic span:nth-child(n) { padding-left: 0; } } @media (max-width: 640px) { .avail, .mini { grid-template-columns: 1fr; } } /* ========================================================================== 22. LIGHT MODE Toggled by [data-mode] on . Defaults to the visitor's OS setting. ========================================================================== */ html[data-mode="light"] { --ink: #F4F1E9; --ink-2: #EDE9DF; --ink-3: #E6E1D5; --ink-4: #DED8CA; --bone: #16150F; --fg: var(--bone); --muted: #5E5B52; --muted-dim: #86837A; --line: #D9D3C5; --line-2: #C6BFAE; } html[data-mode="light"] body::after { mix-blend-mode: multiply; opacity: 0.05; } html[data-mode="light"] .btn { background: var(--bone); border-color: var(--bone); color: #F4F1E9; } html[data-mode="light"] .btn--ghost { background: transparent; color: var(--bone); border-color: var(--line-2); } html[data-mode="light"] .btn--theme { background: var(--theme); border-color: var(--theme); color: #F4F1E9; } html[data-mode="light"] ::selection { background: var(--theme); color: #F4F1E9; } html[data-mode="light"] .nav { background: rgba(244, 241, 233, 0.8); } html[data-mode="light"] .nav__links.is-open { background: var(--ink); } html[data-mode="light"] .slot { color: var(--muted-dim); } /* Turquoise is bright. Darken it on the bone background so text keeps AA. */ html[data-mode="light"] { --brand: var(--brand-dk); } html[data-mode="light"] [data-theme="clay"] { --theme: #0E5C63; --theme-lt: #12707A; --btn-bg: #0E5C63; } /* ========================================================================== 23. RESTRAINT PASS Studio chrome runs near-monochrome; colour is reserved for project work. ========================================================================== */ body::before { background: radial-gradient(90% 60% at 50% -10%, rgba(var(--theme-rgb), 0.055), transparent 72%), radial-gradient(70% 60% at 100% 100%, rgba(140,140,130, 0.05), transparent 70%); } .eyebrow { color: var(--muted); } .eyebrow::before { background: var(--muted-dim); width: 26px; } .grad { background: none; -webkit-text-fill-color: currentColor; color: var(--fg); } .kinetic em { color: var(--muted-dim); } .btn--theme { background: var(--bone); border-color: var(--bone); color: var(--ink); } .btn--theme:hover { box-shadow: 0 10px 30px -12px rgba(0,0,0,0.45); } .section--tint { background: var(--ink-2); } .cta { background: var(--ink-2); } .cta::before { opacity: 0.22; background-image: radial-gradient(var(--line-2) 1.3px, transparent 1.4px); } .foot { background: none; } .nav::after { background: linear-gradient(90deg, var(--line-2), transparent 45%); } .nav__cta { background: none; } .nav__cta:hover { border-color: var(--fg); background: none; } .nav__links a[aria-current="page"] { color: var(--fg); } .row__num { color: var(--muted-dim); } .svc__n { color: var(--muted); } .svc:hover { background: linear-gradient(90deg, rgba(140,140,130,0.05), transparent 65%); } .row:hover { background: linear-gradient(90deg, rgba(140,140,130,0.05), transparent 60%); } .tier li.is-key::before { background: var(--fg); } .tier--feature { border-color: var(--line-2); } .tier--feature::before { background: var(--fg); } .tier--feature::after { display: none; } .tier--feature .tier__price { color: var(--fg); } .notice { border-left-color: var(--muted-dim); background: var(--ink-2); } .pull { border-left-color: var(--muted-dim); } .rule--theme { background: linear-gradient(90deg, var(--line-2), transparent 70%); height: 1px; } .field::before { opacity: 0.5; } .marquee { background: none; } .marquee__track > span i { color: var(--muted-dim); } .hero__meta .mono::before { background: var(--muted-dim); } .coords span:first-child { color: var(--muted); } .avail strong { color: var(--fg); } .cs-meta div .mono { color: var(--muted); } .prose li::marker { color: var(--muted-dim); } .prose blockquote { border-left-color: var(--muted-dim); } .body a, .prose a { color: var(--fg); text-decoration-color: var(--line-2); } .body a:hover, .prose a:hover { text-decoration-color: currentColor; } .contact-list a:hover { color: var(--muted); } /* Bigger, more confident type */ .h-xl { font-size: clamp(48px, 9.5vw, 132px); } .h-lg { font-size: clamp(38px, 6.2vw, 82px); } .h-md { font-size: clamp(28px, 3.9vw, 50px); } .statement { font-size: clamp(28px, 4.4vw, 60px); } .section { padding: clamp(80px, 9vw, 132px) 0; } .cs-block { padding: clamp(64px, 8vw, 116px) 0; } /* ========================================================================== 24. THEME TOGGLE ========================================================================== */ .mode { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border: 1px solid var(--line-2); border-radius: 50%; color: var(--muted); font-size: 13px; line-height: 1; transition: color 0.2s var(--ease), border-color 0.2s var(--ease); } .mode:hover { color: var(--fg); border-color: var(--fg); } .mode__sun { display: none; } html[data-mode="light"] .mode__sun { display: block; } html[data-mode="light"] .mode__moon { display: none; } /* ========================================================================== 25. SCROLL REVEAL Applied by nav.js. Falls back to fully visible if JS is off. ========================================================================== */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); will-change: opacity, transform; } .reveal.is-in { opacity: 1; transform: none; } .reveal-lines > * { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); } .reveal-lines.is-in > * { opacity: 1; transform: none; } .reveal-lines.is-in > *:nth-child(1) { transition-delay: 0.00s; } .reveal-lines.is-in > *:nth-child(2) { transition-delay: 0.08s; } .reveal-lines.is-in > *:nth-child(3) { transition-delay: 0.16s; } .reveal-lines.is-in > *:nth-child(4) { transition-delay: 0.24s; } .reveal-lines.is-in > *:nth-child(5) { transition-delay: 0.32s; } @media (prefers-reduced-motion: reduce) { .reveal, .reveal-lines > * { opacity: 1 !important; transform: none !important; } } /* ========================================================================== 26. CASE STUDY EXTRAS ========================================================================== */ .cs-quote { font-size: clamp(24px, 3.4vw, 44px); line-height: 1.18; letter-spacing: -0.035em; max-width: 22ch; margin: 0 auto; text-align: center; padding: clamp(56px, 7vw, 92px) 0; } .cs-quote span { color: var(--muted); display: block; font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase; font-family: var(--mono); margin-top: 26px; } .cs-wide { margin: 0 calc(50% - 50vw); padding: 0 var(--gutter); } .cs-wide .slot { min-height: clamp(280px, 46vw, 640px); } .video-slot { position: relative; aspect-ratio: 16/9; display: grid; place-items: center; border: 1px dashed var(--line-2); background: repeating-linear-gradient(45deg, var(--ink-3) 0 14px, var(--ink-2) 14px 28px); color: var(--muted-dim); font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; text-align: center; padding: 24px; } .video-slot::before { content: "▶"; display: block; font-size: 26px; margin-bottom: 14px; color: var(--muted-dim); } .specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); margin-top: 44px; } .specs div { background: var(--ink); padding: 24px 22px 26px; } .specs dt { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .specs dd { margin-top: 10px; font-size: 16px; letter-spacing: -0.02em; } @media (max-width: 760px) { .specs { grid-template-columns: 1fr; } .cs-wide { margin: 0; padding: 0; } } /* ========================================================================== 27. MOTION SYSTEM All transform/opacity only — no layout thrash. Every effect below is disabled wholesale by prefers-reduced-motion at the end of this section. ========================================================================== */ /* --- 27.1 Intro curtain (once per session) --- */ #intro { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; background: var(--ink); transition: transform 0.9s cubic-bezier(0.76, 0, 0.24, 1); will-change: transform; } #intro.is-out { transform: translateY(-101%); } #intro .intro__mark { font-family: var(--display); font-weight: 700; font-size: clamp(38px, 7vw, 82px); letter-spacing: -0.07em; color: var(--bone); opacity: 0; transform: translateY(14px); animation: introIn 0.7s var(--ease) 0.1s forwards; } #intro .intro__mark span { color: var(--theme); } #intro .intro__bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--theme); transform: scaleX(0); transform-origin: 0 50%; animation: introBar 0.85s cubic-bezier(0.65, 0, 0.35, 1) forwards; } @keyframes introIn { to { opacity: 1; transform: none; } } @keyframes introBar { to { transform: scaleX(1); } } html.intro-lock, html.intro-lock body { overflow: hidden; } /* --- 27.2 Page transition --- */ #veil { position: fixed; inset: 0; z-index: 9998; pointer-events: none; background: var(--ink); opacity: 0; transition: opacity 0.34s var(--ease); } #veil.is-on { opacity: 1; } /* --- 27.3 Scroll progress --- */ #progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 9997; background: var(--theme); transform: scaleX(0); transform-origin: 0 50%; will-change: transform; } /* --- 27.4 Kinetic type: mask reveal per line --- */ .kinetic span { overflow: hidden; display: block; } .kinetic span > i { font-style: inherit; display: block; transform: translateY(105%); transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1); } .kinetic.is-in span > i { transform: none; } .kinetic.is-in span:nth-child(1) > i { transition-delay: 0.02s; } .kinetic.is-in span:nth-child(2) > i { transition-delay: 0.11s; } .kinetic.is-in span:nth-child(3) > i { transition-delay: 0.20s; } .kinetic.is-in span:nth-child(4) > i { transition-delay: 0.29s; } /* --- 27.5 Parallax plates --- */ .plate { will-change: transform; } /* --- 27.6 Magnetic buttons --- */ .btn, .svc__go, .mode, .nav__cta { will-change: transform; } .btn > span, .btn-inner { display: inline-block; } /* --- 27.7 Link underline draw --- */ .body a, .prose a, .contact-list a, .foot__grid ul a { position: relative; text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size 0.4s var(--ease); } .body a:hover, .prose a:hover, .contact-list a:hover, .foot__grid ul a:hover { background-size: 100% 1px; } /* --- 27.8 Card lift + media bloom --- */ .card__media, .feature__media, .mini .slot { overflow: hidden; } .card .slot, .feature__media .slot, .mini .slot { transition: transform 0.7s var(--ease), filter 0.5s var(--ease); } .card:hover .slot, .feature__media:hover .slot, .mini a:hover .slot { transform: scale(1.035); filter: brightness(1.12); } /* --- 27.9 Marquee under JS control --- */ .marquee.is-js .marquee__track { animation: none; will-change: transform; } /* --- 27.10 Nav hide on scroll down --- */ .nav { transition: transform 0.4s var(--ease), background 0.3s var(--ease); } .nav.is-hidden { transform: translateY(-101%); } /* --- 27.11 Theme toggle spin --- */ .mode { transition: transform 0.5s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease); } .mode.is-turning { transform: rotate(180deg); } /* --- 27.12 Row arrow slide --- */ .row, .svc { position: relative; } .svc__t { transition: transform 0.45s var(--ease); } .svc:hover .svc__t { transform: translateX(10px); } /* --- 27.13 Respect the setting --- */ @media (prefers-reduced-motion: reduce) { #intro, #veil, #progress { display: none !important; } html.intro-lock, html.intro-lock body { overflow: auto; } .kinetic span > i { transform: none !important; } .nav.is-hidden { transform: none; } .marquee.is-js .marquee__track { animation: slide 60s linear infinite; } .card:hover .slot, .feature__media:hover .slot, .mini a:hover .slot { transform: none; } .svc:hover .svc__t { transform: none; } } /* ========================================================================== 28. MOTION v2 — bug fixes + amplified choreography Loaded last, so these rules win over sections 21 and 27. FIXED: clipped letterforms (overflow mask cut descenders) FIXED: kinetic lines wrapping into each other at mid widths FIXED: magnetic buttons sliding over their neighbours ========================================================================== */ /* --- 28.1 FIX: masked lines were cutting glyphs --------------------------- overflow:hidden on a line box clips descenders (g, y, p, j) and the tops of ascenders when line-height < 1. Pad the mask out, then pull it back with an equal negative margin so layout is unchanged. -------------------- */ .kinetic span { overflow: hidden; padding: 0.16em 0.06em 0.20em; margin: -0.16em -0.06em -0.20em; } /* --- 28.2 FIX: long lines wrapped and collided --------------------------- 158px max + a 190px indent overflowed a 1232px container, so "with reality." wrapped onto a second line and the 0.86 line-height stacked it on top of the line below. Smaller ceiling, softer indents, safer leading. */ .kinetic span { font-size: clamp(40px, 8.2vw, 118px); line-height: 0.94; letter-spacing: -0.045em; } .kinetic span:nth-child(2) { padding-left: clamp(0px, 4.5vw, 76px); } .kinetic span:nth-child(3) { padding-left: clamp(0px, 2vw, 34px); } .kinetic span:nth-child(4) { padding-left: clamp(0px, 7vw, 118px); } @media (max-width: 1100px) { .kinetic span:nth-child(n) { padding-left: 0; } } /* Same clipping fix anywhere else a mask is used */ .svc__t, .feature__title, .statement, .pull, .h-xl, .h-lg, .h-md { padding-bottom: 0.06em; } /* --- 28.3 FIX: magnetic pull pushed buttons over each other -------------- */ .btn-row { gap: 18px; } .nav__links { gap: 22px; } /* --- 28.4 Amplified reveals --------------------------------------------- */ .reveal { opacity: 0; transform: translateY(52px) scale(0.982); transition: opacity 1s var(--ease), transform 1.05s var(--ease); } .reveal.is-in { opacity: 1; transform: none; } .reveal-lines > * { opacity: 0; transform: translateY(46px); transition: opacity 1s var(--ease), transform 1.05s var(--ease); } .reveal-lines.is-in > *:nth-child(1) { transition-delay: 0.00s; } .reveal-lines.is-in > *:nth-child(2) { transition-delay: 0.13s; } .reveal-lines.is-in > *:nth-child(3) { transition-delay: 0.26s; } .reveal-lines.is-in > *:nth-child(4) { transition-delay: 0.39s; } .reveal-lines.is-in > *:nth-child(5) { transition-delay: 0.52s; } /* Kinetic lines rise further, slower, with more stagger */ .kinetic span > i { transform: translateY(112%); transition: transform 1.25s cubic-bezier(0.16, 1, 0.3, 1); } .kinetic.is-in span:nth-child(1) > i { transition-delay: 0.04s; } .kinetic.is-in span:nth-child(2) > i { transition-delay: 0.17s; } .kinetic.is-in span:nth-child(3) > i { transition-delay: 0.30s; } .kinetic.is-in span:nth-child(4) > i { transition-delay: 0.43s; } /* --- 28.5 Image wipe instead of fade ------------------------------------ */ .wipe { clip-path: inset(0 100% 0 0); transition: clip-path 1.15s cubic-bezier(0.76, 0, 0.24, 1); } .wipe.is-in { clip-path: inset(0 0 0 0); } /* --- 28.6 Word-by-word statements --------------------------------------- */ .statement .w, .pull .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.06em; } .statement .w > i, .pull .w > i { font-style: inherit; display: inline-block; transform: translateY(110%); transition: transform 0.95s cubic-bezier(0.16, 1, 0.3, 1); } .statement.is-in .w > i, .pull.is-in .w > i { transform: none; } /* --- 28.7 Rules draw in -------------------------------------------------- */ hr.rule { transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.1s var(--ease); } hr.rule.is-in { transform: scaleX(1); } /* --- 28.8 Cards stagger and lift harder --------------------------------- */ .grid > *, .mini > *, .tiers > *, .avail > * { transition-duration: 1.05s; } .grid.is-seq > *:nth-child(2), .mini.is-seq > *:nth-child(2) { transition-delay: 0.10s; } .grid.is-seq > *:nth-child(3), .mini.is-seq > *:nth-child(3) { transition-delay: 0.20s; } .grid.is-seq > *:nth-child(4), .mini.is-seq > *:nth-child(4) { transition-delay: 0.30s; } .grid.is-seq > *:nth-child(5), .mini.is-seq > *:nth-child(5) { transition-delay: 0.40s; } .card { transition: border-color 0.4s var(--ease), transform 0.5s var(--ease), box-shadow 0.5s var(--ease); } .card:hover { transform: translateY(-8px); box-shadow: 0 26px 60px -34px rgba(0,0,0,0.85); } .mini a:hover { transform: translateY(-6px); } /* --- 28.9 Marquee reads louder ------------------------------------------ */ .marquee { padding: 26px 0; } .marquee__track > span { font-size: clamp(24px, 3.6vw, 46px); } /* --- 28.10 Intro curtain, longer and with a counter --------------------- */ #intro .intro__mark { font-size: clamp(44px, 9vw, 108px); } #intro .intro__count { position: absolute; right: clamp(20px, 5vw, 60px); bottom: clamp(20px, 5vw, 52px); font-family: var(--mono); font-size: clamp(28px, 6vw, 68px); letter-spacing: -0.04em; color: var(--muted-dim); } #intro { transition: transform 1.05s cubic-bezier(0.76, 0, 0.24, 1); } #intro .intro__bar { height: 3px; animation-duration: 1.15s; } /* --- 28.11 Hero recedes as you scroll past ------------------------------ */ .k-hero .wrap, .hero .wrap { will-change: transform, opacity; } /* --- 28.12 Scramble labels must not reflow ------------------------------ */ .eyebrow, .svc__n { white-space: nowrap; } /* --- 28.13 Reduced motion still wins ------------------------------------ */ @media (prefers-reduced-motion: reduce) { .reveal, .reveal-lines > *, .statement .w > i, .pull .w > i, .kinetic span > i { opacity: 1 !important; transform: none !important; } .wipe { clip-path: none !important; } hr.rule { transform: none !important; } .card:hover, .mini a:hover { transform: none; box-shadow: none; } } /* ========================================================================== 29. MOBILE PASS Audit findings: .cols--even had no small-screen rule; the full-bleed figure used 100vw and overflowed by the scrollbar width; touch targets under 44px; vh units jump with the mobile address bar; scroll-linked effects were running on phones. ========================================================================== */ /* --- 29.1 FIX: 100vw ignores the scrollbar and caused horizontal scroll --- --sbw is measured once in nav.js. Falls back to 0 with no JS. ----------- */ :root { --sbw: 0px; } .cs-wide { margin-inline: calc(50% - 50vw + (var(--sbw) / 2)); padding-inline: var(--gutter); max-width: 100vw; } /* --- 29.2 FIX: viewport height jumps as mobile chrome hides -------------- */ @supports (height: 100dvh) { .hero[style*="vh"], .k-hero[style*="vh"] { min-height: 56dvh !important; } } /* --- 29.3 Touch targets: 44px minimum on coarse pointers ---------------- */ @media (pointer: coarse) { .mode { width: 44px; height: 44px; font-size: 15px; } .nav__cta { padding: 13px 20px; } .nav__toggle { padding: 12px 4px; margin: -12px -4px; } .contact-list a { display: block; padding: 4px 0; } .post-link { padding: 26px 0; } .foot__grid ul a { display: inline-block; padding: 5px 0; } .btn { padding: 16px 26px; } a, button { -webkit-tap-highlight-color: rgba(241, 236, 224, 0.08); } } /* --- 29.4 FIX: .cols--even had no breakpoint ---------------------------- */ @media (max-width: 900px) { .cols--even { grid-template-columns: 1fr; gap: 36px; } } /* --- 29.5 Phone layout ---------------------------------------------------*/ @media (max-width: 640px) { :root { --gutter: 20px; --nav-h: 64px; } /* headline sizes that actually fit a 390px screen */ .kinetic span { font-size: clamp(34px, 11vw, 52px); line-height: 1.0; } .h-xl { font-size: clamp(40px, 12vw, 58px); } .h-lg { font-size: clamp(32px, 9.5vw, 46px); } .h-md { font-size: clamp(25px, 7vw, 34px); } .statement { font-size: clamp(23px, 6.4vw, 32px); } .pull { font-size: 20px; padding-left: 16px; } .cs-quote { font-size: clamp(21px, 5.8vw, 28px); padding: 44px 0; } .svc__t { font-size: clamp(30px, 9vw, 42px); } .feature__title { font-size: clamp(27px, 8vw, 36px); } .lede { font-size: 17px; } /* breathing room without wasting the fold */ .section { padding: 56px 0; } .k-hero { padding: 40px 0 44px; } .hero { padding: 44px 0 36px; } .cs-block { padding: 48px 0; } .cta { padding: 62px 0; } /* stacked hero plates read better as a strip */ .plates { grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 28px; } .plate:nth-child(1) { grid-column: 1 / 3; aspect-ratio: 16/10; } .plate:nth-child(2) { grid-column: 1 / 2; aspect-ratio: 1/1; margin-top: 0; } .plate:nth-child(3) { grid-column: 2 / 3; aspect-ratio: 1/1; display: block; } /* service blocks */ .svc { padding: 32px 0; gap: 18px; } .svc__list li { font-size: 9.5px; padding: 6px 10px; } /* buttons go full width so they're easy to hit */ .btn-row { gap: 10px; } .btn-row .btn { flex: 1 1 100%; justify-content: center; } .cta .btn-row .btn { flex: 1 1 100%; } /* marquee shouldn't dominate a small screen */ .marquee { padding: 18px 0; } .marquee__track > span { font-size: 22px; padding-right: 18px; } /* case study extras */ .cs-wide { margin-inline: 0; padding-inline: 0; } .cs-wide .slot { min-height: 220px; } .video-slot { aspect-ratio: 4/3; } .specs div { padding: 20px 18px 22px; } .swatches { gap: 4px; } /* pricing + forms */ .tier { padding: 28px 22px 30px; } .tier__price { font-size: 26px; } .field-group input, .field-group select, .field-group textarea { font-size: 16px; } /* intro curtain */ #intro .intro__mark { font-size: clamp(38px, 13vw, 60px); } #intro .intro__count { font-size: 30px; right: 20px; bottom: 22px; } /* progress bar sits under the sticky nav */ #progress { height: 3px; } /* mobile menu: comfortable rows */ .nav__links.is-open { padding: 6px var(--gutter) 20px; } .nav__links.is-open a { padding: 15px 0; font-size: 12px; } .nav__links.is-open .mode { margin-top: 14px; } } @media (max-width: 400px) { .plates { grid-template-columns: 1fr; } .plate:nth-child(1) { grid-column: 1 / -1; } .plate:nth-child(2), .plate:nth-child(3) { grid-column: 1 / -1; aspect-ratio: 16/10; } .coords { gap: 6px 16px; } .hero__meta { gap: 6px 16px; } } /* --- 29.6 Landscape phones: don't waste the short viewport -------------- */ @media (max-height: 480px) and (orientation: landscape) { .k-hero, .hero { padding: 32px 0 28px; } .section { padding: 44px 0; } #intro .intro__mark { font-size: 44px; } } /* --- 29.7 Nothing may scroll sideways ----------------------------------- */ html, body { max-width: 100%; overflow-x: clip; } img, video, iframe, table, pre { max-width: 100%; } /* ========================================================================== 30. PROLOGUE Homepage positioning section: copy left, tall image right. ========================================================================== */ .prologue { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: start; } .prologue__media { position: relative; border: 1px solid var(--line); background: var(--ink-2); overflow: hidden; aspect-ratio: 4 / 5; } .prologue__media .slot { height: 100%; min-height: 0; } .prologue__media img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (max-width: 900px) { .prologue { grid-template-columns: 1fr; gap: 36px; } .prologue__media { aspect-ratio: 3 / 2; } } /* ========================================================================== 31. REAL IMAGERY Case study pages now carry where .slot placeholders used to sit. ========================================================================== */ .grid > img, .figure > img, .cs-wide > img, .card__media img, .feature__media img, .mini img, .plate img { display: block; width: 100%; height: auto; background: var(--ink-2); } .grid > img { aspect-ratio: 4 / 3; object-fit: cover; } .grid--3 > img { aspect-ratio: 1 / 1; object-fit: cover; } .figure > img { aspect-ratio: 3 / 2; object-fit: cover; } .cs-wide > img { aspect-ratio: 2 / 1; object-fit: cover; min-height: clamp(280px, 46vw, 640px); } .card__media img, .mini img { aspect-ratio: 4 / 3; object-fit: cover; } .feature__media img { width: 100%; height: 100%; object-fit: cover; } /* Match the hover language the .slot placeholders had */ .card__media img, .feature__media img, .mini img { transition: transform 0.9s var(--ease); } .card:hover .card__media img, .feature__media:hover img, .mini a:hover img { transform: scale(1.035); } @media (prefers-reduced-motion: reduce) { .card:hover .card__media img, .feature__media:hover img, .mini a:hover img { transform: none; } } @media (max-width: 640px) { .cs-wide > img { min-height: 220px; aspect-ratio: 3 / 2; } } /* ========================================================================== 32. MODAL Used by the journal newsletter form. Opened by [data-modal-open]. ========================================================================== */ .modal[hidden] { display: none; } .modal { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: var(--gutter); } .modal__backdrop { position: absolute; inset: 0; background: rgba(10, 10, 9, 0.72); backdrop-filter: blur(3px); } .modal__panel { position: relative; width: min(460px, 100%); background: var(--ink-2); border: 1px solid var(--line-2); padding: 34px 30px 30px; animation: modal-in 0.32s var(--ease) both; } @keyframes modal-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } .modal__x { position: absolute; top: 6px; right: 6px; width: 44px; height: 44px; background: none; border: 0; color: var(--muted); font-size: 24px; line-height: 1; cursor: pointer; } .modal__x:hover, .modal__x:focus-visible { color: var(--fg); } .modal__form { margin-top: 22px; display: grid; gap: 8px; } .modal__form label { font-size: 12px; color: var(--muted); } .modal__form input[type="email"] { width: 100%; min-height: 46px; padding: 12px 14px; background: var(--ink); border: 1px solid var(--line-2); color: var(--fg); font: inherit; font-size: 15px; } .modal__form input[type="email"]:focus-visible { outline: 2px solid var(--theme-lt); outline-offset: 1px; } .modal__form .btn { margin-top: 10px; justify-self: start; } @media (prefers-reduced-motion: reduce) { .modal__panel { animation: none; } } /* ========================================================================== 33. CASE STUDY LAYOUTS v2 Each project page is laid out around the images that actually exist for it. ========================================================================== */ /* Slate: the near monochrome theme Bottega Veneta runs on */ [data-theme="slate"] { --theme: #9BA3A6; --theme-lt: #C2C8CA; --theme-rgb: 155, 163, 166; --btn-bg: #9BA3A6; } html[data-mode="light"] [data-theme="slate"] { --theme: #5C6467; --theme-lt: #7C8588; --btn-bg: #5C6467; } /* Brand logo plate. Source artwork is pure black, so it is inverted on the dark background and left alone in light mode. */ .cs-logo { display: grid; place-items: center; padding: clamp(40px, 7vw, 84px) 0 clamp(28px, 4vw, 48px); } .cs-logo img { width: min(420px, 62%); height: auto; filter: invert(1); } html[data-mode="light"] .cs-logo img { filter: none; } /* Three tall panels side by side */ .trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 48px; } .trio img { display: block; width: 100%; height: auto; background: var(--ink-2); } /* Fixed column grids used by the case studies */ .grid--6, .grid--4 { display: grid; gap: 4px; margin-top: 48px; } .grid--6 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(2, 1fr); } .grid--6 img, .grid--4 img { display: block; width: 100%; height: auto; background: var(--ink-2); } /* Full width stack, one landscape frame after another */ .stack { margin: 56px calc(50% - 50vw) 0; padding: 0 var(--gutter); display: grid; gap: 6px; } .stack img { display: block; width: 100%; max-width: 1440px; margin: 0 auto; height: auto; background: var(--ink-2); } @media (max-width: 900px) { .trio { grid-template-columns: 1fr; gap: 6px; } .grid--6 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .grid--6, .grid--4 { grid-template-columns: 1fr; gap: 6px; } .cs-logo img { width: 74%; } .stack { margin-inline: 0; padding-inline: 0; } } /* Single portrait plate, centred. Used where a project's only lead asset is vertical, as on Aphrika. */ .cs-portrait { display: grid; place-items: center; padding: clamp(32px, 5vw, 64px) 0 0; } .cs-portrait img { display: block; width: min(560px, 100%); height: auto; background: var(--ink-2); } /* ========================================================================== 34. NO CROPPING, TIGHTER RHYTHM Every image keeps its native aspect ratio. Nothing is object-fit: cover. Layouts that used to lock a ratio now flow to the image instead. ========================================================================== */ /* --- 34.1 Kill every crop ---------------------------------------------- */ .card__media, .prologue__media, .founder__photo, .feature__media { aspect-ratio: auto; min-height: 0; height: auto; } .card__media img, .mini img, .feature__media img, .prologue__media img, .founder__photo img, .plate img, .grid > img, .grid--3 > img, .grid--4 > img, .grid--6 > img, .figure > img, .cs-wide > img, .trio img, .duo img, .stack img, .cs-portrait img { aspect-ratio: auto; object-fit: fill; width: 100%; height: auto; min-height: 0; display: block; } .plate { aspect-ratio: auto !important; } .plate:nth-child(2) { margin-top: 0; } .cs-wide > img { min-height: 0; } /* --- 34.2 Work grid as masonry columns, so cards of different heights sit flush instead of leaving dead rows -------------------------- */ .cards { display: block; column-count: 2; column-gap: 6px; } .cards > .card { break-inside: avoid; margin: 0 0 6px; display: block; } .cards > .card[style*="grid-column"] { column-span: all; } /* --- 34.3 Home mini grid, natural heights ------------------------------ */ .mini { display: block; column-count: 3; column-gap: 6px; margin-top: 6px; } .mini a { break-inside: avoid; margin: 0 0 6px; display: block; } /* --- 34.4 Two up, natural ratio ---------------------------------------- */ .duo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; } /* --- 34.5 Hero plates flow to the images ------------------------------- */ .plates { align-items: start; } /* --- 34.6 Less air. Sections were built for placeholder boxes and now carry real imagery, which does the spacing work itself. --------- */ .section { padding: 60px 0; } .section--tight { padding: 40px 0; } .cs-block { padding: 52px 0; } .hero { padding: clamp(56px, 8vw, 96px) 0 clamp(32px, 4vw, 48px); } .k-hero { padding: clamp(44px, 6vw, 76px) 0 clamp(28px, 3vw, 44px); } .cta { padding: 64px 0; } .figure { margin-top: 28px; } .stack { margin-top: 32px; gap: 4px; } .trio, .grid--6, .grid--4 { margin-top: 28px; } .cs-portrait { padding: clamp(24px, 3vw, 40px) 0 0; } .cs-logo { padding: clamp(28px, 4vw, 52px) 0 clamp(20px, 2vw, 32px); } .cs-meta { margin-top: 28px; } @media (max-width: 900px) { .cards, .mini { column-count: 2; } .section { padding: 44px 0; } .cs-block { padding: 40px 0; } } @media (max-width: 640px) { .cards, .mini { column-count: 1; } .duo { grid-template-columns: 1fr; gap: 6px; } } /* Failsafe: if the reveal observer never fires for a split statement (JS off, or the element is nested somewhere new), the words must still be visible. */ .no-js .statement .w > i, .no-js .pull .w > i { transform: none; } /* ========================================================================== 35. DEEP TEAL CORRECTIONS #0E5C63 is deliberately dark, so it is used for fills, strips and light mode text. The few places that set it as text on the near black background move to the lighter tint, which clears AA. ========================================================================== */ html:not([data-mode="light"]) .row__num, html:not([data-mode="light"]) .marquee__track > span i { color: var(--theme-lt); } html:not([data-mode="light"]) .prose li::marker { color: var(--theme-lt); } /* Hero plates and section images are links now, so they need the same affordance the cards have. */ a.plate, a.prologue__media, a.founder__photo { display: block; overflow: hidden; text-decoration: none; transition: transform 0.5s var(--ease), border-color 0.4s var(--ease); } a.plate img, a.prologue__media img, a.founder__photo img { transition: transform 0.9s var(--ease); } a.plate:hover img, a.prologue__media:hover img, a.founder__photo:hover img { transform: scale(1.03); } a.plate:focus-visible, a.prologue__media:focus-visible, a.founder__photo:focus-visible { outline: 2px solid var(--theme-lt); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { a.plate:hover img, a.prologue__media:hover img, a.founder__photo:hover img { transform: none; } }