/* TailCodexTheme — custom styles on top of Tailwind */ /* ============================================================ Theme tokens — light/dark switch driven by [data-theme] on , set by tailcodextheme.js (persisted in localStorage, defaults to dark). Tailwind's config (see layout_public.html.twig) maps custom color names to these variables, so `bg-base`, `text-tx1`, `bg-veil/10` etc. automatically follow the active theme with zero per-class changes in the templates. RGB triplets (space-separated, no rgb()/commas) are used for colors that need opacity-modifier support in Tailwind (e.g. bg-surface/40, bg-veil/10) via the rgb(var(--x) / ) pattern. Plain values are used where no modifier is ever applied. ============================================================ */ :root, :root[data-theme="dark"] { --tcx-base-rgb: 5 7 15; /* #05070f page canvas */ --tcx-surface-rgb: 10 14 27; /* #0a0e1b card surface */ --tcx-surface-2-rgb: 16 22 42; /* #10162a secondary surface */ --tcx-line: rgba(255, 255, 255, 0.08); --tcx-veil-rgb: 255 255 255; /* subtle white overlays/borders */ --tcx-tx1: #ffffff; /* headings / high emphasis */ --tcx-tx2: #cbd5e1; /* body text (was slate-200/300) */ --tcx-tx3: #94a3b8; /* muted (was slate-400) */ --tcx-tx4: #64748b; /* extra muted (was slate-500/600) */ --tcx-body-bg: #05070f; --tcx-body-color: #e6eaf4; --tcx-selection-bg: rgba(46, 230, 214, 0.3); --tcx-selection-color: #fff; /* Client-area (Bootstrap) status badge colors */ --tcx-status-success-bg: rgba(16, 185, 129, 0.15); --tcx-status-success-fg: #6ee7b7; --tcx-status-success-bd: rgba(16, 185, 129, 0.3); --tcx-status-warning-bg: rgba(245, 158, 11, 0.15); --tcx-status-warning-fg: #fcd34d; --tcx-status-warning-bd: rgba(245, 158, 11, 0.3); --tcx-status-danger-bg: rgba(244, 63, 94, 0.15); --tcx-status-danger-fg: #fda4af; --tcx-status-danger-bd: rgba(244, 63, 94, 0.3); --tcx-status-info-bg: rgba(106, 215, 255, 0.15); --tcx-status-info-fg: #7dd3fc; --tcx-status-info-bd: rgba(106, 215, 255, 0.3); --tcx-status-secondary-bg: rgba(148, 163, 184, 0.15); --tcx-status-secondary-fg: #cbd5e1; --tcx-status-secondary-bd: rgba(148, 163, 184, 0.3); } :root[data-theme="light"] { --tcx-base-rgb: 247 248 251; /* #f7f8fb page canvas */ --tcx-surface-rgb: 255 255 255; /* #ffffff card surface */ --tcx-surface-2-rgb: 238 240 246; /* #eef0f6 secondary surface */ --tcx-line: rgba(15, 23, 42, 0.09); --tcx-veil-rgb: 15 23 42; /* subtle dark overlays/borders */ --tcx-tx1: #0f172a; /* slate-900 */ --tcx-tx2: #334155; /* slate-700 */ --tcx-tx3: #64748b; /* slate-500 */ --tcx-tx4: #94a3b8; /* slate-400 */ --tcx-body-bg: #f7f8fb; --tcx-body-color: #1e293b; --tcx-selection-bg: rgba(46, 230, 214, 0.35); --tcx-selection-color: #05070f; /* Client-area (Bootstrap) status badge colors — deepened for AA contrast on white/light-gray card backgrounds. */ --tcx-status-success-bg: rgba(5, 150, 105, 0.12); --tcx-status-success-fg: #047857; --tcx-status-success-bd: rgba(5, 150, 105, 0.3); --tcx-status-warning-bg: rgba(217, 119, 6, 0.12); --tcx-status-warning-fg: #b45309; --tcx-status-warning-bd: rgba(217, 119, 6, 0.3); --tcx-status-danger-bg: rgba(225, 29, 72, 0.1); --tcx-status-danger-fg: #be123c; --tcx-status-danger-bd: rgba(225, 29, 72, 0.28); --tcx-status-info-bg: rgba(2, 132, 199, 0.1); --tcx-status-info-fg: #0369a1; --tcx-status-info-bd: rgba(2, 132, 199, 0.28); --tcx-status-secondary-bg: rgba(100, 116, 139, 0.12); --tcx-status-secondary-fg: #475569; --tcx-status-secondary-bd: rgba(100, 116, 139, 0.3); } /* !important keeps the theme base when huraga's Bootstrap bundle is also loaded in the client area (its reboot would otherwise repaint body). */ body { background-color: var(--tcx-body-bg) !important; color: var(--tcx-body-color) !important; transition: background-color 0.2s ease, color 0.2s ease; } ::selection { background: var(--tcx-selection-bg); color: var(--tcx-selection-color); } /* Ambient neon background grid + glow */ .bg-grid { background-image: linear-gradient(rgb(var(--tcx-veil-rgb) / 0.035) 1px, transparent 1px), linear-gradient(90deg, rgb(var(--tcx-veil-rgb) / 0.035) 1px, transparent 1px); background-size: 56px 56px; } .glow-cyan { box-shadow: 0 0 0 1px rgba(46, 230, 214, 0.25), 0 24px 80px -28px rgba(46, 230, 214, 0.55); } .glow-violet { box-shadow: 0 0 0 1px rgba(123, 97, 255, 0.25), 0 24px 80px -28px rgba(123, 97, 255, 0.5); } .text-gradient { background: linear-gradient(100deg, #2ee6d6 0%, #6ad7ff 40%, #7b61ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .ring-line { box-shadow: inset 0 0 0 1px var(--tcx-line); } .card-hover { transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s, border-color 0.35s; } .card-hover:hover { transform: translateY(-6px); border-color: rgba(46, 230, 214, 0.4); box-shadow: 0 30px 80px -40px rgba(46, 230, 214, 0.5); } /* terminal blink */ @keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } .cursor { animation: blink 1.1s steps(1) infinite; } /* marquee for tech strip */ @keyframes scrollx { from { transform: translateX(0); } to { transform: translateX(-50%); } } .marquee { animation: scrollx 32s linear infinite; } .marquee-wrap:hover .marquee { animation-play-state: paused; } @keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .floaty { animation: floaty 6s ease-in-out infinite; } /* reveal on scroll */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); } .reveal.in { opacity: 1; transform: none; } /* hero mouse spotlight */ .spotlight { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 40%), rgba(46, 230, 214, 0.16), transparent 70%); transition: background 0.15s ease-out; } /* parallax tilt */ .tilt { transform-style: preserve-3d; transition: transform 0.2s ease-out; will-change: transform; } .tilt-inner { transform: translateZ(40px); } /* speed bars */ .speedbar > i { display: block; height: 100%; width: 0; border-radius: 9999px; transition: width 1.3s cubic-bezier(0.2, 0.7, 0.2, 1); } /* FAQ accordion */ .faq-body { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; } @media (prefers-reduced-motion: reduce) { .marquee, .floaty, .cursor { animation: none !important; } .tilt { transform: none !important; } } /* ============================================================ Client area — re-theme the Bootstrap module pages (orders, invoices, profile, support) to match the active site theme. Scoped to .fb-client-area so the marketing pages are untouched. Built entirely on the --tcx-* tokens above, so it follows the light/dark switch automatically — no separate light block needed. !important is used only where huraga's bundle ships !important rules. ============================================================ */ .fb-client-area { --bs-body-bg: rgb(var(--tcx-surface-rgb)); --bs-body-color: var(--tcx-tx2); --bs-emphasis-color: var(--tcx-tx1); --bs-heading-color: var(--tcx-tx1); --bs-border-color: var(--tcx-line); --bs-secondary-color: var(--tcx-tx3); --bs-tertiary-bg: rgb(var(--tcx-veil-rgb) / 0.03); --bs-link-color: #2ee6d6; --bs-link-hover-color: #6ad7ff; --bs-primary: #2ee6d6; --bs-primary-rgb: 46, 230, 214; color: var(--tcx-tx2); } /* Headings & muted text */ .fb-client-area h1, .fb-client-area h2, .fb-client-area h3, .fb-client-area h4, .fb-client-area h5, .fb-client-area h6 { color: var(--tcx-tx1); } .fb-client-area .text-muted, .fb-client-area .text-secondary { color: var(--tcx-tx3) !important; } .fb-client-area a:not(.btn) { color: #2ee6d6; text-decoration: none; } .fb-client-area a:not(.btn):hover { color: #6ad7ff; } /* Cards */ .fb-client-area .card { background-color: rgb(var(--tcx-surface-rgb)); border: 1px solid var(--tcx-line); border-radius: 1rem; box-shadow: none; } .fb-client-area .card-header { background-color: rgb(var(--tcx-veil-rgb) / 0.02); border-bottom: 1px solid var(--tcx-line); color: var(--tcx-tx1); } .fb-client-area .card-header h1, .fb-client-area .card-header h6, .fb-client-area .dashboard .card-header h6 { color: var(--tcx-tx1); } /* Tables */ .fb-client-area .table { --bs-table-bg: transparent; --bs-table-color: var(--tcx-tx2); --bs-table-border-color: var(--tcx-line); --bs-table-striped-bg: rgb(var(--tcx-veil-rgb) / 0.025); --bs-table-striped-color: var(--tcx-tx2); --bs-table-hover-bg: rgba(46, 230, 214, 0.06); --bs-table-hover-color: var(--tcx-tx1); color: var(--tcx-tx2); } .fb-client-area .table > thead > tr > th { color: var(--tcx-tx3); border-color: var(--tcx-line); border-bottom-width: 1px; } .fb-client-area .table > tbody > tr > td { border-color: rgb(var(--tcx-veil-rgb) / 0.06); } .fb-client-area .table-bordered > :not(caption) > * > * { border-color: var(--tcx-line); } /* Buttons */ .fb-client-area .btn { border-radius: 0.75rem; font-weight: 600; } .fb-client-area .btn-primary { --bs-btn-bg: #2ee6d6; --bs-btn-border-color: #2ee6d6; --bs-btn-color: #05070f; --bs-btn-hover-bg: #29cfc1; --bs-btn-hover-border-color: #29cfc1; --bs-btn-hover-color: #05070f; --bs-btn-active-bg: #25bab0; --bs-btn-active-border-color: #25bab0; --bs-btn-active-color: #05070f; --bs-btn-disabled-bg: #1c8f86; --bs-btn-disabled-border-color: #1c8f86; --bs-btn-disabled-color: #05070f; } .fb-client-area .btn-success { --bs-btn-bg: #10b981; --bs-btn-border-color: #10b981; --bs-btn-color: #04130d; --bs-btn-hover-bg: #0ea371; --bs-btn-hover-border-color: #0ea371; --bs-btn-hover-color: #fff; --bs-btn-active-bg: #0c8f63; --bs-btn-active-border-color: #0c8f63; } .fb-client-area .btn-dark { --bs-btn-bg: rgb(var(--tcx-veil-rgb) / 0.06); --bs-btn-border-color: rgb(var(--tcx-veil-rgb) / 0.12); --bs-btn-color: var(--tcx-tx1); --bs-btn-hover-bg: rgb(var(--tcx-veil-rgb) / 0.12); --bs-btn-hover-border-color: rgb(var(--tcx-veil-rgb) / 0.2); --bs-btn-hover-color: var(--tcx-tx1); --bs-btn-active-bg: rgb(var(--tcx-veil-rgb) / 0.16); --bs-btn-active-border-color: rgb(var(--tcx-veil-rgb) / 0.24); } .fb-client-area .btn-outline-primary { --bs-btn-color: #2ee6d6; --bs-btn-border-color: rgba(46, 230, 214, 0.4); --bs-btn-hover-bg: #2ee6d6; --bs-btn-hover-border-color: #2ee6d6; --bs-btn-hover-color: #05070f; --bs-btn-active-bg: #2ee6d6; --bs-btn-active-border-color: #2ee6d6; --bs-btn-active-color: #05070f; } .fb-client-area .btn-outline-info { --bs-btn-color: #0ea5cf; --bs-btn-border-color: rgba(106, 215, 255, 0.5); --bs-btn-hover-bg: #6ad7ff; --bs-btn-hover-border-color: #6ad7ff; --bs-btn-hover-color: #05070f; } .fb-client-area .btn-outline-secondary { --bs-btn-color: var(--tcx-tx2); --bs-btn-border-color: var(--tcx-line); --bs-btn-hover-bg: rgb(var(--tcx-veil-rgb) / 0.08); --bs-btn-hover-border-color: rgb(var(--tcx-veil-rgb) / 0.25); --bs-btn-hover-color: var(--tcx-tx1); } /* Badges (huraga forces color:#fff!important on bg-*) */ .fb-client-area .badge { font-weight: 600; border: 1px solid transparent; } .fb-client-area .badge.bg-success { background-color: var(--tcx-status-success-bg) !important; color: var(--tcx-status-success-fg) !important; border-color: var(--tcx-status-success-bd); } .fb-client-area .badge.bg-warning { background-color: var(--tcx-status-warning-bg) !important; color: var(--tcx-status-warning-fg) !important; border-color: var(--tcx-status-warning-bd); } .fb-client-area .badge.bg-danger { background-color: var(--tcx-status-danger-bg) !important; color: var(--tcx-status-danger-fg) !important; border-color: var(--tcx-status-danger-bd); } .fb-client-area .badge.bg-secondary { background-color: var(--tcx-status-secondary-bg) !important; color: var(--tcx-status-secondary-fg) !important; border-color: var(--tcx-status-secondary-bd); } .fb-client-area .badge.bg-info { background-color: var(--tcx-status-info-bg) !important; color: var(--tcx-status-info-fg) !important; border-color: var(--tcx-status-info-bd); } .fb-client-area .badge.bg-primary { background-color: rgba(46, 230, 214, 0.15) !important; color: #0d9488 !important; border-color: rgba(46, 230, 214, 0.3); } :root[data-theme="dark"] .fb-client-area .badge.bg-primary { color: #2ee6d6 !important; } /* Nav tabs (invoices) + override huraga's .nav-link{color:#000!important} */ .fb-client-area .nav-link { color: var(--tcx-tx2) !important; } .fb-client-area .nav-tabs { border-bottom-color: var(--tcx-line); } .fb-client-area .nav-tabs .nav-link { color: var(--tcx-tx3) !important; background: transparent; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; } .fb-client-area .nav-tabs .nav-link:hover { color: var(--tcx-tx1) !important; border-bottom-color: rgb(var(--tcx-veil-rgb) / 0.2); } .fb-client-area .nav-tabs .nav-link.active { color: #2ee6d6 !important; background: transparent; border-bottom-color: #2ee6d6; } /* CRITICAL: Tailwind's `.collapse` utility sets `visibility: collapse`, which collides with Bootstrap's `.collapse` component class. Once a Bootstrap collapse finishes opening it carries `.collapse.show`, so Tailwind hides the content (it stays visible only mid-animation, while the class is `.collapsing`). Restore visibility for every Bootstrap collapse on the client pages. */ .fb-client-area .collapse:not(.show) { visibility: visible; } .fb-client-area .collapse.show, .fb-client-area .collapsing, .fb-client-area .accordion-collapse { visibility: visible !important; } /* Accordion (order flow: select product / configuration / checkout / payment) */ .fb-client-area .accordion { --bs-accordion-bg: transparent; --bs-accordion-color: var(--tcx-tx2); --bs-accordion-border-color: var(--tcx-line); --bs-accordion-border-radius: 1rem; --bs-accordion-inner-border-radius: 0.9rem; --bs-accordion-btn-color: var(--tcx-tx1); --bs-accordion-btn-bg: rgb(var(--tcx-veil-rgb) / 0.02); --bs-accordion-active-color: #0d9488; --bs-accordion-active-bg: rgba(46, 230, 214, 0.08); --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(46, 230, 214, 0.15); --bs-accordion-btn-focus-border-color: rgba(46, 230, 214, 0.4); } :root[data-theme="dark"] .fb-client-area .accordion { --bs-accordion-active-color: #2ee6d6; } .fb-client-area .accordion-item { background-color: rgb(var(--tcx-surface-rgb)); border: 1px solid var(--tcx-line); border-radius: 1rem; margin-bottom: 0.75rem; overflow: hidden; } .fb-client-area .accordion-button { color: var(--tcx-tx1); font-weight: 600; background-color: rgb(var(--tcx-veil-rgb) / 0.02); } .fb-client-area .accordion-button:not(.collapsed) { color: #0d9488; background-color: rgba(46, 230, 214, 0.08); box-shadow: none; } :root[data-theme="dark"] .fb-client-area .accordion-button:not(.collapsed) { color: #2ee6d6; } .fb-client-area .accordion-button:focus { border-color: rgba(46, 230, 214, 0.4); box-shadow: 0 0 0 0.2rem rgba(46, 230, 214, 0.15); } .fb-client-area .accordion-body { color: var(--tcx-tx2); } /* The "Items" badge inside the select-product header */ .fb-client-area .accordion-button .badge { font-size: 0.7rem; } /* .well is a Bootstrap 3 leftover used by the product configuration card */ .fb-client-area .well { background-color: rgb(var(--tcx-veil-rgb) / 0.02); border: 1px solid var(--tcx-line); border-radius: 0.75rem; padding: 1.25rem; margin-bottom: 1rem; } .fb-client-area .well h3 { margin-top: 0; } /* Product list inside "Select Product": make each item a clear, clickable row */ .fb-client-area .list-group-item { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.85rem 1rem; } .fb-client-area .list-group-item.list-group-item:hover { background-color: rgba(46, 230, 214, 0.06); border-color: rgba(46, 230, 214, 0.3); color: var(--tcx-tx1); } .fb-client-area .list-group-item .svg-icon { color: #0d9488; flex: 0 0 auto; } :root[data-theme="dark"] .fb-client-area .list-group-item .svg-icon { color: #2ee6d6; } /* Forms */ .fb-client-area .form-control, .fb-client-area .form-select { background-color: rgb(var(--tcx-base-rgb) / 0.6); border-color: var(--tcx-line); color: var(--tcx-tx2); border-radius: 0.625rem; } .fb-client-area .form-control:focus, .fb-client-area .form-select:focus { background-color: rgb(var(--tcx-base-rgb) / 0.85); border-color: rgba(46, 230, 214, 0.6); box-shadow: 0 0 0 0.2rem rgba(46, 230, 214, 0.2); color: var(--tcx-tx1); } .fb-client-area .form-control::placeholder { color: var(--tcx-tx4); } .fb-client-area .form-label { color: var(--tcx-tx2); } .fb-client-area .form-text { color: var(--tcx-tx4); } .fb-client-area .input-group-text { background-color: rgb(var(--tcx-veil-rgb) / 0.05); border-color: var(--tcx-line); color: var(--tcx-tx3); } /* List groups */ .fb-client-area .list-group { --bs-list-group-bg: transparent; } .fb-client-area .list-group-item { background-color: transparent; border-color: var(--tcx-line); color: var(--tcx-tx2); } .fb-client-area .list-group-item:hover { background-color: rgb(var(--tcx-veil-rgb) / 0.03); } /* Pagination */ .fb-client-area .pagination { --bs-pagination-bg: transparent; --bs-pagination-color: var(--tcx-tx2); --bs-pagination-border-color: var(--tcx-line); --bs-pagination-hover-bg: rgb(var(--tcx-veil-rgb) / 0.05); --bs-pagination-hover-color: var(--tcx-tx1); --bs-pagination-hover-border-color: rgb(var(--tcx-veil-rgb) / 0.2); --bs-pagination-focus-bg: rgb(var(--tcx-veil-rgb) / 0.05); --bs-pagination-active-bg: #2ee6d6; --bs-pagination-active-border-color: #2ee6d6; --bs-pagination-active-color: #05070f; --bs-pagination-disabled-bg: transparent; --bs-pagination-disabled-color: var(--tcx-tx4); --bs-pagination-disabled-border-color: rgb(var(--tcx-veil-rgb) / 0.06); } /* Modals, dropdowns — not scoped, since Bootstrap may relocate them, but data-bs-theme already applies globally to . */ .fb-client-area .modal-content, .modal-content { background-color: rgb(var(--tcx-surface-rgb)); border: 1px solid var(--tcx-line); border-radius: 1rem; color: var(--tcx-tx2); } .modal-header, .modal-footer { border-color: var(--tcx-line); } /* Breadcrumb fragments injected by module templates into our nav */ .tcx-crumbs .breadcrumb-item { display: inline; color: var(--tcx-tx3); } .tcx-crumbs .breadcrumb-item.active { color: var(--tcx-tx2); } .tcx-crumbs .breadcrumb-item a { color: var(--tcx-tx3); } /* Misc */ .fb-client-area dt { color: var(--tcx-tx3); font-weight: 500; } .fb-client-area dd { color: var(--tcx-tx2); } .fb-client-area hr { border-color: var(--tcx-line); } .fb-client-area .btn-close { filter: invert(1) grayscale(1) brightness(2); } :root[data-theme="light"] .fb-client-area .btn-close { filter: none; }