/* yiac-backend admin + license UI extras. Design system (colors, hero, navbar, footer, buttons, cards, fonts) lives in /public/css/common.css (synced from yiac.fr/_shared/css). This file only adds rules specific to the license panel + admin panel on top of Bootstrap 5.3 + common.css. */ /* ===== ADMIN MODAL + TABLE OVERRIDES (common.css is tuned for boutique hero/sections, not Bootstrap modals. Restore readable admin UI.) ===== */ .modal-content { background: #0a0f1a; color: var(--text-light); border: 1px solid var(--border-gold); } .modal-header, .modal-footer { border-color: var(--border-gold); background: rgba(201,168,76,0.04); } .modal-body { color: var(--text-light); background: transparent; } .modal .form-label { color: var(--gold-light); } .modal .form-control, .modal .form-select, .modal textarea { background: rgba(0,0,0,0.55); color: var(--text-light); border-color: var(--border-gold); } .modal .btn-close-white { filter: invert(1) brightness(1.6); } /* Ensure Bootstrap contextual badges stay legible on admin pages. */ .badge.text-bg-secondary { background: rgba(154,142,122,0.25) !important; color: var(--text-light) !important; border: 1px solid rgba(154,142,122,0.45); } .badge.text-bg-success { background: rgba(25,135,84,0.85) !important; color: #fff !important; } .badge.text-bg-warning { background: rgba(255,193,7,0.85) !important; color: #1a1410 !important; } .badge.text-bg-danger { background: rgba(220,53,69,0.85) !important; color: #fff !important; } .badge.text-bg-info { background: rgba(13,202,240,0.85) !important; color: #1a1410 !important; } .badge.text-bg-dark { background: rgba(0,0,0,0.6) !important; color: var(--text-light) !important; border: 1px solid var(--border-gold); } /* Admin tables readability (.table-dark variant sometimes blends into bg). */ .table-dark { --bs-table-bg: transparent; color: var(--text-light); } .table-dark > :not(caption) > * > * { background-color: transparent; color: var(--text-light); border-bottom-color: rgba(201,168,76,0.15); } .table thead th { color: var(--gold-light); font-family: 'Cinzel', serif; font-weight: 500; letter-spacing: 0.05em; } .table > tbody > tr:hover > * { background-color: rgba(201,168,76,0.06) !important; } /* ===== BODY ALIAS (legacy .yiac-bg-dark on ) ===== */ body.yiac-bg-dark, .yiac-bg-dark { background: var(--bg-dark); color: var(--text-light); font-family: 'Raleway', sans-serif; min-height: 100vh; } /* ===== LEGACY ALIASES used by EJS views ===== */ .yiac-title { font-family: 'Cinzel', serif; color: var(--gold-light); letter-spacing: 0.05em; } .yiac-logo-text { font-family: 'Cinzel', serif; letter-spacing: 0.15em; color: var(--gold-light); text-transform: uppercase; font-weight: 600; } /* Card variant used across license + admin panels (alias of .eve-card). */ .yiac-card { background: var(--card-bg); border: 1px solid var(--border-gold); border-radius: 12px; color: var(--text-light); box-shadow: 0 0 20px rgba(201,168,76,0.06); transition: border-color var(--transition), box-shadow var(--transition); backdrop-filter: blur(6px); } .yiac-card:hover { border-color: rgba(201,168,76,0.45); box-shadow: 0 0 30px rgba(201,168,76,0.12); } .yiac-card .card-header, .yiac-card .card-footer { background: rgba(201,168,76,0.06); border-color: var(--border-gold); color: var(--gold-light); } /* ===== LICENSE HERO (matches boutique but lighter — no full 90vh). ===== */ .license-hero { padding: 80px 20px 60px; text-align: center; background: radial-gradient(ellipse at center, rgba(201,168,76,0.08) 0%, transparent 60%), radial-gradient(circle at 30% 80%, rgba(201,168,76,0.05), transparent 40%); position: relative; } .license-hero .hero-logo { width: 120px; height: 120px; object-fit: contain; margin-bottom: 18px; filter: drop-shadow(0 0 30px rgba(201,168,76,0.4)); } .license-hero h1 { font-weight: 700; font-size: 2.4rem; letter-spacing: 3px; text-transform: uppercase; background: linear-gradient(135deg, var(--gold-light), #fff, var(--gold)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 10px; } .license-hero .hero-motto { font-family: 'Cinzel', serif; font-style: italic; color: var(--gold); font-size: 1.05rem; letter-spacing: 2px; margin-bottom: 6px; } .license-hero .hero-subtitle { color: var(--text-muted); font-size: 0.95rem; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 28px; } .license-hero .hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } /* ===== TRUST BADGES (shared row, matches boutique) ===== */ .trust-badges { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 18px 0 6px; } .trust-badges .badge { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; font-size: 0.82rem; font-weight: 500; font-family: 'Raleway', sans-serif; letter-spacing: 0.5px; border-radius: 999px; background: rgba(201,168,76,0.08); color: var(--gold-light); border: 1px solid var(--border-gold); } .trust-badges .badge i { color: var(--gold); } /* ===== PRODUCT CARDS (dynamic /api/products grid on landing) ===== */ .product-card { display: flex; flex-direction: column; padding: 28px 22px; background: var(--card-bg); border: 1px solid var(--border-gold); border-radius: 12px; color: var(--text-light); text-decoration: none; height: 100%; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); } .product-card:hover { transform: translateY(-6px); box-shadow: 0 0 40px rgba(201,168,76,0.15); border-color: rgba(201,168,76,0.5); color: var(--text-light); } .product-card .product-icon { font-size: 2.2rem; margin-bottom: 10px; background: linear-gradient(135deg, var(--gold), var(--gold-light)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 0 6px rgba(201,168,76,0.4)); } .product-card h5 { font-family: 'Cinzel', serif; color: var(--gold-light); letter-spacing: 1px; margin-bottom: 8px; font-size: 1.05rem; text-transform: uppercase; } .product-card .product-short { color: var(--text-muted); font-size: 0.9rem; line-height: 1.6; flex-grow: 1; margin-bottom: 12px; } .product-card .product-tiers { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; } .product-card .product-tier { font-size: 0.72rem; padding: 3px 10px; border-radius: 999px; background: rgba(201,168,76,0.1); color: var(--gold-light); border: 1px solid var(--border-gold); letter-spacing: 0.4px; } .product-card .product-cta { display: inline-flex; align-items: center; gap: 6px; color: var(--gold); font-family: 'Cinzel', serif; font-size: 0.85rem; letter-spacing: 1px; text-transform: uppercase; margin-top: auto; } /* ===== LICENSE KEY (pre/code) ===== */ .license-key { font-family: 'Courier New', monospace; font-size: 0.85rem; word-break: break-all; background: rgba(0,0,0,0.4); padding: 0.35rem 0.6rem; border-radius: 4px; color: var(--gold-light); border: 1px solid rgba(201,168,76,0.15); display: inline-block; } /* ===== TABS (my-licenses) ===== */ .yiac-tabs .nav-link { color: var(--text-muted); border: none; border-bottom: 2px solid transparent; background: transparent; font-family: 'Raleway', sans-serif; letter-spacing: 0.5px; transition: all var(--transition); } .yiac-tabs .nav-link:hover { color: var(--gold-light); } .yiac-tabs .nav-link.active { color: var(--gold-light); background: transparent; border-bottom-color: var(--gold); } /* ===== FORMS ON DARK BG ===== */ .form-control, .form-select { background: rgba(0,0,0,0.4); color: var(--text-light); border-color: var(--border-gold); } .form-control:focus, .form-select:focus { background: rgba(0,0,0,0.5); color: var(--text-light); border-color: var(--gold); box-shadow: 0 0 0 0.2rem rgba(201,168,76,0.15); } .form-control::placeholder, .form-select::placeholder { color: rgba(232, 224, 208, 0.45); opacity: 1; } .form-control-plaintext { color: var(--text-light); } .form-control-plaintext strong { color: var(--gold-light); } .form-text { color: rgba(232, 224, 208, 0.7) !important; } /* ===== BREADCRUMB ===== */ .breadcrumb { background: transparent; } .breadcrumb-item, .breadcrumb-item a { color: var(--gold-light); } .breadcrumb-item.active { color: var(--text-light); } .breadcrumb-item + .breadcrumb-item::before { color: var(--gold-dark); } /* ===== DL ROWS in cards ===== */ dl dt { font-weight: 500; } .yiac-card dl.row dt { color: var(--gold-light); } .yiac-card dl.row dd { color: var(--text-light); } /* ===== TEXT OVERRIDES (readability on near-black) ===== */ .yiac-bg-dark .text-warning-subtle, body.yiac-bg-dark .text-warning-subtle, .text-warning-subtle { color: var(--gold-light) !important; opacity: 0.9; } .text-light-emphasis { color: var(--text-light) !important; } .text-muted, .text-secondary, .text-body-secondary { color: rgba(232, 224, 208, 0.88) !important; } /* Bootstrap 5 tokens. */ .yiac-bg-dark, body.yiac-bg-dark { --bs-secondary-color: rgba(232, 224, 208, 0.88); --bs-tertiary-color: rgba(232, 224, 208, 0.68); --bs-body-color: var(--text-light); --bs-body-bg: var(--bg-dark); --bs-emphasis-color: var(--text-light); } .yiac-card ol, .yiac-card ul { color: var(--text-light); } .yiac-card p { color: var(--text-light); } .yiac-card .small, .yiac-card small { color: rgba(232, 224, 208, 0.82); } /* ===== ADMIN-ONLY helpers (kept for admin views, unchanged) ===== */ .yiac-metric { background: rgba(201,168,76,0.04); border: 1px solid var(--border-gold); border-radius: 8px; padding: 1.25rem; color: var(--text-light); } .yiac-metric .metric-value { font-family: 'Cinzel', serif; font-size: 1.8rem; color: var(--gold-light); font-weight: 600; } .yiac-metric .metric-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); } .yiac-row-link { cursor: pointer; transition: background 0.15s ease; } .yiac-row-link:hover { background: rgba(201,168,76,0.08); } .yiac-navbar { background: rgba(6,10,16,0.95); border-bottom: 1px solid var(--border-gold); } .yiac-navbar .nav-link { color: var(--text-muted); } .yiac-navbar .nav-link:hover, .yiac-navbar .nav-link.active { color: var(--gold-light); } .table-yiac { color: var(--text-light); background: transparent; } .table-yiac thead th { color: var(--gold-light); font-family: 'Cinzel', serif; font-weight: 500; border-bottom-color: var(--border-gold); background: rgba(201,168,76,0.04); } .table-yiac tbody td { border-color: rgba(255,255,255,0.05); } .badge-tier { background: rgba(201,168,76,0.15); color: var(--gold-light); border: 1px solid var(--border-gold); font-weight: 500; } /* Warning button (Bootstrap) on dark bg: tweak contrast slightly. */ .btn-warning { color: #0a0a0a; font-weight: 600; } /* Navbar brand badge (e.g. "Licenses" next to the YIAC logo). */ .navbar-brand .shop-tag { font-family: 'Raleway', sans-serif; font-size: 0.55rem; padding: 3px 8px; margin-left: 8px; border-radius: 4px; background: linear-gradient(135deg, var(--gold-dark), var(--gold)); color: #0a0a0a; letter-spacing: 2px; font-weight: 700; vertical-align: 3px; } /* Section intro paragraph used below section titles. */ .section-intro { color: var(--text-muted); max-width: 720px; margin: 0 auto; font-size: 0.95rem; line-height: 1.7; }