/** * Tucson Lodge #9 — Web Awesome theming * * Theming overview: https://webawesome.com/docs/theming-overview * Design tokens: https://webawesome.com/docs/tokens/ * * classes: * wa-theme-default — default Web Awesome theme (typography, space, borders, shadows) * wa-palette-pythian — custom Pythian red / navy / amber palette scales * wa-brand-blue — brand variant → navy * wa-warning-orange — warning variant → amber (Pythian yellow) * wa-danger-red — danger variant → cardinal red */ /* -------------------------------------------------------------------------- Custom Pythian palette (wa-color-palette layer) Overrides red, blue, and orange scales; gray hues stay from default palette. -------------------------------------------------------------------------- */ @layer wa-color-palette { :where(:root), .wa-palette-pythian { /* Pythian navy — #1E3A8A @ tint 40 (key < 60 → white on loud fills) */ --wa-color-blue-95: #eff6ff; --wa-color-blue-90: #dbeafe; --wa-color-blue-80: #bfdbfe; --wa-color-blue-70: #93c5fd; --wa-color-blue-60: #4b6cb7; --wa-color-blue-50: #2d4a9a; --wa-color-blue-40: #1e3a8a; --wa-color-blue-30: #162f6e; --wa-color-blue-20: #0f244f; --wa-color-blue-10: #0a1835; --wa-color-blue-05: #060f24; --wa-color-blue: var(--wa-color-blue-40); --wa-color-blue-key: 40; /* Pythian cardinal red — #9F1239 @ tint 40 */ --wa-color-red-95: #fff1f2; --wa-color-red-90: #ffe4e8; --wa-color-red-80: #fecdd3; --wa-color-red-70: #fda4af; --wa-color-red-60: #c41e4a; --wa-color-red-50: #af1d42; --wa-color-red-40: #9f1239; --wa-color-red-30: #881337; --wa-color-red-20: #7f1d1d; --wa-color-red-10: #450a0a; --wa-color-red-05: #2a0409; --wa-color-red: var(--wa-color-red-40); --wa-color-red-key: 40; /* Pythian amber — #B45309 @ tint 50 (warning-orange variant) */ --wa-color-orange-95: #fffbeb; --wa-color-orange-90: #fef3c7; --wa-color-orange-80: #fde68a; --wa-color-orange-70: #fbbf24; --wa-color-orange-60: #d97706; --wa-color-orange-50: #b45309; --wa-color-orange-40: #92400e; --wa-color-orange-30: #78350f; --wa-color-orange-20: #451a03; --wa-color-orange-10: #292524; --wa-color-orange-05: #1c1917; --wa-color-orange: var(--wa-color-orange-50); --wa-color-orange-key: 50; /* Antique parchment page background — cards use surface-default */ --wa-color-parchment: #f0e8d8; --wa-color-parchment-deep: #e2d6bc; } } /* -------------------------------------------------------------------------- Component & layout overrides (use --wa-* tokens only) -------------------------------------------------------------------------- */ .header-content { flex-wrap: wrap; } .header-actions { display: flex; align-items: center; gap: var(--wa-space-m); } .hero-actions wa-button.hero-btn-outline::part(base) { color: var(--wa-color-brand-40); border-color: var(--wa-color-brand-40); } .hero-actions wa-button.hero-btn-outline::part(base):hover { background-color: var(--wa-color-brand-fill-quiet); } .hero-actions wa-button { min-width: 10rem; } wa-card.fcb-panel::part(body) { padding: 0; } wa-card.contact-info-card, wa-card.contact-cta-card { height: 100%; } .attention-callout h2 { margin: 0 0 var(--wa-space-s); font-size: var(--wa-font-size-xl); } .attention-callout p { margin: var(--wa-space-xs) 0; } .attention-callout .alert-note { font-weight: var(--wa-font-weight-semibold); margin-top: var(--wa-space-m); } .not-found-actions { display: flex; gap: var(--wa-space-s); justify-content: center; flex-wrap: wrap; margin-top: var(--wa-space-m); } wa-card.page-content-card { display: block; max-width: 860px; margin-inline: auto; } wa-card.page-content-card::part(body) { padding: var(--wa-space-xl) var(--wa-space-l); } wa-card.privacy-content-card { max-width: 760px; } wa-card.prose-card, wa-card.heritage-card { height: 100%; } wa-card.not-found-card { max-width: 28rem; text-align: center; } wa-card.not-found-card::part(body) { padding: var(--wa-space-2xl) var(--wa-space-xl); } wa-card.history-section-card { display: block; margin-bottom: var(--wa-space-xl); } wa-card.history-section-card::part(body) { padding: var(--wa-space-l) var(--wa-space-l) var(--wa-space-xl); } wa-card.history-section-card h2 { margin: 0; font-size: var(--wa-font-size-xl); font-weight: var(--wa-font-weight-heading); color: var(--wa-color-text-normal); } @media (max-width: 640px) { .brand-text { /* Keep lodge name readable beside hamburger on narrow phones */ max-width: calc(100vw - 8rem); } }