/* ========================================================================== Menzo Weddings, design system v12 (rebuilt from scratch). Two typefaces: Bebas Neue for headlines and labels in caps, Inter Tight for reading. One gold. Ivory ground, white cards, night bands only for the night moments. Tight, consistent spacing on one scale. No text under 14px. ========================================================================== */ :root { --ivory: #fbf8f3; --white: #ffffff; --sand: #efe7dc; --night: #0b1020; --night-2: #141a2e; --ink: #111218; --ink-2: #2a2c34; --ink-3: #5a5c66; --gold: #9a7431; /* gold text on ivory, 5:1 */ --brass: #c9a35a; /* gold fills */ --gold-light: #e7cf98; /* gold text on night */ --line: rgba(17, 18, 24, .12); --line-dark: rgba(255, 255, 255, .18); --display: "Bebas Neue", "Oswald", "Arial Narrow", Impact, sans-serif; --font: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif; --wrap: 1240px; --g: clamp(20px, 4vw, 56px); --sec: clamp(64px, 7vw, 104px); --gap: clamp(28px, 3.4vw, 48px); --hd: 96px; --ease: cubic-bezier(.2, .7, .2, 1); } /* ---------- base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; } body { margin: 0; background: var(--ivory); color: var(--ink-2); font: 400 17px/1.65 var(--font); -webkit-font-smoothing: antialiased; } img, video, svg { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; } button { font: inherit; color: inherit; cursor: pointer; } input, select, textarea { font: inherit; color: inherit; } h1, h2, h3, p, figure, blockquote { margin: 0; } :focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; } ::selection { background: var(--brass); color: var(--night); } .sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; } .skip { position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--ink); color: #fff; padding: 12px 18px; } .skip:focus { top: 12px; } .m-wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--g); } /* ---------- type ---------- */ .m-eye { font: 600 14px/1.3 var(--font); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; } .m-eye-light { color: var(--gold-light); } .m-h2 { font: 400 clamp(42px, 4.8vw, 74px)/.92 var(--display); letter-spacing: .01em; text-transform: uppercase; color: var(--ink); text-wrap: balance; } .m-h2 em { font-style: normal; color: var(--gold); } .m-head { margin-bottom: var(--gap); max-width: 820px; } .m-head-p { margin-top: 18px; font-size: 18px; color: var(--ink-3); max-width: 62ch; } /* ---------- buttons and links ---------- */ .arr { width: 20px; height: 12px; flex: none; transition: transform .35s var(--ease); } .m-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 54px; padding: 0 28px; border: 0; font: 400 21px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background .3s, color .3s, box-shadow .3s; } .m-btn:hover .arr { transform: translateX(4px); } .m-btn-gold { background: var(--brass); color: var(--night); } .m-btn-gold:hover { background: var(--gold-light); } .m-btn-wide { width: 100%; } /* ---------- logo ---------- */ .logo { color: currentColor; overflow: visible; } .logo text { fill: currentColor; } .logo .disc { fill: currentColor; } .logo .groove { fill: none; stroke: #8a8f99; stroke-width: 1; } .logo .label { fill: var(--brass); } .logo .hole { fill: var(--night); } .logo .tag { transition: opacity .3s; } .rec-live { position: absolute; pointer-events: none; } .logo.has-live .rec { visibility: hidden; } /* ---------- header ---------- */ .hd { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--hd); color: #fff; background: transparent; transition: height .4s var(--ease), background .4s, color .4s, box-shadow .4s, transform .4s var(--ease); } .hd.is-scrolled { height: 70px; background: rgba(251, 248, 243, .96); color: var(--ink); box-shadow: 0 1px 0 var(--line); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); } .hd.is-scrolled .logo .hole { fill: var(--ivory); } .hd.is-hidden { transform: translateY(-100%); } .hd-in { height: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--g); display: flex; align-items: center; gap: 24px; } .brand { position: relative; display: flex; align-items: flex-start; overflow: hidden; height: 56px; margin-right: auto; color: inherit; transition: height .4s var(--ease); } .brand .logo { height: 56px; width: auto; transition: height .4s var(--ease); } .hd.is-scrolled .brand { height: calc(40px * 90 / 108); } .hd.is-scrolled .brand .logo { height: 40px; } .hd.is-scrolled .brand .logo .tag { opacity: 0; } .nav { display: none; gap: 26px; } .nav a { display: inline-flex; align-items: center; min-height: 44px; font: 400 19px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; border-bottom: 1.5px solid transparent; } .nav a:hover, .nav a[aria-current] { border-bottom-color: var(--brass); } .hd-right { display: none; flex-direction: column; align-items: flex-end; gap: 2px; } .hd-cta { display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px; border: 1.5px solid currentColor; font: 400 19px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: inherit; transition: background .3s, color .3s, border-color .3s; } .hd-cta:hover { background: var(--brass); border-color: var(--brass); color: var(--night); } .menu-btn { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px; background: none; border: 0; font: 400 20px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; } .menu-ico { position: relative; width: 22px; height: 12px; } .menu-ico i { position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor; transition: transform .3s; } .menu-ico i:first-child { top: 0; } .menu-ico i:last-child { bottom: 0; } .menu-open .menu-ico i:first-child { transform: translateY(5px) rotate(45deg); } .menu-open .menu-ico i:last-child { transform: translateY(-5px) rotate(-45deg); } .menu { position: fixed; inset: 0; z-index: 40; background: var(--night); color: #fff; padding: calc(var(--hd) + 24px) var(--g) 40px; overflow-y: auto; display: flex; flex-direction: column; gap: 24px; } .menu[hidden] { display: none; } .menu nav { display: grid; } .menu nav a { font: 400 clamp(34px, 9vw, 52px)/1.15 var(--display); letter-spacing: .02em; text-transform: uppercase; text-decoration: none; padding: 6px 0; border-bottom: 1px solid var(--line-dark); } .menu .btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 54px; background: var(--brass); color: var(--night); font: 400 21px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; } .menu p { color: rgba(255, 255, 255, .8); font-size: 15px; } .menu-open .hd { color: #fff; background: transparent; box-shadow: none; } @media (min-width: 1100px) { .nav { display: flex; margin-right: 12px; } .hd-right { display: flex; } .menu-btn { display: none; } } /* ---------- hero ---------- */ .mh { position: relative; min-height: 100svh; display: flex; background: var(--night); color: #fff; overflow: hidden; } .mh-film { position: absolute; inset: 0; } .mh-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(1.18) saturate(1.22) contrast(1.06); } .mh-tall { display: none; } .mh-shade { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 52% at 50% 52%, rgba(11, 16, 32, .45), rgba(11, 16, 32, .12) 72%), linear-gradient(180deg, rgba(11, 16, 32, .5) 0%, rgba(11, 16, 32, 0) 24%, rgba(11, 16, 32, 0) 78%, rgba(11, 16, 32, .55) 100%); } .mh-in { position: relative; z-index: 2; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: clamp(10px, 1.3vw, 18px); padding-top: calc(var(--hd) + 24px); padding-bottom: 64px; } .mh-tag { display: inline-flex; align-items: center; gap: 16px; font: 600 clamp(12px, .95vw, 15px)/1 var(--font); letter-spacing: .32em; text-transform: uppercase; } .mh-tag::before, .mh-tag::after { content: ""; width: clamp(28px, 4vw, 60px); height: 1px; background: var(--brass); } .mh-tag { text-shadow: 0 2px 24px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .45); } @media (max-width: 700px) { .mh-wide { display: none; } .mh-tall { display: block; } .mh-tag::before, .mh-tag::after { display: none; } .mh-tag { letter-spacing: .22em; } } /* ---------- sections ---------- */ .m-sec { padding: var(--sec) 0; } /* intro */ /* services */ .ms { background: var(--white); } .ms-grid { display: grid; gap: 20px; } .ms-card { display: grid; grid-template-rows: auto 1fr; text-decoration: none; color: var(--ink); background: var(--ivory); } .ms-img { display: block; aspect-ratio: 3 / 2; overflow: hidden; } .ms-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); } .ms-card:hover .ms-img img { transform: scale(1.04); } .ms-body { display: grid; gap: 8px; align-content: start; padding: 22px 24px 26px; } .ms-name { font: 400 clamp(28px, 2.3vw, 36px)/1 var(--display); letter-spacing: .02em; text-transform: uppercase; } .ms-line { font-size: 16px; color: var(--ink-3); } .ms-go { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 4px; font: 600 14px/1 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); } .ms-card:hover .ms-go .arr { transform: translateX(4px); } /* signature: the dance floor plays inside the letters */ /* proof */ /* reviews */ /* weddings strip */ .wn-prev .arr { transform: rotate(180deg); } /* reels */ .mv-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); } .reel { margin: 0; display: grid; gap: 12px; } .reel-media { position: relative; aspect-ratio: 9 / 16; border-radius: clamp(18px, 2vw, 28px); overflow: hidden; background: var(--night); } .reel-media video { width: 100%; height: 100%; object-fit: cover; cursor: pointer; } .reel-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 76px; height: 50px; border: 0; border-radius: 12px; display: grid; place-items: center; background: rgba(140, 116, 80, .9); color: #fff; transition: transform .3s var(--ease), background .3s, opacity .3s; } .reel-play svg { width: 24px; height: 24px; } .reel-play:hover { transform: translate(-50%, -50%) scale(1.06); background: var(--brass); } .reel.is-sound .reel-play { opacity: 0; pointer-events: none; } .reel figcaption { display: grid; gap: 2px; text-align: center; } .reel figcaption b { font: 400 24px/1 var(--display); letter-spacing: .03em; text-transform: uppercase; color: var(--ink); } .reel figcaption span { font-size: 14px; color: var(--ink-3); } /* founder */ /* call to action */ .mc { position: relative; background: var(--night); color: #fff; overflow: hidden; } .mc-bg { position: absolute; inset: 0; opacity: .28; } .mc-bg img { width: 100%; height: 100%; object-fit: cover; } .mc-in { position: relative; display: grid; gap: var(--gap); align-items: center; padding-top: var(--sec); padding-bottom: var(--sec); } .mc-txt .m-h2 { color: #fff; } .mc-txt .m-h2 em { color: var(--gold-light); } .mc-txt p:not(.m-eye) { margin-top: 18px; font-size: 19px; color: rgba(255, 255, 255, .9); } .mc-form { background: var(--white); color: var(--ink); padding: clamp(22px, 3vw, 36px); display: grid; gap: 16px; } .mc-two { display: grid; gap: 16px; } .m-field { display: grid; gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; } .m-field > span, .m-field legend { font-size: 14px; font-weight: 600; color: var(--ink-2); padding: 0; margin-bottom: 6px; } .m-field input { width: 100%; min-height: 50px; padding: 0 14px; border: 1px solid rgba(17, 18, 24, .25); background: var(--ivory); border-radius: 0; font-size: 16px; } .m-field input:focus { outline: 2px solid var(--brass); outline-offset: 0; border-color: var(--brass); } .m-field input.is-bad { border-color: #b3261e; } .m-pills { display: flex; flex-wrap: wrap; gap: 8px; } .m-pill { position: relative; } .m-pill input { position: absolute; opacity: 0; inset: 0; } .m-pill span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid rgba(17, 18, 24, .25); font-size: 15px; cursor: pointer; } .m-pill input:checked + span { background: var(--ink); color: #fff; border-color: var(--ink); } .m-pill input:focus-visible + span { outline: 2px solid var(--brass); outline-offset: 2px; } .form-status { font-size: 15px; color: var(--ink-2); min-height: 1em; } .mc-form.is-done .m-btn { opacity: .6; } @media (min-width: 600px) { .mc-two { grid-template-columns: 1fr 1fr; } } /* venues */ .mvn .m-head { text-align: center; margin-left: auto; margin-right: auto; display: grid; justify-items: center; } .mvn-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .mvn-track { list-style: none; margin: 0; padding: 0; display: flex; width: max-content; animation: mvn 60s linear infinite; } .mvn-marquee:hover .mvn-track { animation-play-state: paused; } @keyframes mvn { to { transform: translateX(-50%); } } .mvn-track li { flex: none; width: clamp(200px, 19vw, 300px); } .mvn-track a { display: grid; grid-template-rows: clamp(96px, 8vw, 128px) auto auto; justify-items: center; align-items: center; gap: 2px; padding: 0 clamp(16px, 2vw, 28px); text-decoration: none; } .mvn-logo { display: grid; place-items: center; width: 100%; height: 100%; } .mvn-logo img { width: 100%; height: 76%; object-fit: contain; transition: transform .5s var(--ease); } .mvn-track a:hover img { transform: scale(1.05); } .mvn-name { margin-top: 14px; font-size: 17px; color: var(--ink-2); text-align: center; } .mvn-town { font-size: 14px; color: var(--ink-3); } /* ---------- footer ---------- */ .ft { background: var(--night); color: rgba(255, 255, 255, .88); padding: clamp(56px, 6vw, 88px) 0 28px; } .ft .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--g); } .ft-logo { color: #fff; display: inline-block; position: relative; } .ft-logo .logo { width: clamp(180px, 16vw, 240px); height: auto; } .ft-sign { position: relative; color: rgba(255, 255, 255, .06); margin: 8px 0 20px; } .ft-sign .logo { width: 100%; height: auto; } .ft-sign .logo .label { fill: rgba(255, 255, 255, .06); } .ft-sign .logo .groove { stroke: rgba(255, 255, 255, .08); } /* phone booking dock */ .dock { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 45; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 54px; background: var(--brass); color: var(--night); font: 400 21px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; transform: translateY(160%); transition: transform .4s var(--ease); box-shadow: 0 10px 30px rgba(11, 16, 32, .3); } .dock.is-on { transform: none; } @media (min-width: 900px) { .dock { display: none; } } /* ---------- layout breakpoints ---------- */ @media (min-width: 760px) { .ms-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 900px) { .mc-in { grid-template-columns: .9fr 1.1fr; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } .mvn-track { animation: none; } } .mvn-logo { height: clamp(96px, 8vw, 128px); overflow: hidden; } .mvn-track a { grid-template-rows: auto auto auto; } .mvn-logo img { width: 100%; height: 100%; max-height: none; padding: 8% 0; object-fit: contain; } .mh-tag { font-size: clamp(14px, .95vw, 15px); } @media (max-width: 700px) { .mh-tag { letter-spacing: .16em; max-width: 92vw; } } /* ---------- accent: rose, one colour for every action and emphasis ---------- */ :root { --gold: #c92e66; /* accent text on ivory, 4.6:1 */ --brass: #d93d74; /* accent fills: buttons, rules, stars */ --gold-light: #f48bb0; /* accent text on night */ } .m-btn-gold { background: var(--brass); color: #fff; } .m-btn-gold:hover { background: #e8558a; color: #fff; } .hd-cta:hover { background: var(--brass); border-color: var(--brass); color: #fff; } .menu .btn { background: var(--brass); color: #fff; } .dock { background: var(--brass); color: #fff; } .reel-play { background: rgba(217, 61, 116, .92); } .reel-play:hover { background: #e8558a; } .logo .label { fill: #c9a35a; } ::selection { background: var(--brass); color: #fff; } .mvn-logo { padding: 14px 0; } .mvn-logo img { width: auto; height: auto; max-width: 100%; max-height: 100%; padding: 0; object-fit: contain; } /* reviews: Dennis's quote as the feature, two verified reviews beneath */ /* ---------- footer (v12, shared by every page) ---------- */ .logo-box { position: relative; display: block; line-height: 0; } .rec-live { opacity: 0; transition: opacity .45s ease; } .rec-live.is-on { opacity: 1; } .ft { background: #0b1020; color: rgba(255, 255, 255, .86); padding: clamp(56px, 6vw, 84px) 0 28px; } .ft .wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); } .ft-logo { display: inline-block; color: #fff; justify-self: start; } .ft-logo .logo { width: 200px; height: auto; } .ft-sign { display: none; } /* header: logo left, one call to action right */ .hd-right { justify-content: center; } .brand .logo-box { height: auto; } /* ========================================================================== Michigan colours: Maize #c9a35a and Michigan Blue #171411 (University of Michigan brand values). Colours only, no university marks. ========================================================================== */ :root { --night: #171411; /* Michigan Blue: every dark band */ --night-2: #2b2622; --gold: #171411; /* small accent text on ivory: labels, links (blue) */ --brass: #c9a35a; /* Maize: buttons, stars, rules */ --gold-light: #c9a35a; /* accent text on blue */ --maize-deep: #a8843f; /* maize that stays legible as large headline type on ivory */ } .m-h2 em { color: var(--maize-deep); } .mc-txt .m-h2 em { color: var(--brass); } .m-btn-gold, .menu .btn, .dock { background: var(--brass); color: var(--night); } .m-btn-gold:hover { background: #d8b878; color: var(--night); } .hd-cta:hover { background: var(--brass); border-color: var(--brass); color: var(--night); } .reel-play { background: rgba(201, 163, 90, .95); color: var(--night); } .reel-play:hover { background: #d8b878; } .mh-shade { background: radial-gradient(ellipse 60% 52% at 50% 52%, rgba(23, 20, 17, .5), rgba(23, 20, 17, .14) 72%), linear-gradient(180deg, rgba(23, 20, 17, .55) 0%, rgba(23, 20, 17, 0) 24%, rgba(23, 20, 17, 0) 78%, rgba(23, 20, 17, .6) 100%); } .mc-bg { opacity: .22; } .logo .label { fill: #c9a35a; } ::selection { background: var(--brass); color: var(--night); } .ft { background: var(--night); } /* ========================================================================== Michigan colours on all type and navigation ========================================================================== */ :root { --ink: #171411; /* headlines, nav, strong text: Michigan Blue */ --ink-2: #2b2622; /* reading text: a deep blue-black */ --ink-3: #6b6259; /* secondary text */ --line: rgba(23, 20, 17, .14); } body { color: var(--ink-2); } .hd.is-scrolled { color: var(--ink); } .nav a:hover, .nav a[aria-current] { border-bottom-color: var(--brass); } /* inner pages: a solid ivory header in Michigan Blue */ body:not(.l-home) .hd { background: rgba(251, 248, 243, .97); color: var(--ink); box-shadow: 0 1px 0 var(--line); } body:not(.l-home) .hd .logo .hole { fill: var(--ivory); } body:not(.l-home) main { padding-top: var(--hd); } body:not(.l-home) .hd.is-scrolled + *, body:not(.l-home) .menu-open .hd { color: var(--ink); } /* ========================================================================== Pages layer: every inner-page element, in the v12 system ========================================================================== */ .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--g); } .label { font: 600 14px/1.3 var(--font); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin: 0 0 14px; } .label-light { color: var(--brass); } .h-xl { font: 400 clamp(50px, 6.2vw, 100px)/.9 var(--display); letter-spacing: .01em; text-transform: uppercase; color: var(--ink); text-wrap: balance; } .h-l { font: 400 clamp(42px, 4.8vw, 74px)/.92 var(--display); letter-spacing: .01em; text-transform: uppercase; color: var(--ink); text-wrap: balance; } .h-m { font: 400 clamp(32px, 3.2vw, 52px)/.95 var(--display); letter-spacing: .01em; text-transform: uppercase; color: var(--ink); text-wrap: balance; } .h-xl em, .h-l em, .h-m em { font-style: normal; color: var(--maize-deep); } .lede { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; color: var(--ink-2); max-width: 52ch; } em { font-style: normal; } /* buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 54px; padding: 0 28px; border: 0; font: 400 21px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background .3s, color .3s, box-shadow .3s; } .btn:hover .arr { transform: translateX(4px); } .btn-brass { background: var(--brass); color: var(--night); } .btn-brass:hover { background: #d8b878; } .btn-wide { width: 100%; } .tlink { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; font-size: 16px; text-decoration: none; color: var(--ink); border-bottom: 1.5px solid var(--brass); } .tlink:hover .arr { transform: translateX(4px); } /* breadcrumbs */ .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; font-size: 14px; color: var(--ink-3); margin-bottom: 8px; } .crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-3); text-decoration: none; } .crumbs a:hover { color: var(--ink); } .crumbs i { font-style: normal; opacity: .5; } .crumbs span { color: var(--ink); } /* page heroes */ .ph { position: relative; } .ph-split { display: grid; background: var(--ivory); } .ph-txt { display: flex; align-items: center; } .ph-txt-in { display: grid; gap: 16px; padding: clamp(32px, 5vw, 80px) var(--g); max-width: 680px; } .ph-txt-in .label { margin-bottom: -2px; } .ph-media { position: relative; min-height: 320px; overflow: hidden; background: var(--sand); } .ph-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .ph-credit { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 14px; font-size: 14px; color: #fff; background: linear-gradient(180deg, transparent, rgba(23, 20, 17, .7)); } .ph-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 6px; } .ph-plain { padding: clamp(40px, 5vw, 80px) 0 clamp(20px, 3vw, 40px); } .ph-plain .wrap { display: grid; gap: 16px; } @media (min-width: 900px) { .ph-split { grid-template-columns: 1fr 1fr; min-height: clamp(520px, 72vh, 760px); } .ph-split .ph-media { order: 2; } .ph-split .ph-txt { order: 1; justify-content: flex-end; } } /* sections */ .sec { padding: var(--sec) 0; } .sec-head { margin-bottom: var(--gap); max-width: 820px; } .sec-head .label { margin-bottom: 14px; } /* points */ .points-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; } .points-list li { border-top: 2px solid var(--ink); padding-top: 18px; display: grid; gap: 8px; } .points-list p { color: var(--ink-2); } @media (min-width: 760px) { .points-list { grid-template-columns: repeat(3, 1fr); } } /* photo band */ .photos { margin: 0; } .photos-row { display: flex; gap: 8px; } .photos-row span { display: block; overflow: hidden; height: clamp(180px, 26vw, 420px); } .photos-row img { width: 100%; height: 100%; object-fit: cover; } .photos figcaption { margin-top: 10px; font-size: 14px; color: var(--ink-3); } @media (max-width: 600px) { .photos-row { flex-direction: column; } .photos-row span { flex: none !important; height: 240px; } } /* long-form pages */ .doc { padding: var(--sec) 0; } .toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); } .toc a { display: block; padding: 10px 0 10px 16px; font-size: 15px; line-height: 1.4; color: var(--ink-2); text-decoration: none; margin-left: -2px; border-left: 2px solid transparent; } .toc a:hover, .toc a.is-on { color: var(--ink); border-left-color: var(--brass); } .fig { margin: 1.8em 0; } .fig img { width: 100%; height: auto; } .fig figcaption { margin-top: 8px; font-size: 14px; color: var(--ink-3); } .table-wrap { overflow-x: auto; margin: 1.6em 0; } .table-wrap table { width: 100%; border-collapse: collapse; font-size: 16px; min-width: 520px; } .table-wrap th { font: 400 19px/1.1 var(--display); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); text-align: left; } .table-wrap th, .table-wrap td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; } /* reviews inside pages */ .review { margin: 1.8em 0; background: var(--white); padding: clamp(22px, 3vw, 32px); border-left: 4px solid var(--brass); display: grid; gap: 12px; } .review blockquote { margin: 0; display: grid; gap: 12px; } .review blockquote p { font-size: 18px; line-height: 1.6; color: var(--ink-2); } .review figcaption { display: grid; gap: 2px; } .review figcaption b { color: var(--ink); font-weight: 600; } .review figcaption span { font-size: 14px; color: var(--ink-3); } .rv-src { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .rv-src-name, .rv-src-note { font: 600 14px/1 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); } .rv-src-meta { font-size: 14px; color: var(--ink-3); } .rv-logo { height: 22px; width: auto; } .rv-stars { display: inline-flex; gap: 4px; color: #c9a35a; } .rv-stars svg { width: 18px; height: 18px; } .review-xl { max-width: 900px; margin: 0 auto; background: var(--ivory); border-left: 0; border-top: 4px solid var(--brass); text-align: center; justify-items: center; } .review-xl blockquote p { font-size: clamp(19px, 1.6vw, 23px); } .review-xl .rv-src { justify-content: center; } /* real wedding feature inside a page */ .wfeature { display: grid; margin: 2em 0; background: var(--white); text-decoration: none; color: var(--ink); } .wfeature-img { display: block; aspect-ratio: 3 / 2; overflow: hidden; } .wfeature-img img { width: 100%; height: 100%; object-fit: cover; } .wfeature-txt { display: grid; gap: 6px; align-content: center; padding: 22px 24px; } .wfeature-txt .label { margin: 0; } .wfeature-name { font: 400 32px/1 var(--display); text-transform: uppercase; } .wfeature-where { font-size: 15px; color: var(--ink-3); } .wfeature .tlink { justify-self: start; } @media (min-width: 700px) { .wfeature { grid-template-columns: 1fr 1fr; } } /* phone clips inside pages */ .clip { margin: 1.8em 0; display: grid; gap: 10px; max-width: 360px; } .clip-media { position: relative; aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden; background: var(--night); } .clip-media video { width: 100%; height: 100%; object-fit: cover; } .clip-sound { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--ink); font-weight: 600; font-size: 15px; } .clip-sound svg { width: 18px; height: 18px; } .clip-sound[aria-pressed="true"] { background: var(--brass); } .clip figcaption { display: grid; gap: 2px; } .clip figcaption b { font: 400 24px/1 var(--display); text-transform: uppercase; color: var(--ink); } .clip figcaption span { font-size: 14px; color: var(--ink-3); } /* cards: pairs, services, venues, regions, guides, weddings */ .regions { display: grid; gap: 20px; } .pair, .svc, .venue, .region, .guide { display: grid; align-content: start; gap: 6px; text-decoration: none; color: var(--ink); background: var(--white); padding-bottom: 20px; } .region-img { display: block; aspect-ratio: 3 / 2; overflow: hidden; margin-bottom: 12px; } .region-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); } .pair:hover img, .svc:hover img, .venue:hover img, .region:hover img, .guide:hover img { transform: scale(1.04); } .pair > span:not(.pair-img), .venue > span:not(.venue-img), .region > span:not(.region-img), .guide > span:not(.guide-img) { padding: 0 20px; } .region-name { font: 400 clamp(26px, 2.2vw, 32px)/1 var(--display); text-transform: uppercase; letter-spacing: .02em; color: var(--ink); } .region-sub { font-size: 15px; color: var(--ink-3); } .svc { position: relative; } .svc > svg { position: absolute; right: 20px; bottom: 22px; width: 20px; color: var(--ink); } .guide .tlink { justify-self: start; margin: 4px 20px 0; padding: 0; } @media (min-width: 700px) { .regions { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .regions { grid-template-columns: repeat(5, 1fr); } } /* real weddings strip (inner pages) */ .weds { background: var(--white); } .weds-track { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(250px, 26vw, 360px); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--g) 6px; scroll-padding: 0 var(--g); scrollbar-width: none; } .weds-track::-webkit-scrollbar { display: none; } @media (min-width: 1240px) { .weds-track { padding-left: calc((100vw - var(--wrap)) / 2 + var(--g)); } } .wcard { scroll-snap-align: start; display: grid; gap: 4px; text-decoration: none; color: var(--ink); } .wcard:hover img { transform: scale(1.04); } /* wedding stories */ .story { padding: var(--sec) 0 0; } .gallery { columns: 3 260px; column-gap: 10px; } .gi { display: block; margin-bottom: 10px; break-inside: avoid; overflow: hidden; cursor: zoom-in; } .gi img { width: 100%; height: auto; transition: transform .8s var(--ease); } .gi:hover img { transform: scale(1.03); } .gfill { display: none; } /* films */ .films-lead { margin-bottom: 20px; } .films-grid { display: grid; gap: 20px; } @media (min-width: 760px) { .films-grid { grid-template-columns: repeat(2, 1fr); } } .film { margin: 0; display: grid; gap: 10px; } .film-play { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; background: var(--night); overflow: hidden; } .film-play img { width: 100%; height: 100%; object-fit: cover; opacity: .92; transition: transform 1.2s var(--ease), opacity .3s; } .film-play:hover img { transform: scale(1.03); opacity: 1; } .film-play img[src*="zwVWAei2Vw8"] { transform: scale(1.34); } .film-btn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 76px; height: 52px; border-radius: 12px; background: var(--brass); color: var(--night); } .film-btn svg { width: 26px; height: 26px; } .film iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; } .film figcaption { display: grid; gap: 2px; } .film figcaption b { font: 400 28px/1 var(--display); text-transform: uppercase; color: var(--ink); } .film figcaption span { font-size: 14px; color: var(--ink-3); } /* steps */ .steps-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; } .steps-list li { border-top: 2px solid var(--ink); padding-top: 18px; display: grid; gap: 8px; } .steps-list h3 { font: 400 28px/1 var(--display); text-transform: uppercase; color: var(--ink); } .steps-list p { color: var(--ink-2); } @media (min-width: 900px) { .steps-list { grid-template-columns: repeat(4, 1fr); } } /* questions */ .faqs { padding: var(--sec) 0; background: var(--white); } .faqs-in { display: grid; gap: var(--gap); } .faq { border-top: 1px solid var(--line); } .faq:last-child { border-bottom: 1px solid var(--line); } .faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; padding: 14px 0; font: 400 clamp(22px, 1.8vw, 27px)/1.1 var(--display); letter-spacing: .02em; text-transform: uppercase; color: var(--ink); } .faq summary::-webkit-details-marker { display: none; } .faq summary i { position: relative; width: 18px; height: 18px; flex: none; } .faq summary i::before, .faq summary i::after { content: ""; position: absolute; left: 0; top: 8px; width: 18px; height: 2px; background: var(--maize-deep); transition: transform .3s; } .faq summary i::after { transform: rotate(90deg); } .faq details[open] summary i::after { transform: rotate(0deg); } .faq-a { padding: 0 0 20px; max-width: 72ch; color: var(--ink-2); } .faq-a p + p { margin-top: .8em; } .faq-a a { color: var(--ink); text-decoration-color: var(--brass); text-decoration-thickness: 2px; text-underline-offset: 3px; } @media (min-width: 1000px) { .faqs-in { grid-template-columns: 1fr 2fr; } } /* check your date planner */ .cyd { display: grid; } .cyd-media { position: relative; min-height: 260px; overflow: hidden; } .cyd-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .cyd-in { display: grid; gap: 16px; padding: clamp(32px, 5vw, 72px) var(--g); max-width: 760px; } .planner { display: grid; gap: 20px; margin-top: 8px; } .planner-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; } .pstep { display: grid; grid-template-columns: 44px 1fr; gap: 16px; } .pstep-n { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--brass); color: var(--night); font: 400 24px/1 var(--display); } .pstep-body { display: grid; gap: 14px; min-width: 0; } .pstep-body h2 { font: 400 30px/1 var(--display); text-transform: uppercase; color: var(--ink); padding-top: 8px; } .planner-note, .cyd-note { font-size: 15px; color: var(--ink-3); } .two { display: grid; gap: 14px; } @media (min-width: 600px) { .two { grid-template-columns: 1fr 1fr; } } .f { display: grid; gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; } .f > span, .f legend { font-size: 14px; font-weight: 600; color: var(--ink-2); padding: 0; margin-bottom: 6px; } .f input, .f select, .f textarea { width: 100%; min-height: 50px; padding: 0 14px; border: 1px solid rgba(23, 20, 17, .28); background: var(--white); border-radius: 0; font-size: 16px; color: var(--ink); } .f textarea { padding: 12px 14px; min-height: 120px; } .f input:focus, .f select:focus, .f textarea:focus { outline: 2px solid var(--brass); outline-offset: 0; border-color: var(--brass); } .f input.is-bad { border-color: #b3261e; } .pills { display: flex; flex-wrap: wrap; gap: 8px; } .pill { position: relative; } .pill input { position: absolute; opacity: 0; inset: 0; } .pill span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid rgba(23, 20, 17, .28); font-size: 15px; cursor: pointer; background: var(--white); color: var(--ink); } .pill input:checked + span { background: var(--ink); color: #fff; border-color: var(--ink); } .pill input:focus-visible + span { outline: 2px solid var(--brass); outline-offset: 2px; } @media (min-width: 1000px) { .cyd { grid-template-columns: 1fr 1.2fr; } .cyd-media { position: sticky; top: var(--hd); height: calc(100vh - var(--hd)); } } /* Michigan map */ .mi-map { width: 100%; max-width: 560px; height: auto; margin: 0 auto; } .mi-map path { fill: var(--sand); stroke: #fff; stroke-width: 2; } .mi-map .hit { fill: transparent; } .mi-map circle { fill: var(--ink); } .mi-map circle.halo { fill: var(--brass); opacity: .35; transform-box: fill-box; transform-origin: center; animation: halo 2.6s ease-out infinite; } .mi-map text { font: 400 26px/1 var(--display); fill: var(--ink); letter-spacing: .03em; } .mi-map a:hover circle:not(.halo) { fill: var(--maize-deep); } @keyframes halo { 0% { transform: scale(1); opacity: .45; } 100% { transform: scale(2.6); opacity: 0; } } /* not found */ .nf { min-height: 72vh; display: grid; place-items: center; text-align: center; background: var(--night); color: #fff; padding: var(--sec) var(--g); } .nf > div { display: grid; gap: 18px; justify-items: center; max-width: 640px; } .nf .mark { width: 72px; height: 72px; color: #fff; } .nf .mark .disc { fill: #fff; } .nf .mark .groove { fill: none; stroke: #8a8f99; } .nf .mark .label { fill: var(--brass); } .nf .mark .hole { fill: var(--night); } .nf .h-xl { color: #fff; } .nf .h-xl em { color: var(--brass); } .nf .ph-actions { justify-content: center; } .nf .tlink { color: #fff; } /* photo viewer */ .lb { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgba(0, 20, 40, .96); padding: 56px 16px; } .lb[hidden] { display: none; } .lb figure { margin: 0; display: grid; gap: 10px; justify-items: center; } .lb img { max-width: min(92vw, 1400px); max-height: 82vh; width: auto; height: auto; } .lb figcaption { font-size: 14px; color: rgba(255, 255, 255, .8); text-align: center; } .lb button { position: absolute; display: grid; place-items: center; width: 52px; height: 52px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font-size: 30px; line-height: 1; } .lb button:hover { background: var(--brass); color: var(--night); } .lb-x { top: 16px; right: 16px; } .lb-p { left: 16px; top: 50%; transform: translateY(-50%); } .lb-n { right: 16px; top: 50%; transform: translateY(-50%); } .lb-open { overflow: hidden; } /* small marks */ .mark { width: 28px; height: 28px; } .mark .disc { fill: currentColor; } .mark .groove { fill: none; stroke: #8a8f99; } .mark .label { fill: var(--brass); } .mark .hole { fill: var(--ivory); } /* hero headline: one idea, no repeat of the tagline */ /* venue section call to action */ .mvn-go { margin-top: 22px; } /* check availability tab on the right edge (desktop) */ /* comfortable tap targets */ .nav a { min-width: 44px; justify-content: center; } .planner-note a, .cyd-note a { display: inline-flex; align-items: center; min-height: 44px; } .mvn { padding-bottom: var(--sec); } .ms-img { position: relative; aspect-ratio: 4 / 3; } .ms-credit { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 14px 10px; font-size: 14px; color: #fff; background: linear-gradient(180deg, transparent, rgba(23, 20, 17, .65)); } /* ========================================================================== The Journal: wedding-magazine type (approved 17 Oct 2026) Italiana in wide-tracked capitals for headlines, Cormorant Garamond italic for the turn of a headline and for every quote, Raleway for reading and labels. The logo keeps Inter Tight. Pinch Me style angled edge under the hero. ========================================================================== */ :root { --display: "Italiana", "Cormorant Garamond", Georgia, serif; --serif: "Cormorant Garamond", "Cormorant", Georgia, serif; --font: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif; --paper: #f4efe6; } body { font: 400 17px/1.75 var(--font); font-feature-settings: "lnum" 1; } button, input, select, textarea { font-feature-settings: "lnum" 1; } /* headlines: wide, thin capitals with an italic turn */ .m-h2, .h-l { font: 400 clamp(30px, 3.3vw, 50px)/1.16 var(--display); letter-spacing: .1em; } .h-xl { font: 400 clamp(34px, 4.2vw, 64px)/1.12 var(--display); letter-spacing: .1em; } .h-m { font: 400 clamp(26px, 2.5vw, 38px)/1.18 var(--display); letter-spacing: .1em; text-transform: uppercase; } .m-h2 em, .h-xl em, .h-l em, .h-m em { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1.12em; letter-spacing: 0; text-transform: none; } .ms-name, .reel figcaption b, .wfeature-name, .clip figcaption b, .film figcaption b, .steps-list h3, .pstep-body h2, .region-name { font: 400 clamp(20px, 1.6vw, 23px)/1.28 var(--display); letter-spacing: .12em; text-transform: uppercase; } .faq summary { font: 500 clamp(21px, 1.7vw, 24px)/1.3 var(--serif); letter-spacing: 0; text-transform: none; } .table-wrap th { font: 600 14px/1.3 var(--font); letter-spacing: .14em; } .pstep-n { font: 500 24px/1 var(--serif); } .mi-map text { font: 400 24px/1 var(--display); letter-spacing: .08em; } /* labels and small caps */ .m-eye, .label, .ms-go, .rv-src-name, .rv-src-note { font-weight: 600; letter-spacing: .26em; } /* buttons and navigation: small tracked capitals */ .m-btn, .btn, .hd-cta, .menu .btn, .dock { font: 600 14px/1 var(--font); letter-spacing: .22em; } .nav a { font: 500 14px/1 var(--font); letter-spacing: .2em; } .menu-btn { font: 600 14px/1 var(--font); letter-spacing: .2em; } .menu nav a { font: 400 clamp(28px, 7vw, 40px)/1.3 var(--display); letter-spacing: .1em; } /* quotes: Cormorant italic */ .review blockquote p { font: italic 500 21px/1.5 var(--serif); } .review-xl blockquote p { font-size: clamp(23px, 2vw, 28px); } /* hero: tracked capitals, italic turn, angled edge */ .mh-tag { font: 600 14px/1 var(--font); letter-spacing: .34em; } .mh-in { padding-bottom: calc(clamp(56px, 8vw, 128px) + 48px); } .mh-cut { position: absolute; z-index: 3; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(56px, 8vw, 128px); pointer-events: none; } .mh-cut polygon { fill: var(--night); } .mh-cut polyline { fill: none; stroke: var(--ivory); stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: .85; } /* intro: a Michigan Blue band rising out of the hero */ /* section heads sit centred, like a magazine spread */ .ms .m-head { margin-left: auto; margin-right: auto; text-align: center; } .ms { background: var(--white); } .plus { font-family: var(--font); font-weight: 300; letter-spacing: 0; } @media (max-width: 700px) { .mh-tag { letter-spacing: .2em; line-height: 1.5; margin-bottom: 6px; } } /* hero stops short of the fold so the angled edge and the blue band show on load */ .mh, .mh-in { min-height: max(540px, 82svh); } .mh-in { padding-top: calc(var(--hd) + 8px); padding-bottom: calc(clamp(56px, 8vw, 128px) + 28px); } @media (max-width: 700px) { .mh, .mh-in { min-height: max(560px, 84svh); } } /* ---------- Pinch Me edge and stone (17 Oct 2026) ---------- Headlines move to Marcellus: same wide classical capitals, sturdier strokes, readable on dark grounds. The hero is clipped to a V and the stone band runs up underneath it, edged with a 6px cream line. */ :root { --display: "Marcellus", "Cormorant Garamond", Georgia, serif; --stone: #23201f; --cream: #efe8dc; --cut: clamp(56px, 8vw, 128px); --stone-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='1' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .96 0 0 0 0 .93 0 0 0 0 .88 22 0 0 0 -15.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)' opacity='.6'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.42' numOctaves='1' seed='19' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .96 0 0 0 0 .93 0 0 0 0 .88 26 0 0 0 -19'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.45'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0045' numOctaves='5' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .97 0 0 0 0 .92 2.2 0 0 0 -1.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)' opacity='.09'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='turbulence' baseFrequency='.012' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3 0 0 0 1.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23d)' opacity='.22'/%3E%3C/svg%3E"); } .m-h2, .h-l, .h-xl, .h-m, .menu nav a { letter-spacing: .07em; } .ms-name, .reel figcaption b, .wfeature-name, .clip figcaption b, .film figcaption b, .steps-list h3, .pstep-body h2, .region-name { letter-spacing: .08em; } .mh { z-index: 2; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut) * 106 / 120), 73.61% 100%, 0 calc(100% - var(--cut) * 86 / 120)); } .mh-cut { height: var(--cut); bottom: 0; } .mh-cut polyline { stroke: var(--cream); stroke-width: 12; opacity: 1; stroke-linejoin: miter; } /* ---------- footer: Pinch Me style greige panel (17 Oct 2026) ---------- */ .fj { --taupe: #d6ccbf; --bronze: #7a5c26; background: var(--taupe); color: var(--stone); padding: clamp(64px, 7vw, 104px) 0 clamp(36px, 4vw, 52px); } .fj a { color: inherit; text-decoration: none; } .fj-top { display: grid; gap: clamp(40px, 5vw, 64px); align-items: start; padding-bottom: clamp(56px, 6vw, 96px); } .fj-h { font: 400 clamp(32px, 3.6vw, 54px)/1.1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--stone); margin-bottom: clamp(32px, 3.6vw, 52px); text-wrap: balance; } .fj-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px clamp(20px, 3vw, 48px); } .fj-cols h3 { margin: 0 0 14px; font: 500 14px/1.3 var(--font); letter-spacing: .2em; text-transform: uppercase; color: var(--bronze); } .fj-cols a { display: flex; align-items: center; min-height: 44px; font: 500 14px/1.3 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--stone); background: linear-gradient(var(--stone), var(--stone)) 0 calc(50% + 12px) / 0 1px no-repeat; transition: background-size .35s var(--ease); width: fit-content; } .fj-cols a:hover { background-size: 100% 1px; } .fj-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); } .fj-photo { display: block; aspect-ratio: 1; overflow: hidden; background: #c9bfb2; } .fj-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); } .fj-photo:hover img { transform: scale(1.05); } .fj-base { display: grid; gap: 32px; align-items: start; padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid rgba(35, 32, 31, .18); } .fj-brand { display: grid; gap: 16px; justify-items: start; } .fj .ft-logo { color: var(--stone); } .fj .ft-logo .logo { width: 150px; height: auto; } .fj .logo .hole { fill: var(--taupe); } .fj-brand p, .fj-social span { font: 500 14px/1.5 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--stone); } .fj-social { display: inline-grid; gap: 12px; justify-items: start; align-content: start; min-height: 44px; } .fj-social svg { width: 26px; height: 26px; } .fj-social:hover span { color: var(--bronze); } .fj-about { display: grid; gap: 10px; max-width: 46ch; } .fj-about p { font: 500 14px/1.9 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--stone); } .fj-about .fj-k { color: var(--bronze); letter-spacing: .2em; } .fj-about .fj-credit { font-weight: 400; letter-spacing: .04em; text-transform: none; color: #4a4440; } @media (min-width: 760px) { .fj-photos { grid-template-columns: repeat(4, minmax(0, 1fr)); } .fj-base { grid-template-columns: 1.1fr .8fr 1.5fr; gap: 40px; } } @media (min-width: 1100px) { .fj-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 72px; } .fj-photos { margin-top: clamp(56px, 5vw, 80px); } } @media (max-width: 480px) { .fj-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .fj .wrap { max-width: 1480px; } .fj-cols a, .fj-cols h3 { white-space: nowrap; } @media (min-width: 1100px) { .fj-top { grid-template-columns: auto minmax(0, 1fr); gap: clamp(56px, 5vw, 96px); } .fj-h { white-space: nowrap; font-size: clamp(36px, 3.2vw, 54px); } .fj-cols { grid-template-columns: repeat(3, auto); justify-content: start; column-gap: clamp(36px, 3.4vw, 64px); } .fj-photos { margin-top: 0; align-self: center; } } @media (min-width: 1100px) and (max-width: 1239px) { .fj-top { grid-template-columns: 1fr; } } /* ---------- "Are you ready to dance?" on the stone, under the V (Pinch Me style) ---------- */ /* Linen stone (17 Oct 2026): a light textured beige in the With Grace and Gold neutral family, behind Dave's section and in the footer. The "Are you ready to dance?" band above stays dark stone. */ :root { --linen: #ece5d8; --linen-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='1' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .37 0 0 0 0 .3 22 0 0 0 -15.4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)' opacity='.42'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.42' numOctaves='1' seed='19' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .44 0 0 0 0 .36 26 0 0 0 -19'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.32'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006' numOctaves='4' seed='29' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 2.4 0 0 0 -1.15'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)' opacity='.35'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0045' numOctaves='5' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .49 0 0 0 0 .4 2.2 0 0 0 -1.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)' opacity='.12'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='turbulence' baseFrequency='.012' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .4 0 0 0 0 .32 -3 0 0 0 1.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23d)' opacity='.07'/%3E%3C/svg%3E"); } .fj { --taupe: var(--linen); --bronze: #7a5c26; background-color: var(--linen); background-image: var(--linen-tex); color: var(--stone); } .fj-photo { background: #ddd4c5; } /* ---------- hero copy, set exactly like Pinch Me's (measured at 1440px) ---------- headline 57px light serif caps, .1em tracking, .91 leading, 720px measure; serif label 15px; sans line with one script word; greige button */ .mh-in { gap: 0; } /* ---------- In Dennis's words: the full note as a magazine spread ---------- */ .dw { margin: 0 0 clamp(96px, 9vw, 140px); display: grid; gap: clamp(36px, 4.6vw, 72px); } /* ---------- From the booth: Grace and Gold style reels on dark stone ---------- */ .mv { background-color: var(--stone); background-image: var(--stone-tex); color: rgba(244, 239, 230, .86); } .mv .mv-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 78%); grid-template-columns: none; gap: clamp(16px, 2vw, 28px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 8px; margin: 0 calc(var(--g) * -1); padding-left: var(--g); padding-right: var(--g); align-items: start; } .mv .mv-row::-webkit-scrollbar { display: none; } .mv .reel { scroll-snap-align: center; gap: 14px; } .mv .reel-media { border-radius: clamp(20px, 2.2vw, 30px); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); } .mv .reel-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, .35), transparent 26%, transparent 62%, rgba(0, 0, 0, .55)); transition: opacity .4s; } .mv .reel.is-sound .reel-media::after { opacity: .3; } .reel-cap { position: absolute; z-index: 2; left: 22px; right: 22px; top: 22px; display: grid; gap: 6px; color: #fff; pointer-events: none; } .reel-cap span { font: 600 14px/1.2 var(--font); letter-spacing: .2em; text-transform: uppercase; color: var(--brass); } .reel-cap b { font: 400 clamp(24px, 2vw, 30px)/1.1 var(--display); letter-spacing: .08em; text-transform: uppercase; } .mv .reel-play { left: auto; top: auto; right: 16px; bottom: 16px; transform: none; z-index: 2; width: auto; height: 44px; padding: 0 16px 0 12px; gap: 8px; display: inline-flex; align-items: center; border-radius: 999px; background: rgba(248, 248, 246, .92); color: #000; font: 600 14px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; } .mv .reel-play svg { width: 20px; height: 20px; } .mv .reel-play:hover { transform: scale(1.04); background: var(--brass); } .mv .reel figcaption { display: block; text-align: center; font-size: 15px; color: rgba(244, 239, 230, .72); } @media (min-width: 760px) { .mv .mv-row { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; margin: 0 auto; padding: 0; max-width: 1060px; } .mv .reel:nth-child(2) { margin-top: clamp(40px, 5vw, 80px); } } @media (max-width: 759px) { .mv { overflow: hidden; } } /* ---------- Katie & Dennis: their films inside Dennis's story (one combined section) ---------- */ /* ---------- navigation back to the ourdjrocks-style header (user, 17 Oct 2026) ---------- Bebas Neue capitals for the menu links, the outlined call to action, the mobile menu and the phone booking bar, exactly as before the Journal type layer. The rest of the site keeps the Journal type. */ :root { --nav-face: "Bebas Neue", "Oswald", "Arial Narrow", Impact, sans-serif; } .nav a { font: 400 19px/1 var(--nav-face); letter-spacing: .08em; } .hd-cta { font: 400 19px/1 var(--nav-face); letter-spacing: .08em; } .menu-btn { font: 400 20px/1 var(--nav-face); letter-spacing: .08em; } .menu nav a { font: 400 clamp(34px, 9vw, 52px)/1.15 var(--nav-face); letter-spacing: .02em; } .menu .btn { font: 400 21px/1 var(--nav-face); letter-spacing: .08em; } .dock { font: 400 21px/1 var(--nav-face); letter-spacing: .08em; } /* ---------- hero back to the ourdjrocks-style type (user, 17 Oct 2026), with the new wording ---------- Label with rules either side, huge Bebas headline, Bebas second line, Maize and ghost buttons. The angled edge stays. */ .mh-in { gap: clamp(10px, 1.3vw, 18px); } .mh-tag { display: inline-flex; align-items: center; gap: 16px; font: 600 clamp(14px, .95vw, 15px)/1 "Inter Tight", "Helvetica Neue", Arial, sans-serif; letter-spacing: .32em; text-transform: uppercase; color: #fff; } .mh-tag::before, .mh-tag::after { content: ""; width: clamp(28px, 4vw, 60px); height: 1px; background: var(--brass); } .mh-tag { text-shadow: 0 2px 24px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .45); } .mh .m-btn { font: 400 21px/1 var(--nav-face); letter-spacing: .08em; } @media (max-width: 700px) { .mh-tag::before, .mh-tag::after { display: none; } .mh-tag { letter-spacing: .16em; max-width: 92vw; line-height: 1.5; } } /* ========================================================================== 17 Oct 2026, user: dark gray sections become textured beige; the header keeps a white, full-size logo the whole time on a Michigan Blue bar (ourdjrocks style); approach-led homepage sections. ========================================================================== */ /* beige instead of dark stone: the dance band and the films band */ .mh-cut polyline { stroke: #fbf8f3; } /* header: one logo size, always white, Michigan Blue bar once you scroll (and on inner pages) */ .hd, .hd.is-scrolled, body:not(.l-home) .hd { color: #fff; height: var(--hd); } .hd.is-scrolled, body:not(.l-home) .hd { background: rgba(23, 20, 17, .97); box-shadow: 0 1px 0 rgba(255, 255, 255, .08); } .brand, .hd.is-scrolled .brand { height: 66px; } .brand .logo, .hd.is-scrolled .brand .logo { height: 66px; } .hd.is-scrolled .brand .logo .tag { opacity: 1; } .hd .logo .hole, .hd.is-scrolled .logo .hole, body:not(.l-home) .hd .logo .hole { fill: var(--night); } .hd.is-scrolled .hd-cta:hover, body:not(.l-home) .hd .hd-cta:hover { color: var(--night); } @media (max-width: 700px) { .brand, .hd.is-scrolled .brand, .brand .logo, .hd.is-scrolled .brand .logo { height: 56px; } } /* section A: photo left, the approach on the right, a couple's words as the accent */ /* section B: script kicker and headline on the left, a Maize rule, photo + copy + one button on the right */ /* header: a solid white bar the whole time, like ourdjrocks (user, 17 Oct 2026). Logo full size in Michigan Blue, never changes. On the homepage the hero now starts below the bar instead of under it. */ .hd, .hd.is-scrolled, body:not(.l-home) .hd { background: #fff; color: var(--ink); box-shadow: 0 1px 0 rgba(23, 20, 17, .1); backdrop-filter: none; -webkit-backdrop-filter: none; } .hd .logo .hole, .hd.is-scrolled .logo .hole, body:not(.l-home) .hd .logo .hole { fill: #fff; } .hd .hd-cta:hover, .hd.is-scrolled .hd-cta:hover, body:not(.l-home) .hd .hd-cta:hover { background: var(--brass); border-color: var(--brass); color: var(--night); } .menu-open .hd { background: transparent; color: #fff; box-shadow: none; } .menu-open .hd .logo .hole { fill: var(--night); } body.l-home main { padding-top: var(--hd); } .mh, .mh-in { min-height: max(520px, calc(88svh - var(--hd))); } .mh-in { padding-top: clamp(32px, 4vw, 56px); } @media (max-width: 700px) { .mh, .mh-in { min-height: max(520px, calc(86svh - var(--hd))); } } /* hero sizing after the user's reference: one huge line, a big second line, a smaller line, then the buttons; Maize label on top */ .mh-tag { color: var(--brass); } .mh .m-btn { min-height: clamp(54px, 5vw, 76px); padding: 0 clamp(28px, 3vw, 48px); font-size: clamp(21px, 1.8vw, 28px); } /* ========================================================================== Katie & Dennis, a magazine feature (17 Oct 2026): couple, venue and date first, then Dennis's note set as an article with their films as chapters, a pull quote, two paragraphs with photos, and a labelled coda. ========================================================================== */ .ks { background: var(--paper); overflow-x: clip; } .ks .m-wrap { display: grid; gap: clamp(40px, 5vw, 72px); } .ks-open { display: grid; gap: clamp(28px, 4vw, 64px); align-items: center; } .ks-title { display: grid; gap: 14px; justify-items: start; } .ks-kick { font: 600 14px/1.3 var(--font); letter-spacing: .24em; text-transform: uppercase; color: #7a5c26; } .ks-name { font: 400 clamp(50px, 6.6vw, 104px)/.95 var(--display); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); } .ks-name i { font: italic 500 .9em/1 var(--serif); color: var(--maize-deep); text-transform: none; } .ks-date { font: 600 14px/1.5 var(--font); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); padding-top: 12px; border-top: 1px solid rgba(23, 20, 17, .2); } .ks-deck { font: italic 500 clamp(22px, 1.9vw, 27px)/1.4 var(--serif); color: var(--ink-2); max-width: 30ch; } .ks-hero { margin: 0; display: grid; gap: 8px; } .ks-hero img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 60%; } .ks-hero figcaption, .ks-clip figcaption { font-size: 14px; color: var(--ink-3); } .ks-lead { margin: 0 auto; max-width: 820px; } .ks-lead p { font: 500 clamp(21px, 1.7vw, 24px)/1.65 var(--serif); color: var(--ink); } .ks-lead p::first-letter { float: left; font: 400 4.6em/.78 var(--display); color: var(--maize-deep); margin: .06em .1em 0 0; } .ks-lead p::before { content: ""; } .ks-film.mv { background: none; padding: 0; color: var(--ink-2); } .ks-film .mv-row { max-width: 980px; } .ks-film .reel-media { box-shadow: 0 24px 46px -30px rgba(35, 32, 31, .55); } .ks-film .reel-cap span { color: var(--brass); font: 400 30px/1 var(--display); letter-spacing: .04em; } .ks-film .reel figcaption { display: grid; gap: 6px; justify-items: center; text-align: center; } .ks-film .reel figcaption q { quotes: none; font: italic 500 clamp(19px, 1.5vw, 22px)/1.35 var(--serif); color: var(--ink); max-width: 24ch; } .ks-film .reel figcaption span { font-size: 14px; color: var(--ink-3); } .ks-pair { display: grid; gap: clamp(32px, 4vw, 64px); } .ks-col { margin: 0; display: grid; gap: 18px; align-content: start; } .ks-ph { display: block; aspect-ratio: 3 / 2; overflow: hidden; } .ks-ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; } .ks-col blockquote { margin: 0; } .ks-col p { font: 500 clamp(19px, 1.45vw, 21px)/1.65 var(--serif); color: var(--ink-2); } .ks-sign { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 18px; text-align: center; font-size: 15px; color: var(--ink-3); } .ks-sign b { color: var(--ink); font-weight: 600; } .ks-coda { display: grid; gap: 24px; align-items: center; padding-top: clamp(36px, 4vw, 56px); border-top: 1px solid rgba(23, 20, 17, .14); } .ks-clip { margin: 0; display: grid; gap: 8px; } .ks-vid { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: clamp(14px, 1.6vw, 22px); background: var(--night); } .ks-coda-txt { display: grid; gap: 12px; justify-items: center; text-align: center; } .ks-coda-q { font: italic 500 clamp(26px, 2.4vw, 36px)/1.25 var(--serif); color: var(--ink); max-width: 18ch; } .ks-coda-who { font: 600 14px/1.4 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); } @media (min-width: 760px) { .ks-pair { grid-template-columns: 1fr 1fr; } .ks-coda { grid-template-columns: 1fr 1.3fr 1fr; gap: clamp(24px, 3vw, 48px); } } @media (min-width: 900px) { .ks-open { grid-template-columns: .9fr 1.1fr; } } @media (max-width: 759px) { .ks-coda .ks-clip:last-child { display: none; } } .nw { white-space: nowrap; } .ks-film .reel-cap span { font: italic 500 32px/1 var(--serif); letter-spacing: 0; } .ks-lead p::first-letter { float: none; font: inherit; color: inherit; margin: 0; } .ks-q { float: left; font: 500 5.2em/.72 var(--serif); color: var(--maize-deep); margin: .04em .06em 0 -.04em; } /* ========================================================================== Snider Events direction (user, 17 Oct 2026): black with a gold accent, no Michigan colours. Headlines: uppercase serif at tight leading with italic accent lines and a script connector (Cormorant Garamond stands in for Snider's licensed Atelier Fleur). Reading text: EB Garamond. Labels, buttons, small caps: Instrument Sans. Navigation keeps its Bebas (user's ourdjrocks request). ========================================================================== */ :root { --ivory: #f9f5ee; --paper: #f3ede2; --linen: #e3decc; --sand: #e3decc; --white: #ffffff; --night: #171411; --night-2: #2b2622; --ink: #171411; --ink-2: #2b2622; --ink-3: #6b6259; --gold: #8a6a2f; --brass: #c9a35a; --gold-light: #e3c48a; --maize-deep: #a8843f; --line: rgba(23, 20, 17, .14); --line-dark: rgba(249, 245, 238, .18); --display: "Cormorant Garamond", "Cormorant", Georgia, serif; --serif: "Cormorant Garamond", "Cormorant", Georgia, serif; --font: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; --body: "EB Garamond", "Cormorant Garamond", Georgia, serif; } body { font: 400 18px/1.7 var(--body); color: var(--ink-2); background: var(--ivory); font-feature-settings: "lnum" 1; } /* headlines */ .m-h2, .h-l { font: 500 clamp(38px, 4.6vw, 72px)/.9 var(--display); letter-spacing: .005em; text-transform: uppercase; color: var(--ink); } .h-xl { font: 500 clamp(44px, 6vw, 100px)/.86 var(--display); letter-spacing: .005em; text-transform: uppercase; color: var(--ink); } .h-m { font: 500 clamp(30px, 3vw, 46px)/.95 var(--display); letter-spacing: .005em; text-transform: uppercase; color: var(--ink); } .m-h2 em, .h-xl em, .h-l em, .h-m em { font-family: var(--display); font-style: italic; font-weight: 500; font-size: 1em; letter-spacing: .005em; text-transform: uppercase; color: var(--maize-deep); } .mc-txt .m-h2 em { color: var(--gold-light); } .ks-name { font: 500 clamp(56px, 7.4vw, 116px)/.84 var(--display); letter-spacing: .005em; } .ks-name i { font: italic 500 1em/1 var(--display); text-transform: lowercase; color: var(--maize-deep); } .fj-h { font: 500 clamp(36px, 3.8vw, 58px)/.9 var(--display); letter-spacing: .01em; } .ms-name, .reel figcaption b, .wfeature-name, .clip figcaption b, .film figcaption b, .steps-list h3, .pstep-body h2, .region-name { font: italic 500 clamp(24px, 2vw, 31px)/1.1 var(--display); letter-spacing: 0; text-transform: none; color: var(--ink); } .reel-cap b { font: 500 clamp(26px, 2.2vw, 34px)/1 var(--display); letter-spacing: .01em; } .faq summary { font: 500 clamp(22px, 1.8vw, 26px)/1.25 var(--display); } /* reading text in Garamond */ .ks-lead p, .ks-col p, .lede, .faq-a, .m-head-p { font-family: var(--body); } .ks-lead p { font: 400 clamp(20px, 1.6vw, 23px)/1.7 var(--body); } .ks-col p { font: 400 clamp(18px, 1.35vw, 20px)/1.7 var(--body); } /* buttons: square, black, small tracked sans; gold on hover */ .m-btn, .btn, .mh .m-btn { font: 500 14px/1 var(--font); letter-spacing: .2em; text-transform: uppercase; } .m-btn-gold, .btn-brass { background: var(--ink); color: var(--ivory); } .m-btn-gold:hover, .btn-brass:hover { background: var(--brass); color: var(--ink); } .mh .m-btn-gold, .mc .m-btn-gold { background: var(--brass); color: var(--ink); } .mh .m-btn-gold:hover, .mc .m-btn-gold:hover { background: var(--ivory); color: var(--ink); } .dock, .menu .btn { background: var(--ink); color: var(--ivory); } .hd-cta:hover, .hd .hd-cta:hover, .hd.is-scrolled .hd-cta:hover, body:not(.l-home) .hd .hd-cta:hover { background: var(--ink); border-color: var(--ink); color: var(--ivory); } .tlink { border-bottom-color: var(--brass); } /* hero: Snider's stacked headline with our words */ .mh-tag { color: var(--gold-light); font: 500 14px/1.4 var(--font); letter-spacing: .3em; } .mh-tag::before, .mh-tag::after { background: var(--gold-light); } .mh .m-btn { min-height: 56px; padding: 0 30px; } .mh-shade { background: radial-gradient(ellipse 62% 55% at 50% 50%, rgba(23, 20, 17, .5), rgba(23, 20, 17, .18) 72%), linear-gradient(180deg, rgba(23, 20, 17, .35), rgba(23, 20, 17, .1) 30%, rgba(23, 20, 17, .45)); } /* small details */ .rv-stars { color: var(--brass); } .logo .label { fill: var(--brass); } .fj { --bronze: #7a5c26; } .ks-kick { color: var(--gold); } /* ========================================================================== Services page, after Snider Events /services (17 Oct 2026) ========================================================================== */ .sv-hero { position: relative; min-height: calc(100svh - var(--hd)); display: grid; place-items: center; overflow: hidden; background: var(--night); color: #fff; text-align: center; } .sv-hero > img, .sv-hero .sv-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .62; } .sv-hero-in { position: relative; z-index: 1; display: grid; justify-items: center; gap: 18px; padding: 48px var(--g); } .sv-stack { display: grid; justify-items: center; font-weight: 400; } .sv-l1 { font: 500 clamp(56px, 8.6vw, 132px)/.82 var(--display); text-transform: uppercase; color: #fff; } .sv-l2 { font: italic 500 clamp(56px, 8.6vw, 132px)/.82 var(--display); text-transform: uppercase; color: #fff; } .sv-l3 { font: 400 clamp(46px, 6vw, 96px)/.6 "Waterfall", cursive; color: var(--gold-light); margin: .06em 0 -.1em; position: relative; z-index: 1; } .sv-l1, .sv-l2 { text-shadow: 0 2px 24px rgba(0, 0, 0, .35); } .sv-hero-cap { position: absolute; z-index: 1; left: var(--g); bottom: 18px; font-size: 14px; color: rgba(255, 255, 255, .75); } .sv-intro { background: var(--ivory); padding: clamp(64px, 8vw, 128px) 0; position: relative; overflow: hidden; } .sv-intro-in { display: grid; gap: clamp(36px, 5vw, 88px); align-items: center; } .sv-mat { margin: 0; justify-self: center; max-width: 500px; width: 100%; padding: clamp(14px, 1.6vw, 22px); background: #fff; box-shadow: 0 1px 0 var(--line); } .sv-mat img { width: 100%; aspect-ratio: 501 / 691; object-fit: cover; } .sv-intro-txt { display: grid; gap: 18px; max-width: 560px; } .sv-intro-txt p:not(.label):not(.sv-statement) { font-size: 18px; line-height: 1.7; } .sv-statement { font: 500 clamp(32px, 3.4vw, 50px)/1.02 var(--display); color: var(--ink); letter-spacing: .01em; } .sv-rule { display: block; width: 100%; height: 1px; background: var(--linen); } @media (min-width: 900px) { .sv-intro-in { grid-template-columns: .95fr 1.05fr; } } /* framed window: the photo holds still while the section slides past (Jayne Heir / Snider) */ .sv-band { padding: 0 clamp(12px, 1.4vw, 20px); background: var(--ivory); } .sv-band-img { position: relative; height: clamp(320px, 62vh, 760px); overflow: hidden; clip-path: inset(0); } .sv-band-img img { position: fixed; inset: 0; width: 100%; height: 100vh; object-fit: cover; } @media (max-width: 700px), (prefers-reduced-motion: reduce) { .sv-band-img img { position: absolute; height: 100%; } } .sv-list { background: var(--ivory); padding: clamp(72px, 8vw, 128px) 0 clamp(48px, 6vw, 96px); } .sv-list-h { display: grid; justify-items: start; margin-bottom: clamp(48px, 6vw, 96px); } .sv-list-h span { font: 500 clamp(52px, 7vw, 100px)/.84 var(--display); text-transform: uppercase; color: var(--ink); } .sv-list-h em { font: italic 500 clamp(52px, 7vw, 100px)/.84 var(--display); text-transform: uppercase; color: var(--maize-deep); padding-left: .5em; } .sv-row { display: grid; gap: clamp(28px, 4vw, 80px); align-items: center; padding: clamp(36px, 4vw, 64px) 0; border-top: 1px solid var(--linen); } .sv-media { position: relative; padding: 0 18% 14% 0; max-width: 560px; width: 100%; justify-self: center; } .sv-ph { display: block; overflow: hidden; } .sv-ph-a img { width: 100%; aspect-ratio: 414 / 560; object-fit: cover; } .sv-ph-b { position: absolute; right: 0; bottom: 0; width: 46%; border: 10px solid var(--ivory); } .sv-ph-b img { width: 100%; aspect-ratio: 249 / 330; object-fit: cover; } .sv-txt { display: grid; gap: 14px; justify-items: start; max-width: 480px; } .sv-tag { font: 500 14px/1.3 var(--font); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); } .sv-name { font: italic 500 clamp(32px, 2.8vw, 42px)/1 var(--display); color: var(--ink); } .sv-txt p:not(.sv-tag) { font-size: 18px; line-height: 1.7; color: var(--ink-2); } .sv-txt .m-btn { margin-top: 6px; } @media (min-width: 900px) { .sv-row { grid-template-columns: 1.05fr .95fr; } .sv-flip .sv-media { order: 2; } .sv-flip .sv-media { padding: 0 0 14% 18%; } .sv-flip .sv-ph-b { right: auto; left: 0; } .sv-row .sv-txt { justify-self: center; } } .sv-state { background-color: var(--linen); background-image: var(--linen-tex); padding: clamp(72px, 8vw, 120px) 0; } .sv-state-in { display: grid; justify-items: center; gap: 28px; text-align: center; } .sv-hair { display: block; width: min(629px, 80%); height: 1px; background: rgba(23, 20, 17, .25); } .sv-state blockquote { margin: 0; display: grid; gap: 14px; } .sv-state blockquote p { font: italic 500 clamp(28px, 2.8vw, 40px)/1.2 var(--display); color: var(--ink); max-width: 26ch; } .sv-state cite { font: 500 14px/1.3 var(--font); font-style: normal; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); } .sv-btn-cream { background: var(--ivory); color: var(--ink); } .sv-btn-cream:hover { background: var(--ink); color: var(--ivory); } @media (max-width: 520px) { .sv-list-h span, .sv-list-h em { font-size: clamp(36px, 11vw, 52px); } .sv-list-h em { padding-left: 0; } } /* homepage pull quote in a handwritten script (user's reference, 17 Oct 2026) */ .ks-pullq { margin: 0 auto; max-width: 1100px; display: grid; justify-items: center; gap: clamp(16px, 2vw, 26px); text-align: center; padding: clamp(16px, 2vw, 32px) 0; } .ks-pullq blockquote { margin: 0; } .ks-pullq blockquote p { font: 400 clamp(44px, 5.4vw, 84px)/1.35 "Sacramento", "Waterfall", cursive; color: var(--ink); text-wrap: balance; } .ks-pullq figcaption { font: 500 clamp(14px, 1.1vw, 17px)/1.3 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); } .ks-pullq-after { font: 400 clamp(18px, 1.35vw, 20px)/1.6 var(--body); color: var(--ink-2); max-width: 60ch; } /* Katie & Dennis opener: their engraved rings (K♥D 9.6.26) tucked over the corner of the pond portrait */ .ks-hero { position: relative; padding: 0 0 clamp(56px, 7vw, 96px) clamp(44px, 6vw, 88px); } .ks-hero-main { display: block; } .ks-hero-main img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 60%; } .ks-rings { position: absolute; left: 0; bottom: 0; width: 34%; border: 10px solid var(--paper); box-shadow: 0 18px 36px -20px rgba(23, 20, 17, .45); } .ks-rings img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 82%; } .ks-hero figcaption { position: absolute; right: 0; bottom: 18px; } @media (max-width: 600px) { .ks-hero figcaption { position: static; margin-top: 10px; } .ks-hero { padding-bottom: 0; } .ks-rings { bottom: 30px; } } /* venue logos at Marquee DJ's scale: ~208px slots, marks about 120x50 (user, 17 Oct 2026) */ .mvn-track li { width: clamp(170px, 14.5vw, 210px); } .mvn-track a { padding: 0 18px; } .mvn-logo { height: 64px; padding: 6px 0; } .mvn-logo img { max-width: min(136px, 100%); max-height: 52px; } .mvn-name { margin-top: 10px; font-size: 15px; line-height: 1.3; } .mvn-town { font-size: 14px; } /* ========================================================================== Real wedding story pages as a magazine feature (17 Oct 2026) ========================================================================== */ .st-hero { position: relative; min-height: max(560px, calc(92svh - var(--hd))); display: flex; align-items: flex-end; color: #fff; overflow: hidden; background: var(--night); } .st-hero-img { position: absolute; inset: 0; } .st-hero-img img { width: 100%; height: 100%; object-fit: cover; } .st-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23, 20, 17, .25) 0%, rgba(23, 20, 17, 0) 30%, rgba(23, 20, 17, .15) 55%, rgba(23, 20, 17, .78) 100%); } .st-hero .crumbs, .st-hero .crumbs a, .st-hero .crumbs span { color: rgba(255, 255, 255, .8); } .st-title { font: 500 clamp(64px, 10vw, 156px)/.84 var(--display); text-transform: uppercase; letter-spacing: .005em; color: #fff; text-shadow: 0 2px 30px rgba(0, 0, 0, .35); } .st-title i { font-style: italic; color: var(--gold-light); text-transform: lowercase; } .st-date { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0; font: 500 14px/1.5 var(--font); letter-spacing: .22em; text-transform: uppercase; } .st-date span + span::before { content: "·"; margin: 0 .7em; color: var(--gold-light); } .st-credit { position: absolute; z-index: 1; right: var(--g); bottom: 16px; font-size: 14px; color: rgba(255, 255, 255, .7); } .st-reel { margin: 0; display: grid; gap: 10px; width: 100%; max-width: 330px; justify-self: center; } .st-reel .reel-media { aspect-ratio: 9 / 16; border-radius: clamp(18px, 2vw, 26px); box-shadow: 0 26px 50px -30px rgba(23, 20, 17, .6); } .st-reel .reel-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, .55), transparent 32%, transparent 62%, rgba(0, 0, 0, .45)); } .st-reel .reel-cap { position: absolute; z-index: 2; left: 18px; right: 18px; top: 18px; display: grid; gap: 4px; color: #fff; pointer-events: none; } .st-reel .reel-cap span { font: italic 500 28px/1 var(--display); color: var(--gold-light); } .st-reel .reel-cap b { font: 500 22px/1.05 var(--display); letter-spacing: .04em; text-transform: uppercase; } .st-reel .reel-play { left: auto; top: auto; right: 14px; bottom: 14px; transform: none; z-index: 2; width: auto; height: 44px; padding: 0 16px 0 12px; gap: 8px; display: inline-flex; align-items: center; border-radius: 999px; background: rgba(249, 245, 238, .94); color: var(--ink); font: 600 13px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; } .st-reel .reel-play svg { width: 18px; height: 18px; } .st-reel figcaption { font-size: 14px; color: var(--ink-3); text-align: center; } .st-gallery { background: var(--ivory); padding: clamp(72px, 8vw, 120px) 0; } .st-gallery .gallery { columns: 3 300px; column-gap: 14px; } .st-gallery .gi { margin-bottom: 14px; } @media (max-width: 700px) { .st-gallery .gallery { columns: 2; column-gap: 8px; } .st-gallery .gi { margin-bottom: 8px; } } /* story hero: the couple stands left of centre in most covers, so the title sits bottom-right on wide screens */ @media (min-width: 900px) { .st-date { justify-content: flex-end; } .st-title { font-size: clamp(64px, 8.4vw, 132px); } .st-credit { right: auto; left: var(--g); } } .st-hero::after { background: linear-gradient(180deg, rgba(23, 20, 17, .2) 0%, rgba(23, 20, 17, 0) 35%, rgba(23, 20, 17, .2) 60%, rgba(23, 20, 17, .8) 100%); } /* pull quotes in a thin signature script, nearest free match to the Marquee DJ quote font (Hanthem Script, licensed) */ .ks-pullq blockquote p { font: 400 clamp(46px, 5.8vw, 88px)/1.3 "Waterfall", "Waterfall", cursive; letter-spacing: .01em; } .ks-pullq figcaption { font-weight: 500; letter-spacing: .12em; } .ks-pullq blockquote p { line-height: 1.12; } /* story pages, readability pass: photo first, then a clean masthead; bigger reading text; no empty columns; larger gallery */ .st-hero { min-height: 0; height: clamp(380px, 72svh, 820px); display: block; } .st-hero::after { background: linear-gradient(180deg, rgba(23, 20, 17, .18), rgba(23, 20, 17, 0) 28%); } .st-credit { left: auto; right: var(--g); bottom: 14px; color: rgba(255, 255, 255, .85); text-shadow: 0 1px 6px rgba(0, 0, 0, .5); } .st-head { background: var(--ivory); padding: clamp(36px, 4.4vw, 64px) 0 clamp(28px, 3.4vw, 48px); text-align: center; } .st-head-in { display: grid; justify-items: center; gap: 14px; } .st-head .crumbs { justify-content: center; } .st-head .st-title { color: var(--ink); text-shadow: none; font-size: clamp(56px, 8.4vw, 132px); } .st-head .st-title i { color: var(--maize-deep); } .st-head .st-date { color: var(--ink); justify-content: center; font-size: 15px; } .st-head .st-date span + span::before { color: var(--maize-deep); } @media (min-width: 900px) { .st-head-in { text-align: center; justify-items: center; } } .st-reel .reel-play { font-size: 14px; } .st-gallery { padding-top: clamp(48px, 5vw, 80px); } .st-gal-few .gallery { columns: 2 380px; column-gap: 16px; } .st-gal-few .gi { margin-bottom: 16px; } .st-reel .reel-cap span { font-size: 26px; } @media (max-width: 700px) { .st-hero { height: 62svh; } .st-gallery .gallery, .st-gal-few .gallery { columns: 1; } } /* services: explain each service, with real photos and captions */ .sv-what { font: italic 500 clamp(22px, 1.8vw, 27px)/1.25 var(--display); color: var(--ink); } .sv-pts { list-style: none; margin: 4px 0 6px; padding: 0; display: grid; gap: 0; } .sv-pts li { position: relative; padding: 10px 0 10px 22px; border-top: 1px solid var(--line); font-size: 17px; line-height: 1.5; color: var(--ink-2); } .sv-pts li::before { content: ""; position: absolute; left: 0; top: 1.15em; width: 9px; height: 1px; background: var(--maize-deep); } .sv-cap { position: relative; margin: 12px 0 0; font-size: 14px; line-height: 1.45; color: var(--ink-3); } .sv-media .sv-cap { grid-column: 1 / -1; } .sv-txt { max-width: 520px; gap: 12px; } .sv-txt p:not(.sv-tag):not(.sv-what) { font-size: 18px; line-height: 1.7; } .sv-media { padding-bottom: 18%; } .sv-media .sv-cap { position: absolute; left: 0; bottom: -2.4em; width: 50%; } .sv-flip .sv-media .sv-cap { left: auto; right: 0; text-align: right; } /* quality pass (17 Oct 2026, from the audit and design critic) */ /* nothing under 14px */ .st-reel .reel-play, .st-reel .reel-play span { font-size: 14px; } /* linen without the grain or the tile seam: a soft, even paper tone */ :root { --linen-tex: radial-gradient(120% 90% at 20% 0%, rgba(255, 255, 255, .35), transparent 60%), radial-gradient(90% 80% at 100% 100%, rgba(122, 92, 38, .06), transparent 60%); } /* homepage hero: readable label, and room around the script line on small screens */ .mh-tag { color: var(--ivory); text-shadow: 0 1px 12px rgba(0, 0, 0, .6); } .mh-shade { background: linear-gradient(180deg, rgba(23, 20, 17, .55) 0%, rgba(23, 20, 17, .25) 45%, rgba(23, 20, 17, .35) 100%), radial-gradient(ellipse 60% 50% at 50% 50%, rgba(23, 20, 17, .35), transparent 75%); } .ks-ph-dennis { position: relative; } .ks-ph-dennis img { object-position: 50% 22%; } .ks-who { position: absolute; left: 14px; bottom: 14px; padding: 8px 12px; background: rgba(23, 20, 17, .78); color: var(--ivory); font: 500 14px/1 var(--font); letter-spacing: .16em; text-transform: uppercase; } .ks-clip-ph img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: clamp(14px, 1.6vw, 22px); } /* venue logos at Marquee's proportions: 208px logo boxes ~248px apart, full colour, solid dark names */ .mvn-marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); } .mvn-track li { width: 248px; } .mvn-track a { padding: 0 20px; gap: 0; } .mvn-logo { height: 120px; padding: 10px 0; } .mvn-logo img { max-width: 190px; max-height: 100px; opacity: 1; filter: none; } .mvn-name { margin-top: 14px; font: 500 16px/1.35 var(--font); letter-spacing: .01em; color: var(--ink); } .mvn-town { font: 400 15px/1.3 var(--body); color: var(--ink-2); } /* services: less dead space */ .sv-intro { padding: clamp(48px, 5.5vw, 88px) 0; } .sv-band-img { height: clamp(260px, 46vh, 560px); } .sv-list { padding-top: clamp(48px, 5.5vw, 88px); } .sv-list-h { margin-bottom: clamp(32px, 4vw, 56px); } .sv-row { padding: clamp(32px, 3.4vw, 52px) 0; gap: clamp(28px, 3.6vw, 64px); } .sv-media { padding-bottom: 14%; } /* homepage story: one couple photo, Dennis beside his words, real buttons, tight on phones (17 Oct 2026) */ .ks-deck-sign { display: block; margin-top: 8px; font: 500 14px/1 var(--font); font-style: normal; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); } .ks-pair2 { display: grid; gap: clamp(24px, 4vw, 64px); align-items: center; max-width: 1060px; margin: 0 auto; } .ks-pair2 .ks-ph { aspect-ratio: 2 / 3; } .ks-pair2 .ks-ph img { object-position: 50% 30%; } .ks-pair2 .ks-col { margin: 0; display: grid; gap: 18px; } @media (min-width: 760px) { .ks-pair2 { grid-template-columns: .8fr 1.2fr; } } .ks-sign { display: grid; justify-items: center; gap: 18px; text-align: center; } .ks-sign p { display: grid; gap: 4px; font-size: 15px; color: var(--ink-3); } .ks-sign p b { color: var(--ink); } .ks-sign span::before { content: none; } .ks-coda-txt .m-btn { margin-top: 8px; } @media (max-width: 759px) { .ks .m-wrap { gap: 32px; } .ks-kick { font-size: 14px; } .ks-name { font-size: clamp(50px, 15vw, 64px); } .ks-deck { font-size: 20px; } .ks-hero { padding: 0; } .ks-rings { display: none; } .ks-hero figcaption { position: static; margin-top: 8px; } .ks-lead p { font-size: 18px; } .ks-pair2 .ks-ph { aspect-ratio: 4 / 5; max-height: 460px; } .ks-coda { padding-top: 28px; } .ks-coda .ks-clip { display: none; } .ks-pullq { padding: 0; } .ks-pullq blockquote p { font-size: clamp(40px, 11vw, 52px); } .ks-film .reel figcaption span { display: none; } } .ks-date { display: flex; flex-wrap: wrap; gap: 2px 0; } .ks-date span + span::before { content: "·"; margin: 0 .55em; } @media (max-width: 759px) { .ks-date { display: grid; } .ks-date span + span::before { content: none; } } /* ========================================================================== Design-critic batch (18 Oct 2026) ========================================================================== */ /* one script face: Waterfall is finer than the old script, so it runs a touch larger */ .sv-l3 { font-size: clamp(54px, 7vw, 110px); } /* 1. one rhythm for every section */ :root { --sec: clamp(64px, 7vw, 108px); } .sv-intro, .sv-list, .sv-state, .st-gallery, .ks, .ms, .mvn, .doc { padding-top: var(--sec); padding-bottom: var(--sec); } /* 2. inner-page openings: full-bleed photo, title over a soft shade, credit below the image */ .ph-hero { position: relative; min-height: max(500px, calc(78svh - var(--hd))); display: flex; align-items: flex-end; color: #fff; overflow: hidden; background: var(--night); } .ph-hero .ph-media { position: absolute; inset: 0; min-height: 0; } .ph-hero .ph-media img { width: 100%; height: 100%; object-fit: cover; } .ph-hero .ph-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23, 20, 17, .35) 0%, rgba(23, 20, 17, .05) 35%, rgba(23, 20, 17, .35) 60%, rgba(23, 20, 17, .82) 100%); } .ph-hero-in { position: relative; z-index: 1; display: grid; gap: 16px; justify-items: start; padding-top: 48px; padding-bottom: clamp(40px, 5vw, 72px); max-width: var(--wrap); } .ph-hero .h-xl { color: #fff; font-size: clamp(42px, 5.6vw, 86px); line-height: .9; max-width: 15ch; text-shadow: 0 2px 30px rgba(0, 0, 0, .3); } .ph-hero .h-xl em { color: var(--gold-light); } .ph-hero .lede { color: rgba(255, 255, 255, .92); max-width: 52ch; font-size: clamp(18px, 1.4vw, 21px); } .ph-hero .crumbs, .ph-hero .crumbs a, .ph-hero .crumbs span { color: rgba(255, 255, 255, .78); } .ph-hero .label { color: var(--gold-light); } .ph-hero .tlink { color: #fff; border-bottom-color: var(--gold-light); } .ph-hero .btn-brass { background: var(--brass); color: var(--ink); } .ph-credit-line { margin: 0; background: var(--white); border-bottom: 1px solid var(--line); } .ph-credit-line .wrap { display: block; padding-top: 10px; padding-bottom: 10px; font-size: 14px; color: var(--ink-3); } .ph-split .h-xl em, .ph-plain .h-xl em { color: var(--maize-deep); font-style: italic; } .ph-split .ph-credit { display: none; } /* 3. photo breaks and a pull quote inside long articles */ .doc-break { margin: 2.4em 0 2.6em; } .doc-break img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; } .doc-break figcaption, .doc-pair figcaption { margin-top: 10px; font-size: 14px; color: var(--ink-3); } .doc-pair { margin: 2.4em 0 2.6em; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; } .doc-pair span { display: block; overflow: hidden; aspect-ratio: 4 / 5; } .doc-pair span:nth-child(2) { margin-top: 14%; } .doc-pair img { width: 100%; height: 100%; object-fit: cover; } .doc-pair figcaption { grid-column: 1 / -1; } /* 4. FAQ grouped under headings */ /* 5. one button system: solid black (gold on hover) and a gold-underlined text link */ .btn, .m-btn, .sv-btn-cream, .hd-cta { border-radius: 0; } .sv-btn-cream, .btn-brass, .m-btn-gold { background: var(--ink); color: var(--ivory); box-shadow: none; } .sv-btn-cream:hover, .btn-brass:hover, .m-btn-gold:hover { background: var(--brass); color: var(--ink); } .mh .m-btn-gold, .mc .m-btn-gold, .ph-hero .btn-brass { background: var(--brass); color: var(--ink); } .mh .m-btn-gold:hover, .mc .m-btn-gold:hover, .ph-hero .btn-brass:hover { background: var(--ivory); } .tlink, .ms-go { font: 500 14px/1 var(--font); letter-spacing: .16em; text-transform: uppercase; } /* 6. homepage service cards: taller photos, numerals, no card fill */ .ms-card { background: transparent; } .ms-img { aspect-ratio: 4 / 5; } .ms-body { padding: 18px 0 0; } .ms-n { font: italic 500 26px/1 var(--display); color: var(--maize-deep); } .ms-grid { gap: clamp(20px, 2.4vw, 36px); } .ph-hero .ph-shade { background: linear-gradient(180deg, rgba(23,20,17,.35) 0%, rgba(23,20,17,.1) 30%, rgba(23,20,17,.5) 58%, rgba(23,20,17,.88) 100%), linear-gradient(90deg, rgba(23,20,17,.45), transparent 65%); } /* ========================================================================== Design-critic second pass (18 Oct 2026) ========================================================================== */ /* 1. services on phones: one column that never pushes the page wider; captions sit under the photos */ @media (max-width: 899px) { .sv-row { grid-template-columns: minmax(0, 1fr); } .sv-txt { min-width: 0; } .sv-media .sv-cap, .sv-flip .sv-media .sv-cap { position: static; width: auto; text-align: left; margin-top: 10px; } .sv-media { padding-bottom: 0; } .sv-media .sv-ph-b { bottom: 2.6em; } .m-btn { white-space: normal; text-align: left; } } /* 2. the script word in the hero headlines: clear of the caps, and held off the photo */ .sv-l3 { line-height: .9; margin: .08em 0 .04em; text-shadow: 0 1px 2px rgba(0, 0, 0, .7), 0 0 28px rgba(0, 0, 0, .5); } .mh-shade { background: linear-gradient(180deg, rgba(23, 20, 17, .55), rgba(23, 20, 17, .3) 45%, rgba(23, 20, 17, .6)); } /* 4. articles: text at reading width, photos and pull quotes use the whole column */ /* 5. larger reading text and captions */ .sv-txt p:not(.sv-tag):not(.sv-what), .sv-intro-txt p:not(.label):not(.sv-statement) { font-size: clamp(18px, .6vw + 12px, 20px); } figcaption, .sv-cap, .doc-break figcaption, .doc-pair figcaption, .fig figcaption, .photos figcaption { font-size: 15px; color: #5c544c; } .region-sub, .toc a { font-size: 16px; } /* 6. article H2s in the house style: shorter measure, gold italic turn */ .sv-statement { margin: 0; font: 500 clamp(36px, 3.6vw, 56px)/.95 var(--display); text-transform: uppercase; color: var(--ink); text-wrap: balance; } .sv-statement em { font-style: italic; color: var(--maize-deep); } /* 7. Katie & Dennis gallery: two columns on phones, not 24 full-width photos */ @media (max-width: 700px) { .st-gallery .gallery, .st-gal-few .gallery { columns: 2 !important; column-gap: 8px; } } /* 9. story films: the chapter heading already names the moment, so no label across faces */ .st-reel .reel-cap { display: none; } /* 10. tablet: three cards in one row; two homepage service cards across */ .planner-note .mark { display: none; } /* ========================================================================== Conversion pass (18 Oct 2026) ========================================================================== */ /* what happens after you enquire, under every date form */ .mc-next { margin: 4px 0 0; font: 400 16px/1.5 var(--body); color: rgba(244, 239, 230, .78); max-width: 46ch; } .cyd .mc-next, .planner .mc-next { color: var(--ink-2); } .form-status:empty { display: none; } .mc-two > .form-status, .two > .form-status { grid-column: 1 / -1; margin: -4px 0 0; color: #e8a08a; font-size: 15px; } .cyd .two > .form-status { color: #a3412a; } /* check your date on phones: a slim photo strip, so the first field is on the first screen; fields use the full width */ @media (max-width: 1000px) { .cyd-media { min-height: 0; height: 120px; } .cyd-media p { display: none; } .cyd-in { gap: 12px; padding-top: 24px; } } @media (max-width: 600px) { .pstep { grid-template-columns: minmax(0, 1fr); gap: 10px; } .pstep-n { width: 36px; height: 36px; font-size: 20px; } } .cyd-review { margin-top: 12px; padding-top: 20px; border-top: 1px solid var(--line); } /* phone menu: the date check as a real, full-width button */ .menu .btn { width: 100%; justify-content: center; min-height: 58px; font-size: 15px; margin-top: 18px; } /* ========================================================================== Mobile pass (18 Oct 2026, from the mobile review) ========================================================================== */ /* P1 the phone menu: links stay light after scrolling; a real gold button; the dock steps aside */ body:not(.l-home) .hd.is-scrolled + .menu, .menu { color: #fff; } .menu .btn, .menu .btn-brass { background: var(--brass); color: var(--ink); } .menu-open .dock { transform: translateY(160%); pointer-events: none; } /* P1 the page's main action on the first screen of a phone */ @media (max-width: 899px) { .ph-split .ph-media { min-height: 0; height: clamp(200px, 32svh, 300px); } .ph-split .ph-txt-in { padding-top: 20px; gap: 12px; } .ph-split .crumbs { display: none; } } .sv-hero-go { margin-top: clamp(18px, 2vw, 28px); } /* P2 gold on linen: darker golds so small labels and italic accents pass contrast */ .ks { --gold: #735623; --maize-deep: #86662a; } /* P2 homepage service cards: a swipe row on phones instead of three tall photos stacked */ @media (max-width: 699px) { .ms-grid { grid-auto-flow: column; grid-auto-columns: 80%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--g)); padding-inline: var(--g); scroll-padding-inline: var(--g); scrollbar-width: none; } .ms-grid::-webkit-scrollbar { display: none; } .ms-card { scroll-snap-align: start; } .ks-pair2 .ks-ph { aspect-ratio: 1 / 1; } } /* P2 photo strips: two across on phones, an odd first photo runs wide */ @media (max-width: 600px) { .photos-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .photos-row span { height: auto !important; aspect-ratio: 4 / 5; } .photos-row span:first-child:nth-last-child(odd) { grid-column: 1 / -1; aspect-ratio: 16 / 10; } .doc-break img { aspect-ratio: 3 / 2; } } /* P2 story hero credit readable over bright grass */ .st-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 96px; background: linear-gradient(transparent, rgba(23, 20, 17, .6)); pointer-events: none; } .st-credit { z-index: 2; text-shadow: 0 1px 3px rgba(0, 0, 0, .85); } /* P3 crops and first-screen heights */ .ph-split img[src*="dave-bio-studio"] { object-position: 50% 8% !important; } .ph-split img[src*="rw-heather-tyler-25"] { object-position: 50% 18% !important; } @media (max-width: 600px) and (max-height: 740px) { .st-hero { min-height: 0; height: 48svh; } } .sv-hero .m-btn-gold { background: var(--brass); color: var(--ink); } .sv-hero .m-btn-gold:hover { background: var(--ivory); } /* ========================================================================== Homepage hero B-D3 "Split with a gold rule" (owner's pick, 18 Oct 2026) ========================================================================== */ .mh-b3 { align-items: flex-start; justify-content: flex-end; text-align: left; } .mh:has(.mh-b3) .mh-shade { background: linear-gradient(90deg, rgba(23, 20, 17, .74), rgba(23, 20, 17, .22) 72%), linear-gradient(0deg, rgba(23, 20, 17, .5), transparent 55%); } .b3 { display: grid; grid-template-columns: auto minmax(0, auto); column-gap: clamp(28px, 3vw, 48px); align-items: end; } .b3-h { display: contents; font-weight: 400; } .b3-caps { grid-column: 1; grid-row: 1 / span 3; padding-right: clamp(28px, 3vw, 48px); border-right: 1px solid var(--gold-light); font: 400 clamp(96px, 10.4vw, 156px)/.84 var(--nav-face); letter-spacing: .01em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 24px rgba(0, 0, 0, .4); } .b3-script { grid-column: 2; grid-row: 1; align-self: end; font: 400 clamp(56px, 6.7vw, 100px)/.95 "Waterfall", cursive; color: var(--gold-light); text-shadow: 0 1px 2px rgba(0, 0, 0, .7), 0 0 28px rgba(0, 0, 0, .5); } .b3-punch { grid-column: 2; grid-row: 2; margin: clamp(10px, 1vw, 16px) 0 0; font: 500 clamp(14px, 1vw, 15px)/1.5 var(--font); letter-spacing: .24em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, .6); } .b3-ctas { grid-column: 2; grid-row: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: clamp(18px, 2vw, 28px); padding-bottom: 6px; } .mh .b3-btn { border-radius: 999px; min-height: 54px; padding: 0 28px; background: var(--brass); color: var(--ink); } .mh .b3-btn:hover { background: var(--ivory); } .b3-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 600 14px/1 var(--font); letter-spacing: .16em; text-transform: uppercase; color: #fff; text-decoration: none; border-bottom: 1px solid var(--brass); } .b3-link .arr { width: 18px; } @media (max-width: 700px) { .b3 { grid-template-columns: minmax(0, 1fr); } .b3-caps { grid-row: auto; padding: 0 0 14px; border-right: 0; border-bottom: 1px solid var(--gold-light); font-size: clamp(76px, 22vw, 96px); justify-self: start; } .b3-script, .b3-punch, .b3-ctas { grid-column: 1; grid-row: auto; } .b3-script { margin-top: 12px; font-size: clamp(46px, 13vw, 56px); } .b3-punch { letter-spacing: .18em; } .b3-ctas { gap: 12px 22px; } } @media (max-width: 700px) { .mh:has(.mh-b3) .mh-shade { background: linear-gradient(0deg, rgba(23, 20, 17, .82) 0%, rgba(23, 20, 17, .55) 45%, rgba(23, 20, 17, .2) 75%); } .b3-punch { margin-top: 10px; } } /* ========================================================================== Homepage intro: the gold storybook (owner's pick, 18 Oct 2026) ========================================================================== */ /* the open book: three cream pages with a soft fold between them */ /* phones: the pages become a swipe row, like turning pages */ /* storybook intro paused (18 Oct 2026): the services section tucks under the hero's angled cut instead */ .mh + .ms { position: relative; z-index: 1; margin-top: calc(var(--cut) * -1); padding-top: calc(var(--cut) + var(--sec)); }