/* ====================================================================== Modernized theme for the existing project (drop-in replacement) - Keeps your original class names and structure - Introduces CSS variables for easy theming - Improves spacing, typography, focus states, and responsiveness - Soft shadows, rounded corners, subtle gradients - Dark-mode support via prefers-color-scheme ---------------------------------------------------------------------- QUICK THEME TWEAKS: Change these in :root (or override with a .theme-* class on ) ====================================================================== */ :root{ --primary:#13233b; /* original deep blue */ --primary-600:#0e1a2e; --primary-700:#0a1424; --accent:#f8be2e; /* original yellow */ --accent-600:#edab07; --accent-700:#dda212; --text:#222; --text-muted:#6b7280; --bg:#ffffff; --bg-soft:#f7f7f7; --card:#ffffff; --border:#e5e7eb; --radius:12px; --radius-sm:8px; --shadow-sm:0 1px 2px rgba(0,0,0,.06); --shadow-md:0 6px 18px rgba(0,0,0,.08); --shadow-lg:0 18px 40px rgba(0,0,0,.12); --focus-ring:0 0 0 3px rgba(248,190,46,.35); } /* Optional alternate brand theme (apply on ) */ .theme-bizrockz{ --primary:#0f172a; --primary-600:#0b1222; --primary-700:#0a0f1d; --accent:#FF3B2E; /* BizRockz red */ --accent-600:#e0352a; --accent-700:#c32e25; --focus-ring:0 0 0 3px rgba(255,59,46,.35); } /* Dark mode (automatic) */ @media (prefers-color-scheme: dark){ :root{ --text:#e5e7eb; --text-muted:#9ca3af; --bg:#0b1222; --bg-soft:#0f172a; --card:#111827; --border:#1f2937; --shadow-sm:0 1px 2px rgba(0,0,0,.3); --shadow-md:0 6px 18px rgba(0,0,0,.35); --shadow-lg:0 18px 40px rgba(0,0,0,.45); } } /* ====================================================================== Base / Reset ====================================================================== */ *, *::before, *::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ font-family:'Lato', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif; line-height:1.65; color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } img{ max-width:100%; height:auto; border-radius:var(--radius-sm); } a{ color:var(--primary); text-decoration:none; transition:color .25s ease, opacity .25s ease, transform .25s ease; } a:hover{ color:var(--accent); } a:focus{ outline:none; box-shadow:var(--focus-ring); border-radius:8px; } h1,h2,h3,h4,h5,h6{ font-family:'Francois One', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; letter-spacing:.2px; margin:0 0 .5rem 0; color:var(--primary); } h1{ font-size:clamp(2rem, 1.2rem + 2.5vw, 3rem); } h2{ font-size:clamp(1.5rem, 1rem + 1.8vw, 2.25rem); } h3{ font-size:clamp(1.25rem,.9rem + 1.2vw,1.5rem); } p{ margin:0 0 1rem 0; color:var(--text); } small,.small{ font-size:.875rem; color:var(--text-muted); } .container{ width:min(1200px, 92%); margin-inline:auto; } .clear{ clear:both; } /* Utilities */ .rounded{ border-radius:var(--radius); } .shadow-sm{ box-shadow:var(--shadow-sm); } .shadow{ box-shadow:var(--shadow-md); } .shadow-lg{ box-shadow:var(--shadow-lg); } .bg-soft{ background:var(--bg-soft); } .m-0{ margin:0!important; } .mt-30{ margin-top:30px!important; } .mb-30{ margin-bottom:30px!important; } .pt-30{ padding-top:30px!important; } .pb-30{ padding-bottom:30px!important; } .pt-60{ padding-top:60px!important; } .pb-60{ padding-bottom:60px!important; } .fz-14{ font-size:14px!important; } .fz-16{ font-size:16px!important; } /* Buttons (used by multiple sections) */ .btn, .slider-animated li a, .services-link a, .services-link .booking-submit, .footer-item .btn, .contact-form .btn-sub, .contact-area button, .contact-form button.btn-primary{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-weight:700; text-transform:uppercase; letter-spacing:.3px; background:var(--primary); color:#fff; border:1px solid var(--primary); padding:12px 30px; border-radius:10px; box-shadow:0 2px 0 rgba(0,0,0,.12) inset, var(--shadow-sm); } .btn:hover, .slider-animated li a:hover, .services-link a:hover, .footer-item .btn:hover, .contact-area button:hover, .contact-form .btn-sub:hover, .contact-form button.btn-primary:hover{ background:var(--primary-600); border-color:var(--primary-600); transform:translateY(-1px); } .btn-accent, .slider-animated li:last-child a, .blog-author li.gro, .single-blog-author li.gro{ background:var(--accent); color:#333; border-color:var(--accent); } .btn-accent:hover, .slider-animated li:last-child a:hover{ background:var(--accent-600); border-color:var(--accent-600); } /* ====================================================================== Header / Topbar (keeps .header-area, .header-contact, .header-social classes) ====================================================================== */ .header-area{ background:linear-gradient(180deg, var(--primary), var(--primary-600)); padding:8px 0; color:#fff; } .header-contact ul, .header-social ul{ list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:16px; flex-wrap:wrap; } .header-contact li i{ font-size:15px; opacity:.9; } .header-social a{ color:#fff; opacity:.9; } .header-social a:hover{ color:var(--accent); opacity:1; transform:translateY(-1px); } /* ====================================================================== Navigation (keeps .menu-area, .nav-menu, dropdown structure) ====================================================================== */ .menu-area{ position:sticky; top:0; z-index:1000; background:var(--bg); box-shadow:0 1px 0 var(--border); } .logo img{ height:60px; } ul.nav-menu{ list-style:none; margin:0; padding:0; display:flex; gap:8px; } ul.nav-menu>li{ position:relative; } ul.nav-menu>li>a{ font-size:.9rem; font-weight:800; text-transform:uppercase; padding:22px 16px; color:var(--text); border-radius:10px; } ul.nav-menu>li:hover>a, ul.nav-menu li.current_page_item a{ color:var(--accent); } /* Dropdown */ ul.nav-menu li ul{ position:absolute; top:100%; left:0; width:240px; border:1px solid var(--border); border-radius:12px; padding:8px; background:var(--card); box-shadow:var(--shadow-lg); opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .2s ease, transform .2s ease, visibility .2s; } ul.nav-menu li:hover>ul{ opacity:1; visibility:visible; transform:translateY(0); } ul.nav-menu li ul li{ display:block; } ul.nav-menu li ul li a{ display:block; padding:10px 12px; border-radius:8px; font-weight:700; text-transform:capitalize; color:var(--text); } ul.nav-menu li ul li a:hover{ background:var(--bg-soft); color:var(--accent); } /* Sticky state */ #strickymenu.sticky{ position:fixed; inset:auto 0 auto 0; top:0; background:var(--bg); border-bottom:1px solid var(--border); z-index:1200; } .sticky .logo img{ height:56px; } .sticky ul.nav-menu>li>a{ padding:18px 14px; } /* MeanMenu mobile (kept but refreshed) */ .mean-container .mean-nav ul{ position:static; display:block; } .mean-container .mean-nav ul li a{ background:var(--primary-700); color:var(--accent)!important; } .mean-container .mean-nav ul li a:hover{ background:rgba(255,255,255,.06)!important; } .mean-container a.meanmenu-reveal{ margin-right:0; } /* Searchbar */ .searchbar{ position:relative; } .searchbar .search-button{ position:absolute; right:16px; top:50%; transform:translateY(-50%); cursor:pointer; } .searchbar .search-button:hover{ color:var(--accent); } .searchbar .input-search{ position:absolute; right:0; bottom:-64px; width:min(520px, 92vw); background:color-mix(in oklab, var(--primary) 85%, transparent); padding:15px; border-radius:12px; box-shadow:var(--shadow-lg); } /* ====================================================================== Slider / Hero ====================================================================== */ .slider-item{ position:relative; height:clamp(360px, 60vh, 680px); background-repeat:no-repeat; background-size:cover; background-position:center; } .bg{ position:absolute; inset:0; background:color-mix(in oklab, #000 60%, transparent); opacity:.4; border-radius:var(--radius); } .slider-table{ display:table; width:100%; height:100%; } .slider-text{ display:table-cell; vertical-align:middle; text-align:center; padding:0 4vw; } .slider-animated h2{ font-size:clamp(28px, 2.4vw + .6rem, 52px); color:#fff; text-transform:uppercase; margin:0 0 12px; } .slider-animated p{ font-size:clamp(16px, 1.2vw + .6rem, 22px); color:#fff; letter-spacing:.2px; margin:0 auto; max-width:900px; } /* Owl arrows refreshed */ .slide-carousel.owl-carousel .owl-nav{ position:absolute; inset:0; top:50%; transform:translateY(-50%); pointer-events:none; } .slide-carousel.owl-carousel .owl-nav .owl-prev, .slide-carousel.owl-carousel .owl-nav .owl-next{ pointer-events:auto; width:50px; height:50px; line-height:46px; color:#fff; border:2px solid #fff; border-radius:50%; backdrop-filter:blur(2px); background:rgba(17,24,39,.25); } .slide-carousel.owl-carousel .owl-nav .owl-prev:hover, .slide-carousel.owl-carousel .owl-nav .owl-next:hover{ color:var(--accent); border-color:var(--accent); background:rgba(17,24,39,.35); } /* ====================================================================== Cards: Services, Recent, Team, Blog (keep original classes) ====================================================================== */ .card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden; } /* Services */ .services-item{ border:none; margin-top:30px; } .services-photo{ height:225px; background-size:cover; background-position:center; } .services-text{ background:var(--primary); color:#fff; border-top:4px solid var(--accent); padding:16px; } .services-text h3{ margin:.25rem 0 .75rem; } .services-text h3 a{ color:var(--accent); text-decoration:none; } .services-link{ margin-top:14px; display:flex; gap:10px; flex-wrap:wrap; } /* Recent / Portfolio */ .lightbox-item{ border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; } .recent-photo{ height:225px; background-size:cover; background-position:center; position:relative; } .lightbox-bg{ position:absolute; inset:0; background:var(--accent); opacity:0; transform:scale(.92); visibility:hidden; transition:all .3s; } .lightbox-item:hover .lightbox-bg{ opacity:.6; transform:scale(1); visibility:visible; } .lightbox-icon{ position:absolute; inset:0; display:grid; place-items:center; opacity:0; transition:opacity .2s; } .lightbox-item:hover .lightbox-icon{ opacity:1; } .recent-text{ background:var(--primary); color:#fff; border-top:4px solid var(--accent); padding:16px; } /* Team */ .team-item{ border:none; margin-top:30px; border-radius:var(--radius); overflow:hidden; } .team-photo{ height:292px; background-size:cover; background-position:center; position:relative; } .team-text{ text-align:center; background:var(--primary); color:#fff; border-top:4px solid var(--accent); padding:16px; } .team-text h4 a{ color:#fff; } .team-text h4 a:hover{ color:var(--accent); } .team-social{ position:absolute; left:0; right:0; bottom:12%; background:color-mix(in oklab, var(--primary) 85%, transparent); padding:10px 0; opacity:0; visibility:hidden; transform:translateY(12px); transition:all .3s; } .team-item:hover .team-social{ opacity:1; visibility:visible; transform:translateY(0); } .team-social ul{ list-style:none; margin:0; padding:0; display:flex; justify-content:center; gap:10px; } .team-social a{ display:block; width:34px; height:34px; line-height:34px; color:#fff; border:1px solid #ddd; border-radius:8px; } .team-social a:hover{ background:var(--accent); color:#333; border-color:var(--accent); } /* Blog */ .blog-text{ background:var(--primary); color:#fff; border-top:4px solid var(--accent); padding:16px; } .blog-text a{ color:var(--accent); } .blog-text h3 a{ color:var(--accent); text-decoration:none; } /* ====================================================================== Section Helpers & Headlines ====================================================================== */ .bg-area{ background:var(--bg-soft); } .yellow-bg{ background:var(--accent); color:#333; } .headline, .testimonial-headline{ text-align:center; margin:0 15px 15px; } .headline-shadow{ position:relative; display:inline-block; } .headline-shadow::before{ content:''; position:absolute; top:100%; left:5%; width:90%; height:10px; background:radial-gradient(ellipse at center, rgba(0,0,0,.22) 0, transparent 80%); transform:translateY(5px); } /* ====================================================================== Forms & Inputs ====================================================================== */ .form-group{ margin-bottom:18px; } .form-group input, .form-group textarea, .form-group select.select{ width:100%; height:42px; padding:10px 12px; background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:8px; transition:border-color .2s, box-shadow .2s; } .form-group textarea{ height:200px; resize:vertical; } .form-control:focus, .form-group input:focus, .form-group textarea:focus, .form-group select:focus{ border-color:var(--accent); box-shadow:var(--focus-ring); outline:none; } /* Contact */ .contact-area button{ background:var(--primary); border-color:var(--primary); } .contact-area button:hover{ background:var(--accent); border-color:var(--accent); color:#333; } /* Sidebar */ .sidebar{ border:1px solid var(--border); padding:16px; border-radius:var(--radius); background:var(--card); box-shadow:var(--shadow-sm); } .sidebar-item h3{ position:relative; padding-bottom:12px; margin:0 0 12px; } .sidebar-item h3::before{ content:''; position:absolute; left:0; bottom:0; width:60px; height:3px; background:var(--accent); border-radius:2px; } /* ====================================================================== Counters, Testimonials, FAQ ====================================================================== */ .counterup-area{ position:relative; background-attachment:fixed; } .bg-counterup, .bg-testimonial{ position:absolute; inset:0; background:rgba(0,0,0,.6); } .testimonial-area{ position:relative; background-size:cover; background-position:center; } .testimonial-item{ margin-top:30px; } .testimonial-text{ background:var(--bg-soft); border-radius:var(--radius); overflow:hidden; } .client-name{ background:var(--accent); padding:20px; } .client-name h4{ margin:0 0 4px; } .testimonial-detail{ padding:22px; font-size:15px; } .faq-gallery .panel{ border-radius:10px; overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow-sm); } .faq-gallery .panel-default>.panel-heading{ background:var(--primary); color:#fff; } .faq-gallery .panel-group .panel-heading a:after{ background:var(--accent); color:#333; } /* ====================================================================== Footer ====================================================================== */ .footer-main{ background:var(--primary); color:#b9b9b9; padding:40px 0 20px; } .footer-col h3{ color:#fff; font-size:24px; font-weight:600; margin:0 0 10px; padding-bottom:12px; border-bottom:1px dashed color-mix(in oklab, var(--border) 40%, transparent); } .footer-col ul li, .footer-col ul li a{ color:#b9b9b9; } .footer-col ul li a:hover{ color:#fff; } .footer-item li a:hover{ color:var(--accent); } .footer-contact-area{ text-align:center; background:var(--accent); color:#333; padding:10px 0 18px; } .footer-area{ background:var(--primary); color:#fff; } .footer-copyrignt{ background:var(--primary-700); padding:10px 0 14px; } .copyright-text p{ margin:6px 0 0; text-align:center; } /* Footer menu */ .footer-menu ul{ list-style:none; display:flex; gap:10px; justify-content:center; padding:0; margin:0; } .footer-menu a{ color:#fff; } .footer-menu a:hover{ color:var(--accent); } /* ====================================================================== Banners ====================================================================== */ .banner-slider{ height:230px; background-size:cover; background-position:center; position:relative; } .banner-text h1{ font-size:clamp(26px, 2.4vw + .6rem, 34px); color:#fff; text-transform:uppercase; } /* ====================================================================== Pagination ====================================================================== */ ul.page-numbers{ list-style:none; display:flex; justify-content:center; gap:8px; margin:30px 0 0; padding:0; } ul.page-numbers li a.page-numbers, span.page-numbers.current{ display:inline-block; padding:8px 16px; border-radius:10px; font-weight:700; } ul.page-numbers li a.page-numbers{ background:var(--primary); color:#fff; } span.page-numbers.current{ background:var(--accent); color:#333; } /* Legacy plugin-specific pagination (kept, restyled) */ div.pagination a{ background:var(--primary); border-color:var(--primary); } div.pagination a:hover{ background:var(--accent); border-color:var(--accent); } div.pagination span.current{ background:#a0a0a0; } /* ====================================================================== Scroll to top ====================================================================== */ .scroll-top{ position:fixed; right:20px; bottom:48px; width:52px; height:52px; line-height:48px; text-align:center; font-size:28px; cursor:pointer; border-radius:50%; background:color-mix(in oklab, var(--accent) 60%, transparent); box-shadow:var(--shadow-md); transition:transform .25s ease, background .25s ease; } .scroll-top:hover{ background:var(--accent); transform:translateY(-2px); } /* ====================================================================== Responsive tweaks ====================================================================== */ @media (max-width: 991px){ .logo img{ height:52px; } ul.nav-menu{ display:none; } /* MeanMenu/your mobile menu takes over */ .choose-item-row{ display:block; } .choose-left{ height:420px; } } @media (max-width: 640px){ .slider-text{ padding:0 16px; } .services-photo, .recent-photo{ height:200px; } .team-photo{ height:260px; } .banner-slider{ height:200px; } }