/** * Theme Customization – One place for brand colors, fonts & basic styling * * This file loads after the main theme stylesheet and overrides colors and * fonts site-wide (header, footer, buttons, links, tables, etc.). * * ============================================================================= * HOW TO CHANGE THE THEME (brand, colors, fonts) * ============================================================================= * * STEP 1 – Open this file * Path: wp-content/themes/sebitemplate/assets/css/theme-customization.css * (Or in your theme folder: assets/css/theme-customization.css) * * STEP 2 – Edit only the :root { } block (lines below) * • Brand colors: change --brand-primary, --brand-dark, --brand-nav-bg, etc. * • Brand fonts: change --font-heading and --font-body to your font names. * * STEP 3 – Save the file and refresh your website (Ctrl+F5 or Cmd+Shift+R). * * STEP 4 – If you use custom fonts (e.g. Google Fonts): * • Add the font link in Appearance > Theme File Editor > header.php * (inside ) or use a plugin. Example for Google Fonts: * * • Then set here: --font-heading: "YourFont", sans-serif; * * STEP 5 – Optional: match RGB for hover effects * • If you change --brand-primary, set --brand-primary-rgb to its R,G,B values. * Example: for #e74c3c use --brand-primary-rgb: 231, 76, 60; * * You do not need to edit the "GLOBAL OVERRIDES" section below unless you want * to change which elements use which variable. */ :root { /* ========== BRAND COLORS ========== */ --brand-primary: #02AD88; --brand-primary-hover: #02AD88; --brand-primary-rgb: 53, 173, 2; /* Same as primary (#35ad02), for rgba() e.g. table hover */ --brand-dark: #292e55; --brand-dark-lighter: #1a1e3a; --brand-nav-bg: #061253; --brand-text: #555555; --brand-heading-color: #292e55; --brand-body-bg: #f4f7fc; --brand-light-bg: #f5f5f5; /* ========== BRAND FONTS ========== */ --font-heading: "Poppins", sans-serif; --font-body: "Roboto", sans-serif; /* ========== OPTIONAL (inherit from primary so one change applies everywhere) ========== */ --brand-border: var(--brand-primary); --brand-link-hover: var(--brand-primary); --brand-selection-bg: var(--brand-primary); --brand-focus-outline: var(--brand-primary); } /* --------------------------------------------------------------------------- GLOBAL OVERRIDES – These apply your brand variables across the site. You usually do not need to edit below this line. ---------------------------------------------------------------------------- */ /* Selection / highlight */ *::selection { background-color: var(--brand-selection-bg); color: #fff; } *::-moz-selection { background-color: var(--brand-selection-bg); color: #fff; } /* Body & base text */ body { font-family: var(--font-body); } body p { font-family: var(--font-body); } /* Headings – titles and section headings */ h1, h2, h3, h4, h5, h6, .title h1, .title h2, .title h3, .about-title h3, .section-title h3, .testimoni-title h3, .blog-title h3, .footer-light-name, .footer-light-heading, .footer-light-addr-heading { font-family: var(--font-heading); color: var(--brand-heading-color); } /* Header / Navigation */ .main-nav.nav-expanded { background: var(--brand-nav-bg); } .nav-link, .nav-link-dropdown { color: #fff; } .nav-link:hover, .menu-item.current-menu-item > .nav-link { color: var(--brand-primary); } .menu-item.current-menu-item > .nav-link { border-bottom-color: rgba(255, 255, 255, 0.6); } .nav-link-dropdown:focus, .nav-link:focus { outline: 2px solid var(--brand-focus-outline); outline-offset: 2px; } .telp-icon { color: var(--brand-primary); } /* Buttons – all theme button styles */ .button, .button.style-1, .button.style-2, .button.style-3, .button.style-4, .button.style-5, .contact-button .style-1, .style-1, .style-2, .style-3, .style-4, .style-5, .pricing-btn, .button.style-11, .about-button .button, .blog-button .button, .service-card-button .button, .appointment-button .button, input[type="submit"], button[type="submit"] { border-color: var(--brand-primary) !important; background-color: var(--brand-primary) !important; color: #fff !important; } .button:hover, .style-1:hover, .style-2:hover, .style-3:hover, .style-4:hover, .style-5:hover, .contact-button .style-1:hover, .pricing-btn:hover, .about-button .button:hover, .blog-button .button:hover, .service-card-button .button:hover, .appointment-button .button:hover, input[type="submit"]:hover, button[type="submit"]:hover { background-color: var(--brand-primary-hover) !important; border-color: var(--brand-primary-hover) !important; color: #fff !important; } .style-2, .style-3:hover, .style-5 { color: var(--brand-heading-color); } .style-2:hover, .style-3:hover, .style-4:hover, .style-5:hover { color: #fff !important; } /* Appointment section – heading underline, emails, send button */ .Appointment .left-hr, .left-hr { background-color: var(--brand-primary) !important; border: none !important; } .Appointment .text-green, .text-green { color: var(--brand-primary) !important; } .Appointment .main-office a, .Appointment .branc-office a, .Appointment .main-office p a, .Appointment .branc-office p a { color: var(--brand-primary) !important; } .Appointment .button.style-4, .Appointment button.button { background-color: var(--brand-primary) !important; border-color: var(--brand-primary) !important; color: #fff !important; } .Appointment .button.style-4:hover, .Appointment button.button:hover { background-color: var(--brand-primary-hover) !important; border-color: var(--brand-primary-hover) !important; color: #fff !important; } /* Cards, blog, services – badges and link hovers */ .card-category, .service-card .card-category, .blog-card a:hover, .card-title a:hover, .blog-card .card-title:hover, .service-card-button .button:hover, .partner-list a:hover, .side-download a:hover { background-color: var(--brand-primary) !important; color: var(--brand-primary) !important; border-color: var(--brand-primary) !important; } .card-category { background-color: var(--brand-primary) !important; color: #fff !important; } .blog-card a:hover, .card-title a:hover { color: var(--brand-primary) !important; } /* Skip link, focus states, outlines */ .skip-link:focus, a:focus-visible, button:focus-visible, .nav-link:focus, .sub-menu-link:focus { outline-color: var(--brand-primary) !important; } /* Links & hover */ /* Links: green on hover (exclude icon/button links that must stay white) */ a:not(.footer-light-social-icon):not(.scroll-to-top):not(.button):hover, .footer-light-text a:hover, .footer-light-list a:hover, .footer-light-copyright a:hover { color: var(--brand-link-hover) !important; } .footer-light-text a, .footer-light-list a { color: var(--brand-dark); } .footer-light-copyright a { color: #fff !important; } .footer-light-copyright a:hover { color: var(--brand-primary-hover); } /* Footer light – logo size (larger, visually attractive) */ .footer-light-logo-wrap { margin-bottom: 14px; } .footer-light-logo { max-width: 140px; width: 140px; height: auto; display: block; } @media (max-width: 768px) { .footer-light-logo { max-width: 120px; width: 120px; } } /* Footer light – accents & bars */ .footer-light { background-color: var(--brand-body-bg); border-top-color: var(--brand-primary); } .footer-light-name::after, .footer-light-heading, .footer-light-addr-heading { border-bottom-color: var(--brand-primary); } /* Footer heading levels: preserve visual style for h2/h3 */ #footer .footer-light-name, #footer h2.footer-light-name { margin: 0 0 0.5em; font-size: 16px; } #footer .footer-light-heading, #footer h3.footer-light-heading { margin: 0 0 1em; font-size: 16px; } .footer-light-col:not(:last-child)::after, .footer-light-brand-part2 { border-color: rgba(var(--brand-primary-rgb), 0.35); } .footer-light-officer-label { color: var(--brand-primary); } .footer-light-disclaimer { border-top-color: var(--brand-primary); } .footer-light-bottom { background-color: var(--brand-dark); } .footer-light-social-icon { background: var(--brand-dark); } .footer-light-social-icon, .footer-light-social-icon:hover { color: #fff !important; } .footer-light-social-icon:hover { background: var(--brand-primary); } .footer-light-social-icon i, .footer-light-social-icon:hover i, .footer-light-social-icon svg, .footer-light-social-icon:hover svg { color: #fff !important; fill: #fff !important; } /* Scroll to top button – keep icon white on hover */ .scroll-to-top, .scroll-to-top:hover { color: #fff !important; } .scroll-to-top { background: var(--brand-primary); } .scroll-to-top:hover { background: var(--brand-primary-hover); } .scroll-to-top i, .scroll-to-top:hover i, .scroll-to-top svg, .scroll-to-top:hover svg { color: #fff !important; fill: #fff !important; } .scroll-to-top:focus { outline: 2px solid var(--brand-primary); } /* Dropdown / submenu */ .sub-menu { border-top-color: var(--brand-primary); } .sub-menu-link:hover, .sub-menu-link:focus { color: var(--brand-primary) !important; } /* Tables (WordPress block) */ .wp-block-table tbody tr:first-child td, .wp-block-table tbody tr:first-child th, .wp-block-table thead th, figure.wp-block-table tbody tr:first-child td, figure.wp-block-table tbody tr:first-child th, .entry-content .wp-block-table tbody tr:first-child td, .entry-content .wp-block-table tbody tr:first-child th, .entry-content .wp-block-table thead th { background-color: rgba(var(--brand-primary-rgb), 0.08); } .wp-block-table tbody tr:hover td, figure.wp-block-table tbody tr:hover td, .entry-content .wp-block-table tbody tr:hover td { background-color: rgba(var(--brand-primary-rgb), 0.08); } /* Gravillance / designation contact table – orange header, gold first column, black borders */ figure.wp-block-table.gravilance-table table, figure.wp-block-table.gravilance-table .has-fixed-layout, .entry-content figure.wp-block-table.gravilance-table table { border-collapse: collapse; width: 100%; } figure.wp-block-table.gravilance-table th, figure.wp-block-table.gravilance-table td, .entry-content figure.wp-block-table.gravilance-table th, .entry-content figure.wp-block-table.gravilance-table td { border: 1px solid #000; padding: 0.5em 0.75em; font-weight: normal; vertical-align: middle; } figure.wp-block-table.gravilance-table thead th, .entry-content figure.wp-block-table.gravilance-table thead th { background-color: #e5952b !important; color: #000 !important; text-align: center; } figure.wp-block-table.gravilance-table tbody td:first-child, .entry-content figure.wp-block-table.gravilance-table tbody td:first-child { background-color: #efc93b !important; color: #000 !important; text-align: left; } figure.wp-block-table.gravilance-table tbody td:not(:first-child), .entry-content figure.wp-block-table.gravilance-table tbody td:not(:first-child) { background-color: #fff !important; color: #000 !important; text-align: left; } figure.wp-block-table.gravilance-table tbody tr:hover td:first-child, figure.wp-block-table.gravilance-table tbody tr:hover td:not(:first-child), .entry-content figure.wp-block-table.gravilance-table tbody tr:hover td { background-color: inherit; } figure.wp-block-table.gravilance-table tbody tr:hover td:first-child { background-color: #efc93b !important; } figure.wp-block-table.gravilance-table tbody tr:hover td:not(:first-child) { background-color: #fff !important; } /* Common content accents (hr, borders, icons) */ hr.style-1, .service-card hr, .blog-list-wrapper .blog-content hr { border-color: var(--brand-primary); } /* Pagination & form focus */ .pagination a:hover, .pagination .current { border-color: var(--brand-primary); color: var(--brand-primary); } /* Form inputs: only border/outline green on focus; keep text and background readable */ .input-field input:focus, .input-field textarea:focus, .Appointment input:focus, .Appointment textarea:focus, .contact-detail-form input:focus, .contact-detail-form textarea:focus, .contact-detail-form select:focus { border-color: var(--brand-primary); outline-color: var(--brand-primary); color: #fff !important; background-color: transparent !important; } .Appointment input, .Appointment textarea, .Appointment select, .contact-detail-form input, .contact-detail-form textarea, .contact-detail-form select { color: #fff !important; } .Appointment input::placeholder, .Appointment textarea::placeholder, .contact-detail-form input::placeholder, .contact-detail-form textarea::placeholder { color: rgba(255, 255, 255, 0.8) !important; } /* Compliance / dark footer (if used) */ .footer-compliance .footer-heading, .footer-compliance .footer-social-heading { border-bottom-color: var(--brand-primary); } .footer-compliance .footer-links-list a:hover, .footer-compliance .footer-phone a, .footer-compliance .footer-email a:hover { color: var(--brand-primary); } .footer-compliance .footer-contact-icon { color: var(--brand-primary); } .footer-compliance .footer-youtube-btn:hover { background: #cc0000; } /* Gradient / dark sections that use brand dark */ .header-swiper .header-title, .section-heading.dark { color: var(--brand-dark); } /* ========== Catch-all: every other theme use of brand primary ========== */ .nav-link-black:hover, .about-button a:hover, .experience-title hr, .services-title hr, .Appointment-bg-img .appointment-button .style-5, .appointment-button .style-5, .style-11, .white-nav .style-11, .contact-detail-form .button, .contact-detail-form input[type="submit"], .contact-detail-form button[type="submit"], .pagination .current, .pagination a:hover, .sideBar-title::before, .blogPost-tag-wrapper a, .tag-wrapper a, .testimoni-title hr, .newsletter-form .button, .partner-list a, .side-download ul li a, .icon-wrapper, .service-card-featured .service-card-button .button, .services-two-cards .button, .blog-list-wrapper .blog-content a:hover, .author-desc-wrapper a:hover { color: #fff !important; background-color: var(--brand-primary) !important; border-color: var(--brand-primary) !important; outline-color: var(--brand-primary) !important; } /* Only border/outline for focus (don’t force bg on all) */ /* HR underlines */ hr[style*="02ad88"], .experience-title hr, .services-title hr, .testimoni-title hr, .appointment-title hr.left-hr { background-color: var(--brand-primary) !important; border-color: var(--brand-primary) !important; }