@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Meow+Script&family=Lato:wght@300;400;500;700&display=swap'); /* =========================================================== Sage Garden v2 — Cohesive site system Loaded AFTER variables.css/layout.css/components.css to reskin the public site. Save-the-date page does not include this stylesheet and retains its legacy look. =========================================================== */ :root { --sg-bg: #F6F2E8; --sg-bg-soft: #FBF7EE; --sg-bg-card: #FFFFFF; --sg-sage: #788722; --sg-sage-dark: #4F5A40; --sg-sage-light: #A8B496; --sg-rose: #F8AA7F; --sg-ink: #2F2E26; --sg-ink-soft: #5C5A4E; --sg-hair: rgba(120,135,34,0.18); --sg-hair-dash: rgba(120,135,34,0.25); --sg-serif: 'Cormorant', Georgia, serif; --sg-display: 'Cormorant', Georgia, serif; --sg-script: 'Cormorant', Georgia, serif; --sg-meow: 'Meow Script', 'Cormorant', cursive; --sg-sans: 'Lato', 'Alegreya Sans', 'Helvetica Neue', Arial, sans-serif; } /* ----------- Base ----------- */ body.sg { background: var(--sg-bg); color: var(--sg-ink); font-family: var(--sg-serif); font-weight: 500; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: clip; } body.sg a { color: inherit; } body.sg .fade-in { animation: fadeIn 0.4s ease-out; } /* ----------- Nav ----------- */ body.sg .site-nav, body.sg .nav-mobile { display: none; } /* hide legacy nav on sg pages */ /* #nav-root is just the JS injection target — flatten it so .sg-nav's containing block becomes and sticky has the full page to stick to */ body.sg #nav-root { display: contents; } .sg-nav { height: 64px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 24px; border-bottom: 1px solid var(--sg-hair); background: var(--sg-bg); position: sticky; top: 0; z-index: 50; } .sg-nav-date { font-family: var(--sg-sans); font-size: 11px; letter-spacing: 0.25em; color: var(--sg-sage); text-transform: uppercase; justify-self: start; } .sg-nav-brand { font-family: var(--sg-meow); font-size: 32px; line-height: 1; letter-spacing: 0; color: var(--sg-sage-dark); text-decoration: none; justify-self: center; } .sg-nav-links { display: none; justify-self: end; gap: 26px; list-style: none; margin: 0; padding: 0; } .sg-nav-links a { font-family: var(--sg-sans); font-size: 11px; letter-spacing: 0.25em; color: var(--sg-ink-soft); text-decoration: none; text-transform: uppercase; padding: 6px 0; border-bottom: 1px solid transparent; transition: color 200ms, border-color 200ms; } .sg-nav-links a:hover { color: var(--sg-rose); border-bottom-color: var(--sg-rose); } .sg-nav-links a.active { color: var(--sg-rose); border-bottom-color: var(--sg-rose); } /* Inline text link — keeps surrounding font; always underlined, rose on hover */ .sg-link { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; transition: color 200ms, border-color 200ms; } .sg-link:hover { color: var(--sg-rose); border-bottom-color: var(--sg-rose); } .sg-nav-toggle { justify-self: end; background: none; border: none; width: 32px; height: 32px; cursor: pointer; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 0; } .sg-nav-toggle span { display: block; width: 20px; height: 1.5px; background: var(--sg-sage-dark); transition: transform 250ms, opacity 200ms; } body.sg-nav-open .sg-nav-toggle span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); } body.sg-nav-open .sg-nav-toggle span:nth-child(2) { opacity: 0; } body.sg-nav-open .sg-nav-toggle span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); } .sg-nav-mobile { position: fixed; top: 64px; left: 0; right: 0; background: var(--sg-bg); border-bottom: 1px solid var(--sg-hair); transform: translateY(-110%); transition: transform 280ms ease; z-index: 49; } body.sg-nav-open .sg-nav-mobile { transform: translateY(0); } .sg-nav-mobile ul { list-style: none; margin: 0; padding: 12px 24px 24px; } .sg-nav-mobile li { border-bottom: 1px solid var(--sg-hair); } .sg-nav-mobile li:last-child { border-bottom: none; } .sg-nav-mobile a { display: block; padding: 16px 0; font-family: var(--sg-sans); font-size: 12px; letter-spacing: 0.28em; color: var(--sg-ink-soft); text-transform: uppercase; text-decoration: none; } .sg-nav-mobile a.active { color: var(--sg-sage-dark); } /* ----------- Page shell ----------- */ .sg-page { position: relative; overflow: hidden; } /* Hero (landing) */ .sg-hero { position: relative; overflow: hidden; padding: 40px 32px 44px; text-align: center; } .sg-floral { position: absolute; pointer-events: none; user-select: none; mix-blend-mode: multiply; z-index: 1; } /* Side-flanking florals (hero + page headers) */ .sg-floral.left { top: 50%; left: -40px; transform: translateY(-50%); width: 150px; } .sg-floral.right { top: 50%; right: -40px; transform: translateY(-50%); width: 150px; } /* Small accent divider used between sections */ .sg-accent { display: flex; justify-content: center; padding: 32px 20px 0; } /* Tighter under page headings — the heading is light, the flower can sit closer */ .sg-pagehead + .sg-accent { padding-top: 8px; } .sg-accent img { width: 60px; height: auto; mix-blend-mode: multiply; opacity: 0.9; pointer-events: none; } .sg-hero-inner { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; } .sg-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: var(--sg-sans); font-size: 10px; letter-spacing: 0.4em; color: var(--sg-sage-dark); text-transform: uppercase; margin-bottom: 28px; } .sg-eyebrow .line { display: inline-block; width: 28px; height: 1px; background: var(--sg-sage); } .sg-names { font-family: var(--sg-meow); font-weight: 400; font-style: normal; font-size: clamp(54px, 9vw, 104px); line-height: 0.8; color: var(--sg-sage); margin: 0; letter-spacing: 0; } .sg-hero .sg-names { margin-bottom: 28px; } .sg-names .name { display: block; } .sg-names .amp { color: var(--sg-sage); font-size: 0.85em; display: block; margin: -0.1em 0; font-style: normal; } /* Hero "We Got Married!" greeting and italic prose lead-in */ .sg-hero-greeting { font-family: var(--sg-serif); font-style: italic; font-size: clamp(38px, 6vw, 64px); line-height: 1.05; color: var(--sg-sage-dark); margin: 0 0 22px; } .sg-hero-prose { font-family: var(--sg-serif); font-style: italic; font-size: clamp(18px, 2vw, 22px); color: var(--sg-sage-dark); margin: 0 0 24px; line-height: 1.4; } .sg-hero-subtitle { margin-top: 28px; font-family: var(--sg-serif); font-size: clamp(20px, 2.5vw, 26px); color: var(--sg-ink); display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; } .sg-hero-subtitle sup { font-size: 0.65em; vertical-align: super; line-height: 0; } .sg-hero-subtitle .dot { color: var(--sg-sage); } .sg-hero-detail { margin-top: 2px; font-size: clamp(16px, 1.8vw, 20px); } .sg-hero h2 { font-size: clamp(20px, 4.5vw, 30px); font-weight: 400; font-style: italic; line-height: 1.25; margin: 0 auto 32px; text-wrap: balance; max-width: 18ch; } @media (min-width: 640px) { .sg-hero h2 { max-width: none; } } .sg-hero-faq { font-size: clamp(15px, 1.6vw, 18px); margin-top: 22px; color: var(--sg-sage); font-style: italic; } /* Page header (non-landing pages) */ .sg-pagehead { position: relative; overflow: visible; padding: 64px 20px 0; text-align: center; } .sg-pagehead .sg-floral.left, .sg-pagehead .sg-floral.right { top: 100%; transform: translateY(-15%); } .sg-pagehead .sg-floral.left { width: 120px; left: -50px; } .sg-pagehead .sg-floral.right { width: 120px; right: -50px; } .sg-pagehead-inner { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; } .sg-pagehead .sg-eyebrow { margin-bottom: 18px; } .sg-pagehead h1 { font-family: var(--sg-display); font-weight: 300; font-style: italic; font-size: clamp(36px, 5vw, 52px); line-height: 1.1; color: var(--sg-ink); margin: 0 0 14px; } .sg-pagehead .lede { font-family: var(--sg-script); font-style: italic; font-size: 18px; color: var(--sg-ink-soft); margin: 0; } /* Event strip (3-up row) */ .sg-events { background: var(--sg-bg-soft); border-top: 1px solid var(--sg-hair); border-bottom: 1px solid var(--sg-hair); padding: 40px 20px; } .sg-events-inner { max-width: 920px; margin: 0 auto; display: grid; gap: 8px; } .sg-event { text-align: center; padding: 16px 8px; border-bottom: 1px dashed var(--sg-hair-dash); } .sg-event:last-child { border-bottom: none; } .sg-events-inner .divider { display: none; } .sg-event-label { font-family: var(--sg-serif); font-style: italic; font-weight: 400; font-size: 18px; color: var(--sg-rose); margin-bottom: 6px; } .sg-event-value { font-family: var(--sg-display); font-size: 22px; color: var(--sg-ink); line-height: 1.2; } .sg-event-note { margin-top: 6px; font-family: var(--sg-serif); font-style: italic; font-size: 16px; color: var(--sg-ink-soft); } /* Content sections */ .sg-section { padding: 32px 20px 12px; } /* Section directly under a page header — pull content closer to the heading */ .sg-pagehead + .sg-section { padding-top: 16px; } /* Adjacent sections — tighten the gap */ .sg-section + .sg-section { padding-top: 8px; } .sg-section-inner { max-width: 720px; margin: 0 auto; } .sg-section.narrow .sg-section-inner { max-width: 560px; } .sg-section.center { text-align: center; } .sg-section-eyebrow { font-family: var(--sg-serif); font-style: italic; font-size: 18px; color: var(--sg-sage-dark); text-align: center; margin-bottom: 14px; display: block; } .sg-section h2 { font-family: var(--sg-display); font-weight: 400; font-size: clamp(22px, 3.5vw, 28px); line-height: 1.2; color: var(--sg-ink); margin: 0 0 18px; text-align: center; } .sg-section p { font-family: var(--sg-serif); font-size: 19px; color: var(--sg-ink-soft); line-height: 1.7; margin: 0 0 14px; } /* Schedule list — 3-col grid keeps times/dots/events aligned in their own columns while the whole block stays centered (parent text-align: center) */ .sg-schedule { display: inline-grid; grid-template-columns: auto auto; column-gap: 24px; row-gap: 4px; font-family: var(--sg-script); font-size: 18px; color: var(--sg-ink-soft); margin: 0 0 24px; text-align: left; } .sg-schedule .time { text-align: right; color: var(--sg-sage); } .sg-section p.sg-schedule-note { margin: 20px auto 0; max-width: 64ch; font-family: var(--sg-serif); font-style: italic; font-size: clamp(15px, 1.6vw, 18px); color: var(--sg-sage); line-height: 1.5; text-wrap: balance; } /* Card (used for forms / FAQ wrapper / hotel cards) */ .sg-card { background: var(--sg-bg-card); border: 1px solid var(--sg-hair); padding: 32px 24px; margin-bottom: 24px; } .sg-card h3 { font-family: var(--sg-display); font-weight: 400; font-size: 24px; margin: 0 0 6px; color: var(--sg-ink); } .sg-card .meta { font-family: var(--sg-script); font-style: italic; font-size: 15px; color: var(--sg-rose); margin-bottom: 14px; } .sg-card p { margin: 0 0 8px; font-size: 18px; } /* Buttons */ .sg-btn, body.sg a.sg-btn { display: inline-block; background: var(--sg-sage); color: #FFFFFF; border: none; padding: 14px 36px; font-family: var(--sg-sans); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background 200ms, transform 200ms; } .sg-btn:hover, body.sg a.sg-btn:hover { background: var(--sg-sage-dark); transform: translateY(-1px); } .sg-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .sg-btn.full { width: 100%; } .sg-btn.outline { background: transparent; color: var(--sg-sage-dark); border: 1px solid var(--sg-sage); } .sg-btn.outline:hover { background: var(--sg-sage); color: #FFFFFF; } .sg-btn.rose { background: var(--sg-rose); } .sg-btn.rose:hover { background: #B57A7A; } .sg-linkbtn { background: none; border: none; padding: 0; font-family: var(--sg-serif); font-style: italic; font-size: 15px; color: var(--sg-sage-dark); text-decoration: underline; cursor: pointer; } .sg-linkbtn:hover { color: var(--sg-ink); } /* CTA */ .sg-cta { text-align: center; padding: 24px 20px 80px; } .sg-cta .deadline { margin-top: 14px; font-family: var(--sg-script); font-style: italic; font-size: 15px; color: var(--sg-sage); } /* Forms */ .sg-form { display: flex; flex-direction: column; gap: 16px; max-width: 480px; margin: 0 auto; } .sg-form-row { display: flex; flex-direction: column; gap: 16px; } .sg-field { display: flex; flex-direction: column; gap: 6px; } .sg-field label { font-family: var(--sg-sans); font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--sg-sage-dark); } .sg-field input, .sg-field select, .sg-field textarea { background: var(--sg-bg-soft); border: 1px solid var(--sg-hair); border-bottom: 1.5px solid var(--sg-sage-light); padding: 12px 14px; font-family: var(--sg-serif); font-size: 18px; color: var(--sg-ink); transition: border-color 200ms; } .sg-field input:focus, .sg-field select:focus, .sg-field textarea:focus { outline: none; border-color: var(--sg-sage-dark); border-bottom-color: var(--sg-sage-dark); } .sg-field textarea { resize: vertical; min-height: 64px; font-family: var(--sg-serif); } .sg-extra { margin-top: 28px; padding-top: 24px; border-top: 1px dashed var(--sg-hair-dash); display: flex; flex-direction: column; gap: 16px; } .sg-msg { margin-top: 16px; padding: 12px 16px; font-family: var(--sg-serif); font-style: italic; font-size: 15px; text-align: center; border: 1px solid var(--sg-hair); background: var(--sg-bg-soft); } .sg-msg.error { border-color: #E0BFBF; background: #FBF1F1; color: #8C4A4A; } .sg-msg.success{ border-color: #C5D2B0; background: #F2F5E9; color: #4F5A40; } /* RSVP party card */ .sg-party { background: var(--sg-bg-card); border: 1px solid var(--sg-hair); padding: 32px 24px; margin-bottom: 24px; } .sg-party-greeting { text-align: center; font-family: var(--sg-display); font-style: italic; font-size: 28px; color: var(--sg-ink); margin-bottom: 12px; line-height: 1.3; } .sg-party-note { text-align: center; font-family: var(--sg-serif); font-style: italic; font-size: 15px; color: var(--sg-sage); margin: 0 0 24px; line-height: 1.5; } .sg-guest { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; border-bottom: 1px dashed var(--sg-hair-dash); gap: 12px; flex-wrap: wrap; } .sg-guest:last-child { border-bottom: none; } .sg-guest-name { font-family: var(--sg-display); font-size: 22px; color: var(--sg-ink); } .sg-guest-name-input { font-family: var(--sg-display); font-size: 22px; color: var(--sg-ink); background: transparent; border: none; border-bottom: 1px dashed var(--sg-sage-light); padding: 2px 4px; max-width: 200px; } .sg-guest-name-input:focus { outline: none; border-bottom: 1px solid var(--sg-sage-dark); } .sg-toggle { display: inline-flex; border: 1px solid var(--sg-hair); overflow: hidden; } .sg-toggle button { background: var(--sg-bg-card); border: none; padding: 8px 18px; font-family: var(--sg-sans); font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--sg-ink-soft); cursor: pointer; transition: all 200ms; } .sg-toggle button.active-attending { background: var(--sg-sage); color: var(--sg-bg-soft); } .sg-toggle button.active-declined { background: var(--sg-rose); color: var(--sg-bg-soft); } /* FAQ */ .sg-faq { max-width: 720px; margin: 0 auto; } .sg-faq .faq-item { border-bottom: 1px solid var(--sg-hair); } .sg-faq .faq-item:first-child { border-top: 1px solid var(--sg-hair); } .sg-faq .faq-question { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; padding: 22px 4px; border: none; background: none; font-family: var(--sg-display); font-weight: 400; font-size: 22px; font-style: italic; color: var(--sg-ink); cursor: pointer; text-align: left; } .sg-faq .faq-icon { font-family: var(--sg-sans); font-style: normal; font-size: 22px; font-weight: 300; color: var(--sg-sage); transition: transform 200ms; flex-shrink: 0; } .sg-faq .faq-answer { max-height: 0; overflow: hidden; transition: max-height 250ms; } .sg-faq .faq-item.open .faq-answer { max-height: 600px; } .sg-faq .faq-item.open .faq-icon { transform: rotate(45deg); } .sg-faq .faq-answer p { padding: 0 4px 22px; font-family: var(--sg-serif); font-size: 19px; line-height: 1.7; color: var(--sg-ink-soft); margin: 0; } /* Footer */ .sg-footer { position: relative; border-top: 1px solid var(--sg-hair); padding: 32px 20px 0; text-align: center; overflow: hidden; } .sg-footer-inner { position: relative; z-index: 2; } .sg-footer-scene { margin: 20px auto 0; width: min(320px, 70%); max-width: 100%; display: block; mix-blend-mode: multiply; pointer-events: none; } .sg-footer .monogram { font-family: var(--sg-serif); font-style: italic; font-size: 22px; letter-spacing: 0.2em; color: var(--sg-sage-dark); } .sg-footer .tagline { margin-top: 10px; font-family: var(--sg-script); font-style: italic; font-size: 15px; color: var(--sg-ink-soft); } /* Login (centered card) */ body.sg.sg-login { display: flex; align-items: center; justify-content: center; min-height: 100svh; padding: 24px; position: relative; overflow: hidden; } body.sg.sg-login .sg-floral { z-index: 0; } .sg-login-card { position: relative; z-index: 2; background: var(--sg-bg-soft); border: 1px solid var(--sg-hair); padding: 56px 32px; text-align: center; max-width: 560px; width: 100%; } .sg-login-card .sg-names { font-size: clamp(48px, 12vw, 72px); margin-bottom: 28px; white-space: nowrap; } @media (max-width: 480px) { .sg-login-card .sg-names { white-space: normal; } } .sg-login-card .sg-names .amp { display: inline; margin: 0; } .sg-login-card .subtitle { font-family: var(--sg-script); font-style: italic; font-size: 17px; color: var(--sg-ink-soft); margin-bottom: 32px; } .sg-login-card .error { margin-top: 14px; font-family: var(--sg-serif); font-style: italic; font-size: 14px; color: #8C4A4A; } /* ============ Tablet (640px+) ============ */ @media (min-width: 640px) { .sg-nav { padding: 0 48px; height: 72px; } .sg-nav-mobile { top: 72px; } .sg-hero { padding: 56px 32px 56px; } .sg-floral.left { left: -20px; width: 200px; } .sg-floral.right { right: -20px; width: 200px; } .sg-accent img { width: 70px; } .sg-pagehead { padding: 80px 32px 0; } .sg-pagehead .sg-floral.left { width: 160px; left: -40px; } .sg-pagehead .sg-floral.right { width: 160px; right: -40px; } .sg-events-inner { grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 0; } .sg-event { padding: 8px 16px; border-bottom: none; } .sg-events-inner .divider { display: block; width: 1px; height: 90px; background: var(--sg-hair); align-self: center; } .sg-section { padding: 44px 32px 16px; } .sg-pagehead + .sg-section { padding-top: 20px; } .sg-form-row { flex-direction: row; } .sg-form-row .sg-field { flex: 1; } .sg-card { padding: 36px 32px; } } /* ============ Laptop (1100px+) ============ */ @media (min-width: 1100px) { .sg-nav { padding: 0 64px; } .sg-nav-toggle { display: none; } .sg-nav-links { display: flex; } .sg-nav-mobile { display: none; } .sg-hero { padding: 88px 64px 72px; } .sg-floral.left { left: 0; width: 250px; } .sg-floral.right { right: 0; width: 250px; } .sg-accent img { width: 80px; } .sg-pagehead { padding: 120px 64px 0; } .sg-pagehead .sg-floral.left { width: 220px; left: -20px; } .sg-pagehead .sg-floral.right { width: 220px; right: -20px; } .sg-section { padding: 56px 32px 24px; } .sg-pagehead + .sg-section { padding-top: 24px; } }