/** * Memento — per-page layout themes * * Applied via `page-theme--{name}` on from layout.blade.php. * Themes control page background, header, main spacing, and footer. */ /* ------------------------------------------------------------------------- Shared tokens ------------------------------------------------------------------------- */ .page-theme--announcement { --theme-bg: #14130e; --theme-bg-footer: #0f0e09; --theme-bg-surface: #21201a; --theme-text: #e6e2d9; --theme-text-muted: #c2c8c6; --theme-text-secondary: #c8c6c5; --theme-accent: #e9c349; --theme-primary: #b5cbc6; --theme-primary-container: #1a2e2b; --theme-outline: #424847; --theme-header-bg: rgba(20, 19, 14, 0.6); --theme-header-border: rgba(230, 226, 217, 0.08); --theme-header-shadow: 0 4px 30px rgba(26, 46, 43, 0.3); } /* ------------------------------------------------------------------------- Default / Home / Memorial / Content — brand green (#334F4D) ------------------------------------------------------------------------- */ .page-theme--default, .page-theme--home, .page-theme--memorial, .page-theme--content { background-color: var(--color-dark); } .page-theme--default main, .page-theme--home main, .page-theme--memorial main, .page-theme--content main { padding-top: 5.75rem; } @media (min-width: 1024px) { .page-theme--default main, .page-theme--home main, .page-theme--memorial main, .page-theme--content main { padding-top: 6.25rem; } } /* ------------------------------------------------------------------------- Announcement — dark memorial theme ------------------------------------------------------------------------- */ .page-theme--announcement { background-color: var(--theme-bg); color: var(--theme-text); } .page-theme--announcement .header { background: var(--theme-header-bg); backdrop-filter: blur(24px); border-bottom: 1px solid var(--theme-header-border); box-shadow: var(--theme-header-shadow); } .page-theme--announcement .header-cta { display: inline-flex; align-items: center; padding: 0.75rem 1.25rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; white-space: nowrap; background: rgba(26, 46, 43, 0.5); border: 1px solid rgba(181, 203, 198, 0.2); color: var(--theme-primary); box-shadow: 0 0 20px rgba(26, 46, 43, 0.3); transition: color 0.2s, background-color 0.2s, border-color 0.2s; } @media (min-width: 768px) { .page-theme--announcement .header-cta { padding: 0.875rem 1.5rem; font-size: 0.875rem; } } .page-theme--announcement .header-cta:hover { background: var(--theme-primary-container); color: var(--theme-accent); border-color: rgba(233, 195, 73, 0.4); } .page-theme--announcement main { padding-top: 6.5rem; } .page-theme--announcement footer { position: relative; background-color: var(--theme-bg-footer); border-top: 1px solid rgba(66, 72, 71, 0.2); } .page-theme--announcement footer .link, .page-theme--announcement footer p { color: rgba(194, 200, 198, 0.75); } .page-theme--announcement footer a:hover { color: var(--theme-accent); } /* Announcement page components */ .page-theme--announcement .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; vertical-align: middle; } .page-theme--announcement .announcement-content a { color: var(--theme-primary); text-decoration: underline; } .page-theme--announcement .announcement-content strong { color: var(--theme-text); } .page-theme--announcement .announcement-card { background: rgba(20, 19, 14, 0.4); backdrop-filter: blur(24px); border: 1px solid rgba(233, 195, 73, 0.1); box-shadow: 0 8px 32px rgba(26, 46, 43, 0.2); } .page-theme--announcement .announcement-card:hover { background: rgba(20, 19, 14, 0.6); } .page-theme--announcement .announcement-card__title { color: var(--theme-accent); border-bottom: 1px solid rgba(66, 72, 71, 0.2); } .page-theme--announcement .announcement-card__text { color: var(--theme-text); } .page-theme--announcement .announcement-card__text-muted { color: var(--theme-text-muted); } .page-theme--announcement .announcement-action-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border: 1px solid rgba(181, 203, 198, 0.35); border-radius: 9999px; background: rgba(181, 203, 198, 0.05); padding: 0.625rem 1rem; color: #c9d9d5; font-size: 0.875rem; font-weight: 500; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); transition: color 200ms, background-color 200ms, border-color 200ms, box-shadow 200ms, transform 200ms; } .page-theme--announcement .announcement-action-btn:hover { transform: translateY(-0.125rem); border-color: rgba(181, 203, 198, 0.6); background: rgba(181, 203, 198, 0.1); color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .page-theme--announcement .announcement-action-btn:focus-visible { outline: 2px solid rgba(181, 203, 198, 0.6); outline-offset: 2px; } .page-theme--announcement .announcement-action-btn:disabled { cursor: wait; opacity: 0.6; } .page-theme--announcement .announcement-action-btn.is-copied { background: rgba(233, 195, 73, 0.2); color: var(--theme-accent); border-color: var(--theme-accent); } .page-theme--announcement .announcement-attendance-modal { color: var(--theme-text); background: rgba(20, 19, 14, 0.96); border: 1px solid rgba(233, 195, 73, 0.16); box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55), 0 0 40px rgba(26, 46, 43, 0.25); } .page-theme--announcement .announcement-form-field { color: #e6e2d9; -webkit-text-fill-color: #e6e2d9; caret-color: #e6e2d9; background: rgba(255, 255, 255, 0.08); border: 2px solid rgba(181, 203, 198, 0.58); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.28); outline: none; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } .page-theme--announcement .announcement-form-field::placeholder { color: rgba(194, 200, 198, 0.45); -webkit-text-fill-color: rgba(194, 200, 198, 0.45); } .page-theme--announcement .announcement-form-field:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(181, 203, 198, 0.82); } .page-theme--announcement .announcement-form-field:focus { background: rgba(255, 255, 255, 0.12); border-color: rgba(233, 195, 73, 0.95); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 4px rgba(233, 195, 73, 0.16); } .page-theme--announcement .announcement-success-toast { position: fixed; z-index: 9500; top: 6.25rem; right: 1rem; left: 1rem; max-width: 36rem; margin-inline: auto; animation: announcement-success-enter 0.35s ease-out both; } .page-theme--announcement .announcement-success-alert { color: #d8eee8; background: rgba(26, 65, 56, 0.97); border: 1px solid rgba(158, 216, 199, 0.68); box-shadow: 0 16px 50px rgba(0, 0, 0, 0.48), 0 0 0 1px rgba(158, 216, 199, 0.08); backdrop-filter: blur(18px); } .page-theme--announcement .announcement-attendance-confirmed { color: #d8eee8; background: rgba(44, 91, 79, 0.32); border: 1px solid rgba(134, 203, 184, 0.4); box-shadow: 0 8px 30px rgba(20, 60, 50, 0.18); } .page-theme--announcement .announcement-attendance-error { color: #fecaca; background: rgba(127, 29, 29, 0.32); border: 1px solid rgba(252, 165, 165, 0.45); } .page-theme--announcement .announcement-success-alert .material-symbols-outlined, .page-theme--announcement .announcement-attendance-confirmed .material-symbols-outlined { color: #9ed8c7; } @keyframes announcement-success-enter { from { opacity: 0; transform: translateY(-0.75rem) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .page-theme--announcement .announcement-social-link { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 9999px; border: 1px solid rgba(66, 72, 71, 0.4); transition: background-color 0.2s; } .page-theme--announcement .announcement-social-link--whatsapp:hover { background: rgba(37, 211, 102, 0.1); } .page-theme--announcement .announcement-social-link--telegram:hover { background: rgba(0, 136, 204, 0.1); } .page-theme--announcement .announcement-social-link--eitaa:hover { background: rgba(233, 195, 73, 0.1); } .page-theme--announcement .announcement-social-link--bale:hover { background: rgba(181, 203, 198, 0.1); } /* ------------------------------------------------------------------------- Print ------------------------------------------------------------------------- */ @media print { .page-theme--announcement .no-print, .page-theme--announcement .header-cta { display: none !important; } .page-theme--announcement { background: white !important; color: black !important; } }