/* ============================================================================ meshcore-theme.css — the MeshCore design system, in the Lodge's colours. Loaded LAST in on every page (scripts/apply-shared-chrome.py), so it overrides each page's older inline styles. Reference: MeshCore by Mesh Connector (Bricolage Grotesque / Inter / JetBrains Mono, glass header, pill nav, eyebrow rules, hairline cards, dark ink bands). Colours are the Lodge tricolore: green is the working accent, red the emphasis accent, gold the highlight. v1 · 2026-09-05 ========================================================================== */ :root { /* palette */ --green: #009246; --green-bright: #1fb463; --green-deep: #006b33; --red: #ce2b37; --red-soft: #ff6b63; --gold: #d4af37; --gold-deep: #b8920a; --gold-pale: #f7efd2; --ink: #0e1a11; --ink-2: #1a3322; --ink-3: #26402f; --surface: #f4f7f5; --surface-lowest: #ffffff; --surface-low: #eef3ef; --surface-mid: #e6ede8; --surface-high: #dde6df; --on-surface: #0e1a11; --on-surface-variant: #4a5f52; --outline: #8a9a90; --outline-variant: #dde6df; --green-fixed: #d6f2e2; --green-container: #bfe9d0; --grad-green: linear-gradient(135deg, #009246 0%, #1fb463 100%); --grad-red: linear-gradient(135deg, #ce2b37 0%, #ff6b63 100%); --grad-gold: linear-gradient(135deg, #b8920a 0%, #d4af37 100%); --grad-ink: linear-gradient(160deg, #0a140d 0%, #0e1a11 55%, #1a3322 100%); --grad-eyebrow: linear-gradient(90deg, #009246 0%, #d4af37 100%); /* legacy names used by the old inline styles — remapped so nothing breaks */ --bg: var(--surface); --bg-mid: var(--surface-low); --bg-warm: var(--surface-low); --text-primary: var(--on-surface); --text-muted: var(--on-surface-variant); --text-gold: var(--gold-deep); --green-dark: var(--ink); --green-mid: var(--ink-2); --green-soft: var(--green-fixed); /* type */ --font-display: 'Bricolage Grotesque', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace; --headline-xl: clamp(2.75rem, 6vw, 4.75rem); --headline-lg: clamp(2rem, 3.8vw, 3.1rem); --headline-md: clamp(1.5rem, 2.3vw, 2rem); --headline-sm: 1.5rem; --body-lg: 1.1875rem; --body-md: 1.0625rem; --data-display: .9375rem; --label-caps: .75rem; /* geometry */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; --radius: 12px; --radius-lg: 20px; --radius-xl: 28px; --container: 1200px; --shadow-sm: 0 1px 2px rgba(14, 26, 17, .06), 0 4px 12px -4px rgba(14, 26, 17, .10); --shadow-md: 0 2px 4px rgba(14, 26, 17, .06), 0 14px 32px -12px rgba(14, 26, 17, .22); --shadow-lg: 0 4px 8px rgba(14, 26, 17, .06), 0 30px 60px -20px rgba(14, 26, 17, .35); --glow-green: 0 0 0 1px rgba(0, 146, 70, .18), 0 12px 32px -10px rgba(0, 146, 70, .45); --extrude-green: 0 10px 24px -10px rgba(0, 146, 70, .6); --extrude-red: 0 10px 24px -10px rgba(206, 43, 55, .55); } /* ---- base ---------------------------------------------------------------- */ html { scroll-behavior: smooth; } body { margin: 0; padding-top: 0 !important; font-family: var(--font-body); font-size: var(--body-md); line-height: 1.65; color: var(--on-surface); background: var(--surface); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); line-height: 1.06; font-weight: 700; letter-spacing: -0.025em; text-wrap: balance; font-variation-settings: 'opsz' 96; } h1 { font-size: var(--headline-xl); font-weight: 800; letter-spacing: -0.035em; } h2 { font-size: var(--headline-lg); } h3 { font-size: var(--headline-sm); font-weight: 600; line-height: 1.2; font-variation-settings: 'opsz' 24; } h1 em, h2 em, h3 em, .page-title em, .section-heading em, .hero-heading em, .rent-heading em, .hero-title em, .cta-title em, .section-title em { font-style: normal !important; color: var(--green); } .site-hero h1 em, .band-dark h1 em, .band-dark h2 em, .section--dark h2 em, .hero--dark h1 em, .event-hero h1 em { color: var(--gold); } /* old pages set display type by literal family; catch the common class names */ body [class*="title"], body [class*="heading"], body [class*="-num"], body [class*="-value"], body [class*="stat-"], body [class*="price"] { font-family: var(--font-display); } body [class*="eyebrow"], body [class*="label"], body [class*="-tag"], body [class*="kicker"] { font-family: var(--font-mono); letter-spacing: .08em; } body .nav-links a.nav-cta--rent { background: var(--red) !important; color: #fff !important; border: 0 !important; } body .nav-links a.nav-cta--rent:hover { background: #b3202c !important; } p, li, dd, dt, td, th, label, input, textarea, select, button { font-family: var(--font-body); } a { color: var(--green-deep); } ::selection { background: var(--green-fixed); color: var(--ink); } :focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; } .container { max-width: var(--container); margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); } .section { padding: var(--sp-9) 0; } .section-tight { padding: var(--sp-7) 0; } .measure { max-width: 64ch; } /* skip link */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--red); color: #fff; font-family: var(--font-mono); font-size: var(--label-caps); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: var(--sp-3) var(--sp-5); border-radius: 0 0 var(--radius) 0; text-decoration: none; } .skip-link:focus { left: 0; } /* ---- header / nav (sticky glass, pill links) ------------------------------ */ body .site-header { position: sticky; top: 0; left: auto; right: auto; z-index: 100; background: rgba(244, 247, 245, .82); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid rgba(14, 26, 17, .08); } body .site-nav { position: relative; top: auto; left: auto; right: auto; z-index: auto; max-width: var(--container); margin: 0 auto; padding: 0 clamp(16px, 3vw, 40px); height: 68px; display: flex; align-items: center; justify-content: flex-start; gap: var(--sp-4); background: none; border: 0; box-shadow: none; transition: none; backdrop-filter: none; } .nav-logo { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; flex: none; } .nav-logo-img { width: 32px; height: 32px; border-radius: 8px; object-fit: contain; } .nav-logo-text, .nav-logo-num { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); font-variation-settings: 'opsz' 18; white-space: nowrap; } .nav-logo-num { color: var(--green); margin-left: -6px; } body .nav-links { display: flex; align-items: center; gap: 2px; margin-left: auto; list-style: none; padding: 0; margin-top: 0; margin-bottom: 0; } body .nav-links li { display: block; } body .nav-links > li > a, body .nav-links .nav-group-btn { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--font-body); font-size: .9375rem; font-weight: 600; letter-spacing: -0.005em; text-transform: none; white-space: nowrap; color: var(--on-surface-variant); text-decoration: none; padding: 8px 12px; border-radius: 999px; background: none; border: 0; cursor: pointer; line-height: 1.2; transition: color .15s ease, background-color .15s ease; } body .nav-links > li > a:hover, body .nav-links .nav-group-btn:hover, body .nav-links .nav-group.is-open > .nav-group-btn { color: var(--ink); background: var(--surface-mid); } body .nav-links > li > a.nav-active { color: var(--green-deep); background: var(--green-fixed); } .nav-caret { font-size: .7em; opacity: .6; } body .nav-links a.nav-cta, body .nav-links a.nav-cta--rent { color: #fff; background: var(--green); padding: 9px 16px; border-radius: 999px; font-size: .9rem; font-weight: 600; box-shadow: var(--extrude-green); margin-left: 6px; } body .nav-links a.nav-cta:hover { background: var(--green-deep); color: #fff; } body .nav-links a.nav-cta--rent { background: var(--red); color: #fff; box-shadow: var(--extrude-red); } body .nav-links a.nav-cta--rent:hover { background: #b3202c; color: #fff; } body .nav-links a.nav-fb { color: var(--on-surface-variant); } body .nav-links a.nav-fb:hover { color: #1877F2; } .nav-fb-text { display: none; } /* dropdowns */ body .nav-links .nav-group { position: relative; } body .nav-links .nav-sub { position: absolute; top: calc(100% + 8px); left: 0; transform: none; min-width: 210px; list-style: none; padding: 6px; margin: 0; background: var(--surface-lowest); border: 1px solid var(--outline-variant); border-radius: var(--radius); box-shadow: var(--shadow-md); display: none; z-index: 120; } body .nav-links .nav-group:hover > .nav-sub, body .nav-links .nav-group:focus-within > .nav-sub, body .nav-links .nav-group.is-open > .nav-sub { display: block; } body .nav-links .nav-sub a { display: block; padding: 9px 12px; border-radius: 8px; font-family: var(--font-body); font-size: .9375rem; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--on-surface); text-decoration: none; } body .nav-links .nav-sub a:hover, body .nav-links .nav-sub a.nav-active { background: var(--green-fixed); color: var(--green-deep); } .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; background: none; border: 0; cursor: pointer; padding: 6px; margin-left: auto; border-radius: 10px; } .nav-toggle span { display: block; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .28s ease, opacity .28s ease; } .nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-open .nav-toggle span:nth-child(2) { opacity: 0; } .nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 1080px) { .nav-fb-text { display: none; } body .nav-links > li > a, body .nav-links .nav-group-btn { padding: 8px 9px; font-size: .9rem; } } @media (max-width: 900px) { .nav-toggle { display: flex; } body .nav-links { display: none; position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--surface-lowest); border-bottom: 2px solid var(--green); box-shadow: var(--shadow-lg); padding: 8px 8px 16px; } .nav-open .nav-links { display: flex; } body .nav-links > li > a, body .nav-links .nav-group-btn { display: flex; width: 100%; padding: 12px 14px; font-size: 1rem; border-radius: 10px; } body .nav-links .nav-sub { position: static; display: block; box-shadow: none; border: 0; padding: 0 0 6px 18px; background: transparent; } body .nav-links a.nav-cta, body .nav-links a.nav-cta--rent { margin: 8px 6px 0; justify-content: center; } .nav-fb-text { display: inline; } } /* ---- text devices ---------------------------------------------------------- */ .eyebrow, .page-eyebrow, .section-eyebrow, .hero-announce-badge .badge-text, .info-block-label, .rent-fact-label, .detail-label, .form-card-title, .mc-card .when { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-mono); font-size: var(--label-caps); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--green-deep); margin-bottom: var(--sp-4); } .eyebrow::before, .page-eyebrow::before, .section-eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--grad-eyebrow); } .lede, .page-sub, .section-lead, .rent-copy, .mc-lede { font-family: var(--font-body); font-style: normal; font-size: var(--body-lg); line-height: 1.6; color: var(--on-surface-variant); max-width: 64ch; } .readout { display: inline-flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; font-family: var(--font-mono); font-size: var(--label-caps); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--on-surface-variant); background: var(--surface-lowest); border: 1px solid var(--outline-variant); border-radius: 999px; padding: 8px var(--sp-5); box-shadow: var(--shadow-sm); margin-bottom: var(--sp-6); } .readout-dark { background: rgba(255, 255, 255, .06); border-color: rgba(214, 242, 226, .2); color: var(--green-fixed); box-shadow: none; } .status-lamp { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; background: var(--outline-variant); } .status-lamp.is-lit { background: var(--green-bright); box-shadow: 0 0 0 3px rgba(0, 146, 70, .18), 0 0 10px rgba(31, 180, 99, .7); animation: lampBreathe 3.2s ease-in-out infinite; } .status-lamp.is-gold { background: var(--gold); box-shadow: 0 0 0 3px rgba(212, 175, 55, .18), 0 0 10px rgba(212, 175, 55, .7); } .status-lamp.is-red { background: var(--red); box-shadow: 0 0 0 3px rgba(206, 43, 55, .18), 0 0 10px rgba(255, 107, 99, .7); } @keyframes lampBreathe { 0%, 100% { opacity: 1; } 50% { opacity: .55; } } .panel-tag { display: inline-flex; align-items: center; background: var(--green-container); color: var(--ink-2); font-family: var(--font-mono); font-size: var(--label-caps); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; } .panel-tag.is-gold { background: var(--gold-pale); color: var(--gold-deep); } .tricolore { display: flex; height: 3px; width: 72px; border-radius: 2px; overflow: hidden; margin: 0 0 var(--sp-5); } .tricolore span, .hero-tricolor span, .footer-tricolor span, .card-tricolor span, .mc-tricolor span { flex: 1; } .tricolore .g, .hero-tricolor .g, .footer-tricolor .g, .card-tricolor .g, .mc-tricolor .g { background: var(--green); } .tricolore .w, .hero-tricolor .w, .footer-tricolor .w, .card-tricolor .w, .mc-tricolor .w { background: #e9e9e9; } .tricolore .r, .hero-tricolor .r, .footer-tricolor .r, .card-tricolor .r, .mc-tricolor .r { background: var(--red); } .hero-tricolor, .footer-tricolor, .card-tricolor, .mc-tricolor { display: flex; height: 3px; width: 72px; border-radius: 2px; overflow: hidden; } /* ---- buttons -------------------------------------------------------------- */ .btn, .btn-primary, .btn-secondary, .btn-on-dark, .btn-ghost, .btn-hero-pizza, .btn-hero-rent, .btn-outline-light, .btn-submit, .rent-cta, .cta-btn, .btn-donate { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); font-family: var(--font-body); font-size: 1rem; font-weight: 600; letter-spacing: -0.005em; text-transform: none; padding: 14px 26px; min-height: 50px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; text-decoration: none; text-align: center; line-height: 1.1; transition: background-color .15s ease, color .15s ease, transform .15s cubic-bezier(.2, .8, .2, 1), box-shadow .15s ease; } .btn-primary, .btn-hero-rent, .btn-hero-pizza, .btn-submit, .rent-cta { background: var(--red); color: #fff; box-shadow: var(--extrude-red); } .btn-primary:hover, .btn-hero-rent:hover, .btn-hero-pizza:hover, .btn-submit:hover, .rent-cta:hover { background: #b3202c; color: #fff; transform: translateY(-1px); } .btn-secondary, .btn-donate { background: var(--green); color: #fff; box-shadow: var(--extrude-green); } .btn-secondary:hover, .btn-donate:hover { background: var(--green-deep); color: #fff; transform: translateY(-1px); } .btn-ghost, .btn-outline-light { background: transparent; color: var(--ink); border-color: var(--outline); } .btn-ghost:hover, .btn-outline-light:hover { background: var(--surface-lowest); border-color: var(--ink); color: var(--ink); } .btn-on-dark { background: #fff; color: var(--ink); box-shadow: 0 10px 28px -10px rgba(0, 0, 0, .5); } .btn-on-dark:hover { background: var(--green-fixed); color: var(--ink); } .band-dark .btn-ghost, .band-dark .btn-outline-light, .cta-panel .btn-ghost, .cta-panel .btn-outline-light, .site-hero .btn-outline-light { color: #fff; border-color: rgba(255, 255, 255, .35); } .band-dark .btn-ghost:hover, .band-dark .btn-outline-light:hover, .cta-panel .btn-ghost:hover, .site-hero .btn-outline-light:hover { background: rgba(255, 255, 255, .1); border-color: #fff; color: #fff; } .btn-sm { padding: 9px 16px; min-height: 38px; font-size: .9rem; } /* ---- surfaces -------------------------------------------------------------- */ .card, .fund-card, .spread-card, .feature-card, .info-card, .event-card, .value-card, .form-card, .tier-card, .rest-card, .issue-card { position: relative; background: var(--surface-lowest); border: 1px solid var(--outline-variant); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--sp-6); border-top-width: 1px !important; transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease, border-color .25s ease; } .card:hover, .fund-card:hover, .spread-card:hover, .feature-card:hover, .event-card:hover, .rest-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--green-container); } .card h3, .fund-card-title, .spread-card h3, .feature-card h3, .event-card h3 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); margin: 0 0 var(--sp-2); } .card p, .fund-card-desc, .spread-card p, .feature-card p { color: var(--on-surface-variant); font-size: var(--data-display); line-height: 1.6; margin: 0; } .card-icon, .fund-card-icon { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--green-fixed); color: var(--green-deep); font-size: 1.3rem; margin-bottom: var(--sp-4); } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); } @media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } .panel { position: relative; background: var(--surface-lowest); border: 1px solid var(--outline-variant); border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 36px); box-shadow: var(--shadow-sm); } .band-dark, .rent-section, .section--dark { position: relative; background: var(--grad-ink); color: var(--green-fixed); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: clamp(32px, 5vw, 64px); overflow: hidden; isolation: isolate; } .band-dark::after, .rent-section::after, .section--dark::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(700px 400px at 0% 0%, rgba(0, 146, 70, .35), transparent 65%), radial-gradient(520px 360px at 100% 100%, rgba(206, 43, 55, .28), transparent 65%); } .band-dark h1, .band-dark h2, .band-dark h3, .rent-section h2, .rent-section h3, .section--dark h2, .section--dark h3 { color: #fff; } .band-dark h2 em, .rent-section h2 em, .section--dark h2 em { color: var(--gold); } .band-dark p, .rent-section p, .section--dark p { color: rgba(214, 242, 226, .8); } .band-dark .eyebrow, .rent-section .eyebrow, .rent-section .section-eyebrow, .section--dark .eyebrow, .section--dark .section-eyebrow { color: var(--gold); } .band-dark .eyebrow::before, .rent-section .section-eyebrow::before, .section--dark .section-eyebrow::before { background: var(--grad-gold); } .cta-panel { position: relative; background: linear-gradient(135deg, #009246 0%, #0e3d24 55%, #0a140d 100%); color: var(--green-fixed); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: clamp(40px, 6vw, 80px) clamp(24px, 5vw, 64px); text-align: center; overflow: hidden; isolation: isolate; } .cta-panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(420px 300px at 100% 100%, rgba(206, 43, 55, .35), transparent 65%), radial-gradient(360px 260px at 0% 0%, rgba(212, 175, 55, .22), transparent 65%); } .cta-panel h2 { color: #fff; margin-bottom: var(--sp-4); } .cta-panel p { color: rgba(214, 242, 226, .85); max-width: 64ch; margin: 0 auto var(--sp-6); font-size: var(--body-lg); } .plate { position: relative; background: rgba(0, 0, 0, .35); border: 1px solid rgba(31, 180, 99, .35); border-radius: var(--radius-lg); padding: var(--sp-5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); } .plate .panel-tag { position: absolute; top: -12px; left: 16px; } .node { background: rgba(0, 0, 0, .35); border: 1px solid var(--green); border-top: 2px solid var(--gold); border-radius: var(--radius); padding: var(--sp-4); } .node .k { font-family: var(--font-mono); font-size: var(--label-caps); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); } .node .v { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; color: #fff; letter-spacing: -0.02em; line-height: 1.1; } .node .s { font-size: .85rem; color: rgba(214, 242, 226, .7); } /* facts / stats */ .facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-4); } .fact { padding: var(--sp-4); border: 1px solid var(--outline-variant); border-radius: var(--radius); background: var(--surface-lowest); } .fact b, .rent-fact-num, .detail-value { display: block; font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; } .fact span { font-family: var(--font-mono); font-size: var(--label-caps); letter-spacing: .08em; text-transform: uppercase; color: var(--on-surface-variant); } .band-dark .fact, .rent-section .fact { background: rgba(0, 0, 0, .3); border-color: rgba(31, 180, 99, .35); } .band-dark .fact b, .rent-section .fact b, .rent-section .rent-fact-num { color: #fff; } .band-dark .fact span, .rent-section .fact span, .rent-section .rent-fact-label { color: var(--gold); } /* hero threads (the reference's drifting curves, in tricolore) */ .hero-threads { position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: radial-gradient(640px 420px at 78% 10%, rgba(0, 146, 70, .16), transparent 70%), radial-gradient(420px 320px at 96% 92%, rgba(206, 43, 55, .12), transparent 70%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 640' preserveAspectRatio='none' fill='none' stroke-linecap='round'%3E%3Cpath d='M-40 470 C 260 420 420 560 720 500 S 1180 380 1480 430' stroke='%23009246' stroke-opacity='.28' stroke-width='2'/%3E%3Cpath d='M-40 380 C 300 330 460 470 760 410 S 1200 300 1480 350' stroke='%23d4af37' stroke-opacity='.35' stroke-width='1.6'/%3E%3Cpath d='M-40 560 C 240 520 400 620 700 590 S 1160 500 1480 540' stroke='%23ce2b37' stroke-opacity='.22' stroke-width='1.6'/%3E%3C/svg%3E"); background-size: 100% 100%, 100% 100%, 100% 100%; animation: heroDrift 18s ease-in-out infinite alternate; } @keyframes heroDrift { from { background-position: 0 0, 0 0, 0 0; } to { background-position: 0 0, 0 0, 0 -24px; } } @media (prefers-reduced-motion: reduce) { .hero-threads, .status-lamp.is-lit { animation: none; } } /* ---- forms ------------------------------------------------------------------ */ input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="number"], input[type="search"], input[type="password"], textarea, select { font-family: var(--font-body); font-size: 1rem; color: var(--ink); background: var(--surface-lowest); border: 1px solid var(--outline-variant); border-radius: var(--radius); padding: 12px 14px; transition: border-color .15s, box-shadow .15s; } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(0, 146, 70, .15); } label { font-family: var(--font-mono); font-size: var(--label-caps); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--on-surface-variant); } /* ---- footer (ink plate) ------------------------------------------------------ */ body .site-footer { position: relative; background: var(--grad-ink); color: rgba(214, 242, 226, .7); padding: var(--sp-8) 0 var(--sp-5); margin-top: var(--sp-9); font-size: var(--data-display); overflow: hidden; text-align: left; isolation: isolate; } body .site-footer::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(600px 360px at 0% 0%, rgba(0, 146, 70, .28), transparent 65%), radial-gradient(420px 300px at 100% 100%, rgba(206, 43, 55, .22), transparent 65%); } .footer-plate { display: grid; grid-template-columns: 1.2fr 1.8fr; gap: var(--sp-8); padding-bottom: var(--sp-6); } .footer-brand { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; } .footer-brand img { width: 30px; height: 30px; border-radius: 8px; } .footer-brand b { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; color: #fff; letter-spacing: -0.02em; } .footer-brand b span { color: var(--green-bright); } .footer-blurb { max-width: 46ch; color: rgba(214, 242, 226, .7); margin: var(--sp-4) 0 0; } .footer-spec { margin: var(--sp-5) 0 0; display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2) var(--sp-4); font-family: var(--font-mono); font-size: var(--label-caps); letter-spacing: .06em; text-transform: uppercase; } .footer-spec dt { color: var(--gold); } .footer-spec dd { margin: 0; color: rgba(214, 242, 226, .85); } .footer-spec dd a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(214, 242, 226, .25); } .footer-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); } .footer-nav h2 { font-family: var(--font-mono); font-size: var(--label-caps); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin: 0 0 var(--sp-3); } .footer-nav ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; } .footer-nav a { color: rgba(255, 255, 255, .85); text-decoration: none; font-size: var(--data-display); } .footer-nav a:hover { color: var(--green-bright); } .footer-base { border-top: 1px solid rgba(214, 242, 226, .12); padding-top: var(--sp-5); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-6); } .footer-copy { margin: 0; font-size: .82rem; color: rgba(214, 242, 226, .55); } .footer-stamp { margin-left: auto; font-family: var(--font-mono); font-size: var(--label-caps); letter-spacing: .1em; text-transform: uppercase; color: rgba(214, 242, 226, .45); } body .site-footer .footer-tricolor { margin: 0; } body .meshcore-credit { border: 0; padding: 0; margin: 0; opacity: 1; text-align: left; font-size: var(--data-display); } body .meshcore-credit a { border: 0; } @media (max-width: 900px) { .footer-plate { grid-template-columns: 1fr; gap: var(--sp-6); } .footer-nav { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .footer-nav { grid-template-columns: 1fr; } .footer-stamp { margin-left: 0; } } /* ---- shared retrofits for un-redesigned pages ------------------------------- */ /* Pages built on the contact.html template */ body > main { padding-top: clamp(40px, 6vw, 64px) !important; } .page-title { font-family: var(--font-display); font-weight: 800; font-size: var(--headline-xl); letter-spacing: -0.035em; line-height: 1.04; color: var(--ink); } .info-block-value, .info-block-value a { font-family: var(--font-body); color: var(--ink); } .info-divider { border-color: var(--outline-variant); } /* Old homepage-style sections */ .section--warm, .section--mid { background: var(--surface-low); } .section-heading { font-family: var(--font-display); font-weight: 700; font-size: var(--headline-lg); letter-spacing: -0.03em; line-height: 1.06; } /* Restaurant + event profile pages */ .hero-heading { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.035em; line-height: 1.04; } /* Old scroll-hero fallbacks: never let a dark hero pin the page */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s cubic-bezier(.16, 1, .3, 1), transform .6s cubic-bezier(.16, 1, .3, 1); } .reveal.is-in, .no-js .reveal { opacity: 1; transform: none; } img { max-width: 100%; height: auto; } .wide { overflow-x: auto; } /* legacy pages: decorative watermarks and wide strips must never scroll the page sideways */ html, body { overflow-x: hidden; } /* the reference sets no italics anywhere; legacy ledes and quotes go upright */ body p, body blockquote, body .lede, body [class*="intro"], body [class*="quote"], body [class*="tagline"] { font-style: normal; } /* legacy buttons pick up the pill shape and type; colours stay page-defined */ body a[class*="btn"], body button[class*="btn"] { border-radius: 999px; font-family: var(--font-body); font-weight: 600; text-transform: none; letter-spacing: -0.005em; }