/* michellebachtold.com — legal pages shared styles * Used by /privacy.html and /terms.html. Keeps them visually consistent with * the main site without duplicating the entire stylesheet. */ :root { --bg: #1c1f24; --bg-soft: #262a31; --paper: #2e323a; --ink: #fbf7ee; --ink-soft: #cfc6b5; --ink-mute: #948b78; --rule: #3b4049; --gold: #c9a86a; --gold-deep: #b0863f; /* deeper warm gold for hover/press (used by error-page buttons) */ --gold-soft: #d9bd86; --gold-tint: rgba(201, 168, 106, 0.16); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { background: var(--bg); color: var(--ink); font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; font-weight: 400; font-size: 18px; line-height: 1.7; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; display: flex; flex-direction: column; } /* ── top bar * The legal pages now use the same .topnav and footer.site markup as the * index page. Those styles are loaded from styles.css (linked before this * file in the ). This file overrides the body / main.legal rules * so the legal content keeps the serif typography and tighter width. */ /* ── main content area ── */ main.legal { flex: 1; max-width: 760px; width: 100%; margin: 0 auto; /* Top padding clears the fixed .topnav from styles.css. ~6rem gives a comfortable buffer so the H1 isn't tucked under the nav. */ padding: 6rem 2rem 5rem; } @media (max-width: 700px) { main.legal { padding: 5.5rem 1.2rem 4rem; } } main.legal h1 { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: clamp(2.2rem, 5.5vw, 3.2rem); line-height: 1.1; letter-spacing: 0.01em; color: var(--ink); margin-bottom: 0.4rem; } main.legal h1 em { font-style: italic; color: var(--gold); } main.legal .meta { font-family: 'Jost', sans-serif; font-weight: 300; font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 2.6rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--rule); } main.legal h2 { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: clamp(1.4rem, 3vw, 1.7rem); color: var(--ink); margin-top: 2.4rem; margin-bottom: 0.7rem; letter-spacing: 0.01em; } main.legal p { color: var(--ink-soft); font-size: 1.05rem; margin-bottom: 1.1rem; } main.legal p strong { color: var(--ink); font-weight: 500; } main.legal a { color: var(--gold); text-decoration: none; border-bottom: 1px solid var(--gold-tint); transition: border-color 0.3s ease; } main.legal a:hover { border-bottom-color: var(--gold); } main.legal ul { list-style: none; margin: 0.6rem 0 1.4rem 0; padding: 0; } main.legal ul li { color: var(--ink-soft); font-size: 1.05rem; padding-left: 1.4rem; position: relative; margin-bottom: 0.6rem; } main.legal ul li::before { content: '·'; position: absolute; left: 0.4rem; color: var(--gold); font-weight: 700; font-size: 1.3rem; line-height: 1.4rem; } /* ── inline contact form (used on privacy / terms pages) ── */ .form-success { display: none; align-items: flex-start; gap: 0.9rem; background: var(--paper); border: 1px solid var(--gold-soft); border-left: 3px solid var(--gold); padding: 1.1rem 1.3rem; margin-bottom: 1.6rem; } .form-success.is-visible { display: flex; } .form-success-icon { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--gold); color: #1c1f24; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem; margin-top: 0.05rem; } .form-success-body { flex: 1; } .form-success-title { font-family: 'Jost', sans-serif; font-weight: 500; font-size: 0.78rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.3rem; } .form-success-text { font-size: 1rem; color: var(--ink-soft); font-style: italic; line-height: 1.5; } .legal-form { background: var(--paper); border: 1px solid var(--rule); padding: 1.8rem 1.6rem 1.5rem; margin-top: 2rem; } .legal-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; } @media (max-width: 600px) { .legal-form .form-row { grid-template-columns: 1fr; gap: 0; } } .legal-form .field { display: flex; flex-direction: column; margin-bottom: 1rem; } .legal-form .field label { font-family: 'Jost', sans-serif; font-weight: 500; font-size: 0.7rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink); margin-bottom: 0.5rem; } .legal-form .field input, .legal-form .field textarea { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; font-size: 1.05rem; color: #1c1f24; /* dark text on white input — was var(--ink) which is cream and unreadable on white */ background: #ffffff; border: 1px solid var(--rule); border-radius: 2px; padding: 0.7rem 0.85rem; outline: none; transition: border-color 0.25s ease, box-shadow 0.25s ease; width: 100%; } .legal-form .field input::placeholder, .legal-form .field textarea::placeholder { color: var(--ink-mute); font-style: italic; opacity: 1; } .legal-form .field input:focus, .legal-form .field textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-tint); } .legal-form .field textarea { resize: vertical; min-height: 120px; line-height: 1.55; } .legal-form .hp { display: none !important; } .legal-form .legal-submit { display: inline-flex; align-items: center; gap: 0.5rem; font-family: 'Jost', sans-serif; font-weight: 500; font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase; color: #1c1f24; background: var(--gold); border: 1px solid var(--gold); padding: 0.8rem 1.4rem; cursor: pointer; transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease; margin-top: 0.4rem; width: 100%; justify-content: center; } .legal-form .legal-submit:hover { background: var(--gold-deep); border-color: var(--gold-deep); color: var(--ink); } /* ── footer * The privacy / terms pages use the same .site footer markup as the index; * those styles live in styles.css (loaded before this file on those pages). * The error pages (403/404/500) load ONLY this file, so the lightweight * top bar (.legalbar) and footer (footer.legal) they use are styled below. */ /* ── error-page top bar ── */ .legalbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 2rem; border-bottom: 1px solid var(--rule); } @media (max-width: 700px) { .legalbar { padding: 0.9rem 1.2rem; } } .legalbar .brand { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: 1.35rem; letter-spacing: 0.01em; color: var(--ink); text-decoration: none; border-bottom: none; } .legalbar .brand em { font-style: italic; color: var(--gold); } .legalbar .sibling-links a { font-family: 'Jost', sans-serif; font-weight: 500; font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-soft); text-decoration: none; border-bottom: none; transition: color 0.3s ease; } .legalbar .sibling-links a:hover { color: var(--gold); } /* ── error-page footer ── */ footer.legal { border-top: 1px solid var(--rule); text-align: center; padding: 2.2rem 2rem; font-family: 'Jost', sans-serif; font-weight: 300; font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); } footer.legal a { color: var(--ink-soft); text-decoration: none; border-bottom: none; transition: color 0.3s ease; } footer.legal a:hover { color: var(--gold); }