/* ======================================================== Golden Grace — single page site Plain CSS, no framework. Mobile-first. ======================================================== */ :root { /* Warm neutral palette in oklch */ --cream: oklch(0.965 0.014 84); --cream-2: oklch(0.948 0.018 84); --ivory: oklch(0.985 0.006 84); --paper: oklch(0.992 0.004 84); --ink: oklch(0.22 0.012 60); /* primary text */ --ink-2: oklch(0.32 0.010 60); /* secondary text */ --ink-3: oklch(0.48 0.012 60); /* muted */ --rule: oklch(0.86 0.012 80); /* hairlines */ --gold: oklch(0.72 0.09 78); /* muted gold accent */ --gold-deep: oklch(0.58 0.09 70); /* press / focused */ --sage: oklch(0.62 0.035 145); /* secondary accent */ --dark: oklch(0.21 0.014 60); /* dark section bg */ --dark-soft: oklch(0.28 0.014 60); --on-dark: oklch(0.96 0.012 84); --on-dark-mute: oklch(0.74 0.014 80); --shadow-sm: 0 1px 2px rgba(60, 45, 25, 0.05), 0 2px 6px rgba(60, 45, 25, 0.04); --shadow-md: 0 6px 20px rgba(60, 45, 25, 0.07), 0 1px 3px rgba(60, 45, 25, 0.05); --radius-sm: 6px; --radius: 14px; --radius-lg: 22px; --container: 1200px; --gutter: clamp(20px, 4vw, 56px); --display: "Instrument Serif", "Iowan Old Style", "Apple Garamond", "Hoefler Text", "Garamond", "Georgia", serif; --sans: "Inter Tight", "Söhne", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif; --mono: ui-monospace, "SF Mono", "Söhne Mono", "JetBrains Mono", Menlo, Consolas, monospace; /* "GG" watermark — brick pattern, very faded gold. Used on body + ivory + cream-2 surfaces with background-attachment: fixed so the pattern stays locked to the viewport as the page scrolls. */ --bg-pattern: url("data:image/svg+xml;utf8,"); --bg-pattern-size: 720px 520px; } /* ---------- Reset-ish ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; } body { margin: 0; font-family: var(--sans); font-size: 17px; line-height: 1.6; color: var(--ink); background-color: var(--cream); background-image: var(--bg-pattern); background-size: var(--bg-pattern-size); background-repeat: repeat; background-attachment: fixed; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "ss01", "cv11"; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } ul, ol { margin: 0; padding: 0; list-style: none; } :focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; border-radius: 4px; } /* ---------- Skip to content (a11y) ---------- */ .skip-link { position: fixed; top: -100px; left: 16px; z-index: 200; background: var(--ink); color: var(--paper); padding: 12px 18px; border-radius: 999px; font-size: 14px; font-weight: 500; box-shadow: var(--shadow-md); transition: top 0.18s ease; } .skip-link:focus { top: 16px; } /* (Background "GG" pattern lives on ; cards and section bgs cover it naturally, so only the 2+2 frosted card stays glassy.) */ /* ---------- Container ---------- */ .container { max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); } /* ---------- Typography ---------- */ .display { font-family: var(--display); font-weight: 400; font-size: clamp(46px, 6.6vw, 96px); line-height: 1.02; letter-spacing: -0.02em; margin: 0; color: var(--ink); text-wrap: balance; } .display em { font-style: italic; color: var(--gold-deep); } .h2 { font-family: var(--display); font-weight: 400; font-size: clamp(48px, 6vw, 92px); line-height: 1.05; letter-spacing: -0.02em; margin: 0; color: var(--ink); text-wrap: balance; } .h2--light { color: var(--on-dark); } .lede { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; color: var(--ink-2); max-width: 52ch; margin: 22px 0 0; text-wrap: pretty; } .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); } .eyebrow__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px oklch(0.72 0.09 78 / 0.18); } /* ---------- Brand wordmark ---------- */ .brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); } .brand__mark { width: 30px; height: 30px; color: var(--gold-deep); flex: 0 0 auto; } .brand__word { font-family: var(--display); font-style: normal; font-weight: 400; font-size: 28px; line-height: 1; letter-spacing: -0.012em; color: var(--ink); position: relative; top: 1px; } .brand--lg .brand__mark { width: 38px; height: 38px; } .brand--lg .brand__word { font-size: 32px; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; border-radius: 999px; font-family: var(--sans); font-weight: 500; font-size: 15px; letter-spacing: 0.005em; border: 1px solid transparent; transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; white-space: nowrap; } .btn--primary { background: var(--ink); color: var(--paper); } .btn--primary:hover { background: var(--gold-deep); transform: translateY(-1px); } .btn--primary:active { transform: translateY(0); } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule); } .btn--ghost:hover { border-color: var(--ink); } .btn--text { padding: 12px 4px; background: transparent; color: var(--ink); border-radius: 0; } .btn--text:hover { color: var(--gold-deep); } .btn--text span { transition: transform 0.2s ease; display: inline-block; } .btn--text:hover span { transform: translateX(4px); } .btn--lg { padding: 16px 28px; font-size: 16px; } /* ============================================================ NAV ============================================================ */ .nav { position: sticky; top: 0; z-index: 50; background: oklch(0.965 0.014 84 / 0.85); backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid transparent; transition: border-color 0.2s ease, background 0.2s ease; } .nav.is-stuck { border-bottom-color: var(--rule); } .nav__inner { max-width: var(--container); margin: 0 auto; padding: 18px var(--gutter); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; } .nav__links { display: flex; align-items: center; justify-content: center; gap: 32px; font-size: 15px; color: var(--ink-2); } .nav__links a { position: relative; padding: 6px 0; transition: color 0.2s ease; } .nav__links a:hover { color: var(--ink); } .nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 0.2s ease; } .nav__links a:hover::after { transform: scaleX(1); } .nav__cta { justify-self: end; } /* Mobile nav */ .nav__toggle { display: none; background: transparent; border: 1px solid var(--rule); border-radius: 999px; width: 42px; height: 42px; padding: 0; position: relative; } .nav__toggle span { display: block; width: 16px; height: 1.5px; background: var(--ink); margin: 3px auto; transition: transform 0.2s ease, opacity 0.2s ease; } .nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); } .nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-4.5px) rotate(-45deg); } .nav__drawer { display: none; flex-direction: column; gap: 4px; padding: 8px var(--gutter) 24px; border-top: 1px solid var(--rule); background: var(--cream); } .nav__drawer[hidden] { display: none !important; } .nav__drawer a { padding: 14px 0; border-bottom: 1px solid var(--rule); font-size: 17px; } .nav__drawer a:last-child { border-bottom: none; } .nav__drawer-cta { margin-top: 16px; text-align: center; align-self: flex-start; } @media (max-width: 880px) { .nav__links, .nav__cta { display: none; } .nav__toggle { display: block; justify-self: end; } .nav__inner { grid-template-columns: auto 1fr; } .nav__drawer:not([hidden]) { display: flex; } } /* ============================================================ HERO ============================================================ */ .hero { padding: clamp(40px, 6vw, 72px) 0 0; position: relative; overflow: hidden; text-align: center; isolation: isolate; } .hero__bloom { position: absolute; left: 50%; top: 38%; width: 90vmax; height: 90vmax; transform: translate(-50%, -50%); background: radial-gradient(closest-side, oklch(0.72 0.09 78 / 0.20), oklch(0.72 0.09 78 / 0) 70%); pointer-events: none; z-index: 0; filter: blur(8px); } .hero__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; padding-bottom: clamp(40px, 5vw, 64px); } .hero__image { position: relative; z-index: 1; } .eyebrow--center { justify-content: center; } .wordmark { font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(44px, 13vw, 220px); line-height: 1.0; letter-spacing: -0.035em; color: var(--ink); margin: 22px 0 0; white-space: nowrap; /* Two stacked gradients: a horizontal gold "shine" (animated on reveal), layered over the original vertical ink → gold-deep wash. */ background: linear-gradient(100deg, transparent 38%, oklch(0.78 0.10 78 / 0.55) 50%, transparent 62%) 100% 0 / 220% 100% no-repeat, linear-gradient(180deg, var(--ink) 0%, var(--ink) 62%, var(--gold-deep) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .wordmark.is-in { animation: wm-shimmer 2.2s cubic-bezier(0.22, 1, 0.36, 1) 0.3s 1 forwards; } @keyframes wm-shimmer { 0% { background-position: 100% 0, 0 0; } 100% { background-position: -120% 0, 0 0; } } .hero__tagline { font-family: var(--display); font-style: normal; font-size: clamp(26px, 3.2vw, 44px); line-height: 1.2; letter-spacing: -0.01em; color: var(--ink-2); margin: clamp(20px, 2.5vw, 32px) 0 0; max-width: 22ch; text-wrap: balance; } .hero__tagline em { font-style: italic; color: var(--gold-deep); } .hero__sub { font-family: var(--sans); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.55; color: var(--ink-3); margin: 18px 0 0; max-width: 56ch; text-wrap: pretty; } .hero__cta { margin-top: clamp(28px, 3vw, 40px); display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: center; } .hero__image { margin: 0 auto; padding-bottom: clamp(48px, 6vw, 80px); } .hero__caption { margin-top: 16px; display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 13px; letter-spacing: 0.04em; color: var(--ink-3); text-transform: uppercase; } .hero__caption-rule { display: block; width: 36px; height: 1px; background: var(--gold); } @media (max-width: 880px) { .wordmark { letter-spacing: -0.03em; } } /* ---------- Parallax wrapper ---------- */ .parallax { transform: translate3d(0, var(--py, 0px), 0); will-change: transform; } /* ============================================================ PHOTO PLACEHOLDERS (subtly striped) ============================================================ */ .photo { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--ivory); box-shadow: var(--shadow-md); isolation: isolate; } .photo__inner { position: absolute; inset: 0; background-image: repeating-linear-gradient( 135deg, transparent 0 14px, oklch(0.72 0.09 78 / 0.05) 14px 15px ), linear-gradient(180deg, oklch(0.92 0.022 82), oklch(0.86 0.030 78)); } .photo::after { /* Frame inset */ content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px oklch(0.55 0.025 70 / 0.10); pointer-events: none; } .photo__label { position: absolute; left: 14px; bottom: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-2); background: oklch(0.99 0.004 84 / 0.85); padding: 6px 9px; border-radius: 4px; text-transform: uppercase; } .photo--hero { aspect-ratio: 5/4; } .photo--hero-wide { aspect-ratio: 16/7; max-width: 100%; } .photo--portrait { aspect-ratio: 4/5; } /* ============================================================ SECTION ============================================================ */ .section { padding: clamp(72px, 10vw, 140px) 0; position: relative; overflow: hidden; isolation: isolate; } .section > .container { position: relative; z-index: 1; } .section--ivory { background-color: var(--ivory); background-image: var(--bg-pattern); background-size: var(--bg-pattern-size); background-repeat: repeat; background-attachment: fixed; } .section--dark { background: var(--dark); color: var(--on-dark); } .section + .section { border-top: 1px solid transparent; } /* Giant translucent section numerals — scroll at a slower rate to create a subtle parallax/overlap depth. */ .section__watermark { position: absolute; bottom: -6vw; left: -2vw; font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(200px, 32vw, 480px); line-height: 0.8; letter-spacing: -0.04em; color: oklch(0.58 0.09 70 / 0.06); pointer-events: none; user-select: none; z-index: 0; transform: translate3d(0, var(--py, 0px), 0); will-change: transform; } .section__watermark--right { left: auto; right: -2vw; } .section__head { max-width: 60ch; } .section__head--center { margin: 0 auto; text-align: center; } .section__num { display: inline-block; font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; color: var(--ink-3); text-transform: uppercase; margin-bottom: 18px; } .section__num--light { color: var(--on-dark-mute); } .section__lede { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; color: var(--ink-2); margin: 22px auto 0; max-width: 62ch; text-wrap: pretty; } .section__lede--light { color: var(--on-dark-mute); } /* Two-col layout used by About + Contact */ .two-col { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(40px, 6vw, 96px); align-items: start; } @media (max-width: 920px) { .two-col { grid-template-columns: 1fr; } } /* ============================================================ ABOUT ============================================================ */ .section--about { padding-block: clamp(56px, 7vw, 100px); } .section--about .section__head { margin-bottom: 0; } .about__top { display: grid; grid-template-columns: 0.8fr 1.4fr; gap: clamp(32px, 5vw, 80px); align-items: start; } @media (max-width: 880px) { .about__top { grid-template-columns: 1fr; gap: 24px; } } .prose p { margin: 0 0 18px; font-size: 18px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; } .prose p:last-child { margin-bottom: 0; } .prose p:first-child::first-letter { font-family: var(--display); font-style: italic; font-size: 3.2em; float: left; line-height: 0.85; padding: 4px 10px 0 0; color: var(--gold-deep); } /* Values band — full-width 4-up */ .values { margin-top: clamp(48px, 6vw, 80px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--rule); } .values__header { display: flex; align-items: center; gap: 16px; margin-bottom: clamp(24px, 3vw, 36px); } .values__eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); } .values__rule { flex: 1; height: 1px; background: var(--rule); } .values__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; } .value { padding: 4px clamp(16px, 2vw, 28px) 4px 0; border-right: 1px solid var(--rule); display: flex; flex-direction: column; gap: 10px; } .value + .value { padding-left: clamp(16px, 2vw, 28px); } .value:last-child { border-right: none; padding-right: 0; } .value__num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--gold-deep); } .value__word { font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(34px, 3.4vw, 52px); line-height: 1.0; margin: 0; color: var(--ink); letter-spacing: -0.02em; } .value__desc { font-size: 14px; line-height: 1.5; color: var(--ink-3); margin: 6px 0 0; max-width: 24ch; text-wrap: pretty; } @media (max-width: 880px) { .values__grid { grid-template-columns: repeat(2, 1fr); } .value:nth-child(2) { border-right: none; padding-right: 0; } .value:nth-child(3), .value:nth-child(4) { border-top: 1px solid var(--rule); padding-top: 24px; margin-top: 24px; } .value:nth-child(3) { border-right: 1px solid var(--rule); padding-left: 0; } .value:nth-child(4) { padding-left: clamp(16px, 2vw, 28px); } } @media (max-width: 520px) { .values__grid { grid-template-columns: 1fr; } .value, .value + .value { border-right: none; border-top: 1px solid var(--rule); padding: 24px 0 0; margin-top: 0; } .value:first-child { border-top: none; padding-top: 0; } } /* ============================================================ MODEL ============================================================ */ .model__hero { margin: clamp(48px, 6vw, 72px) auto 64px; max-width: 880px; background: oklch(0.992 0.004 84 / 0.62); border: 1px solid oklch(0.86 0.012 80 / 0.7); border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 44px); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(20px, 3vw, 40px); position: relative; overflow: hidden; isolation: isolate; backdrop-filter: blur(14px) saturate(1.15); -webkit-backdrop-filter: blur(14px) saturate(1.15); box-shadow: var(--shadow-sm); } .model__hero-bloom { position: absolute; inset: -25% -15%; background: radial-gradient(circle at 30% 35%, oklch(0.72 0.09 78 / 0.28), oklch(0.72 0.09 78 / 0) 60%), radial-gradient(circle at 75% 70%, oklch(0.62 0.035 145 / 0.18), oklch(0.62 0.035 145 / 0) 65%); pointer-events: none; z-index: 0; filter: blur(28px); } .model__hero > *:not(.model__hero-bloom) { position: relative; z-index: 1; } .model__stat { text-align: center; min-width: 120px; } .model__stat-num { display: block; font-family: var(--display); font-size: clamp(72px, 9vw, 112px); line-height: 0.9; color: var(--ink); font-variant-numeric: tabular-nums; } .model__stat--accent .model__stat-num { color: var(--gold-deep); font-style: italic; } .model__stat-label { display: block; margin-top: 8px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); } .model__plus { font-family: var(--display); font-size: 40px; color: var(--ink-3); align-self: center; } .model__note { flex: 1 0 100%; margin: 20px 0 0; padding-top: 24px; border-top: 1px dashed var(--rule); font-size: 15px; color: var(--ink-2); line-height: 1.6; text-align: center; text-wrap: pretty; } .model__note-tag { display: inline-block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-deep); background: oklch(0.72 0.09 78 / 0.12); padding: 3px 7px; border-radius: 4px; margin-right: 8px; vertical-align: 1px; } /* 4-up cards */ .cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } @media (max-width: 1024px) { .cards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .cards { grid-template-columns: 1fr; } } .card { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; gap: 14px; min-height: 280px; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .card:hover { transform: translateY(-2px); border-color: var(--gold); box-shadow: var(--shadow-md); } .card__num { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; color: var(--gold-deep); } .card__title { font-family: var(--display); font-size: 28px; line-height: 1.1; margin: 0; color: var(--ink); } .card__body { font-size: 15px; color: var(--ink-2); line-height: 1.55; margin: 0; flex: 1; text-wrap: pretty; } .card__list { border-top: 1px solid var(--rule); padding-top: 14px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ink-3); } .card__list li { position: relative; padding-left: 16px; } .card__list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 1px; background: var(--gold); } /* ============================================================ TEAM ============================================================ */ .team { margin-top: clamp(48px, 6vw, 72px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); } @media (max-width: 760px) { .team { grid-template-columns: 1fr; } } .founder { display: grid; gap: 24px; } .founder .photo--portrait { max-width: 420px; } .founder__role { display: inline-block; font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 8px; } .founder__name { font-family: var(--display); font-size: clamp(34px, 3.4vw, 46px); line-height: 1.05; margin: 0 0 16px; color: var(--ink); } .founder__bio { font-size: 16px; color: var(--ink-2); line-height: 1.6; margin: 0; max-width: 48ch; text-wrap: pretty; } .founder__bio em { font-style: normal; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-deep); background: oklch(0.72 0.09 78 / 0.12); padding: 2px 7px; border-radius: 4px; margin-right: 6px; } /* ============================================================ GET INVOLVED ============================================================ */ .involved { margin-top: clamp(48px, 6vw, 72px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } @media (max-width: 860px) { .involved { grid-template-columns: 1fr; } } .involve-card { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); padding: 32px; display: flex; flex-direction: column; gap: 14px; min-height: 280px; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease; color: var(--ink); } .involve-card:hover { transform: translateY(-2px); border-color: var(--ink); box-shadow: var(--shadow-md); } .involve-card--primary { background: var(--ink); color: var(--on-dark); border-color: var(--ink); } .involve-card--primary:hover { background: var(--dark-soft); border-color: var(--dark-soft); } .involve-card__top { display: flex; align-items: center; justify-content: space-between; } .involve-card__tag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); } .involve-card--primary .involve-card__tag { color: var(--gold); } .involve-card__icon svg { width: 28px; height: 28px; color: var(--gold-deep); } .involve-card--primary .involve-card__icon svg { color: var(--gold); } .involve-card__title { font-family: var(--display); font-size: clamp(30px, 3vw, 40px); line-height: 1.05; margin: 8px 0 0; } .involve-card__body { font-size: 16px; line-height: 1.55; color: var(--ink-2); margin: 0; flex: 1; } .involve-card--primary .involve-card__body { color: var(--on-dark-mute); } .involve-card__cta { margin-top: 8px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--ink); } .involve-card--primary .involve-card__cta { color: var(--gold); } .involve-card__cta span { transition: transform 0.2s ease; display: inline-block; } .involve-card:hover .involve-card__cta span { transform: translateX(4px); } /* ============================================================ CONTACT (light) ============================================================ */ .section--contact { background-color: var(--cream-2); background-image: var(--bg-pattern); background-size: var(--bg-pattern-size); background-repeat: repeat; background-attachment: fixed; color: var(--ink); } .section--contact a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; } .section--contact a:hover { color: var(--gold-deep); } .contact-meta { margin: clamp(32px, 4vw, 48px) 0 0; display: grid; gap: 22px; } .contact-meta > div { display: grid; gap: 4px; } .contact-meta dt { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); } .contact-meta dd { margin: 0; font-size: 17px; color: var(--ink); } /* Form — light card */ .form { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 40px); display: grid; gap: 20px; box-shadow: var(--shadow-sm); } .form__row { display: grid; gap: 20px; } .form__row--two { grid-template-columns: 1fr 1fr; } @media (max-width: 560px) { .form__row--two { grid-template-columns: 1fr; } } .field { display: grid; gap: 8px; } .field__label { font-size: 13px; font-weight: 500; letter-spacing: 0.04em; color: var(--ink); } .field__optional { font-weight: 400; color: var(--ink-3); letter-spacing: 0; } .field input, .field textarea, .field select { width: 100%; background: var(--ivory); border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: 13px 14px; font: inherit; color: var(--ink); transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; } .field input::placeholder, .field textarea::placeholder { color: var(--ink-3); } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--gold-deep); background: var(--paper); box-shadow: 0 0 0 4px oklch(0.72 0.09 78 / 0.18); } .field textarea { resize: vertical; min-height: 120px; line-height: 1.55; } .select { position: relative; } .select select { appearance: none; -webkit-appearance: none; padding-right: 36px; } .select__chev { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--ink-3); font-size: 14px; } .field__error { font-size: 12px; color: oklch(0.50 0.14 30); min-height: 14px; letter-spacing: 0.01em; } .field.is-invalid input, .field.is-invalid textarea, .field.is-invalid select, .field input[aria-invalid="true"], .field textarea[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: oklch(0.60 0.14 30); background: oklch(0.985 0.020 30); } .form__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 6px; } .form__foot .btn--primary { background: var(--ink); color: var(--paper); } .form__foot .btn--primary:hover { background: var(--gold-deep); } .form__note { margin: 0; font-size: 13px; color: var(--ink-3); } .form__success { display: flex; align-items: center; gap: 14px; padding: 18px; background: oklch(0.95 0.04 145); color: oklch(0.30 0.05 145); border: 1px solid oklch(0.82 0.06 145); border-radius: var(--radius); } .form__success svg { width: 28px; height: 28px; flex: 0 0 auto; color: oklch(0.45 0.08 145); } .form__success strong { display: block; font-weight: 600; margin-bottom: 2px; } .form__success span { font-size: 14px; opacity: 0.9; } /* ============================================================ FOOTER ============================================================ */ .footer { background-color: var(--cream-2); background-image: var(--bg-pattern); background-size: var(--bg-pattern-size); background-repeat: repeat; background-attachment: fixed; padding: clamp(56px, 7vw, 96px) 0 28px; border-top: 1px solid var(--rule); position: relative; } .footer__inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: clamp(28px, 4vw, 56px); padding-bottom: 56px; border-bottom: 1px solid var(--rule); } @media (max-width: 760px) { .footer__inner { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } } .footer__tag { margin: 18px 0 0; font-family: var(--display); font-size: 22px; line-height: 1.3; color: var(--ink-2); max-width: 26ch; } .footer__col h4, .footer__nav h4 { font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 14px; } .footer__col p { margin: 0; font-size: 15px; color: var(--ink-2); line-height: 1.6; } .footer__col a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; } .footer__col a:hover { color: var(--gold-deep); } .footer__muted { color: var(--ink-3); } .footer__nav { display: flex; flex-direction: column; } .footer__nav a { font-size: 15px; padding: 4px 0; color: var(--ink); } .footer__nav a:hover { color: var(--gold-deep); } .footer__base { padding-top: 24px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 13px; color: var(--ink-3); } /* ============================================================ Reveal-on-scroll (with optional stagger via --i) ============================================================ */ .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.7s ease, transform 0.7s ease; transition-delay: calc(var(--i, 0) * 90ms); } .reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .parallax, .section__watermark { transform: none !important; } .wordmark { animation: none !important; background-position: -120% 0, 0 0 !important; } html { scroll-behavior: auto; } }