/* ========================================================================== Xolido — Design Tokens (--xolido-accent / --xolido-primary / --xolido-dark are also written inline in from the Customizer, see functions.php) ========================================================================== */ :root { --xolido-accent: #F59E0B; --xolido-primary: #1E3A8A; --xolido-dark: #0F172A; --xolido-light: #F8FAFC; --xolido-gray: #475569; --xolido-border: #E2E8F0; --xolido-font-heading: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; --xolido-font-body: 'Inter', 'Segoe UI', Arial, sans-serif; --xolido-radius: 10px; --xolido-shadow: 0 10px 30px rgba(15, 23, 42, 0.08); --xolido-container: 1200px; } /* ========================================================================== Reset & base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--xolido-font-body); font-size: 16px; line-height: 1.65; color: #1F2937; background: var(--xolido-light); overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: var(--xolido-primary); text-decoration: none; transition: color .2s ease; } a:hover { color: var(--xolido-accent); } h1, h2, h3, h4, h5, h6 { font-family: var(--xolido-font-heading); font-weight: 700; line-height: 1.2; color: var(--xolido-dark); margin: 0 0 .6em; } h1 { font-size: clamp(2rem, 4vw, 3rem); } h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); } h3 { font-size: 1.25rem; } p { margin: 0 0 1.2em; } ul { padding-left: 1.2em; } :focus-visible { outline: 2px solid var(--xolido-accent); outline-offset: 2px; } .screen-reader-text, .skip-link { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } .skip-link:focus { position: fixed; top: 10px; left: 10px; width: auto; height: auto; clip: auto; background: var(--xolido-dark); color: #fff; padding: 12px 18px; border-radius: var(--xolido-radius); z-index: 100000; } .container { max-width: var(--xolido-container); margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; } /* Gutenberg wide/full alignment support (classic theme) */ .alignwide { max-width: 1400px; margin-left: auto; margin-right: auto; width: 100%; } .alignfull { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } .wp-block-group.alignfull > * { max-width: var(--xolido-container); width: 100%; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; box-sizing: border-box; } /* Brand color utility classes referenced by the default homepage content */ .has-xolido-light-background-color { background-color: var(--xolido-light); } .has-xolido-dark-background-color { background-color: var(--xolido-dark); } .has-xolido-primary-background-color { background-color: var(--xolido-primary); } .has-xolido-accent-background-color { background-color: var(--xolido-accent); } .has-white-color { color: #fff; } /* ========================================================================== Elementor / block-editor compatibility Content built with Elementor lives in .entry-content > .elementor and must stay edge-to-edge; plain (non-Elementor) content gets a readable max width via .alignwide/.alignfull rules above, everything else defaults to the flow width of its parent. ========================================================================== */ .entry-content > .elementor { max-width: none; } main#primary, #content { position: relative; z-index: 1; } /* ========================================================================== Buttons ========================================================================== */ .button, .wp-block-button__link, input[type="submit"] { display: inline-flex; align-items: center; justify-content: center; gap: .5em; font-family: var(--xolido-font-heading); font-weight: 600; font-size: .95rem; letter-spacing: .02em; padding: 14px 28px; border-radius: var(--xolido-radius); border: 2px solid transparent; cursor: pointer; transition: transform .2s ease, box-shadow .3s ease, background-color .2s ease, color .2s ease; position: relative; } .button--accent, .wp-block-button.xolido-btn-accent .wp-block-button__link, input[type="submit"] { background: var(--xolido-accent); color: var(--xolido-dark); box-shadow: 0 6px 20px rgba(245, 158, 11, .35); } .button--accent:hover, .wp-block-button.xolido-btn-accent .wp-block-button__link:hover { color: var(--xolido-dark); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(245, 158, 11, .5); } .button--outline { background: transparent; border-color: rgba(255, 255, 255, .6); color: #fff; } .button--outline:hover { border-color: var(--xolido-accent); color: var(--xolido-accent); transform: translateY(-2px); } .button--lg { padding: 18px 36px; font-size: 1.05rem; } /* Click "energize" feedback added by circuit-engine.js */ .xolido-energized { animation: xolido-energize-pulse .7s ease-out; } @keyframes xolido-energize-pulse { 0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, .8); } 60% { box-shadow: 0 0 0 16px rgba(245, 158, 11, 0); } 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); } } @media (prefers-reduced-motion: reduce) { .xolido-energized { animation: none; box-shadow: 0 0 0 4px rgba(245, 158, 11, .5); } } /* ========================================================================== Header ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--xolido-border); } .site-header__inner { max-width: var(--xolido-container); margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .site-branding { display: flex; align-items: center; line-height: 0; } .site-branding a, .site-branding .xolido-logo { display: inline-flex; } .site-branding img, .custom-logo-link img, .xolido-logo--header img { max-height: 48px !important; width: auto !important; height: auto !important; } .main-navigation { display: flex; align-items: center; gap: 28px; } .main-navigation ul { display: flex; align-items: center; gap: 24px; list-style: none; margin: 0; padding: 0; } .main-navigation a { font-family: var(--xolido-font-heading); font-weight: 600; font-size: .95rem; color: var(--xolido-dark); } .main-navigation a:hover { color: var(--xolido-accent); } .nav-cta { white-space: nowrap; padding: 10px 20px; } .menu-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; background: transparent; border: none; cursor: pointer; } .menu-toggle-bar { display: block; width: 100%; height: 2px; background: var(--xolido-dark); transition: transform .25s ease, opacity .25s ease; } .menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(2) { opacity: 0; } .menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 900px) { .menu-toggle { display: flex; } .main-navigation { position: fixed; inset: 0 0 0 30%; top: 73px; flex-direction: column; align-items: stretch; background: #fff; padding: 20px; transform: translateX(100%); transition: transform .3s ease; box-shadow: -10px 0 30px rgba(0,0,0,.1); } .main-navigation.is-open { transform: translateX(0); } .main-navigation ul { flex-direction: column; align-items: flex-start; gap: 4px; } .main-navigation ul li { width: 100%; } .main-navigation ul a { display: block; padding: 12px 4px; border-bottom: 1px solid var(--xolido-border); } .nav-cta { margin-top: 14px; text-align: center; justify-content: center; } } /* ========================================================================== Hero banner ========================================================================== */ .xolido-hero { position: relative; overflow: hidden; padding: 80px 0 90px; text-align: center; background: linear-gradient(135deg, #16234f 0%, var(--xolido-primary) 100%); color: #fff; } .xolido-hero__inner { position: relative; z-index: 2; } .xolido-hero__logo-wrap { position: relative; max-width: 640px; margin: 0 auto 28px; padding: 30px 40px; } .xolido-hero__logo { position: relative; z-index: 2; width: 100%; height: auto; filter: drop-shadow(0 6px 24px rgba(0,0,0,.35)); } .xolido-hero__subtitle { font-family: var(--xolido-font-heading); font-style: italic; font-size: 1.3rem; color: var(--xolido-accent); margin-bottom: 18px; } .xolido-hero__description { max-width: 680px; margin: 0 auto 34px; color: rgba(255,255,255,.85); font-size: 1.05rem; } .xolido-hero__actions { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; } @media (max-width: 600px) { .xolido-hero { padding: 56px 0 64px; } .xolido-hero__logo-wrap { padding: 20px; } } /* ========================================================================== Generic sections / service cards (default homepage content) ========================================================================== */ .wp-block-group[id] { scroll-margin-top: 90px; } .xolido-service-card { background: #fff; border: 1px solid var(--xolido-border); border-radius: var(--xolido-radius); padding: 28px 30px !important; box-shadow: var(--xolido-shadow); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .xolido-service-card:hover { transform: translateY(-4px); border-color: var(--xolido-accent); box-shadow: 0 16px 40px rgba(245,158,11,.18); } .xolido-service-card h3 { color: var(--xolido-primary); } /* ========================================================================== Blog layout ========================================================================== */ .xolido-blog-layout { display: grid; grid-template-columns: 2.2fr 1fr; gap: 48px; padding: 60px 24px; } @media (max-width: 900px) { .xolido-blog-layout { grid-template-columns: 1fr; padding: 40px 24px; } } .xolido-blog-card { background: #fff; border: 1px solid var(--xolido-border); border-radius: var(--xolido-radius); overflow: hidden; margin-bottom: 32px; box-shadow: var(--xolido-shadow); } .xolido-blog-card__thumb img { width: 100%; } .xolido-blog-card__body { padding: 24px; } .entry-meta { color: var(--xolido-gray); font-size: .85rem; margin-bottom: 10px; } .widget { margin-bottom: 32px; } .widget-title, .footer-widget-title { font-family: var(--xolido-font-heading); font-size: 1rem; text-transform: uppercase; letter-spacing: .04em; } .xolido-404 { text-align: center; padding: 100px 24px; } /* ========================================================================== Footer ========================================================================== */ .site-footer { background: var(--xolido-dark); color: rgba(255,255,255,.75); } .site-footer__top { max-width: var(--xolido-container); margin: 0 auto; padding: 64px 24px 40px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; } @media (max-width: 900px) { .site-footer__top { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .site-footer__top { grid-template-columns: 1fr; } } .footer-column ul { list-style: none; padding: 0; margin: 0; } .footer-column li { margin-bottom: 10px; } .footer-column a { color: rgba(255,255,255,.75); } .footer-column a:hover { color: var(--xolido-accent); } .footer-widget-title { color: #fff; margin-bottom: 16px; } .footer-logo { margin-bottom: 16px; } .social-link { display: inline-block; margin-top: 8px; font-weight: 600; } .footer-contact-list a { color: rgba(255,255,255,.75); } .site-footer__bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 20px 24px; max-width: var(--xolido-container); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: .85rem; } .footer-menu { display: flex; gap: 18px; list-style: none; padding: 0; margin: 0; } .footer-menu a { color: rgba(255,255,255,.6); }