/* ============================================================ Theme — values are overridden at runtime from /settings (app_settings table) so branding is fully dynamic per deployment ============================================================ */ :root { --color-primary: #c9a66b; /* default gold */ --color-secondary: #2e2e2e; --color-bg: #faf8f5; --color-text: #2e2e2e; --color-card-bg: #ffffff; --color-text-strong: var(--color-secondary); --color-muted: #777; --color-border: #ddd; --color-shadow: rgba(0,0,0,0.07); --font-heading: 'Georgia', serif; --font-body: 'Helvetica Neue', Arial, sans-serif; --radius: 10px; } /* Dark theme — toggled via data-theme="dark" on , persisted in localStorage. Brand colors (--color-primary/--color-secondary, set from app_settings) stay the same; only surface/text/border tones flip so legibility holds in both modes. */ :root[data-theme="dark"] { --color-bg: #16181c; --color-text: #e6e6e6; --color-card-bg: #23262b; --color-text-strong: #f5f5f5; --color-muted: #a3a8b0; --color-border: #3a3e46; --color-shadow: rgba(0,0,0,0.35); } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font-body); background: var(--color-bg); color: var(--color-text); line-height: 1.5; transition: background-color .15s ease, color .15s ease; } a { color: var(--color-primary); text-decoration: none; } header.site-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; background: var(--color-card-bg); box-shadow: 0 1px 4px var(--color-shadow); position: sticky; top: 0; z-index: 10; } header.site-header .logo { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-heading); font-size: 1.4rem; font-weight: bold; color: var(--color-text-strong); line-height: 1; } header.site-header .logo img { height: 36px; width: auto; display: block; object-fit: contain; } header.site-header .logo span { line-height: 36px; } nav.site-nav { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; } nav.site-nav a { color: var(--color-text-strong); font-weight: 500; } nav.site-nav a:hover { color: var(--color-primary); } /* ---- Theme toggle (sun/moon) ---- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border-radius: 999px; border: 1px solid var(--color-border); background: transparent; color: var(--color-text-strong); cursor: pointer; font-size: 1.1rem; line-height: 1; } .theme-toggle:hover { border-color: var(--color-primary); color: var(--color-primary); } :root[data-theme="dark"] .theme-toggle .icon-light, :root:not([data-theme="dark"]) .theme-toggle .icon-dark { display: none; } .lang-switcher { border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-card-bg); color: var(--color-text); padding: 0.3rem 0.5rem; font-size: 0.85rem; cursor: pointer; } main { max-width: 1100px; margin: 0 auto; padding: 1.5rem; } .hero { text-align: center; padding: 3rem 1rem; } .hero h1 { font-family: var(--font-heading); font-size: 2.4rem; color: var(--color-secondary); margin-bottom: 0.5rem; } .hero p { color: var(--color-muted); margin-bottom: 1.5rem; } .search-bar { display: flex; gap: 0.5rem; max-width: 500px; margin: 0 auto; flex-wrap: wrap; justify-content: center; } .search-bar input, .search-bar select { padding: 0.6rem 0.9rem; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: 1rem; background: var(--color-card-bg); color: var(--color-text); } .categories { display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: center; margin: 1.5rem 0; } .categories button { padding: 0.4rem 1rem; border: 1px solid var(--color-primary); background: transparent; color: var(--color-primary); border-radius: 999px; cursor: pointer; font-size: 0.9rem; } .categories button.active, .categories button:hover { background: var(--color-primary); color: #fff; } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.25rem; } .card { background: var(--color-card-bg); border-radius: var(--radius); overflow: hidden; box-shadow: 0 1px 6px var(--color-shadow); transition: transform .15s ease, background-color .15s ease; } .card:hover { transform: translateY(-3px); } .card img { width: 100%; height: 150px; object-fit: cover; display: block; background: var(--color-border); } .card .card-body { padding: 0.9rem; } .card .card-body h3 { font-family: var(--font-heading); margin-bottom: 0.25rem; color: var(--color-text-strong); } .card .card-body p { color: var(--color-muted); font-size: 0.9rem; } .badge-promo { display: inline-block; background: var(--color-primary); color: #fff; font-size: 0.7rem; padding: 0.15rem 0.5rem; border-radius: 999px; margin-top: 0.4rem; margin-bottom: 0.4rem; } .hero .badge-promo { font-size: 0.8rem; padding: 0.25rem 0.75rem; } .btn { display: inline-block; background: var(--color-primary); color: #fff; padding: 0.65rem 1.4rem; border: none; border-radius: var(--radius); cursor: pointer; font-size: 1rem; } .btn.secondary { background: transparent; border: 1px solid var(--color-primary); color: var(--color-primary); } form.stacked { display: flex; flex-direction: column; gap: 0.8rem; max-width: 420px; margin: 0 auto; width: 100%; } form.stacked input, form.stacked select, form.stacked textarea { padding: 0.7rem; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: 1rem; background: var(--color-card-bg); color: var(--color-text); width: 100%; max-width: 100%; box-sizing: border-box; } form.stacked label { display: flex; flex-direction: column; gap: 0.3rem; } form.stacked label.inline-checkbox { flex-direction: row; align-items: flex-start; } form.stacked label.inline-checkbox input { width: auto; flex: none; margin-top: 0.2rem; margin-right: 6px; } /* ---- Shared admin/dashboard tables, button rows, section titles ---- */ table.admin-table { width:100%; border-collapse:collapse; background:var(--color-card-bg); border-radius:var(--radius); overflow:hidden; box-shadow:0 1px 6px var(--color-shadow); color:var(--color-text); } table.admin-table th, table.admin-table td { padding:0.7rem 1rem; text-align:left; border-bottom:1px solid var(--color-border); } table.admin-table th { background:var(--color-bg); font-family:var(--font-heading); color:var(--color-text-strong); } table.admin-table input { width:90px; padding:0.4rem; border:1px solid var(--color-border); border-radius:6px; background:var(--color-card-bg); color:var(--color-text); } table.admin-table button { padding:0.4rem 0.9rem; border:none; border-radius:6px; background:var(--color-primary); color:#fff; cursor:pointer; } /* Wide tables: scroll horizontally instead of overflowing the viewport on phones/tablets */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); box-shadow: 0 1px 6px var(--color-shadow); } .table-scroll table.admin-table { box-shadow: none; min-width: 600px; } /* Button rows / multi-input rows: wrap instead of overflowing on small screens */ .btn-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .guest-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.5rem; } .guest-row input { flex: 1 1 140px; min-width: 0; } .section-title { font-family: var(--font-heading); margin: 2rem 0 0.75rem; color: var(--color-text-strong); } .save-msg { color: #2e9e4f; font-size: 0.85rem; margin-left: 0.5rem; } /* ---- Wedding page (theme-driven, set via inline style vars) ---- */ .wedding-hero { text-align: center; padding: 4rem 1.5rem; background-size: cover; background-position: center; color: var(--wed-text, #fff); } .wedding-hero h1 { font-family: var(--font-heading); font-size: 3rem; } .wedding-section { padding: 2.5rem 1.5rem; max-width: 800px; margin: 0 auto; } .wedding-section h2 { font-family: var(--font-heading); margin-bottom: 1rem; text-align: center; } .timeline-item { display: flex; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--color-border); } .timeline-item .time { font-weight: bold; min-width: 70px; } /* ---- Day/section headings used in galleries, dashboards, etc. ---- */ .day-heading { font-family: var(--font-heading); text-align: center; margin: 1.5rem 0 0.75rem; padding-bottom: 0.4rem; border-bottom: 2px solid var(--color-primary); color: var(--color-text-strong); } .qr-upload-box { border: 2px dashed var(--color-primary); border-radius: var(--radius); padding: 2rem; text-align: center; margin-top: 1rem; } footer.site-footer { text-align: center; padding: 2rem 1rem; color: var(--color-muted); font-size: 0.85rem; } /* ---- Tablet breakpoint: tighten spacing, allow tables/forms to adapt ---- */ @media (max-width: 900px) { main { padding: 1rem; } .grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; } .stat-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } table.admin-table th, table.admin-table td { padding: 0.55rem 0.7rem; font-size: 0.92rem; } .btn-row { gap: 8px; } form.stacked { max-width: 100%; } } /* ---- Phone breakpoint ---- */ @media (max-width: 600px) { .hero h1 { font-size: 1.8rem; } nav.site-nav { gap: 0.75rem; font-size: 0.9rem; } header.site-header { flex-direction: column; align-items: flex-start; gap: 0.5rem; } .search-bar { flex-direction: column; } .search-bar input, .search-bar select { width: 100%; } .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; } table.admin-table th, table.admin-table td { padding: 0.45rem 0.5rem; font-size: 0.85rem; } .tabs { flex-wrap: wrap; gap: 6px; } .guest-row { flex-direction: column; } .guest-row input { width: 100%; } }