/* ========================================= GroomerHaven base styles (scoped) NOTE: Scoped to body.site-theme to avoid leaking into imported Canva/Event markup (ptw-*). Add class="site-theme" to in _Layout. ========================================= */ html { font-size: 14px; } @media (min-width: 768px) { html { font-size: 16px; } } /* Focus ring */ .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.25rem #258cfb; } /* Ensure full height layout if body gets site-theme */ html { position: relative; min-height: 100%; } body { margin-bottom: 60px; } /* ----------------------------------------- Theme variables (only when site-theme applied) ----------------------------------------- */ body.site-theme { --bg-100: #0f1724; --accent: #0d6efd; --muted: #6c757d; --card: #ffffff; --glass: rgba(255,255,255,0.06); --success: #28a745; --warning: #ffc107; --danger: #dc3545; --soft-shadow: 0 10px 30px rgba(2,6,23,0.28); margin:0; font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background: linear-gradient(180deg, #0b1220 0%, #0f1724 60%); color: #e9eef8; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height:1.5; } * { box-sizing: border-box; } /* ----------------------------------------- CANVA / Event content isolation We do NOT force dark theme inside ptw-* sections. ----------------------------------------- */ .ptw-hero, .ptw-section, .ptw-footer { color: initial; background: initial; font-family: inherit; } /* Allow light backgrounds inside event content */ .ptw-section .ticket-card, .ptw-section .card { background: #ffffff; color: #111827; } /* ----------------------------------------- Header ----------------------------------------- */ body.site-theme .site-header .navbar { background: linear-gradient(90deg, rgba(13,110,253,0.12), rgba(32,201,151,0.06)); border-bottom: 1px solid rgba(255,255,255,0.03); } .brand-logo { height:34px; margin-right:10px; border-radius:6px; } .brand-text { font-weight:600; color:#fff; } /* ----------------------------------------- Main container ----------------------------------------- */ body.site-theme .site-main .container { max-width:1100px; padding-top:28px; padding-bottom:28px; } /* ----------------------------------------- Cards Limit global .card override to site-theme only. ----------------------------------------- */ body.site-theme .card { background:#ffffff; color:#111827; border-radius:12px; box-shadow:0 6px 18px rgba(2,6,23,0.12); border:none; } /* Product card variant */ body.site-theme .card.product-card { background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.94)); color:#111827; border-radius:12px; padding:24px; transition: transform .22s cubic-bezier(.2,.9,.2,1), box-shadow .22s; } body.site-theme .card.product-card .card-title { font-size:1.2rem; font-weight:700; } body.site-theme .card.product-card p { color:#6b7280; } body.site-theme .card.product-card:hover { transform: translateY(-8px); box-shadow:0 18px 36px rgba(2,6,23,0.36); } /* ----------------------------------------- Modal (dark theme only inside site-theme) ----------------------------------------- */ body.site-theme .modal-content { border-radius:12px; background: linear-gradient(180deg,#0b1220 0%,#0f1724 100%); color:#e9eef8; border:none; } /* ----------------------------------------- Form controls ----------------------------------------- */ body.site-theme .form-control { background:#ffffff; color:#111827; border:1px solid rgba(0,0,0,0.08); border-radius:8px; padding:10px 12px; box-shadow:none; } body.site-theme .modal-content .form-control { background:#0f1724; color:#e9eef8; border:1px solid rgba(255,255,255,0.06); } /* Labels */ body.site-theme label, body.site-theme .form-label { color:#111827; font-weight:600; } body.site-theme .modal-content label, body.site-theme .modal-content .form-label { color:#e9eef8; } /* ----------------------------------------- Buttons ----------------------------------------- */ body.site-theme .btn-primary, body.site-theme .btn-success { border-radius:8px; padding:10px 18px; font-weight:600; box-shadow:0 6px 18px rgba(13,110,253,0.12); } body.site-theme .btn-outline-light.admin-btn { color:#fff; border-color:rgba(255,255,255,0.12); } /* ----------------------------------------- Checkout summary ----------------------------------------- */ body.site-theme #summaryList .list-group-item { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); color:#e6eefb; border:none; } body.site-theme #purchaseResult .card { background:rgba(255,255,255,0.03); color:#fff; border-radius:8px; } /* ----------------------------------------- Reader overlay ----------------------------------------- */ body.site-theme #readerContainer { border-radius:8px; overflow:hidden; background:#000; position:relative; } #reader { min-height:360px; } body.site-theme #readerOverlay .overlay-content { padding:18px 22px; border-radius:8px; font-weight:700; color:#fff; } body.site-theme #readerOverlay.success { background:rgba(40,167,69,0.95); } body.site-theme #readerOverlay.warning { background:rgba(255,193,7,0.98); color:#1f1f1f; } body.site-theme #readerOverlay.danger { background:rgba(220,53,69,0.95); } body.site-theme #readerOverlay.info { background:rgba(23,162,184,0.95); } /* ----------------------------------------- Alerts ----------------------------------------- */ body.site-theme .alert { border-radius:8px; font-weight:600; } /* Payment logos */ .payment-logo { height:32px; width:auto; display:inline-block; vertical-align:middle; } /* Helpers */ body.site-theme .badge.bg-primary { background: var(--accent) !important; } body.site-theme .small.text-muted { color:#6b7280 !important; } /* Accessibility focus */ body.site-theme .form-control:focus, body.site-theme .btn:focus, body.site-theme .form-check-input:focus { outline:3px solid rgba(13,110,253,0.18); outline-offset:2px; } /* ----------------------------------------- Responsive ----------------------------------------- */ @media (max-width: 767px) { body.site-theme .brand-text { font-size:0.95rem; } body.site-theme .site-main .container { padding-left:16px; padding-right:16px; } body.site-theme .card.product-card { padding:18px; } .payment-logo { height:28px; } }