/* OpenSys IT — Design tokens & global styles */ /* ─── Kill WordPress block-editor global styles that conflict ─── */ .wp-site-blocks, .is-layout-flow, .is-layout-constrained, .is-layout-flex, .is-layout-grid { margin: 0 !important; padding: 0 !important; max-width: none !important; } :where(.is-layout-flex), :where(.is-layout-grid) { gap: revert !important; } :where(body) { margin: 0 !important; padding: 0 !important; } :where(.wp-element-button, .wp-block-button__link) { all: revert; } :root { /* Palette: Navy default */ --bg: #0A1628; --bg-elev: #0F1E36; --bg-elev-2: #15294A; --surface: #FFFFFF; --surface-soft: #F4F7FB; --line: rgba(255, 255, 255, 0.08); --line-strong: rgba(255, 255, 255, 0.16); --line-light: #E4E9F0; --accent: #00B4D8; --accent-2: #58E1F5; --accent-deep: #0086A8; --danger: #FF4D4D; --warn: #FFB020; --ok: #2DD4A8; --text: #F5F8FC; --text-dim: #A6B4C8; --text-mute: #6E7E94; --text-on-light: #0A1628; --text-on-light-dim: #4A5A72; /* Type */ --font-display: "Space Grotesk", "Inter", system-ui, -apple-system, sans-serif; --font-body: "Inter", system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Scale */ --radius-sm: 6px; --radius: 10px; --radius-lg: 16px; --radius-xl: 24px; --shadow-sm: 0 1px 2px rgba(7, 16, 32, 0.4); --shadow: 0 8px 24px rgba(7, 16, 32, 0.35); --shadow-lg: 0 24px 60px rgba(7, 16, 32, 0.45); --shadow-glow: 0 0 0 1px rgba(0, 180, 216, 0.4), 0 12px 40px rgba(0, 180, 216, 0.25); --container: 1200px; --pad-section: clamp(72px, 10vw, 128px); } /* Palette variants — controlled by [data-palette] on */ html[data-palette="midnight"] { --bg: #0A1628; --bg-elev: #0F1E36; --bg-elev-2: #15294A; --accent: #00B4D8; --accent-2: #58E1F5; --accent-deep: #0086A8; } html[data-palette="forest"] { --bg: #0B1F1A; --bg-elev: #102B24; --bg-elev-2: #173A30; --accent: #34E0A1; --accent-2: #7BF0C2; --accent-deep: #1FA876; } html[data-palette="violet"] { --bg: #120B26; --bg-elev: #1B1239; --bg-elev-2: #281A52; --accent: #B68BFF; --accent-2: #D5B8FF; --accent-deep: #7E4EE6; } html[data-palette="ember"] { --bg: #1A1010; --bg-elev: #251616; --bg-elev-2: #361E1E; --accent: #FF7A45; --accent-2: #FFB088; --accent-deep: #D14F1A; } html[data-palette="paper"] { --bg: #F4F1EA; --bg-elev: #FFFFFF; --bg-elev-2: #ECE6D8; --line: rgba(10, 22, 40, 0.08); --line-strong: rgba(10, 22, 40, 0.16); --accent: #1F4FE0; --accent-2: #7AA0FF; --accent-deep: #143CB4; --text: #0A1628; --text-dim: #4A5A72; --text-mute: #6E7E94; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } .screen-reader-text, .skip-link { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .screen-reader-text:focus, .skip-link:focus { position: fixed; top: 8px; left: 8px; width: auto; height: auto; padding: 12px 20px; margin: 0; clip: auto; white-space: normal; background: var(--accent); color: #001823; font-weight: 600; font-size: 14px; z-index: 100000; border-radius: var(--radius); } html { scroll-behavior: smooth; } body { font-family: var(--font-body); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "ss01", "cv11"; line-height: 1.5; overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; margin: 0; text-wrap: balance; } p { margin: 0; text-wrap: pretty; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } .container { max-width: var(--container); margin: 0 auto; padding: 0 24px; } .eyebrow { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 10px; } .eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--accent); } .btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 24px; border-radius: var(--radius); font-weight: 600; font-size: 15px; letter-spacing: -0.01em; transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; white-space: nowrap; } .btn-primary { background: var(--accent); color: #001823; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0, 180, 216, 0.4); } .btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--line-strong); } .btn-ghost:hover { background: rgba(255, 255, 255, 0.04); border-color: var(--accent); } .btn .arrow { transition: transform 0.18s ease; } .btn:hover .arrow { transform: translateX(4px); } /* Section heading */ .section-head { display: flex; flex-direction: column; gap: 16px; max-width: 720px; margin-bottom: 56px; } .section-head h2 { font-size: clamp(36px, 4.5vw, 56px); } .section-head p { font-size: 18px; color: var(--text-dim); max-width: 560px; } section { padding: var(--pad-section) 0; position: relative; } /* Reveal on scroll */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s cubic-bezier(.2,.7,.2,1), transform 0.8s cubic-bezier(.2,.7,.2,1); } .reveal.is-in { opacity: 1; transform: none; } /* Subtle grid backdrop */ .grid-bg { position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 30%, transparent 80%); pointer-events: none; } /* Focus ring */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } /* ─── Noise / Grain Texture Overlay ─── */ body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: 0.025; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 256px 256px; mix-blend-mode: overlay; } @media (prefers-reduced-motion: reduce) { body::after { opacity: 0.035; } } /* ─── Premium Gradient Mesh Backgrounds ─── */ .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 50% at 15% 80%, rgba(0,180,216,0.14) 0%, transparent 55%), radial-gradient(ellipse 60% 40% at 85% 15%, rgba(88,225,245,0.10) 0%, transparent 45%), radial-gradient(ellipse 40% 30% at 50% 50%, rgba(0,180,216,0.06) 0%, transparent 60%); pointer-events: none; z-index: 0; } .hero::after { content: ""; position: absolute; width: 600px; height: 600px; top: -10%; right: -8%; background: radial-gradient(circle, rgba(0,180,216,0.18) 0%, transparent 65%); border-radius: 50%; pointer-events: none; z-index: 0; animation: heroOrbFloat 12s ease-in-out infinite; } @keyframes heroOrbFloat { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(-20px, 30px) scale(1.05); } 66% { transform: translate(15px, -20px) scale(0.97); } } .hero .container, .hero .hero-grid { position: relative; z-index: 1; } .hero .grid-bg, .hero .hero-orb { z-index: 0; } .pain::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 50% at 75% 40%, rgba(255,77,77,0.07) 0%, transparent 55%), radial-gradient(ellipse 40% 30% at 20% 80%, rgba(0,180,216,0.04) 0%, transparent 50%); pointer-events: none; } .assess::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 50% at 30% 40%, rgba(0,180,216,0.08) 0%, transparent 65%), radial-gradient(ellipse 40% 60% at 80% 70%, rgba(88,225,245,0.05) 0%, transparent 55%); pointer-events: none; } .services::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 40% at 10% 80%, rgba(0,180,216,0.07) 0%, transparent 55%), radial-gradient(ellipse 40% 50% at 90% 20%, rgba(0,180,216,0.05) 0%, transparent 45%); pointer-events: none; } .why::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 60% at 80% 50%, rgba(0,180,216,0.06) 0%, transparent 50%); pointer-events: none; } .trust::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 50% at 50% 100%, rgba(45,212,168,0.06) 0%, transparent 45%); pointer-events: none; } .testimonials::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 40% 40% at 70% 60%, rgba(0,180,216,0.07) 0%, transparent 55%); pointer-events: none; } .team::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 40% at 20% 70%, rgba(0,180,216,0.07) 0%, transparent 50%), radial-gradient(ellipse 40% 40% at 80% 30%, rgba(88,225,245,0.05) 0%, transparent 45%); pointer-events: none; } .finalcta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 30% 80%, rgba(0,180,216,0.12) 0%, transparent 50%), radial-gradient(ellipse 50% 40% at 70% 30%, rgba(88,225,245,0.08) 0%, transparent 45%); pointer-events: none; z-index: 0; } .finalcta > .container { position: relative; z-index: 1; } .svc-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 20% 80%, rgba(0,180,216,0.12) 0%, transparent 55%), radial-gradient(ellipse 40% 40% at 80% 20%, rgba(88,225,245,0.07) 0%, transparent 45%); pointer-events: none; z-index: 0; } .svc-hero .container { position: relative; z-index: 1; } .contact-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 25% 70%, rgba(0,180,216,0.12) 0%, transparent 55%), radial-gradient(ellipse 40% 40% at 75% 30%, rgba(88,225,245,0.07) 0%, transparent 45%); pointer-events: none; z-index: 0; } .contact-hero .container { position: relative; z-index: 1; } /* ─── Floating Gradient Orbs ─── */ .hero-orb { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; will-change: transform; } .hero-orb--1 { width: 500px; height: 500px; top: 5%; right: -12%; background: radial-gradient(circle, rgba(0,180,216,0.16) 0%, transparent 65%); animation: orbDrift1 14s ease-in-out infinite; } .hero-orb--2 { width: 350px; height: 350px; bottom: 10%; left: -8%; background: radial-gradient(circle, rgba(88,225,245,0.10) 0%, transparent 65%); animation: orbDrift2 18s ease-in-out infinite; } @keyframes orbDrift1 { 0%, 100% { transform: translate(0, 0) scale(1); opacity: 1; } 25% { transform: translate(-30px, 25px) scale(1.08); opacity: 0.85; } 50% { transform: translate(-10px, -15px) scale(0.95); opacity: 1; } 75% { transform: translate(20px, 20px) scale(1.04); opacity: 0.9; } } @keyframes orbDrift2 { 0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.9; } 33% { transform: translate(25px, -20px) scale(1.06); opacity: 1; } 66% { transform: translate(-15px, 30px) scale(0.96); opacity: 0.85; } } @media (prefers-reduced-motion: reduce) { .hero-orb--1, .hero-orb--2 { animation: none; } .hero::after { animation: none; } } /* CTA section floating orb */ .finalcta-orb-anim { position: absolute; width: 400px; height: 400px; border-radius: 50%; pointer-events: none; z-index: 0; background: radial-gradient(circle, rgba(0,180,216,0.12) 0%, transparent 65%); animation: ctaOrbPulse 8s ease-in-out infinite; } @keyframes ctaOrbPulse { 0%, 100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.15); opacity: 1; } } /* Service page feature section gradient */ .svc-features::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 40% 40% at 85% 30%, rgba(0,180,216,0.05) 0%, transparent 55%); pointer-events: none; } .svc-stats::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 40% at 15% 85%, rgba(0,180,216,0.05) 0%, transparent 50%); pointer-events: none; } .contact-form-section::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 40% 40% at 70% 40%, rgba(0,180,216,0.04) 0%, transparent 55%); pointer-events: none; } /* ─── Ember palette overrides for gradients ─── */ html[data-palette="ember"] .hero::before { background: radial-gradient(ellipse 80% 50% at 15% 80%, rgba(255,122,69,0.16) 0%, transparent 55%), radial-gradient(ellipse 60% 40% at 85% 15%, rgba(255,176,136,0.10) 0%, transparent 45%), radial-gradient(ellipse 40% 30% at 50% 50%, rgba(255,122,69,0.06) 0%, transparent 60%); } html[data-palette="ember"] .hero::after { background: radial-gradient(circle, rgba(255,122,69,0.18) 0%, transparent 65%); } html[data-palette="ember"] .hero-orb--1 { background: radial-gradient(circle, rgba(255,122,69,0.16) 0%, transparent 65%); } html[data-palette="ember"] .hero-orb--2 { background: radial-gradient(circle, rgba(255,176,136,0.10) 0%, transparent 65%); } html[data-palette="ember"] .pain::before { background: radial-gradient(ellipse 70% 50% at 75% 40%, rgba(255,77,77,0.08) 0%, transparent 55%), radial-gradient(ellipse 40% 30% at 20% 80%, rgba(255,122,69,0.04) 0%, transparent 50%); } html[data-palette="ember"] .services::before { background: radial-gradient(ellipse 60% 40% at 10% 80%, rgba(255,122,69,0.07) 0%, transparent 55%), radial-gradient(ellipse 40% 50% at 90% 20%, rgba(255,122,69,0.05) 0%, transparent 45%); } html[data-palette="ember"] .assess::before { background: radial-gradient(ellipse 50% 50% at 30% 40%, rgba(255,122,69,0.08) 0%, transparent 65%), radial-gradient(ellipse 40% 60% at 80% 70%, rgba(255,176,136,0.05) 0%, transparent 55%); } html[data-palette="ember"] .svc-hero::before { background: radial-gradient(ellipse 60% 50% at 20% 80%, rgba(255,122,69,0.14) 0%, transparent 55%), radial-gradient(ellipse 40% 40% at 80% 20%, rgba(255,176,136,0.08) 0%, transparent 45%); } html[data-palette="ember"] .contact-hero::before { background: radial-gradient(ellipse 60% 50% at 25% 70%, rgba(255,122,69,0.14) 0%, transparent 55%), radial-gradient(ellipse 40% 40% at 75% 30%, rgba(255,176,136,0.08) 0%, transparent 45%); } html[data-palette="ember"] .finalcta::before { background: radial-gradient(ellipse 60% 50% at 30% 80%, rgba(255,122,69,0.14) 0%, transparent 50%), radial-gradient(ellipse 50% 40% at 70% 30%, rgba(255,176,136,0.08) 0%, transparent 45%); } html[data-palette="ember"] .finalcta-orb-anim { background: radial-gradient(circle, rgba(255,122,69,0.14) 0%, transparent 65%); } /* ─── Card Glow Hover Effects ─── */ .svc-card:hover, .feat-card:hover, .proc-step:hover, .ci-card:hover { box-shadow: 0 0 0 1px var(--accent), 0 8px 32px rgba(0, 180, 216, 0.12); } html[data-palette="ember"] .svc-card:hover, html[data-palette="ember"] .feat-card:hover, html[data-palette="ember"] .proc-step:hover, html[data-palette="ember"] .ci-card:hover { box-shadow: 0 0 0 1px var(--accent), 0 8px 32px rgba(255, 122, 69, 0.12); } .pain-card:hover { border-color: var(--accent) !important; } /* Alpine.js cloak — hide elements until Alpine processes them */ [x-cloak] { display: none !important; } /* Mobile menu transitions */ .mobile-enter-start { opacity: 0; transform: translateY(-10px); } .mobile-enter-end { opacity: 1; transform: translateY(0); } .mobile-leave-start { opacity: 1; transform: translateY(0); } .mobile-leave-end { opacity: 0; transform: translateY(-10px); } /* Mobile */ @media (max-width: 720px) { :root { --pad-section: 72px; } .container { padding: 0 20px; } .hero { padding-top: 100px !important; } .hero-grid { grid-template-columns: 1fr !important; } .hero h1 { font-size: clamp(32px, 8vw, 52px) !important; } .hero-ctas { flex-direction: column; } .hero-ctas .btn { width: 100%; justify-content: center; } .hero-marquee { grid-template-columns: repeat(2, 1fr) !important; } .section-head h2 { font-size: clamp(28px, 6vw, 40px) !important; } .btn { padding: 14px 20px !important; font-size: 14px !important; } .section-head { margin-bottom: 40px !important; } } @media (max-width: 480px) { :root { --pad-section: 56px; } .container { padding: 0 16px; } .hero h1 { font-size: clamp(28px, 7vw, 40px) !important; } .hero-sub { font-size: 15px !important; } .nav-right .uptime-badge { display: none !important; } }