<!--
============================================================================
SMM Production — Premium Landing Page
Paste this ENTIRE file into ONE Squarespace Code Block (in a full-width Section).
============================================================================
Self-contained: scoped `.smm-` styles + Cormorant Garamond / Lora (Google Fonts).
Nothing here leaks into the rest of Squarespace — every selector is `.smm-` scoped.
IMAGES — the cream rectangles are placeholders. Replace each img `src` (marked
"IMAGE:") with a photo you have uploaded to Squarespace. Never stock/AI.
KOREAN WELCOME — appears twice by design (CTA caption + footer). For a single
instance, see the "KO:CTA" comment in the CTA section below.
ALTERNATIVE (cleaner to maintain): paste landing.custom-css.css into
Design → Custom CSS once, then paste landing.body.html into a Code Block.
============================================================================
-->
<style>
/* ==========================================================================
SMMProduction Design System — brand stylesheet
Locked visual system: Cream/Ink/Taupe palette + Cormorant Garamond / Lora.
Classes are .smm- prefixed and self-contained so each component renders
correctly on its own; `.smm-page` provides the Cream brand surface.
========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;1,300;1,400&family=Lora:ital,wght@0,300;0,400;1,300&display=swap");
:root {
--smm-cream: #f4efe7;
--smm-ink: #2d2620;
--smm-ink-soft: #5b4f44;
--smm-taupe: #a99884;
--smm-hairline: rgba(60, 48, 38, 0.18);
--smm-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
--smm-body: "Lora", Georgia, "Times New Roman", serif;
--smm-eyebrow-tracking: 0.36em;
}
/* --- Brand surface ------------------------------------------------------- */
.smm-page {
width: 100%;
background: var(--smm-cream);
color: var(--smm-ink);
font-family: var(--smm-body);
font-weight: 400;
font-size: 17px;
line-height: 1.65;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.smm-page *,
.smm-page *::before,
.smm-page *::after {
box-sizing: border-box;
}
.smm-page img {
max-width: 100%;
height: auto;
display: block;
}
.smm-page a {
color: inherit;
text-decoration: none;
}
/* --- Display headings (Cormorant Garamond, italic) ---------------------- */
.smm-display {
font-family: var(--smm-display);
font-style: italic;
font-weight: 400;
color: var(--smm-ink);
margin: 0;
letter-spacing: 0;
}
.smm-display--1 {
font-size: clamp(36px, 6vw, 64px);
line-height: 1.1;
}
.smm-display--2 {
font-size: clamp(28px, 4vw, 44px);
line-height: 1.15;
}
.smm-display--3 {
font-size: clamp(22px, 3vw, 32px);
line-height: 1.2;
}
.smm-display--4 {
font-size: clamp(20px, 2.4vw, 24px);
line-height: 1.25;
font-weight: 300;
}
/* --- Eyebrow label (Lora, all-caps, wide tracking) --------------------- */
.smm-eyebrow {
font-family: var(--smm-body);
font-weight: 400;
font-size: 13px;
letter-spacing: var(--smm-eyebrow-tracking);
text-transform: uppercase;
color: var(--smm-ink-soft);
margin: 0;
}
/* --- Hairline rule ------------------------------------------------------ */
.smm-rule {
border: 0;
height: 1px;
background: var(--smm-hairline);
margin: 64px auto;
width: 100%;
}
.smm-rule--accent {
width: 48px;
}
.smm-rule--section {
width: 120px;
margin: 96px auto;
}
/* --- Button / CTA link -------------------------------------------------- */
.smm-button {
display: inline-block;
font-family: var(--smm-body);
font-weight: 400;
font-size: 13px;
letter-spacing: var(--smm-eyebrow-tracking);
text-transform: uppercase;
color: var(--smm-ink);
text-decoration: none;
border: 1px solid var(--smm-taupe);
padding: 22px 36px;
background: transparent;
cursor: pointer;
transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.smm-button:hover,
.smm-button:focus {
color: var(--smm-ink-soft);
border-color: var(--smm-ink-soft);
}
.smm-button--filled:hover,
.smm-button--filled:focus {
background: var(--smm-taupe);
color: var(--smm-cream);
border-color: var(--smm-taupe);
}
/* --- Caption ----------------------------------------------------------- */
.smm-caption {
font-family: var(--smm-body);
font-style: italic;
font-weight: 300;
font-size: 14px;
line-height: 1.55;
color: var(--smm-ink-soft);
margin: 14px 0 0;
text-align: center;
}
/* --- Hero -------------------------------------------------------------- */
.smm-hero {
width: 100%;
max-width: 1600px;
margin: 0 auto;
}
.smm-hero__img {
width: 100%;
height: clamp(420px, 62vw, 760px);
object-fit: cover;
object-position: center 38%;
display: block;
}
.smm-hero__title {
text-align: center;
padding: 72px 24px 0;
max-width: 900px;
margin: 0 auto;
}
/* --- Prose body -------------------------------------------------------- */
.smm-prose {
max-width: 720px;
margin: 0 auto;
padding: 96px 24px;
text-align: center;
}
.smm-prose--left {
text-align: left;
}
.smm-prose p {
margin: 0 0 1.4em;
}
.smm-prose p:last-child {
margin-bottom: 0;
}
.smm-prose em {
font-style: italic;
}
/* --- Quote / testimonial ----------------------------------------------- */
.smm-quote {
max-width: 720px;
margin: 0 auto;
padding: 96px 24px;
text-align: center;
}
.smm-quote__text {
font-family: var(--smm-display);
font-style: italic;
font-weight: 300;
font-size: clamp(26px, 3.6vw, 38px);
line-height: 1.35;
margin: 0 0 28px;
color: var(--smm-ink);
}
.smm-quote__attrib {
font-family: var(--smm-body);
font-weight: 400;
font-size: 12px;
letter-spacing: var(--smm-eyebrow-tracking);
text-transform: uppercase;
color: var(--smm-ink-soft);
margin: 0;
}
/* --- Pillars (three-column belief grid) -------------------------------- */
.smm-pillars {
max-width: 1080px;
margin: 0 auto;
padding: 0 24px 96px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 64px;
text-align: center;
}
.smm-pillar__title {
margin: 0 0 18px;
}
.smm-pillar__body {
font-size: 16px;
line-height: 1.6;
color: var(--smm-ink-soft);
margin: 0;
}
/* --- Card + card grid (recent stories) --------------------------------- */
.smm-card-grid {
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
}
.smm-card {
display: block;
text-align: center;
color: inherit;
text-decoration: none;
}
.smm-card__img-wrap {
overflow: hidden;
margin-bottom: 24px;
}
.smm-card__img {
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
display: block;
transition: transform 0.6s ease;
}
.smm-card:hover .smm-card__img {
transform: scale(1.02);
}
.smm-card__eyebrow {
font-family: var(--smm-body);
font-weight: 400;
font-size: 12px;
letter-spacing: var(--smm-eyebrow-tracking);
text-transform: uppercase;
color: var(--smm-ink-soft);
margin: 0 0 10px;
}
.smm-card__title {
font-family: var(--smm-display);
font-style: italic;
font-weight: 400;
font-size: 24px;
margin: 0 0 8px;
color: var(--smm-ink);
}
.smm-card__sub {
font-size: 14px;
color: var(--smm-ink-soft);
margin: 0;
}
/* --- Call to action ---------------------------------------------------- */
.smm-cta {
text-align: center;
padding: 96px 24px 120px;
}
.smm-cta__line {
font-family: var(--smm-display);
font-style: italic;
font-weight: 300;
font-size: clamp(20px, 2.4vw, 26px);
margin: 0 0 36px;
color: var(--smm-ink);
}
/* --- Investment (collections, no figures) ------------------------------ */
.smm-investment {
max-width: 880px;
margin: 0 auto;
padding: 96px 24px;
text-align: center;
}
.smm-investment__intro {
font-family: var(--smm-display);
font-style: italic;
font-weight: 300;
font-size: clamp(22px, 2.6vw, 30px);
line-height: 1.3;
margin: 0 0 56px;
color: var(--smm-ink);
}
.smm-collections {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 48px;
text-align: center;
}
.smm-collection {
display: flex;
flex-direction: column;
gap: 12px;
}
.smm-collection__name {
font-family: var(--smm-display);
font-style: italic;
font-weight: 400;
font-size: 26px;
margin: 0;
color: var(--smm-ink);
}
.smm-collection__price {
font-family: var(--smm-body);
font-weight: 400;
font-size: 12px;
letter-spacing: var(--smm-eyebrow-tracking);
text-transform: uppercase;
color: var(--smm-ink-soft);
margin: 0;
}
.smm-collection__desc {
font-size: 15px;
line-height: 1.6;
color: var(--smm-ink-soft);
margin: 0;
}
/* --- Footer ------------------------------------------------------------ */
.smm-footer {
background: var(--smm-cream);
color: var(--smm-ink-soft);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.smm-footer__wrap {
max-width: 880px;
margin: 0 auto;
padding: clamp(2.25rem, 5vw, 3.25rem) clamp(1.25rem, 6vw, 3rem);
border-top: 1px solid var(--smm-hairline);
text-align: center;
}
.smm-footer__mark {
font-family: var(--smm-display);
font-style: italic;
font-weight: 400;
font-size: clamp(1.25rem, 3.5vw, 1.6rem);
color: var(--smm-ink);
margin: 0 0 1.25rem;
}
.smm-footer__nav {
font-family: var(--smm-body);
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.28em;
font-size: 0.66rem;
line-height: 1;
margin: 0 0 1.5rem;
}
.smm-footer__nav a {
color: var(--smm-ink-soft);
text-decoration: none;
border-bottom: 1px solid transparent;
padding-bottom: 2px;
transition: border-color 0.2s ease, color 0.2s ease;
}
.smm-footer__nav a:hover,
.smm-footer__nav a:focus {
color: var(--smm-ink);
border-bottom-color: var(--smm-taupe);
}
.smm-footer__sep {
color: var(--smm-taupe);
margin: 0 0.7em;
}
.smm-footer__legal {
font-family: var(--smm-body);
font-weight: 400;
font-size: 0.74rem;
color: var(--smm-ink-soft);
margin: 0;
line-height: 1.6;
}
/* --- Responsive (single breakpoint, matching the live site) ------------ */
@media (max-width: 720px) {
.smm-page .smm-hero__img {
height: 56vh;
object-fit: cover;
object-position: center 42%;
}
.smm-rule {
margin: 48px auto;
}
.smm-rule--section {
margin: 72px auto;
}
.smm-hero__title {
padding: 48px 20px 0;
}
.smm-prose {
padding: 64px 20px;
}
.smm-quote {
padding: 72px 20px;
}
.smm-pillars {
grid-template-columns: 1fr;
gap: 48px;
padding: 0 20px 72px;
}
.smm-card-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.smm-cta {
padding: 72px 20px 96px;
}
.smm-investment {
padding: 72px 20px;
}
.smm-collections {
grid-template-columns: 1fr;
gap: 40px;
}
}
</style>
<div class="smm-page"><section class="smm-hero"><!-- IMAGE: replace src with your uploaded photo URL -->
<img class="smm-hero__img" src="https://images.squarespace-cdn.com/content/v1/65d0edb257b80c6adcaadc04/eba40955-0762-4b50-a7c4-c7cb67a0418f/08_the-last-warm-hour.jpg?format=2500w" alt="A couple walking slowly through the San Francisco City Hall rotunda in late-afternoon light"/><div class="smm-hero__title"><h1 class="smm-display smm-display--1">The day is one afternoon. I would rather know you for the year before it.</h1></div></section><section class="smm-prose" style="padding-top:56px"><p>San Francisco wedding photography for couples who live between two languages. I work in Korean and English with no pause in between — so the family in the room stays at ease, and the two of you stay present.</p></section>
<img class="smm-card__img" src="https://images.squarespace-cdn.com/content/v1/65d0edb257b80c6adcaadc04/cf986a30-0e5b-4c6e-9e00-b6e88561f529/04_under-the-rotunda.jpg?format=1500w" alt="Joseph and Yeyoung between the City Hall and the Golden Gate"/></div><p class="smm-card__eyebrow">San Francisco</p><h3 class="smm-card__title"><em>Joseph & Yeyoung</em></h3><p class="smm-card__sub">City Hall to the Golden Gate</p></a><a class="smm-card" href="/inquire"><div class="smm-card__img-wrap"><!-- IMAGE: replace src with your uploaded photo URL -->
<img class="smm-card__img" src="https://images.squarespace-cdn.com/content/v1/65d0edb257b80c6adcaadc04/82119fbe-daf2-4a5d-bac4-7112567e4d2a/05_the-lavender-hill.jpg?format=1500w" alt="Katherine and Calvin among the gardens at Bee N Blooms in Sonoma"/></div><p class="smm-card__eyebrow">Sonoma</p><h3 class="smm-card__title"><em>Katherine & Calvin</em></h3><p class="smm-card__sub">Bee N Blooms</p></a><a class="smm-card" href="/inquire"><div class="smm-card__img-wrap"><!-- IMAGE: replace src with your uploaded photo URL -->
<img class="smm-card__img" src="https://images.squarespace-cdn.com/content/v1/65d0edb257b80c6adcaadc04/221672bd-f9a5-4aed-814c-dfef4cb519b0/01_the-rotunda-that-morning.jpg?format=1500w" alt="A ceremony beneath the rotunda at San Francisco City Hall"/></div><p class="smm-card__eyebrow">San Francisco</p><h3 class="smm-card__title"><em>A Rotunda Ceremony</em></h3><p class="smm-card__sub">San Francisco City Hall</p></a></div></div><section class="smm-quote" aria-label="Client testimonial" style="padding-top:64px;padding-bottom:0"><p class="smm-quote__text"><em>“every one of them is perfect.”</em></p><p class="smm-quote__attrib">Yeyoung · San Francisco</p></section><figcaption class="smm-caption">A few first frames from their day.</figcaption><hr class="smm-rule smm-rule--section"/><div style="max-width:720px;margin:0 auto;padding:0 24px;text-align:center"><p class="smm-eyebrow">Investment</p></div><section class="smm-investment" aria-label="Investment" style="padding-top:28px;padding-bottom:32px"><p class="smm-investment__intro"><em>Three collections, held for one couple at a time.</em></p><div class="smm-collections"><div class="smm-collection"><p class="smm-collection__name"><em>Classic</em></p><p class="smm-collection__price">On request</p><p class="smm-collection__desc">A single day, documented with care.</p></div><div class="smm-collection"><p class="smm-collection__name"><em>Signature</em></p><p class="smm-collection__price">On request</p><p class="smm-collection__desc">From the morning’s first quiet to the last toast.</p></div><div class="smm-collection"><p class="smm-collection__name"><em>Elite</em></p><p class="smm-collection__price">On request</p><p class="smm-collection__desc">The day in full, and the moments around it — rehearsal, family, the days that frame the wedding.</p></div></div></section><figcaption class="smm-caption">Each collection includes an engagement session beforehand. Full collections are shared on inquiry.</figcaption><hr class="smm-rule smm-rule--section"/><section class="smm-cta"><p class="smm-cta__line"><em>If a year out feels right, it usually is. Tell me about the two of you — and the family who will be in the room. I read and answer every note myself.</em></p><a class="smm-button" href="/inquire">Begin an Inquiry</a></section><!-- KO:CTA — Korean welcome, instance 1 of 2 (the footer shows it too).
SINGLE-INSTANCE VARIANT: delete this one <figcaption> line to keep only the
footer welcome, or keep this and remove the footer's Korean line instead. -->
<figcaption class="smm-caption" style="padding-bottom:8px">한국어로 문의 환영합니다.</figcaption><footer class="smm-footer"><div class="smm-footer__wrap"><p class="smm-footer__mark">SMMProduction</p><nav class="smm-footer__nav" aria-label="Footer"><a href="/inquire">Inquire</a><span class="smm-footer__sep" aria-hidden="true">·</span><a href="/terms">Terms of Use</a><span class="smm-footer__sep" aria-hidden="true">·</span><a href="/privacy">Privacy Policy</a></nav><p class="smm-footer__legal">© 2022–present SMMProduction LLC. San Francisco, California. All rights reserved.<br/>한국어로 문의 환영합니다.</p></div></footer></div>
