/* ===================================================== TRINIX Technologies — Brand Theme Design tokens + base component styles. Light mode is default; dark mode toggles via [data-theme="dark"] on (see assets/js/main.js). ===================================================== */ :root { --tx-primary: #071D49; --tx-secondary: #176BFF; --tx-accent: #11C5C6; --tx-accent-light: #52D6FF; --tx-bg: #F8FAFC; --tx-bg-dark: #08142C; --tx-gradient: linear-gradient(135deg, #071D49 0%, #176BFF 100%); --tx-gradient-accent: linear-gradient(135deg, #176BFF 0%, #11C5C6 100%); --tx-font-heading: 'Poppins', sans-serif; --tx-font-body: 'Inter', sans-serif; --tx-surface: #FFFFFF; --tx-surface-alt: #EEF3FB; --tx-text: #0B1B33; --tx-text-muted: #5B6B85; --tx-border: rgba(7, 29, 73, 0.10); --tx-shadow: 0 10px 30px rgba(7, 29, 73, 0.08); --tx-shadow-lg: 0 20px 50px rgba(7, 29, 73, 0.14); --tx-radius: 1rem; --tx-radius-lg: 1.5rem; --tx-header-h: 84px; } [data-theme="dark"] { --tx-bg: #08142C; --tx-surface: #0E1F42; --tx-surface-alt: #0B1A38; --tx-text: #EAF1FF; --tx-text-muted: #9FB0CE; --tx-border: rgba(255, 255, 255, 0.08); --tx-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); --tx-shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.45); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--tx-font-body); background: var(--tx-bg); color: var(--tx-text); transition: background-color .3s ease, color .3s ease; overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { font-family: var(--tx-font-heading); font-weight: 700; color: var(--tx-text); letter-spacing: -0.02em; } a { text-decoration: none; } p { color: var(--tx-text-muted); } .text-muted-tx { color: var(--tx-text-muted) !important; } .section { padding: 6rem 0; } .section-sm { padding: 3.5rem 0; } @media (max-width: 768px) { .section { padding: 3.5rem 0; } } .eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--tx-font-heading); font-weight: 600; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tx-secondary); background: rgba(23, 107, 255, 0.08); border: 1px solid rgba(23, 107, 255, 0.18); padding: .4rem 1rem; border-radius: 50px; } .display-heading { font-size: clamp(2.2rem, 4.5vw, 3.6rem); line-height: 1.1; } .gradient-text { background: var(--tx-gradient-accent); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---------------- Buttons ---------------- */ .btn-tx-primary { background: var(--tx-gradient); color: #fff; border: none; font-family: var(--tx-font-heading); font-weight: 600; padding: .8rem 1.75rem; border-radius: 50px; box-shadow: 0 8px 24px rgba(23, 107, 255, 0.30); transition: transform .25s ease, box-shadow .25s ease, filter .25s ease; display: inline-flex; align-items: center; gap: .5rem; } .btn-tx-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(23, 107, 255, 0.40); filter: brightness(1.05); color: #fff; } .btn-tx-outline { background: transparent; color: var(--tx-text); border: 1.5px solid var(--tx-border); font-family: var(--tx-font-heading); font-weight: 600; padding: .8rem 1.75rem; border-radius: 50px; transition: all .25s ease; display: inline-flex; align-items: center; gap: .5rem; } .btn-tx-outline:hover { border-color: var(--tx-secondary); color: var(--tx-secondary); background: rgba(23, 107, 255, 0.06); } .btn-tx-ghost { background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.25); font-family: var(--tx-font-heading); font-weight: 600; padding: .8rem 1.75rem; border-radius: 50px; backdrop-filter: blur(8px); transition: all .25s ease; } .btn-tx-ghost:hover { background: rgba(255,255,255,0.22); color: #fff; } /* ---------------- Cards ---------------- */ .tx-card { background: var(--tx-surface); border: 1px solid var(--tx-border); border-radius: var(--tx-radius); padding: 2rem; box-shadow: var(--tx-shadow); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; height: 100%; } .tx-card:hover { transform: translateY(-6px); box-shadow: var(--tx-shadow-lg); border-color: rgba(23, 107, 255, 0.25); } .tx-icon-box { width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: var(--tx-gradient-accent); color: #fff; font-size: 1.5rem; margin-bottom: 1.25rem; } /* Glassmorphism (hero panels, floating stat cards) */ .tx-glass { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--tx-radius-lg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } /* ---------------- Header / Nav ---------------- */ #txHeader { position: fixed; top: 0; left: 0; right: 0; z-index: 1030; height: var(--tx-header-h); display: flex; align-items: center; background: rgba(248, 250, 252, 0.75); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: all .3s ease; } [data-theme="dark"] #txHeader { background: rgba(8, 20, 44, 0.75); } #txHeader.is-scrolled { border-bottom-color: var(--tx-border); box-shadow: 0 4px 24px rgba(7,29,73,0.06); } .tx-logo { font-family: var(--tx-font-heading); font-weight: 800; font-size: 1.4rem; color: var(--tx-text); display: inline-flex; align-items: center; gap: .5rem; } .tx-logo .dot { color: var(--tx-accent); } .tx-nav .nav-link { font-family: var(--tx-font-heading); font-weight: 500; color: var(--tx-text) !important; padding: .5rem 1rem !important; border-radius: 8px; } .tx-nav .nav-link:hover { color: var(--tx-secondary) !important; } .tx-mega { border: 1px solid var(--tx-border); border-radius: var(--tx-radius); box-shadow: var(--tx-shadow-lg); background: var(--tx-surface); padding: 1.5rem; } .tx-mega a { color: var(--tx-text); } .tx-mega a:hover { color: var(--tx-secondary); } .theme-toggle-btn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--tx-border); background: var(--tx-surface); display: inline-flex; align-items: center; justify-content: center; color: var(--tx-text); transition: all .25s ease; } .theme-toggle-btn:hover { border-color: var(--tx-secondary); color: var(--tx-secondary); } /* Same circular look as .theme-toggle-btn, but no dark-mode JS hook - used for carousel prev/next etc. */ .tx-carousel-nav-btn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--tx-border); background: var(--tx-surface); display: inline-flex; align-items: center; justify-content: center; color: var(--tx-text); transition: all .25s ease; } .tx-carousel-nav-btn:hover { border-color: var(--tx-secondary); color: var(--tx-secondary); } /* ---------------- Hero ---------------- */ .tx-hero { position: relative; padding-top: calc(var(--tx-header-h) + 5rem); padding-bottom: 6rem; background: var(--tx-primary); background-image: radial-gradient(circle at 15% 20%, rgba(23,107,255,0.35), transparent 45%), radial-gradient(circle at 85% 30%, rgba(17,197,198,0.30), transparent 45%), linear-gradient(180deg, #071D49 0%, #0B2B63 100%); overflow: hidden; color: #fff; } .tx-hero p { color: rgba(255,255,255,0.78); } .tx-hero h1 { color: #fff; } .tx-float-chip { position: absolute; z-index: 5; align-items: center; gap: .5rem; font-family: var(--tx-font-heading); font-weight: 600; font-size: .8rem; color: #fff; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 50px; padding: .6rem 1.1rem; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(0,0,0,0.20); animation: txFloat 7s ease-in-out infinite; pointer-events: none; white-space: nowrap; } @keyframes txFloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-22px) rotate(-1.5deg); } } /* ---------------- Inner page header ---------------- */ .tx-page-header { padding-top: calc(var(--tx-header-h) + 3.5rem); padding-bottom: 3.5rem; background: var(--tx-primary); background-image: radial-gradient(circle at 20% 30%, rgba(23,107,255,0.30), transparent 50%), radial-gradient(circle at 80% 20%, rgba(17,197,198,0.25), transparent 50%), linear-gradient(180deg, #071D49 0%, #0B2B63 100%); color: #fff; } .tx-page-header h1 { color: #fff; } .tx-page-header .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,0.4); } /* ---------------- Stats ---------------- */ .tx-stat-num { font-family: var(--tx-font-heading); font-weight: 800; font-size: clamp(2rem, 4vw, 3rem); background: var(--tx-gradient-accent); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---------------- Footer ---------------- */ #txFooter { background: var(--tx-primary); color: rgba(255,255,255,0.75); padding: 4.5rem 0 1.5rem; } #txFooter h6 { color: #fff; font-family: var(--tx-font-heading); font-weight: 600; margin-bottom: 1.25rem; } #txFooter a { color: rgba(255,255,255,0.65); } #txFooter a:hover { color: var(--tx-accent-light); } #txFooter .tx-logo { color: #fff; } .tx-social-btn { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); display: inline-flex; align-items: center; justify-content: center; color: #fff; transition: all .25s ease; } .tx-social-btn:hover { background: var(--tx-gradient-accent); border-color: transparent; transform: translateY(-3px); } /* ---------------- Floating action buttons ---------------- */ .tx-fab { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 1040; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: var(--tx-shadow-lg); color: #fff; font-size: 1.5rem; transition: transform .2s ease; } .tx-fab:hover { transform: scale(1.08); color: #fff; } #txWhatsapp { background: #25D366; bottom: 1.5rem; } #txBackToTop { background: var(--tx-gradient); bottom: 6.5rem; opacity: 0; pointer-events: none; transform: translateY(10px); } #txBackToTop.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); } /* ---------------- Flash toast ---------------- */ .tx-toast { position: fixed; top: calc(var(--tx-header-h) + 1rem); right: 1rem; left: 1rem; max-width: 420px; margin-left: auto; z-index: 1060; } @media (min-width: 576px) { .tx-toast { left: auto; } } /* ---------------- Cookie consent ---------------- */ #txCookieConsent { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; max-width: 480px; z-index: 1050; background: var(--tx-surface); border: 1px solid var(--tx-border); border-radius: var(--tx-radius); box-shadow: var(--tx-shadow-lg); padding: 1.25rem; display: none; } #txCookieConsent.is-visible { display: block; animation: txSlideUp .4s ease; } @keyframes txSlideUp { from { opacity:0; transform: translateY(20px);} to {opacity:1; transform:none;} } /* ---------------- Page loader ---------------- */ #txLoader { position: fixed; inset: 0; z-index: 2000; background: var(--tx-bg); display: flex; align-items: center; justify-content: center; transition: opacity .4s ease, visibility .4s ease; } #txLoader.is-hidden { opacity: 0; visibility: hidden; } .tx-spinner { width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--tx-border); border-top-color: var(--tx-secondary); animation: txSpin .8s linear infinite; } @keyframes txSpin { to { transform: rotate(360deg); } } /* ---------------- Reveal-on-scroll ---------------- */ .tx-reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; } .tx-reveal.is-in { opacity: 1; transform: none; } /* ---------------- Misc ---------------- */ .tx-badge-soft { background: rgba(17, 197, 198, 0.12); color: var(--tx-accent); font-weight: 600; font-size: .75rem; padding: .3rem .7rem; border-radius: 50px; } .tx-divider-gradient { height: 3px; width: 64px; background: var(--tx-gradient-accent); border-radius: 3px; } .tx-avatar-ring { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid var(--tx-accent-light); } .tx-tech-pill { border: 1px solid var(--tx-border); background: var(--tx-surface); border-radius: 50px; padding: .6rem 1.2rem; font-family: var(--tx-font-heading); font-weight: 600; font-size: .9rem; color: var(--tx-text); display: inline-flex; align-items: center; gap: .5rem; } .tx-process-num { font-family: var(--tx-font-heading); font-weight: 800; font-size: 2.5rem; color: rgba(23,107,255,0.18); line-height: 1; } ::selection { background: var(--tx-accent); color: #fff; } /* ---------------- FAQ accordion (wrapped in .tx-card) ---------------- */ .accordion-item { border: none; } /* always paired with .tx-card in markup - don't override its background */ .accordion-button { background: transparent; color: var(--tx-text); font-family: var(--tx-font-heading); font-weight: 600; box-shadow: none !important; } .accordion-button:not(.collapsed) { background: transparent; color: var(--tx-secondary); } .accordion-button::after { filter: none; } [data-theme="dark"] .accordion-button::after { filter: invert(1); } /* ---------------- Dark-mode overrides for native Bootstrap components ---------------- These (dropdowns, alerts, pagination, close buttons, light badges) use Bootstrap's own --bs-* variables, not our --tx-* custom properties, so they don't react to [data-theme] on their own - only the admin console toggles dark mode, but these rules are scoped to [data-theme="dark"] so they're inert on the public site regardless. */ [data-theme="dark"] .dropdown-menu { background-color: var(--tx-surface); border-color: var(--tx-border); box-shadow: var(--tx-shadow-lg); } [data-theme="dark"] .dropdown-item, [data-theme="dark"] .dropdown-item-text { color: var(--tx-text); } [data-theme="dark"] .dropdown-item:hover, [data-theme="dark"] .dropdown-item:focus { background-color: var(--tx-surface-alt); color: var(--tx-text); } [data-theme="dark"] .dropdown-divider { border-color: var(--tx-border); } [data-theme="dark"] .pagination .page-link, [data-theme="dark"] .pagination a { background-color: var(--tx-surface); border-color: var(--tx-border); color: var(--tx-text); } [data-theme="dark"] .pagination .page-item.active .page-link { background-color: var(--tx-secondary); border-color: var(--tx-secondary); color: #fff; } [data-theme="dark"] .pagination .page-item.disabled .page-link { background-color: transparent; color: var(--tx-text-muted); } [data-theme="dark"] .alert-success { background-color: rgba(17,197,198,0.15); color: #6be0e1; border-color: rgba(17,197,198,0.3); } [data-theme="dark"] .alert-danger { background-color: rgba(220,53,69,0.18); color: #ff8a95; border-color: rgba(220,53,69,0.3); } [data-theme="dark"] .alert-info { background-color: rgba(23,107,255,0.18); color: #8db8ff; border-color: rgba(23,107,255,0.3); } [data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(1.8); } [data-theme="dark"] .badge.text-bg-light { background-color: var(--tx-surface-alt) !important; color: var(--tx-text) !important; } [data-theme="dark"] .table { --bs-table-bg: transparent; } .form-control-tx, .form-select-tx { background: var(--tx-surface); border: 1px solid var(--tx-border); color: var(--tx-text); border-radius: .65rem; padding: .75rem 1rem; } .form-control-tx:focus, .form-select-tx:focus { border-color: var(--tx-secondary); box-shadow: 0 0 0 .2rem rgba(23,107,255,0.15); background: var(--tx-surface); color: var(--tx-text); }