/* ========================================================================== ULTRAWAVE DIGITAL SERVICES — SITE THEME Single shared stylesheet, included via header.php on every page. Palette derived from the logo's circuit-wave gradient (cyan -> blue -> purple). ========================================================================== */ :root { /* Brand gradient stops (lifted from the logo mark) */ --uw-cyan: #22B8E8; --uw-blue: #2F5FE0; --uw-indigo: #5B3FD9; --uw-purple: #8B2FD9; --uw-gradient: linear-gradient(120deg, var(--uw-cyan) 0%, var(--uw-blue) 45%, var(--uw-purple) 100%); --uw-gradient-soft: linear-gradient(120deg, rgba(34,184,232,0.12) 0%, rgba(47,95,224,0.12) 45%, rgba(139,47,217,0.12) 100%); /* Neutrals */ --uw-ink: #10162B; /* near-black navy for headings/dark bg */ --uw-navy-2: #161F3B; /* secondary dark surface (footer panels) */ --uw-text: #2B3450; --uw-muted: #6B7490; --uw-line: #E4E8F5; --uw-bg: #F6F8FD; /* page background */ --uw-white: #FFFFFF; /* Status */ --uw-success: #1FAE7A; --uw-warning: #E8A73A; --uw-danger: #E15361; --uw-radius: 14px; --uw-radius-sm: 8px; --uw-shadow: 0 10px 30px rgba(16,22,43,0.08); --uw-shadow-lg: 0 20px 50px rgba(16,22,43,0.14); } /* ========================================================================== Base ========================================================================== */ body { font-family: 'DM Sans', sans-serif; color: var(--uw-text); background: var(--uw-bg); } h1, h2, h3, h4, h5, h6 { font-family: 'Playfair Display', serif; color: var(--uw-ink); font-weight: 700; } a { color: var(--uw-blue); } a:hover { color: var(--uw-purple); } .text-primary { color: var(--uw-blue) !important; } .bg-light { background: var(--uw-bg) !important; } ::selection { background: var(--uw-indigo); color: #fff; } /* Utility: gradient text for standout headings */ .uw-gradient-text { background: var(--uw-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ========================================================================== Fixed header spacing The topbar (~38px) and navbar (~90px) are both `fixed-top`, so they're removed from normal document flow. Without this, whatever comes right after (like .page-header) renders underneath them and gets visually clipped. This restores the offset that any page's first section needs, site-wide, in one place. ========================================================================== */ body { padding-top: 128px; } @media (max-width: 991.98px) { /* Topbar is hidden below lg (d-none d-lg-block), so the navbar's inline `top: 38px` would otherwise leave a blank gap above it. */ .navbar-wrapper.fixed-top { top: 0 !important; } body { padding-top: 90px; } } @media (max-width: 480px) { body { padding-top: 80px; } } /* ========================================================================== Topbar + Navbar (header.php) ========================================================================== */ .topbar-strip { background: var(--uw-ink); padding: 9px 0; font-size: 13px; letter-spacing: 0.3px; } .topbar-strip a { color: rgba(255,255,255,0.78); text-decoration: none; transition: 0.3s; } .topbar-strip a:hover { color: var(--uw-cyan); } .topbar-strip i { color: var(--uw-cyan); } .navbar-wrapper { background: #fff; border-bottom: 1px solid var(--uw-line); box-shadow: 0 2px 20px rgba(16,22,43,0.06); } .brand-text { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.4rem; color: var(--uw-ink); line-height: 1.1; } .brand-text span { display: block; font-family: 'DM Sans', sans-serif; font-size: 0.65rem; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; background: var(--uw-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } .main-nav .nav-link { font-weight: 500; font-size: 15px; color: var(--uw-ink); padding: 8px 16px; border-radius: 8px; transition: 0.3s; position: relative; } .main-nav .nav-link::after { content: ''; position: absolute; bottom: 2px; left: 16px; width: 0; height: 2px; background: var(--uw-gradient); transition: 0.3s; border-radius: 2px; } .main-nav .nav-link:hover::after, .main-nav .nav-link.active::after { width: calc(100% - 32px); } .main-nav .nav-link:hover, .main-nav .nav-link.active { color: var(--uw-blue); background: var(--uw-gradient-soft); } .search-wrapper { display: flex; align-items: center; } .search-input { border: 1.5px solid var(--uw-line); border-right: none; border-radius: 8px 0 0 8px; padding: 9px 14px; font-size: 14px; background: var(--uw-bg); color: var(--uw-ink); outline: none; width: 220px; transition: 0.3s; } .search-input:focus { border-color: var(--uw-blue); background: #fff; } .search-btn { background: var(--uw-gradient); border: none; border-radius: 0 8px 8px 0; color: #fff; padding: 9px 18px; font-weight: 600; font-size: 14px; cursor: pointer; transition: 0.3s; white-space: nowrap; } .search-btn:hover { filter: brightness(1.08); } .nav-icon-btn { position: relative; color: var(--uw-ink); text-decoration: none; transition: color 0.3s; display: inline-flex; align-items: center; } .nav-icon-btn:hover { color: var(--uw-blue); } .cart-badge { position: absolute; top: -6px; left: 14px; background: var(--uw-gradient); color: #fff; border-radius: 50%; font-size: 10px; font-weight: 700; min-width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; } .user-dropdown .nav-link { font-weight: 600; font-size: 14.5px; color: var(--uw-ink); display: flex; align-items: center; gap: 6px; } .user-dropdown .dropdown-menu { border-radius: 12px; border: 1px solid var(--uw-line); box-shadow: var(--uw-shadow-lg); padding: 8px 0; min-width: 160px; } .user-dropdown .dropdown-item { font-size: 14px; padding: 9px 18px; color: var(--uw-ink); transition: 0.25s; } .user-dropdown .dropdown-item:hover { background: var(--uw-gradient-soft); color: var(--uw-blue); } /* Categories carousel section */ .categories { padding: 64px 0; background: #fff !important; } .categories .section-head h2 { font-size: 2rem; margin-bottom: 6px; } .categories .section-head p { color: var(--uw-muted); font-size: 15px; margin-bottom: 36px; } .categories .img-container { display: flex; justify-content: center; align-items: center; margin: 10px auto; } .categories .img-container img { width: 130px !important; height: 130px; border-radius: 50%; object-fit: cover; border: 3px solid var(--uw-line); transition: transform 0.35s, box-shadow 0.35s, border-color 0.35s; } .categories .img-container img:hover { transform: scale(1.08); box-shadow: var(--uw-shadow-lg); border-color: transparent; outline: 3px solid var(--uw-blue); outline-offset: 2px; } .categories .owl-carousel .title { text-align: center; margin-top: 12px; font-size: 15px; font-weight: 600; color: var(--uw-ink); } .categories a { text-decoration: none; } .categories a:hover .title { color: var(--uw-blue); } @media (max-width: 768px) { .search-input { width: 140px; } .topbar-strip { display: none; } } /* ========================================================================== Page header banner (used on cart/checkout/orders/login/contact/etc.) Replaces the old flat/image banner with the brand gradient + circuit texture ========================================================================== */ .page-header { background: var(--uw-ink) !important; background-image: radial-gradient(circle at 15% 30%, rgba(34,184,232,0.35), transparent 45%), radial-gradient(circle at 85% 70%, rgba(139,47,217,0.35), transparent 50%), var(--uw-gradient) !important; background-blend-mode: screen; position: relative; overflow: hidden; padding: 70px 0 !important; } .page-header::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,22,43,0.15), rgba(16,22,43,0.55)); pointer-events: none; } .page-header h1, .page-header .display-6 { position: relative; z-index: 1; color: #fff !important; font-weight: 700; } .page-header .breadcrumb { position: relative; z-index: 1; } .page-header .breadcrumb-item a { color: rgba(255,255,255,0.75); text-decoration: none; } .page-header .breadcrumb-item.active { color: rgba(255,255,255,0.55) !important; } .page-header .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,0.4); } @media (max-width: 576px) { .page-header { padding: 46px 0 !important; } .page-header h1 { font-size: 1.5rem !important; } } /* ========================================================================== Buttons ========================================================================== */ .btn { border-radius: 50px; font-weight: 600; letter-spacing: 0.2px; transition: 0.25s; } .btn.form-control, .btn-primary, .btn-info, .btn-success:not(.btn-sm) { background: var(--uw-gradient) !important; border: none !important; color: #fff !important; } .btn.form-control:hover, .btn-primary:hover, .btn-info:hover { filter: brightness(1.08); color: #fff !important; } .btn.border-secondary { background: var(--uw-gradient) !important; border: none !important; color: #fff !important; } .btn.border-secondary:hover { filter: brightness(1.08); color: #fff !important; } .btn-light.rounded-circle, .btn-minus, .btn-plus { background: #fff; border: 1.5px solid var(--uw-line) !important; transition: 0.25s; } .btn-minus:hover, .btn-plus:hover, .btn-light.rounded-circle:hover { border-color: var(--uw-blue) !important; background: var(--uw-gradient-soft); } /* ========================================================================== Forms ========================================================================== */ .form-control { border: 1.5px solid var(--uw-line); border-radius: var(--uw-radius-sm); padding: 12px 16px; font-size: 14.5px; color: var(--uw-ink); transition: 0.25s; } .form-control:focus { border-color: var(--uw-blue); box-shadow: 0 0 0 3px rgba(47,95,224,0.15); } /* login.php / register.php / forgot_password.php use Bootstrap's `border-0` utility on their inputs, which sets border:0 with !important and was wiping out the themed border above. Restore it here. */ .form-control.border-0 { border: 1.5px solid var(--uw-line) !important; background: var(--uw-bg); } .form-control.border-0:focus { border-color: var(--uw-blue) !important; background: #fff; box-shadow: 0 0 0 3px rgba(47,95,224,0.15); } .form-label { font-weight: 600; color: var(--uw-ink); font-size: 14px; margin-bottom: 6px; } .form-check-input:checked { background-color: var(--uw-blue); border-color: var(--uw-blue); } /* Contact / auth / forgot-password cards */ .contact .bg-light, .contact .p-5.bg-light { background: #fff !important; border-radius: var(--uw-radius); box-shadow: var(--uw-shadow); border: 1px solid var(--uw-line); } /* ========================================================================== Cards, tables (cart / checkout / orders) ========================================================================== */ .card { border: 1px solid var(--uw-line); border-radius: var(--uw-radius); box-shadow: var(--uw-shadow); } .table-responsive.shadow-sm.rounded, .table-responsive { background: #fff; border-radius: var(--uw-radius); border: 1px solid var(--uw-line); box-shadow: var(--uw-shadow); } .table thead.table-light th { background: var(--uw-bg) !important; color: var(--uw-ink); font-weight: 700; font-size: 13.5px; text-transform: uppercase; letter-spacing: 0.4px; border-bottom: 2px solid var(--uw-line); } .table td, .table th { vertical-align: middle; border-color: var(--uw-line); } .table-hover tbody tr:hover { background: var(--uw-gradient-soft); } .list-group-item { border-color: var(--uw-line); } /* Status badges */ .badge { font-weight: 600; padding: 7px 14px; border-radius: 50px; font-size: 12px; } .badge.bg-warning { background: rgba(232,167,58,0.15) !important; color: #9A6A0E !important; } .badge.bg-success { background: rgba(31,174,122,0.15) !important; color: var(--uw-success) !important; } .badge.bg-danger { background: rgba(225,83,97,0.15) !important; color: var(--uw-danger) !important; } /* Quantity stepper (cart.php) */ .quantity .form-control { text-align: center; } @media (max-width: 576px) { .table-responsive table { font-size: 13px; } } /* ========================================================================== Homepage — Hero (index.php) Was 3 separate inline