/* * FruityDate — brand theme override * Applied when is present. * Layered on top of bootstrap + base.html :root variables. * Brand spec: "Naughty / No Fruit" v1.1 (dark, premium, adult-dating) * * Token reference (from fruitydate_design_tokens.css): * --fd-passion: #FF2D55 (hot pink — kept as accent pop) * --fd-cherry: #C70446 (primary CTA) * --fd-coral: #FF765B (gradient end / highlights) * --fd-desire: #8A2BE2 (purple accent) * --fd-mystery: #2D0D2E (dark surface) * --fd-dark: #0F0F12 (deepest background) * --fd-light: #F7F7F8 (text on dark) * --fd-blush: #FFEDEB (warm tint — used sparingly) */ /* ── Root overrides — FruityDate dark theme ─────────────────────────────── */ body.brand-fruitydate { --brand-primary: #C70446; --brand-secondary: #FF765B; --brand-accent: #8A2BE2; --brand-background: #0F0F12; --brand-surface: #1A0A1E; --brand-surface-glass: rgba(255, 255, 255, 0.055); --brand-border-glass: rgba(255, 255, 255, 0.10); --brand-text: #F7F7F8; --brand-text-muted: #9A8FA8; --brand-gradient-cta: linear-gradient(135deg, #C70446 0%, #FF765B 52%, #FF5FA2 100%); --brand-radius-card: 28px; --brand-radius-button: 999px; --font-heading: 'Poppins', system-ui, sans-serif; --font-body: 'Poppins', 'Inter', system-ui, sans-serif; background: var(--brand-background); color: var(--brand-text); font-family: var(--font-body); } /* ── Typography ─────────────────────────────────────────────────────────── */ body.brand-fruitydate h1, body.brand-fruitydate h2, body.brand-fruitydate h3, body.brand-fruitydate h4, body.brand-fruitydate h5, body.brand-fruitydate h6, body.brand-fruitydate .navbar-brand { font-family: var(--font-heading); color: var(--brand-text); } /* ── Navbar ─────────────────────────────────────────────────────────────── */ body.brand-fruitydate .navbar { background: rgba(15, 15, 18, 0.92) !important; border-bottom: 1px solid var(--brand-border-glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } body.brand-fruitydate .navbar-brand, body.brand-fruitydate .nav-link { color: var(--brand-text) !important; } body.brand-fruitydate .nav-link.active, body.brand-fruitydate .nav-link:hover { color: var(--brand-primary) !important; } /* ── Bottom tab bar ──────────────────────────────────────────────────────── */ body.brand-fruitydate .app-tabs { background: #0F0F12; border-top: 1px solid var(--brand-border-glass); } body.brand-fruitydate .app-tabs a, body.brand-fruitydate .app-tabs button { color: var(--brand-text-muted); } body.brand-fruitydate .app-tabs a.active, body.brand-fruitydate .app-tabs a:hover, body.brand-fruitydate .app-tabs button.active, body.brand-fruitydate .app-tabs button:hover { color: var(--brand-primary); } /* ── Cards ───────────────────────────────────────────────────────────────── */ body.brand-fruitydate .card, body.brand-fruitydate .mod-card { background: var(--brand-surface-glass); border: 1px solid var(--brand-border-glass); border-radius: var(--brand-radius-card); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); color: var(--brand-text); } body.brand-fruitydate .card-body, body.brand-fruitydate .card-header { background: transparent; color: var(--brand-text); } /* ── Buttons ─────────────────────────────────────────────────────────────── */ body.brand-fruitydate .btn-brand { background: var(--brand-gradient-cta); border: none; border-radius: var(--brand-radius-button); color: #fff; font-weight: 800; font-family: var(--font-heading); box-shadow: 0 4px 20px rgba(199, 4, 70, 0.35); transition: opacity .15s, box-shadow .15s; } body.brand-fruitydate .btn-brand:hover { opacity: .9; color: #fff; box-shadow: 0 6px 28px rgba(199, 4, 70, 0.50); } body.brand-fruitydate .btn-outline-primary { border-color: var(--brand-primary); color: var(--brand-primary); } body.brand-fruitydate .btn-outline-primary:hover { background: var(--brand-primary); color: #fff; } /* ── Forms / inputs ─────────────────────────────────────────────────────── */ body.brand-fruitydate .form-control, body.brand-fruitydate .form-select { background: rgba(255, 255, 255, 0.07); border: 1px solid var(--brand-border-glass); border-radius: 14px; color: var(--brand-text); caret-color: var(--brand-primary); } body.brand-fruitydate .form-control:focus, body.brand-fruitydate .form-select:focus { background: rgba(255, 255, 255, 0.10); border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(199, 4, 70, 0.20); color: var(--brand-text); } body.brand-fruitydate .form-control::placeholder { color: var(--brand-text-muted); } body.brand-fruitydate label, body.brand-fruitydate .form-label { color: var(--brand-text); } /* ── More bottom sheet ───────────────────────────────────────────────────── */ body.brand-fruitydate .more-sheet { background: #1A0A1E; color: var(--brand-text); } body.brand-fruitydate .more-sheet-handle { background: rgba(255,255,255,.2); } body.brand-fruitydate .more-sheet-item { color: var(--brand-text); } body.brand-fruitydate .more-sheet-item:active { background: rgba(199,4,70,.12); } body.brand-fruitydate .more-sheet-item i { color: var(--brand-primary); } /* ── Chat bubbles ───────────────────────────────────────────────────────── */ body.brand-fruitydate .bubble-out { background: var(--brand-gradient-cta); } body.brand-fruitydate .bubble-in { background: rgba(255, 255, 255, 0.08); color: var(--brand-text); box-shadow: 0 1px 4px rgba(0,0,0,.3); } /* ── Profile / swipe cards ──────────────────────────────────────────────── */ body.brand-fruitydate .profile-card { border-radius: var(--brand-radius-card); overflow: hidden; } body.brand-fruitydate .profile-card .card-overlay { background: linear-gradient(to top, rgba(15,15,18,.85) 0%, transparent 55%); } /* ── Badges & highlights ─────────────────────────────────────────────────── */ body.brand-fruitydate .badge-primary, body.brand-fruitydate .bg-primary { background: var(--brand-primary) !important; } body.brand-fruitydate .text-brand, body.brand-fruitydate .text-primary { color: var(--brand-primary) !important; } /* ── Misc surfaces ───────────────────────────────────────────────────────── */ body.brand-fruitydate .dropdown-menu { background: #1A0A1E; border: 1px solid var(--brand-border-glass); color: var(--brand-text); } body.brand-fruitydate .dropdown-item { color: var(--brand-text); } body.brand-fruitydate .dropdown-item:hover, body.brand-fruitydate .dropdown-item:focus { background: rgba(199, 4, 70, 0.15); color: var(--brand-text); } body.brand-fruitydate .modal-content { background: #1A0A1E; border: 1px solid var(--brand-border-glass); border-radius: var(--brand-radius-card); color: var(--brand-text); } body.brand-fruitydate .modal-header, body.brand-fruitydate .modal-footer { border-color: var(--brand-border-glass); } body.brand-fruitydate hr { border-color: var(--brand-border-glass); } body.brand-fruitydate .list-group-item { background: var(--brand-surface-glass); border-color: var(--brand-border-glass); color: var(--brand-text); }