/* Theme Name: OPserve Theme URI: https://opserve.com Author: OPserve Solutions Description: Official Salesforce Partner – Enterprise Consulting. Light/dark mode with mobile-first layout. Version: 2.0.0 Requires at least: 6.0 Tested up to: 6.7 Requires PHP: 7.4 License: Proprietary Text Domain: opserve */ /* ============================================================ RESET & BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --navy: #06103d; --navy-dark: #040d2e; --blue: #0B1F8E; --blue-mid: #0e34b8; --cyan: #00AEEF; --white: #ffffff; --gray-50: #f4f6fd; --gray-100: #e8ecf5; --gray-200: #d1d5db; --gray-400: #9ca3af; --gray-500: #6b7280; --gray-600: #4b5563; --gray-700: #374151; --gray-900: #111827; /* Light mode surfaces */ --bg: #ffffff; --bg-alt: #f9fafb; --bg-muted: #f4f6fd; --border: rgba(0,0,0,.08); --text: #111827; --text-muted:#6b7280; --nav-bg: #ffffff; --nav-border:#f0f0f0; --card-bg: #ffffff; --card-border:#e8ecf5; --metrics-bg:#f4f6fd; --metrics-divide:#e8ecf5; --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --max-w: 1400px; --radius: 1rem; color-scheme: light; } /* Dark mode token overrides — toggled by adding .dark to */ html.dark { --bg: #06103d; --bg-alt: #040d2e; --bg-muted: #0e1323; --border: rgba(255,255,255,.08); --text: #e8eaf6; --text-muted: rgba(147,197,253,.5); --nav-bg: rgba(6,16,61,.95); --nav-border: rgba(255,255,255,.1); --card-bg: #0c1a4e; --card-border: rgba(255,255,255,.08); --metrics-bg: #0B1F8E; --metrics-divide: rgba(255,255,255,.1); color-scheme: dark; } html { font-size: 16px; scroll-behavior: smooth; } body { font-family: var(--font); color: var(--text); background: var(--bg); line-height: 1.6; -webkit-font-smoothing: antialiased; transition: background .3s, color .3s; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; } /* ============================================================ LAYOUT ============================================================ */ .container { max-width: var(--max-w); margin: 0 auto; padding: 0 1rem; } @media (min-width: 640px) { .container { padding: 0 1.5rem; } } @media (min-width: 1024px) { .container { padding: 0 2rem; } } /* ============================================================ BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-weight: 700; font-size: .9375rem; padding: .75rem 2rem; border-radius: .5rem; cursor: pointer; border: 2px solid transparent; transition: background .2s, color .2s, border-color .2s, box-shadow .2s; white-space: nowrap; line-height: 1; } .btn svg { flex-shrink: 0; } /* White-on-dark (hero CTA, "Book a Consultation") */ .btn-white { background: var(--white); color: var(--navy-dark); box-shadow: 0 8px 30px rgba(0,0,0,.3); } .btn-white:hover { background: #eff6ff; } /* Outline on dark hero */ .btn-outline-hero { background: transparent; border-color: rgba(255,255,255,.3); color: var(--white); } .btn-outline-hero:hover { background: var(--white); color: var(--navy-dark); } /* On mobile, make hero buttons full-width */ @media (max-width: 480px) { .hero-btns .btn { width: 100%; justify-content: center; } } /* Navy solid (desktop "Get Started") — matches React: bg-[#0B1F8E] text-white */ .btn-navy { background: var(--blue); color: var(--white) !important; border-color: transparent; font-size: .875rem; font-weight: 600; padding: .5rem 1.25rem; border-radius: .375rem; box-shadow: none; } .btn-navy:hover { background: #091870; color: var(--white) !important; } /* Dark mode: dark:bg-white dark:text-[#06103d] */ html.dark .btn-navy { background: var(--white); color: var(--navy-dark) !important; border-color: transparent; } html.dark .btn-navy:hover { background: #e0e7ff; color: var(--navy-dark) !important; } /* Outline on light bg */ .btn-outline-light { background: transparent; border-color: var(--gray-200); color: var(--gray-700); font-weight: 600; } .btn-outline-light:hover { border-color: var(--blue); color: var(--blue); } html.dark .btn-outline-light { border-color: rgba(255,255,255,.2); color: var(--white); } html.dark .btn-outline-light:hover { border-color: var(--white); color: var(--white); } /* ============================================================ THEME TOGGLE BUTTON ============================================================ */ .theme-toggle { width: 38px; height: 38px; border-radius: .5rem; background: transparent; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--gray-500); transition: background .15s, color .15s; } .theme-toggle:hover { background: var(--gray-100); color: var(--gray-900); } html.dark .theme-toggle { color: #9ca3af; } html.dark .theme-toggle:hover { background: rgba(255,255,255,.1); color: var(--white); } /* Show/hide sun vs moon */ .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } html.dark .theme-toggle .icon-sun { display: block; } html.dark .theme-toggle .icon-moon { display: none; } /* ============================================================ NAVIGATION ============================================================ */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--nav-bg); border-bottom: 1px solid var(--nav-border); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background .3s, border-color .3s, box-shadow .3s; } html.dark .site-header { box-shadow: 0 1px 40px rgba(11,31,142,.4); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 4rem; } /* Logo */ .nav-logo { display: flex; align-items: center; gap: .625rem; } /* Light mode logo */ .nav-logo-light { display: flex; align-items: center; gap: .5rem; } .nav-logo-light img { width: 36px; height: 36px; object-fit: contain; } .nav-logo-light span { font-family: 'Outfit', 'Inter', sans-serif; font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em; color: var(--blue); } .nav-logo-light span strong { font-weight: 900; } /* Dark mode logo */ .nav-logo-dark { display: none; align-items: center; gap: .625rem; } .nav-logo-dark img { width: 32px; height: 32px; object-fit: contain; } .nav-logo-dark span { font-weight: 700; font-size: 1.25rem; color: var(--white); } html.dark .nav-logo-light { display: none; } html.dark .nav-logo-dark { display: flex; } /* Desktop nav */ .nav-desktop { display: none; align-items: center; gap: 1.5rem; } @media (min-width: 768px) { .nav-desktop { display: flex; } } .nav-desktop a { font-size: .875rem; color: var(--gray-600); padding: .5rem .75rem; border-radius: .375rem; transition: color .15s; } html.dark .nav-desktop a { color: #9ca3af; } .nav-desktop a:hover, .nav-desktop a.active { color: var(--blue); font-weight: 600; } html.dark .nav-desktop a:hover, html.dark .nav-desktop a.active { color: var(--white); } /* Mobile controls (right side on mobile) */ .nav-mobile-controls { display: flex; align-items: center; gap: .25rem; } @media (min-width: 768px) { .nav-mobile-controls { display: none; } } .nav-burger { width: 38px; height: 38px; border-radius: .5rem; background: none; border: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: .5rem; color: var(--gray-700); transition: background .15s; } .nav-burger:hover { background: var(--gray-100); } html.dark .nav-burger { color: #d1d5db; } html.dark .nav-burger:hover { background: rgba(255,255,255,.1); } .nav-burger span { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .2s, opacity .2s; } .nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-burger.open span:nth-child(2) { opacity: 0; } .nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobile nav drawer */ .mobile-nav { display: none; border-top: 1px solid var(--nav-border); padding: .75rem 0 1rem; } .mobile-nav.open { display: block; } .mobile-nav a { display: block; padding: .625rem .75rem; font-size: .9375rem; color: var(--gray-600); border-radius: .5rem; transition: background .15s, color .15s; } html.dark .mobile-nav a { color: #9ca3af; } .mobile-nav a:hover { background: var(--bg-alt); color: var(--blue); } html.dark .mobile-nav a:hover { background: rgba(255,255,255,.05); color: var(--white); } .mobile-nav a.active { color: var(--blue); font-weight: 600; background: #eff6ff; } html.dark .mobile-nav a.active { background: rgba(255,255,255,.1); color: var(--white); } .mobile-nav .btn { width: 100%; margin-top: .75rem; } /* ============================================================ HERO ============================================================ */ .hero { position: relative; background: linear-gradient(135deg, var(--navy-dark) 0%, var(--blue) 55%, var(--blue-mid) 100%); color: var(--white); overflow: hidden; } .hero-grid-bg { position: absolute; inset: 0; opacity: .06; background-image: linear-gradient(rgba(255,255,255,1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,1) 1px, transparent 1px); background-size: 72px 72px; } .hero-glow { position: absolute; top: -10rem; right: 0; width: 800px; height: 800px; background: rgba(0,174,239,.1); border-radius: 50%; filter: blur(120px); pointer-events: none; } .hero-inner { position: relative; z-index: 1; padding: 3rem 0 4rem; } @media (min-width: 768px) { .hero-inner { padding: 6rem 0 7rem; } } .hero-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; } @media (min-width: 1024px) { .hero-grid { grid-template-columns: 1fr 420px; gap: 5rem; } } .hero-badge { display: inline-flex; align-items: center; gap: .5rem; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: 9999px; padding: .3rem .875rem; font-size: .625rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(219,234,254,.8); margin-bottom: 1.25rem; } @media (min-width: 768px) { .hero-badge { font-size: .6875rem; padding: .375rem 1rem; margin-bottom: 2.5rem; } } .hero-badge-dot { width: 6px; height: 6px; background: var(--cyan); border-radius: 50%; animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.6; transform:scale(.8); } } .hero-h1 { font-size: 2.5rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; margin-bottom: 1.25rem; } @media (min-width: 640px) { .hero-h1 { font-size: 3.25rem; margin-bottom: 1.5rem; } } @media (min-width: 768px) { .hero-h1 { font-size: 4.25rem; margin-bottom: 2rem; } } @media (min-width: 1024px) { .hero-h1 { font-size: 5.5rem; line-height: .95; } } .hero-h1 span { display: block; } .gradient-text { background: linear-gradient(90deg, var(--cyan), #38c8ff, #80deff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero-desc { font-size: 1rem; color: rgba(219,234,254,.7); max-width: 32rem; line-height: 1.65; margin-bottom: 1.5rem; } @media (min-width: 768px) { .hero-desc { font-size: 1.125rem; margin-bottom: 2.5rem; } } .hero-btns { display: flex; flex-wrap: wrap; gap: .625rem; margin-bottom: 2rem; } @media (min-width: 768px) { .hero-btns { gap: .75rem; margin-bottom: 4rem; } } .hero-stats { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; border-top: 1px solid rgba(255,255,255,.1); padding-top: 1.5rem; } @media (min-width: 768px) { .hero-stats { gap: 2.5rem; padding-top: 2rem; } } .hero-stat-n { font-size: 1.75rem; font-weight: 700; line-height: 1; margin-bottom: .25rem; } @media (min-width: 768px) { .hero-stat-n { font-size: 2.25rem; } } .hero-stat-l { font-size: .6875rem; text-transform: uppercase; letter-spacing: .12em; color: rgba(147,197,253,.6); } .hero-img-wrap { display: none; } @media (min-width: 1024px) { .hero-img-wrap { display: block; } } .hero-img-wrap img { border-radius: 1.5rem; box-shadow: 0 32px 80px rgba(0,0,0,.5); width: 100%; aspect-ratio: 4/5; object-fit: cover; } .hero-trusted { border-top: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.05); } .hero-trusted-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 2.5rem; padding: 1.25rem 0; } .hero-trusted-label { font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; color: rgba(255,255,255,.3); } .hero-trusted-name { font-size: .875rem; font-weight: 600; color: rgba(255,255,255,.5); letter-spacing: .05em; } /* ============================================================ METRICS STRIP ============================================================ */ .metrics-strip { background: var(--metrics-bg); border-top: 1px solid var(--card-border); border-bottom: 1px solid var(--card-border); transition: background .3s; } .metrics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem; padding: 2.5rem 0; } @media (min-width: 768px) { .metrics-grid { padding: 4rem 0; gap: 2.5rem; } } @media (min-width: 1024px) { .metrics-grid { grid-template-columns: repeat(4,1fr); gap: 0; } .metric-item { padding: 0 2rem; border-right: 1px solid var(--metrics-divide); } .metric-item:first-child { padding-left: 0; } .metric-item:last-child { border-right: none; padding-right: 0; } } .metric-n { font-size: 2.25rem; font-weight: 700; color: var(--blue); line-height: 1; margin-bottom: .25rem; } @media (min-width: 768px) { .metric-n { font-size: 3rem; } } html.dark .metric-n { color: var(--white); } .metric-label { font-size: .625rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--cyan); margin-bottom: .375rem; } .metric-detail { font-size: .8125rem; color: var(--text-muted); line-height: 1.4; } /* ============================================================ SECTION HELPERS ============================================================ */ .section-eyebrow { font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .2em; color: var(--cyan); margin-bottom: .75rem; } .section-title { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; color: var(--text); line-height: 1.15; } .section-desc { font-size: 1rem; color: var(--text-muted); max-width: 36rem; } /* ============================================================ SERVICES GRID ============================================================ */ .services-section { padding: 3rem 0 4rem; background: var(--bg); transition: background .3s; } @media (min-width: 768px) { .services-section { padding: 6rem 0; } } .services-header { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 4rem; } @media (min-width: 768px) { .services-header { flex-direction: row; align-items: flex-end; justify-content: space-between; } } .services-grid { display: grid; grid-template-columns: 1fr; border: 1px solid var(--card-border); border-radius: var(--radius); overflow: hidden; background: var(--card-border); gap: 1px; } @media (min-width: 768px) { .services-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .services-grid { grid-template-columns: repeat(3,1fr); } } .service-card { background: var(--card-bg); padding: 2rem; transition: background .2s; } .service-card:hover { background: var(--bg-alt); } .service-tag { display: inline-block; font-size: .625rem; font-weight: 700; text-transform: uppercase; letter-spacing: .2em; color: var(--cyan); background: rgba(0,174,239,.1); border-radius: 9999px; padding: .25rem .75rem; margin-bottom: 1.25rem; } html.dark .service-tag { background: rgba(0,174,239,.15); } .service-title { font-size: 1.0625rem; font-weight: 700; color: var(--text); margin-bottom: .75rem; transition: color .2s; } .service-card:hover .service-title { color: var(--blue); } html.dark .service-card:hover .service-title { color: var(--cyan); } .service-desc { font-size: .875rem; color: var(--text-muted); line-height: 1.6; } /* ============================================================ CALLOUT STRIP ============================================================ */ .callout-strip { background: var(--blue); padding: 2.5rem 0; } @media (min-width: 768px) { .callout-strip { padding: 4rem 0; } } .callout-inner { display: flex; flex-direction: column; gap: 1.5rem; align-items: flex-start; } @media (min-width: 768px) { .callout-inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 2rem; } } .callout-text { font-size: clamp(1.375rem, 3.5vw, 3rem); font-weight: 700; color: var(--white); line-height: 1.2; max-width: 42rem; } .callout-text span { color: var(--cyan); } /* ============================================================ FEATURE BLOCKS ============================================================ */ .features-section { padding: 3rem 0 4rem; background: var(--bg); transition: background .3s; } @media (min-width: 768px) { .features-section { padding: 6rem 0; } } .feature-block { display: grid; grid-template-columns: 1fr; gap: 4rem; align-items: center; margin-bottom: 6rem; } .feature-block:last-child { margin-bottom: 0; } @media (min-width: 1024px) { .feature-block { grid-template-columns: 1fr 1fr; gap: 4rem; } .feature-block.reverse .feature-text { order: 1; } .feature-block.reverse .feature-img { order: 2; } } .feature-img-wrap { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.2); } .feature-img-wrap img { width: 100%; height: 400px; object-fit: cover; } .feature-img-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(6,16,61,.6), transparent); } .feature-title { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; color: var(--text); line-height: 1.2; margin-bottom: 1.5rem; } .feature-desc { font-size: 1.0625rem; color: var(--text-muted); line-height: 1.75; margin-bottom: 2rem; } .check-list { display: flex; flex-direction: column; gap: 1rem; } .check-item { display: flex; align-items: flex-start; gap: .75rem; } .check-dot { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: rgba(0,174,239,.15); border: 1px solid rgba(0,174,239,.3); display: flex; align-items: center; justify-content: center; margin-top: .1rem; } .check-dot::after { content:''; width:6px; height:6px; background:var(--cyan); border-radius:50%; } .check-item span { font-size: .875rem; color: var(--text-muted); } .mini-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } .mini-stat { border-left: 2px solid rgba(0,174,239,.3); padding-left: 1rem; } .mini-stat-n { font-size: 1.5rem; font-weight: 700; color: var(--text); } .mini-stat-l { font-size: .6875rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); } /* ============================================================ CLIENTS ============================================================ */ .clients-section { padding: 3rem 0 4rem; background: var(--bg-muted); transition: background .3s; } @media (min-width: 768px) { .clients-section { padding: 6rem 0; } } html.dark .clients-section { background: var(--navy-dark); } .clients-header { text-align: center; margin-bottom: 2.5rem; } @media (min-width: 768px) { .clients-header { margin-bottom: 4rem; } } .clients-header .section-title { margin: 0 auto .75rem; } .clients-header .section-desc { margin: 0 auto; } .clients-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 768px) { .clients-grid { grid-template-columns: repeat(3,1fr); } } .client-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 2rem; transition: box-shadow .2s, border-color .2s; } .client-card:hover { box-shadow: 0 20px 60px rgba(0,0,0,.12); border-color: rgba(11,31,142,.3); } html.dark .client-card:hover { border-color: rgba(0,174,239,.3); } .client-name { font-size: 1.875rem; font-weight: 700; color: var(--text); margin-bottom: .75rem; transition: color .2s; } .client-card:hover .client-name { color: var(--blue); } html.dark .client-card:hover .client-name { color: var(--cyan); } .client-divider { width: 2rem; height: 2px; background: var(--cyan); margin-bottom: 1rem; } .client-detail { font-size: .875rem; color: var(--text-muted); line-height: 1.6; } /* ============================================================ CTA SECTION ============================================================ */ .cta-section { position: relative; background: linear-gradient(135deg, var(--navy-dark), var(--blue)); padding: 3.5rem 0; overflow: hidden; text-align: center; } @media (min-width: 768px) { .cta-section { padding: 7rem 0; } } .cta-glow { position: absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:800px; height:400px; background: rgba(0,174,239,.1); border-radius:50%; filter:blur(80px); pointer-events:none; } .cta-inner { position:relative; z-index:1; max-width:48rem; margin:0 auto; } .cta-icon { width:2.5rem; height:2.5rem; object-fit:contain; margin:0 auto 1.5rem; opacity:.8; } @media (min-width: 768px) { .cta-icon { width:3rem; height:3rem; margin-bottom:2rem; } } .cta-title { font-size:clamp(1.625rem,4vw,3rem); font-weight:700; color:var(--white); line-height:1.2; margin-bottom:1rem; } @media (min-width: 768px) { .cta-title { margin-bottom:1.5rem; } } .cta-desc { font-size:1rem; color:rgba(219,234,254,.6); line-height:1.6; margin-bottom:1.75rem; } @media (min-width: 768px) { .cta-desc { font-size:1.125rem; line-height:1.7; margin-bottom:2.5rem; } } .cta-btns { display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; } @media (max-width: 480px) { .cta-btns { flex-direction: column; } .cta-btns .btn { width: 100%; } } /* ============================================================ FOOTER ============================================================ */ .site-footer { background: var(--navy); color: var(--white); border-top: 1px solid rgba(255,255,255,.1); } .footer-inner { padding: 3.5rem 0; } .footer-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; } @media (min-width: 768px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } } .footer-brand-logo { display:flex; align-items:center; gap:.75rem; margin-bottom:1.25rem; } .footer-brand-logo img { width:36px; height:36px; object-fit:contain; } .footer-brand-logo span { font-size:1.5rem; font-weight:700; } .footer-tagline { font-size:.875rem; color:rgba(147,197,253,.7); line-height:1.65; max-width:22rem; margin-bottom:1.5rem; } .footer-socials { display:flex; gap:.75rem; } .footer-social { width:36px; height:36px; border-radius:.5rem; background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; transition:background .15s; } .footer-social:hover { background:rgba(255,255,255,.2); } .footer-col-title { font-size:.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:.15em; color:rgba(147,197,253,.6); margin-bottom:1rem; } .footer-links { display:flex; flex-direction:column; gap:.625rem; } .footer-links a { font-size:.875rem; color:rgba(219,234,254,.7); transition:color .15s; } .footer-links a:hover { color:var(--white); } .footer-links li { font-size:.875rem; color:rgba(219,234,254,.7); } .footer-bottom { border-top:1px solid rgba(255,255,255,.1); padding:1.5rem 0; display:flex; flex-direction:column; gap:.75rem; align-items:center; text-align:center; font-size:.75rem; color:rgba(219,234,254,.4); } @media (min-width:640px) { .footer-bottom { flex-direction:row; justify-content:space-between; text-align:left; } } /* ============================================================ PAGE HERO (inner pages) ============================================================ */ .page-hero { position: relative; background: linear-gradient(135deg, var(--navy-dark) 0%, var(--blue) 55%, var(--blue-mid) 100%); color: var(--white); overflow: hidden; padding: 3.5rem 0; } @media (min-width: 768px) { .page-hero { padding: 7rem 0; } } .page-hero h1 { font-size: clamp(2rem, 5vw, 3.75rem); font-weight: 700; line-height: 1.1; max-width: 42rem; margin-bottom: 1.5rem; } .page-hero-desc { font-size: clamp(1rem, 2vw, 1.25rem); color: rgba(219,234,254,.7); max-width: 40rem; line-height: 1.65; } /* ============================================================ SERVICES PAGE ============================================================ */ .services-full { padding: 4rem 0 6rem; background: var(--bg); transition: background .3s; } .services-full-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 640px) { .services-full-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .services-full-grid { grid-template-columns: repeat(3,1fr); } } .service-full-card { border: 1px solid var(--card-border); border-radius: var(--radius); padding: 2rem; background: var(--card-bg); transition: box-shadow .2s, border-color .2s; } .service-full-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,.1); border-color: rgba(0,174,239,.3); } .service-icon { width: 2.75rem; height: 2.75rem; background: rgba(0,174,239,.12); border-radius: .625rem; display: flex; align-items: center; justify-content: center; font-size: 1.375rem; margin-bottom: 1.25rem; } .service-full-title { font-size: 1.0625rem; font-weight: 700; color: var(--text); margin-bottom: .625rem; } .service-full-desc { font-size: .875rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 1.25rem; } .service-features { display: flex; flex-wrap: wrap; gap: .5rem; } .service-feature { font-size: .6875rem; background: var(--bg-muted); color: var(--text-muted); border: 1px solid var(--card-border); border-radius: 9999px; padding: .25rem .75rem; font-weight: 500; } /* ============================================================ ABOUT PAGE ============================================================ */ .about-story { padding: 4rem 0 5rem; background: var(--bg); transition: background .3s; } html.dark .about-story { background: #0b0f1e; } .about-story-grid { display:grid; grid-template-columns:1fr; gap:3rem; align-items:center; } @media (min-width:1024px) { .about-story-grid { grid-template-columns:1fr 1fr; gap:4rem; } } .about-story img { border-radius:var(--radius); box-shadow:0 24px 60px rgba(0,0,0,.12); width:100%; height:440px; object-fit:cover; } .values-section { padding: 4rem 0 5rem; background: var(--bg-muted); transition: background .3s; } html.dark .values-section { background: #0e1323; } .values-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; } @media (min-width:1024px) { .values-grid { grid-template-columns:repeat(4,1fr); } } .value-card { background: var(--card-bg); border-radius: var(--radius); border: 1px solid var(--card-border); padding: 1.75rem; } .value-icon { font-size: 1.75rem; margin-bottom: 1rem; } .value-title { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: .5rem; } .value-desc { font-size: .875rem; color: var(--text-muted); line-height: 1.6; } .achievements-section { padding: 4rem 0 5rem; background: var(--bg); transition: background .3s; } .achievements-grid { display:grid; grid-template-columns:1fr; gap:1rem; } @media (min-width:768px) { .achievements-grid { grid-template-columns:1fr 1fr; } } .achievement-item { display: flex; align-items: flex-start; gap: .875rem; padding: 1.25rem; background: var(--bg-muted); border-radius: .75rem; border: 1px solid var(--card-border); } .achievement-check { width:22px; height:22px; border-radius:50%; background:rgba(0,174,239,.15); border:1px solid rgba(0,174,239,.3); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--cyan); font-size:.75rem; font-weight:700; } .achievement-text { font-size:.9rem; color:var(--text); font-weight:500; } /* ============================================================ CONTACT PAGE ============================================================ */ .contact-section { padding: 4rem 0 6rem; background: var(--bg); transition: background .3s; } html.dark .contact-section { background: #0b0f1e; } .contact-grid { display:grid; grid-template-columns:1fr; gap:3rem; } @media (min-width:1024px) { .contact-grid { grid-template-columns:1fr 1.5fr; } } .contact-info { display:flex; flex-direction:column; gap:1.5rem; } .contact-info-item { display:flex; gap:1rem; align-items:flex-start; } .contact-info-icon { width:44px; height:44px; background:rgba(11,31,142,.08); border-radius:.625rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--blue); font-size:1.25rem; } html.dark .contact-info-icon { background:rgba(107,143,232,.15); color:#6b8fe8; } .contact-info-title { font-weight:700; color:var(--text); margin-bottom:.25rem; } .contact-info-val { font-size:.9rem; color:var(--text-muted); } .contact-info-val a { color:var(--blue); } html.dark .contact-info-val a { color:#6b8fe8; } .contact-form-wrap { background: var(--card-bg); border: 2px solid var(--card-border); border-radius: var(--radius); padding: 2.5rem; box-shadow: 0 8px 40px rgba(0,0,0,.06); } .form-row { display:grid; grid-template-columns:1fr; gap:1rem; margin-bottom:1rem; } @media (min-width:640px) { .form-row { grid-template-columns:1fr 1fr; } } .form-group { display:flex; flex-direction:column; gap:.375rem; margin-bottom:1rem; } .form-group label { font-size:.875rem; font-weight:600; color:var(--text); } .form-group input, .form-group textarea, .form-group select { padding: .6875rem 1rem; border: 1px solid var(--gray-200); border-radius: .5rem; font-size: .9375rem; font-family: var(--font); color: var(--text); background: var(--bg); outline: none; transition: border-color .15s, box-shadow .15s; width: 100%; } html.dark .form-group input, html.dark .form-group textarea, html.dark .form-group select { border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: var(--white); } .form-group input:focus, .form-group textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(11,31,142,.1); } .form-group textarea { resize:vertical; min-height:130px; } .form-success { display:none; text-align:center; padding:2rem; } .form-success.show { display:block; } .form-success h3 { color:#16a34a; font-size:1.25rem; font-weight:700; margin-bottom:.5rem; } .form-success p { color:var(--text-muted); } /* Contact page Why section */ .why-section { padding: 3rem 0 5rem; background: var(--bg-muted); transition: background .3s; } html.dark .why-section { background: #0e1323; } .why-grid { display:grid; grid-template-columns:1fr; gap:1.25rem; } @media (min-width:640px) { .why-grid { grid-template-columns:repeat(3,1fr); } } .why-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 2rem; text-align: center; transition: box-shadow .2s; } .why-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,.1); } .why-badge { width: 64px; height: 64px; background: var(--blue); color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; font-weight: 700; margin: 0 auto 1.25rem; } .why-title { font-size:1rem; font-weight:700; color:var(--text); margin-bottom:.5rem; } .why-desc { font-size:.875rem; color:var(--text-muted); line-height:1.6; } /* ============================================================ GENERIC PAGE CONTENT ============================================================ */ .wp-content { padding: 4rem 0; } .wp-content h1,.wp-content h2,.wp-content h3 { color:var(--text); font-weight:700; margin-bottom:1rem; margin-top:1.5rem; } .wp-content p { color:var(--text-muted); line-height:1.7; margin-bottom:1rem; } /* ============================================================ SCROLL REVEAL (added by JS) ============================================================ */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity .45s ease, transform .45s ease; } .reveal.visible { opacity: 1; transform: none; }