/* Designed & Built by Point of View Web Solutions — https://www.povwebsolutions.com */ /* ============================================================ Mini Moos & Crew — site styles (editorial refresh) ============================================================ */ /* The fonts used to be pulled in here with @import. That cannot start until this stylesheet has been downloaded and parsed, so the fonts arrived as a second, chained request and text sat unstyled for longer than it needed to. Each page now loads them with a in its , alongside this file rather than behind it. Nothing to add here. */ :root { /* Editorial — quiet, premium, magazine */ --bg: #FBF8F2; --bg-2: #F4EEE2; --bg-card: #FFFFFF; --cream: #FFFFFF; --ink: #1F1812; --ink-soft: #4A3D33; --ink-muted: #8A7A6B; --rule: #E5DCC9; --rule-soft: #EFE7D5; --blush: #C9888B; --blush-deep: #A35F64; --blush-soft: #F1DDDF; --sage: #8A9A7E; --sage-deep: #5F7256; --tan: #C9AC83; --tan-soft: #EBDFC9; --serif-display: 'DM Serif Display', Georgia, serif; --serif-elegant: 'DM Serif Display', Georgia, serif; --script: 'Caveat', cursive; --script-loose: 'Caveat', cursive; --sans: 'Inter', system-ui, -apple-system, sans-serif; --radius: 8px; --radius-lg: 14px; } :root[data-vibe="meadow"] { --bg: #FCFAF5; --bg-2: #F2EDDF; --bg-card: #FFFFFF; --ink: #1F1812; --ink-soft: #4A3D33; --ink-muted: #8A7A6B; --rule: #E5DCC9; --blush: #D5A4A7; --blush-deep: #B07478; --blush-soft: #F4E2E4; --sage: #A1B194; --sage-deep: #6F8266; --tan: #D4B896; --tan-soft: #EBDABE; } :root[data-vibe="editorial"] { --bg: #F8F2E6; --bg-2: #EEE5D2; --bg-card: #FBF6EB; --ink: #1A130D; --ink-soft: #3A2D22; --ink-muted: #7B6855; --rule: #D9C9AB; --blush: #B0686D; --blush-deep: #884046; --blush-soft: #E3BFC3; --sage: #6F8463; --sage-deep: #4A5A40; --tan: #B8965E; --tan-soft: #D7BD8C; --serif-display: 'Playfair Display', Georgia, serif; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.65; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: inherit; text-decoration: none; } /* ----------------------------- TYPE ----------------------------- */ .script { font-family: var(--script); font-weight: 500; color: var(--blush-deep); font-size: 1.4rem; line-height: 1; letter-spacing: 0.01em; } .script-sage { color: var(--sage-deep); } .script-ink { color: var(--ink-soft); } .eyebrow { font-family: var(--sans); font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; font-size: 0.7rem; color: var(--ink-muted); } h1, h2, h3, h4 { font-family: var(--serif-display); font-weight: 400; color: var(--ink); line-height: 1.08; letter-spacing: -0.01em; margin: 0; } h1 { font-size: clamp(2.4rem, 5.5vw, 4.6rem); font-weight: 400; } h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); } h3 { font-size: 1.3rem; font-family: var(--serif-elegant); } h4 { font-size: 0.78rem; font-family: var(--sans); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-muted); } p { margin: 0 0 1em; text-wrap: pretty; } /* ----------------------------- LAYOUT ---------------------------- */ .wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; position: relative; z-index: 2; } .wrap-narrow { max-width: 820px; margin: 0 auto; padding: 0 32px; position: relative; z-index: 2; } section { position: relative; z-index: 2; } /* ----------------------------- NAV ------------------------------ */ .nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule-soft); } .nav-inner { max-width: 1240px; margin: 0 auto; padding: 12px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .nav-brand { display: flex; align-items: center; gap: 12px; color: var(--ink); flex-shrink: 0; } .nav-logo { height: 82px; width: auto; display: block; transition: opacity .2s ease; } .nav-brand:hover .nav-logo { opacity: 0.8; } .nav-links { display: flex; gap: 32px; font-family: var(--sans); font-size: 0.86rem; font-weight: 500; color: var(--ink-soft); letter-spacing: 0.01em; } .nav-links a { position: relative; padding: 6px 2px; transition: color .2s; } .nav-links a:hover { color: var(--ink); } .nav-links a.active { color: var(--ink); } .nav-links a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1.5px; background: var(--ink); border-radius: 2px; } .nav-cta { display: flex; gap: 12px; align-items: center; } /* hamburger */ .nav-toggle { display: none; background: none; border: none; padding: 6px; cursor: pointer; color: var(--ink); line-height: 0; } .nav-toggle svg { display: block; } @media (max-width: 880px) { .nav-links { display: none; } .nav-inner { padding: 10px 20px; } .nav-toggle { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; } .nav-logo { height: 58px; } .nav-toggle { display: block; } .nav-cta .btn { display: none; } } /* mobile slide-over menu */ .mobile-menu { position: fixed; inset: 0; background: var(--bg); z-index: 200; display: none; flex-direction: column; padding: 18px 24px 32px; overflow-y: auto; } .mobile-menu.open { display: flex; } .mobile-menu-top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--rule); } .mobile-menu-top .nav-logo { height: 62px; } .mobile-menu-close { background: none; border: none; font-family: var(--serif-display); font-size: 2.2rem; color: var(--ink); cursor: pointer; line-height: 1; padding: 0 6px; } .mobile-menu-links { display: flex; flex-direction: column; gap: 2px; margin-top: 24px; } .mobile-menu-links a { font-family: var(--serif-display); font-size: 1.7rem; color: var(--ink); padding: 13px 0; border-bottom: 1px dashed var(--rule); } .mobile-menu-links a.active { color: var(--blush-deep); } .mobile-menu-cta { margin-top: 30px; display: flex; flex-direction: column; gap: 14px; } .mobile-menu-cta .btn { justify-content: center; padding: 18px 28px; font-size: 0.95rem; } .mobile-menu-social { margin-top: auto; padding-top: 30px; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 8px; } .mobile-menu-social a { font-family: var(--sans); font-weight: 600; color: var(--ink-soft); font-size: 0.92rem; padding: 6px 0; text-decoration: none; } .mobile-menu-social .label { font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted); font-weight: 700; margin-bottom: 4px; } body.menu-open { overflow: hidden; } /* ----------------------------- BUTTONS -------------------------- */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: 999px; font-family: var(--sans); font-weight: 500; font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; border: none; cursor: pointer; transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease; text-decoration: none; white-space: nowrap; } .btn-primary { background: var(--ink); color: var(--cream); } .btn-primary:hover { background: var(--ink-soft); transform: translateY(-1px); } .btn-blush { background: var(--blush-deep); color: var(--cream); } .btn-blush:hover { background: var(--ink); transform: translateY(-1px); } .btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); } .btn-ghost:hover { background: var(--ink); color: var(--cream); } .btn-arrow::after { content: "→"; font-size: 1.05em; } /* ----------------------------- HERO MAGAZINE -------------------- */ .hero { padding: 60px 0 100px; } .hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; } .hero-photo { position: relative; aspect-ratio: 4/5; border-radius: var(--radius-lg); overflow: hidden; background: var(--tan-soft); box-shadow: 0 30px 60px -40px rgba(31,24,18,0.25); } .hero-photo .photo-tag { position: absolute; bottom: 18px; left: 18px; background: var(--cream); padding: 8px 16px; border-radius: 999px; font-family: var(--script); color: var(--blush-deep); font-size: 1.2rem; line-height: 1; border: 1px solid var(--rule); } .hero-eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; } .hero-eyebrow .line { width: 40px; height: 1px; background: var(--ink-muted); } .hero h1 { margin-bottom: 24px; margin-top: 0; } .hero-script { font-family: var(--script); color: var(--blush-deep); font-size: 1.6rem; line-height: 1; display: inline-block; margin-bottom: 12px; font-weight: 500; } .hero-sub { font-size: 1.08rem; color: var(--ink-soft); max-width: 480px; margin-bottom: 36px; line-height: 1.65; } .hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; } .hero-meta { margin-top: 48px; display: flex; gap: 36px; flex-wrap: wrap; padding-top: 28px; border-top: 1px solid var(--rule); font-size: 0.7rem; color: var(--ink-muted); letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; } .hero-meta strong { color: var(--ink); display: block; font-family: var(--serif-display); font-size: 1rem; text-transform: none; letter-spacing: 0; font-weight: 400; margin-top: 4px; } @media (max-width: 880px) { .hero-grid { grid-template-columns: 1fr; gap: 40px; } .hero { padding: 32px 0 60px; } } /* ---------------------- PHOTO PLACEHOLDER ----------------------- */ .photo { background: linear-gradient(135deg, var(--tan-soft) 0%, var(--blush-soft) 100%); position: relative; display: flex; align-items: center; justify-content: center; color: var(--ink-soft); overflow: hidden; } img.photo { width: 100%; height: 100%; object-fit: cover; display: block; } img.photo[data-filename] { background: linear-gradient(135deg, var(--tan-soft) 0%, var(--blush-soft) 100%); } .photo-slot { position: relative; width: 100%; height: 100%; min-height: 240px; background: linear-gradient(135deg, var(--tan-soft) 0%, var(--blush-soft) 100%); overflow: hidden; display: block; } .photo-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .photo-slot .photo-filename { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; pointer-events: none; z-index: 0; } .photo-slot .photo-filename .fname { font-family: 'SF Mono', Menlo, Monaco, monospace; font-size: 0.72rem; background: var(--cream); color: var(--ink); padding: 6px 12px; border-radius: 4px; border: 1px dashed var(--ink-soft); letter-spacing: 0.02em; margin-bottom: 10px; max-width: 90%; word-break: break-all; } .photo-slot .photo-filename .fhint { font-family: var(--script); font-size: 1.2rem; color: var(--ink-soft); opacity: 0.75; line-height: 1.1; } .photo-slot img.loaded ~ .photo-filename { display: none; } .photo::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.25), transparent 50%); pointer-events: none; } img.photo::before { display: none; } .photo-label { position: relative; z-index: 2; font-family: var(--script); font-size: 1.6rem; color: var(--ink-soft); text-align: center; padding: 0 20px; opacity: 0.7; } .photo-label small { display: block; font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; margin-top: 6px; opacity: 0.7; } /* ---------------------- ICON STRIP ------------------------------ */ .icon-strip { padding: 80px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--bg-2); } .icon-strip-inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; align-items: start; } .icon-col { text-align: center; padding: 0 14px; } .icon-circle { width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 50%; background: var(--cream); display: grid; place-items: center; border: 1px solid var(--rule); color: var(--sage-deep); } .icon-circle svg { width: 28px; height: 28px; } .icon-col h3 { font-family: var(--serif-display); font-size: 1.3rem; margin-bottom: 10px; } .icon-col p { color: var(--ink-soft); font-size: 0.94rem; line-height: 1.6; } @media (max-width: 720px) { .icon-strip-inner { grid-template-columns: 1fr; gap: 40px; } } /* ---------------------- SECTION HEADERS ------------------------- */ .section-head { text-align: center; margin-bottom: 64px; } .section-head .script { font-size: 0.78rem; margin-bottom: 14px; display: block; color: var(--ink-muted); font-family: var(--sans); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; } .section-head h2 { margin-bottom: 18px; } .section-head p { color: var(--ink-soft); max-width: 620px; margin: 0 auto; font-size: 1.05rem; line-height: 1.65; } /* ---------------------- FEATURED EVENT BLOCK -------------------- */ .featured-event { padding: 100px 0; } .featured-card { display: grid; grid-template-columns: 1fr 1fr; background: var(--cream); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--rule); box-shadow: 0 30px 60px -50px rgba(31,24,18,0.4); } .featured-card .photo { aspect-ratio: 4/5; } /* ---- Why the flyer sticks ---- The card is two equal columns, but only one of them has a fixed shape: the flyer is locked to 3:4 while the details column grows with whatever the event happens to carry. An event with a vendor list, a drink menu and a list of photo areas — Founders Day has all three — runs 500px past the bottom of its own flyer, and the flyer column was left as a tall empty panel. That reads as a broken layout rather than a deliberate one. So the flyer stays with you instead: it pins under the nav and follows while the details scroll past, which is what the empty space was always trying to be. overflow had to change from hidden to clip for this to work at all. hidden makes the card a scroll container, and a sticky child of a scroll container never moves — it would silently do nothing. clip crops to the rounded corners exactly the same way without creating that container. */ .featured-card { overflow: clip; } .featured-card .flyer-frame { align-self: start; position: sticky; /* The nav is sticky and 107px tall — pin below it, not underneath it. */ top: 125px; } /* Flyer posters: show the WHOLE flyer, never cropped */ .flyer-frame { aspect-ratio: 3/4; background: var(--bg-2); display: flex; align-items: center; justify-content: center; overflow: hidden; } .flyer-frame img { width: 100%; height: 100%; object-fit: contain; display: block; } .featured-card-body { padding: 60px 56px; display: flex; flex-direction: column; justify-content: center; } .featured-card .script { font-size: 0.72rem; margin-bottom: 14px; font-family: var(--sans); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-muted); } .featured-card h2 { font-size: clamp(2rem, 3.2vw, 2.6rem); margin-bottom: 10px; } .featured-card .event-meta { margin: 16px 0 28px; font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-muted); font-weight: 500; display: flex; gap: 20px; flex-wrap: wrap; } .featured-card .event-meta span { display: inline-flex; align-items: center; gap: 8px; } .featured-card .event-meta span::before { content: "•"; color: var(--blush); font-size: 1.4em; line-height: 0; } .included { list-style: none; padding: 0; margin: 0 0 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; } .included li { font-size: 0.94rem; color: var(--ink-soft); display: flex; align-items: flex-start; gap: 10px; } .included li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--blush); margin-top: 9px; flex: 0 0 auto; } .pricing { padding: 20px 24px; background: var(--bg-2); border-radius: var(--radius); margin-bottom: 28px; display: flex; gap: 28px; align-items: baseline; border: 1px solid var(--rule); } .pricing .price { font-family: var(--serif-display); font-size: 2rem; color: var(--ink); line-height: 1; } .pricing .price small { font-family: var(--sans); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-muted); display:block; margin-top: 4px; } .pricing .note { color: var(--ink-soft); font-size: 0.9rem; } @media (max-width: 900px) { .featured-card { grid-template-columns: 1fr; } /* One column now: a sticky flyer would pin itself over the text it is supposed to be illustrating. */ .featured-card .flyer-frame { position: static; } .featured-card-body { padding: 40px 28px; } .featured-card h2 { font-size: 2rem; } .included { grid-template-columns: 1fr; } } /* ---------------------- ABOUT TEASER ---------------------------- */ .about-teaser { padding: 110px 0; text-align: center; } .about-teaser .script { font-size: 0.78rem; margin-bottom: 14px; font-family: var(--sans); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-muted); display: block; } .about-teaser h2 { margin-bottom: 28px; } .about-teaser p { font-size: 1.1rem; color: var(--ink-soft); max-width: 680px; margin: 0 auto 32px; line-height: 1.7; } .about-teaser-quote { font-family: var(--script); color: var(--blush-deep); font-size: 1.6rem; margin-top: 24px; } /* ---------------------- SERVICES GRID --------------------------- */ .services { padding: 100px 0; background: var(--bg-2); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; } .service-card { background: var(--cream); border-radius: var(--radius-lg); border: 1px solid var(--rule); padding: 40px 32px; display: flex; flex-direction: column; position: relative; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .service-card:hover { transform: translateY(-3px); box-shadow: 0 30px 50px -40px rgba(31,24,18,0.3); border-color: var(--ink-muted); } .service-card .badge { position: absolute; top: 22px; right: 22px; font-family: var(--sans); color: var(--ink-muted); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; transform: none; line-height: 1; } .service-card h3 { font-family: var(--serif-display); font-size: 1.6rem; margin: 0 0 14px; line-height: 1.2; } .service-card p { color: var(--ink-soft); font-size: 0.95rem; flex: 1; margin-bottom: 24px; line-height: 1.6; } .service-card .price { font-family: var(--serif-display); font-size: 1.25rem; color: var(--ink); margin-bottom: 22px; } .service-card a { font-family: var(--sans); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 4px; align-self: flex-start; transition: color .2s, border-color .2s; } .service-card a:hover { color: var(--blush-deep); border-color: var(--blush-deep); } @media (max-width: 880px) { .services-grid { grid-template-columns: 1fr; } } /* ---------------------- TESTIMONIALS ---------------------------- */ .testimonials { padding: 100px 0; } .testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; } .quote-card { padding: 40px 32px; background: var(--cream); border-radius: var(--radius-lg); border: 1px solid var(--rule); position: relative; } .quote-card::before { content: ""; position: absolute; top: 0; left: 32px; right: 32px; height: 2px; background: var(--blush); } .quote-card p { font-family: var(--serif-elegant); font-style: italic; font-size: 1.05rem; color: var(--ink); margin-bottom: 22px; line-height: 1.55; } .quote-card cite { font-family: var(--sans); color: var(--ink); font-size: 0.9rem; font-weight: 600; font-style: normal; } .quote-card cite small { display: block; font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-muted); font-weight: 500; margin-top: 4px; } @media (max-width: 880px) { .testimonials-grid { grid-template-columns: 1fr; } } /* ---------------------- INSTAGRAM STRIP ------------------------- */ .insta { padding: 90px 0 100px; text-align: center; } .insta-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 40px; } .insta-grid .photo { aspect-ratio: 1/1; border-radius: 4px; cursor: pointer; overflow: hidden; transition: opacity .3s ease; } .insta-grid .photo:hover { opacity: 0.85; } .insta-handle { font-family: var(--serif-display); color: var(--ink); font-size: 1.2rem; margin-top: 12px; display: inline-block; letter-spacing: 0.02em; } @media (max-width: 720px) { .insta-grid { grid-template-columns: repeat(3, 1fr); } } /* ---------------------- FOOTER CTA ------------------------------ */ .footer-cta { padding: 120px 0; background: var(--ink); color: var(--cream); text-align: center; position: relative; overflow: hidden; } .footer-cta::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(ellipse 800px 400px at 50% 0%, rgba(201,136,139,0.10), transparent 70%); } .footer-cta > * { position: relative; z-index: 2; } .footer-cta .script { color: var(--blush-soft); font-size: 0.78rem; margin-bottom: 14px; display: block; font-family: var(--sans); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; } .footer-cta h2 { color: var(--cream); margin-bottom: 18px; font-size: clamp(2.2rem, 4.5vw, 3.2rem); } .footer-cta p { color: rgba(255,255,255,0.72); max-width: 540px; margin: 0 auto 36px; font-size: 1.05rem; line-height: 1.65; } .footer-cta .btn-primary { background: var(--cream); color: var(--ink); } .footer-cta .btn-primary:hover { background: var(--blush-soft); } .footer-cta .btn-ghost { color: var(--cream); border-color: var(--cream); } .footer-cta .btn-ghost:hover { background: var(--cream); color: var(--ink); } /* ---------------------- FOOTER ---------------------------------- */ .footer { background: var(--bg); padding: 70px 0 36px; border-top: 1px solid var(--rule); } .footer-inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 56px; } .footer h4 { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-muted); font-weight: 600; margin: 0 0 18px; } .footer-logo { height: 92px; width: auto; display: block; margin-bottom: 16px; } .footer-brand .name { font-family: var(--serif-display); font-size: 1.5rem; margin-bottom: 10px; } .footer-brand .tagline { font-family: var(--script); color: var(--blush-deep); font-size: 1.2rem; line-height: 1.2; margin-bottom: 14px; } .footer-brand p { color: var(--ink-soft); font-size: 0.9rem; max-width: 300px; line-height: 1.6; } .footer ul { list-style: none; padding: 0; margin: 0; } .footer ul li { margin-bottom: 10px; } .footer ul a { color: var(--ink-soft); font-size: 0.92rem; transition: color .2s; } .footer ul a:hover { color: var(--ink); } .footer-bottom { padding-top: 28px; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--ink-muted); flex-wrap: wrap; gap: 12px; } @media (max-width: 880px) { .footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; } } /* ---------------------- THE RANCH LETTER ------------------------ The sign-up box, which sits in the footer of every page and again as the whole of newsletter.html. One set of rules for both, so the two cannot drift apart. */ .footer-news { padding-top: 30px; margin-bottom: 34px; border-top: 1px solid var(--rule); max-width: 560px; } .footer-news p { color: var(--ink-soft); font-size: 0.9rem; line-height: 1.6; margin: 0 0 16px; } .news-row { display: flex; gap: 10px; flex-wrap: wrap; } .news-row input { flex: 1 1 200px; min-width: 0; font-family: var(--sans); font-size: 0.95rem; color: var(--ink); background: var(--bg-card); border: 1px solid var(--rule); border-radius: 999px; padding: 13px 20px; } .news-row input:focus { outline: 2px solid var(--blush-deep); outline-offset: 1px; } .news-row .btn { flex: 0 0 auto; } /* The field only a robot fills in. Off-screen rather than display:none, because some bots skip anything that is genuinely hidden. */ .news-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .news-note { margin: 12px 0 0; font-size: 0.88rem; line-height: 1.5; } .news-note.good { color: var(--ink); } .news-note.bad { color: #a8322f; } .news-small { margin: 14px 0 0; font-size: 0.82rem; color: var(--ink-muted); line-height: 1.6; } .news-small a { text-decoration: underline; } .news-hero { padding: 90px 0 80px; } .news-hero h1 { margin: 6px 0 22px; } .news-lede { font-size: 1.06rem; line-height: 1.7; color: var(--ink-soft); margin: 0 0 26px; max-width: 46ch; } .news-hero .news-row { max-width: 560px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------------------- STICKY MOBILE BOOK ---------------------- */ .sticky-book { position: fixed; bottom: 16px; left: 16px; right: 16px; z-index: 100; display: none; } .sticky-book .btn { width: 100%; justify-content: center; padding: 16px 24px; font-size: 0.9rem; box-shadow: 0 8px 24px rgba(31,24,18,0.25); } @media (max-width: 880px) { .sticky-book { display: block; } body { padding-bottom: 90px; } } /* ---------------------- PAGE HEADER ----------------------------- */ .page-header { padding: 80px 0 60px; text-align: center; border-bottom: 1px solid var(--rule); background: var(--bg-2); } .page-header .script { font-size: 0.78rem; margin-bottom: 14px; display: block; font-family: var(--sans); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-muted); } .page-header h1 { margin-bottom: 20px; font-size: clamp(2.4rem, 5vw, 4rem); } .page-header p { font-size: 1.1rem; color: var(--ink-soft); max-width: 640px; margin: 0 auto; line-height: 1.65; } /* ---------------------- REVEAL ON SCROLL ------------------------ */ /* Entrance is transform-only (never opacity) so content is always visible — even in renderers that freeze CSS animations at their first frame. */ @keyframes reveal-rise { from { transform: translateY(16px); } to { transform: none; } } .reveal.in { animation: reveal-rise .6s cubic-bezier(.22,.61,.36,1) both; } @media (prefers-reduced-motion: reduce) { .reveal.in { animation: none; } } /* ---------------------- DECORATIVE ACCENTS ---------------------- */ .heart { display: inline-block; width: 1em; color: var(--blush); vertical-align: middle; } .divider-flourish { text-align: center; font-family: var(--sans); color: var(--ink-muted); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; padding: 40px 0; display: flex; align-items: center; justify-content: center; gap: 20px; font-weight: 500; } .divider-flourish::before, .divider-flourish::after { content: ""; flex: 0 1 80px; height: 1px; background: var(--rule); } /* Native anchor scrolling, offset for the fixed nav */ :target, .event-card[id], .exp-card[id], section[id] { scroll-margin-top: 110px; } /* The build credit in the footer. Quiet by default, the site's link colour on hover — it is a signature, not a call to action. */ .footer-credit a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule); } .footer-credit a:hover { color: var(--blush); border-bottom-color: currentColor; }