/* Theme Name: Briskcovey Custom Theme Theme URI: https://briskcovey.com Author: Briskcovey Team Author URI: https://briskcovey.com Description: Production-ready custom WordPress theme for Briskcovey Technologies - Enterprise AI Solutions and Rapid Engineering. Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: briskcovey Tags: custom-theme, ai, enterprise, responsive-layout, dark-mode, gsap */ /* CSS Reset & Variable Definitions */ :root { --background: 240 10% 3.9%; --foreground: 0 0% 98%; --card: 240 10% 3.9%; --card-foreground: 0 0% 98%; --popover: 240 10% 3.9%; --popover-foreground: 0 0% 98%; --primary: 194 100% 50%; /* #00C2FF */ --primary-foreground: 194 100% 8%; --secondary: 240 3.7% 15.9%; --secondary-foreground: 0 0% 98%; --muted: 240 3.7% 15.9%; --muted-foreground: 240 5% 64.9%; --accent: 240 3.7% 15.9%; --accent-foreground: 0 0% 98%; --destructive: 0 72.2% 50.6%; --destructive-foreground: 0 0% 98%; --border: 240 3.7% 15.9%; --input: 240 3.7% 15.9%; --ring: 194 100% 50%; --radius: 0.75rem; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border-color: hsl(var(--border)); } html, body { background-color: #04070D; color: hsl(var(--foreground)); font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.5; } /* Clip horizontal overflow at the root only. Setting overflow-x on (a non-root element) forces its paired overflow-y to compute as `auto` per the CSS overflow spec, silently turning body into its own scroll container and breaking `position: sticky` for every descendant. Scoping the clip to avoids that while still preventing horizontal scroll. */ html { overflow-x: hidden; } /* Glassmorphism & UI Utilities */ .glass-panel { background-color: rgba(4, 7, 13, 0.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.3); } .glass-panel-hover { transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .glass-panel-hover:hover { background-color: rgba(15, 23, 42, 0.85); border-color: rgba(0, 194, 255, 0.3); box-shadow: 0 10px 30px -5px rgba(0, 194, 255, 0.15); } .text-gradient-primary { background: linear-gradient(135deg, hsl(var(--primary)) 0%, #38bdf8 50%, #3b82f6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .bg-gradient-radial-dark { background: radial-gradient(circle at 50% 50%, rgba(0, 194, 255, 0.12) 0%, transparent 70%); } .glow-effect { box-shadow: 0 0 40px -5px rgba(0, 194, 255, 0.25); } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: #04070D; } ::-webkit-scrollbar-thumb { background: hsl(var(--muted)); border-radius: 9999px; } ::-webkit-scrollbar-thumb:hover { background: hsl(var(--primary) / 0.5); } /* Page Transition */ .page-transition { animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* Header and homepage hero */ .bc-site-header { position: sticky; top: 0; left: 0; z-index: 50; width: 100%; background: rgba(4, 7, 13, 0.88); border-bottom: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .home .bc-site-header, .front-page .bc-site-header { position: absolute; background: linear-gradient(180deg, rgba(3, 8, 15, 0.72), rgba(3, 8, 15, 0)); border-bottom: 0; backdrop-filter: none; -webkit-backdrop-filter: none; } .bc-header-inner { width: min(100% - 48px, 1256px); height: 92px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 28px; } .bc-site-logo { display: inline-flex; align-items: center; flex: 0 0 auto; line-height: 0; } .bc-site-logo img, .bc-site-logo .custom-logo { display: block; width: auto; height: 42px; max-width: 190px; object-fit: contain; } .bc-primary-nav { display: flex; align-items: center; justify-content: center; gap: clamp(18px, 3vw, 42px); flex: 1 1 auto; } .bc-primary-nav a, .bc-mobile-nav a { color: rgba(255, 255, 255, 0.78); text-decoration: none; font-weight: 700; letter-spacing: -0.01em; transition: color 180ms ease, opacity 180ms ease; } .bc-primary-nav a { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; white-space: nowrap; } .bc-primary-nav a:hover, .bc-mobile-nav a:hover { color: #00c2ff; } .bc-primary-nav svg { width: 14px; height: 14px; stroke-width: 2.2; opacity: 0.72; } .bc-header-actions { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; } .bc-header-cta { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 24px; border-radius: 999px; background: #00c2ff; color: #021019; text-decoration: none; font-size: 13px; font-weight: 800; box-shadow: 0 18px 40px rgba(0, 194, 255, 0.28); transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease; } .bc-header-cta:hover { background: #28d0ff; transform: translateY(-1px); box-shadow: 0 20px 46px rgba(0, 194, 255, 0.38); } .bc-header-cta svg { width: 15px; height: 15px; stroke-width: 2.6; } .bc-mobile-toggle { display: none; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: #fff; cursor: pointer; } .bc-mobile-toggle svg { width: 21px; height: 21px; } .bc-mobile-drawer { position: fixed; inset: 0; z-index: 80; padding: 24px; background: rgba(4, 7, 13, 0.96); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); flex-direction: column; justify-content: space-between; } .bc-mobile-drawer.hidden { display: none; } .bc-mobile-drawer.flex { display: flex; } .bc-mobile-drawer-top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .bc-mobile-nav { display: flex; flex-direction: column; gap: 2px; padding-top: 22px; } .bc-mobile-nav a { display: block; padding: 15px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); font-size: 18px; } .bc-mobile-drawer-bottom { padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.12); } .bc-mobile-drawer-bottom .bc-header-cta { width: 100%; } .bc-hero { position: relative; min-height: 650px; display: flex; align-items: center; overflow: hidden; background: #04070d; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .bc-hero-bg, .bc-hero-shade { position: absolute; inset: 0; } .bc-hero-bg { background-position: center right; background-size: cover; } .bc-hero-bg video { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center right; } .bc-hero-shade { background: linear-gradient(90deg, rgba(4, 7, 13, 0.98) 0%, rgba(4, 7, 13, 0.82) 38%, rgba(4, 7, 13, 0.42) 70%, rgba(4, 7, 13, 0.7) 100%), linear-gradient(180deg, rgba(4, 7, 13, 0.22) 0%, rgba(4, 7, 13, 0.85) 100%); } .bc-hero-inner { position: relative; z-index: 2; width: min(100% - 48px, 1256px); margin: 0 auto; padding-top: 140px; padding-bottom: 54px; } .bc-hero-badge { display: inline-flex; align-items: center; min-height: 26px; padding: 0 13px; border: 1px solid rgba(0, 194, 255, 0.75); border-radius: 999px; color: #00c2ff; background: rgba(0, 194, 255, 0.06); font-size: 12px; font-weight: bold; letter-spacing: 0.25em; line-height: 1; text-transform: uppercase; } .bc-hero-title { max-width: 760px; margin: 24px 0 18px; color: #fff; font-size: clamp(54px, 6.4vw, 72px); font-weight: 900; line-height: 1.1; letter-spacing: 0; text-transform: uppercase; } .bc-hero-spark { position: relative; display: inline-block; width: 0.58em; height: 0.58em; margin-left: 14px; transform: translateY(-0.06em); filter: drop-shadow(0 0 18px rgba(0, 194, 255, 0.8)); } .bc-hero-spark::before, .bc-hero-spark::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: 100%; height: 22%; border-radius: 999px; background: #00c2ff; transform: translate(-50%, -50%) rotate(0deg); } .bc-hero-spark::after { transform: translate(-50%, -50%) rotate(90deg); } .bc-hero-copy { max-width: 672px; margin: 0; color: rgba(235, 242, 250, 0.86); font-size: clamp(18px, 1.55vw, 18px); font-weight: 400; line-height: 1.75; } .bc-hero-actions { display: flex; align-items: center; gap: 22px; margin-top: 38px; } .bc-hero-primary, .bc-hero-arrow { display: inline-flex; align-items: center; justify-content: center; height: 49px; border-radius: 999px; background: #00c2ff; color: #021019; text-decoration: none; font-weight: 900; box-shadow: 0 18px 44px rgba(0, 194, 255, 0.26); } .bc-hero-primary { min-width: 224px; padding: 0 30px; font-size: 14px; } .bc-hero-arrow { width: 49px; flex: 0 0 49px; } .bc-hero-arrow svg { width: 19px; height: 19px; stroke-width: 2.4; } .bc-hero-pill { width: 224px; height: 54px; display: block; overflow: hidden; border: 1px solid rgba(0, 194, 255, 0.24); border-radius: 999px; background: rgba(4, 7, 13, 0.8); } .bc-hero-pill img { width: 100%; height: 100%; display: block; object-fit: cover; } .bc-hero-compass { position: absolute; left: 20px; bottom: 21px; z-index: 2; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 50%; color: rgba(255, 255, 255, 0.78); font-family: Georgia, serif; font-size: 19px; line-height: 1; } .bc-hero-stats { display: grid; grid-template-columns: repeat(4, minmax(130px, 156px)); gap: 16px; margin-top: 66px; } .bc-hero-stat { min-height: 80px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 9px; background: rgba(18, 23, 31, 0.78); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .bc-hero-stat strong { color: #5f93ff; font-size: 32px; font-weight: 900; line-height: 1; letter-spacing: 0; } .bc-hero-stat span { margin-top: 6px; color: rgba(241, 246, 255, 0.84); font-size: 12px; font-weight: 700; } .bc-services-section { position: relative; overflow: hidden; padding: 88px 0 106px; background: #050a12; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .bc-services-inner { width: min(100% - 48px, 1248px); margin: 0 auto; } .bc-services-header { max-width: 660px; margin: 0 auto; text-align: center; } .bc-section-badge { display: inline-flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 15px; border: 1px solid rgba(0, 194, 255, 0.42); border-radius: 999px; background: rgba(0, 194, 255, 0.1); color: #00c2ff; font-size: 12px; font-weight: 900; letter-spacing: 0.1em; line-height: 1; text-transform: uppercase; } .bc-section-badge svg { width: 15px; height: 15px; stroke-width: 2.4; } .bc-services-header h2 { margin: 24px 0 0; color: #fff; font-size: clamp(36px, 4vw, 48px); font-weight: 900; line-height: 1.15; letter-spacing: -0.02em; } .bc-services-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 68px; } .bc-service-card { min-height: 286px; display: flex; flex-direction: column; padding: 32px; border: 1px solid rgba(255, 255, 255, 0.11); border-radius: 14px; background: rgba(11, 17, 29, 0.92); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); transition: transform 180ms ease, border-color 180ms ease, background 180ms ease; } .bc-service-card:hover { transform: translateY(-3px); border-color: rgba(0, 194, 255, 0.36); background: rgba(13, 21, 35, 0.98); } .bc-service-icon { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 28px; border: 1px solid rgba(0, 194, 255, 0.48); border-radius: 12px; background: rgba(0, 194, 255, 0.11); color: #00c2ff; } .bc-service-icon svg { width: 22px; height: 22px; stroke-width: 2.25; } .bc-service-card h3 { margin: 0; color: #fff; font-size: 17px; font-weight: 900; line-height: 1.28; letter-spacing: -0.02em; } .bc-service-card p { margin: 24px 0 24px; color: #94a3b8; font-size: 14px; font-weight: normal; line-height: 1.35; } .bc-service-card a { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, 0.1); color: #00c2ff; text-decoration: none; font-size: 12px; font-weight: 900; letter-spacing: 0.02em; text-transform: uppercase; } .bc-service-card a svg { width: 15px; height: 15px; stroke-width: 2.4; } @media (max-width: 980px) { .bc-header-inner { width: min(100% - 32px, 1256px); height: 78px; } .bc-primary-nav, .bc-header-actions .bc-header-cta { display: none; } .bc-mobile-toggle { display: grid; } .bc-site-logo img, .bc-site-logo .custom-logo { height: 38px; max-width: 176px; } .bc-hero { min-height: 720px; } .bc-hero-inner { width: min(100% - 32px, 1256px); padding-top: 92px; padding-bottom: 42px; } .bc-hero-bg { background-position: 62% center; } .bc-hero-shade { background: linear-gradient(90deg, rgba(4, 7, 13, 0.98) 0%, rgba(4, 7, 13, 0.82) 62%, rgba(4, 7, 13, 0.55) 100%), linear-gradient(180deg, rgba(4, 7, 13, 0.12) 0%, rgba(4, 7, 13, 0.9) 100%); } .bc-hero-stats { grid-template-columns: repeat(2, minmax(130px, 1fr)); max-width: 520px; margin-top: 46px; } .bc-services-section { padding: 76px 0 88px; } .bc-services-inner { width: min(100% - 32px, 1248px); } .bc-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 48px; } } @media (max-width: 640px) { .bc-header-inner { width: min(100% - 28px, 1256px); } .bc-site-logo img, .bc-site-logo .custom-logo { height: 34px; max-width: 158px; } .bc-hero { min-height: 780px; } .bc-hero-inner { width: min(100% - 28px, 1256px); padding-top: 84px; } .bc-hero-badge { max-width: 100%; font-size: 10px; letter-spacing: 0.24em; } .bc-hero-title { margin-top: 24px; font-size: clamp(40px, 11vw, 58px); line-height: 0.98; } .bc-hero-copy { font-size: 16px; } .bc-hero-actions { align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-top: 30px; } .bc-hero-primary { min-width: min(100%, 250px); } .bc-hero-pill { width: 178px; height: 48px; } .bc-hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 38px; } .bc-hero-stat { min-height: 74px; } .bc-hero-stat strong { font-size: 27px; } .bc-hero-compass { display: none; } .bc-services-section { padding: 64px 0 72px; } .bc-services-inner { width: min(100% - 28px, 1248px); } .bc-services-header { text-align: left; } .bc-services-header h2 { font-size: clamp(28px, 10vw, 28px); } .bc-services-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 36px; } .bc-service-card { min-height: 266px; padding: 28px; } } /* ========================================================================== Scroll-Reveal Animations (GSAP + ScrollTrigger, driven by assets/js/main.js) ========================================================================== */ /* Visible by default: no-JS / GSAP-load-failure fallback. Only hidden once `html.js` confirms JS ran, so content never gets stuck invisible. */ .scroll-reveal, .scroll-reveal-item { opacity: 1; } html.js .scroll-reveal, html.js .scroll-reveal-item { opacity: 0; /* transform is set inline by GSAP right before animating; this only prevents a pre-JS flash of the final (visible) state. */ } /* Respect reduced-motion at the CSS layer too, as a safety net alongside the JS-level check in main.js. */ @media (prefers-reduced-motion: reduce) { html.js .scroll-reveal, html.js .scroll-reveal-item { opacity: 1; } } /* Transformation section: pinned sequential card reveal (see main.js). Only the first card starts visible; the rest are hidden pre-animation so there's no flash of all-cards-visible before GSAP sets their positions. */ /* html.js [data-pin-reveal] .bc-service-card:not(:first-child) { opacity: 0; } */ @media (prefers-reduced-motion: reduce) { html.js [data-pin-reveal] .bc-service-card:not(:first-child) { opacity: 1; } }