/* ========================================================================== OcomStudio - Main Stylesheet Design system: dark, premium, "AI innovation studio" ========================================================================== */ /* Fonts are linked from each page's rather than imported here. An @import cannot start until this file has itself been downloaded and parsed, so it queued the font CSS behind main.css and the font files behind that — three serial round trips before any text could paint. */ :root { /* Brand blue (kept from the existing identity) */ --primary-300: #99C2FF; --primary-400: #4D8DFF; --primary-500: #0066FF; --primary-600: #0052CC; --primary-700: #003D99; --secondary-500: #00C9FF; /* Surface system */ --bg: #05070D; --bg-alt: #090C14; --bg-elevated: #0B0F1C; --surface: rgba(255, 255, 255, 0.035); --surface-hover: rgba(255, 255, 255, 0.065); --border: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.2); /* Text */ --text: #ffffff; --text-soft: rgba(255, 255, 255, 0.62); --text-softer: rgba(255, 255, 255, 0.42); --text-faint: rgba(255, 255, 255, 0.26); /* Spacing */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4rem; /* Radius */ --radius-sm: 0.375rem; --radius-md: 0.625rem; --radius-lg: 1rem; --radius-xl: 1.5rem; --radius-2xl: 2rem; --radius-full: 9999px; /* Shadows / glow */ --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.35); --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.45); --shadow-blue: 0 10px 40px rgba(0, 102, 255, 0.25); --shadow-blue-lg: 0 20px 60px rgba(0, 102, 255, 0.3); /* Motion */ --transition-fast: 150ms ease; --transition-normal: 300ms cubic-bezier(0.16, 1, 0.3, 1); --transition-slow: 600ms cubic-bezier(0.16, 1, 0.3, 1); /* Type */ --font-sans: 'Inter', sans-serif; --font-display: 'Poppins', sans-serif; } /* ========================================================================== Base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font-sans); font-size: 16px; line-height: 1.65; color: var(--text-soft); background-color: var(--bg); overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 700; line-height: 1.1; color: var(--text); letter-spacing: -0.02em; } h1 { font-size: 3rem; } h2 { font-size: 2.25rem; } h3 { font-size: 1.5rem; } h4 { font-size: 1.25rem; } h5 { font-size: 1.125rem; } h6 { font-size: 1rem; } @media (max-width: 768px) { h1 { font-size: 2.25rem; } h2 { font-size: 1.75rem; } h3 { font-size: 1.25rem; } } p { margin-bottom: var(--space-md); } a { color: var(--primary-400); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--primary-300); } img { max-width: 100%; height: auto; display: block; } /* ========================================================================== Utilities ========================================================================== */ .gradient-text, .text-gradient { background: linear-gradient(90deg, var(--primary-400), var(--secondary-500)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .blue-gradient { background: linear-gradient(135deg, var(--primary-500), var(--secondary-500)); } .glass-effect { background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--border); } .blue-glow { box-shadow: 0 0 30px rgba(0, 102, 255, 0.35); } .container { width: 100%; max-width: 1440px; margin-left: auto; margin-right: auto; padding-left: var(--space-md); padding-right: var(--space-md); } @media (min-width: 768px) { .container { padding-left: var(--space-xl); padding-right: var(--space-xl); } } .section { padding-top: 2.75rem; padding-bottom: 2.75rem; } @media (min-width: 768px) { .section { padding-top: 7rem; padding-bottom: 7rem; } } /* Grid backdrop used behind hero / dark sections */ .grid-backdrop { position: absolute; inset: 0; opacity: 0.05; background-image: linear-gradient(rgba(255,255,255,.6) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.6) 1px, transparent 1px); background-size: 72px 72px; pointer-events: none; } .glow-orb { position: absolute; border-radius: 50%; filter: blur(120px); pointer-events: none; } /* ========================================================================== Hero media — looping background video + animated fallback ========================================================================== */ .hero-media { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } /* The video sits behind the copy and stays deliberately dim — the headline has to stay readable on every frame, including bright ones. */ .hero-media__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* Opacity deliberately lives in hero-video.js as an inline style, not here: this file can be served stale from a browser cache, and when it was, the video rendered at full strength and buried the headline. The inline value ships with the HTML, so it can never disagree with it. */ /* Hidden until it can actually play — a missing/failed file must never leave a black rectangle over the animated fallback. */ visibility: hidden; transition: opacity 1.2s ease; } .hero-media__video.is-playing { visibility: visible; } /* Where the footage sits inside the header. The copy is always left-aligned, so centred footage ends up competing with the headline while the right-hand side of the header sits empty. Narrow the video and anchor it right instead, feathering its left edge so the shift never reads as a seam. Below 1024px the header is one narrow column with no spare room, so it stays full-bleed. */ @media (min-width: 1024px) { .hero-media__video { left: auto; right: 0; width: 78%; -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 34%); mask-image: linear-gradient(to right, transparent 0%, #000 34%); } /* The home header is a full-height stage whose right half is genuinely empty, so it takes a harder push than the short inner headers. */ .hero-media--home .hero-media__video { width: 64%; -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 42%); mask-image: linear-gradient(to right, transparent 0%, #000 42%); } } /* Blog and contact centre their headline instead of ranging it left, so there is no empty flank to push the footage into — it stays centred under the copy, and the cover becomes symmetrical rather than weighted sideways. */ .hero-media--center .hero-media__video { left: 0; right: 0; width: 100%; -webkit-mask-image: none; mask-image: none; } .hero-media--center .hero-media__video.is-playing ~ .hero-media__scrim { background: linear-gradient(to bottom, rgba(5, 7, 13, 0.28) 0%, rgba(5, 7, 13, 0.46) 62%, #05070D 100%), radial-gradient(ellipse 60% 75% at 50% 45%, rgba(5, 7, 13, 0.72) 0%, rgba(5, 7, 13, 0.4) 55%, transparent 82%); } /* Scrim: keeps text contrast stable whatever the footage does. Kept light by default so the aurora colours still read when no video is present — it only darkens once a video is actually playing behind the copy. */ .hero-media__scrim { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 0%, rgba(5, 7, 13, 0.35) 70%, #05070D 100%); transition: background 1.2s ease; } /* Weighted sideways rather than evenly: the copy sits left and needs the cover, while the right-hand side now holds the footage and nothing else, so flattening it there only wasted the video. The vertical pass is kept light and exists mainly to land the header on the page background below it. */ .hero-media__video.is-playing ~ .hero-media__scrim { background: linear-gradient(to bottom, rgba(5, 7, 13, 0.22) 0%, rgba(5, 7, 13, 0.42) 62%, #05070D 100%), linear-gradient(to right, rgba(5, 7, 13, 0.88) 0%, rgba(5, 7, 13, 0.62) 38%, rgba(5, 7, 13, 0.2) 70%, transparent 88%); } /* Narrow screens never get the sideways placement — the video stays full-bleed under the copy, so it keeps the flat, heavier cover. */ @media (max-width: 1023px) { .hero-media__video.is-playing ~ .hero-media__scrim { background: linear-gradient(to bottom, rgba(5, 7, 13, 0.5) 0%, rgba(5, 7, 13, 0.7) 60%, #05070D 100%); } } /* Aurora: the "alive" layer that shows even with no video file at all. */ .hero-aurora { position: absolute; border-radius: 50%; filter: blur(100px); will-change: transform; } .hero-aurora--a { width: 700px; height: 700px; background: radial-gradient(circle, rgba(0, 102, 255, 0.85), transparent 68%); top: -18%; left: 8%; animation: aurora-drift-a 26s ease-in-out infinite; } .hero-aurora--b { width: 560px; height: 560px; background: radial-gradient(circle, rgba(0, 201, 255, 0.5), transparent 68%); top: 5%; right: 2%; animation: aurora-drift-b 32s ease-in-out infinite; } @keyframes aurora-drift-a { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(12%, 8%, 0) scale(1.12); } } @keyframes aurora-drift-b { 0%, 100% { transform: translate3d(0, 0, 0) scale(1.08); } 50% { transform: translate3d(-10%, -10%, 0) scale(1); } } @media (prefers-reduced-motion: reduce) { .hero-aurora { animation: none; } } /* ========================================================================== Selection / Scrollbar ========================================================================== */ ::selection { background-color: var(--primary-500); color: white; } ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: #1c2740; border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: var(--primary-600); } /* ========================================================================== Loader ========================================================================== */ .loader { width: 20px; height: 20px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; display: inline-block; animation: rotation 0.8s linear infinite; } @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* ========================================================================== Fancy list (check bullets) ========================================================================== */ .fancy-list li { position: relative; padding-left: 1.9rem; margin-bottom: 0.75rem; color: var(--text-soft); } .fancy-list li::before { content: ''; position: absolute; left: 0; top: 0.15rem; width: 1.25rem; height: 1.25rem; background: linear-gradient(135deg, var(--primary-400), var(--primary-600)); border-radius: 50%; box-shadow: 0 3px 12px rgba(0, 102, 255, 0.35); } .fancy-list li::after { content: '\f00c'; font-family: 'Font Awesome 5 Free'; font-weight: 900; position: absolute; left: 0.36rem; top: 0.32rem; font-size: 0.6rem; color: white; } /* ========================================================================== Reveal on scroll ========================================================================== */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .reveal.in-view { opacity: 1; transform: translateY(0); } .reveal-stagger.in-view > * { animation: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } @media (scripting: none) { .reveal { opacity: 1; transform: none; transition: none; } } /* On narrow viewports the page is already long (many stacked sections) — fading content in only once scrolled-to reads as "nothing is loading". Show everything immediately on mobile; keep the effect for desktop. */ @media (max-width: 767px) { .reveal { opacity: 1; transform: none; transition: none; } } /* ========================================================================== Responsive helpers ========================================================================== */ .hidden { display: none !important; } @media (max-width: 767px) { .md\:hidden { display: none !important; } } @media (min-width: 768px) { .md\:block { display: block !important; } .md\:flex { display: flex !important; } } @media (min-width: 1280px) { .xl\:block { display: block !important; } .xl\:flex { display: flex !important; } } @media (min-width: 1536px) { .\32xl\:block { display: block !important; } } @media (min-width: 1024px) { .lg\:block { display: block !important; } .lg\:flex { display: flex !important; } }