/* ============================================================ style.css — Orient Pearl Digital LLC 1) Color variables (edit these to change the whole theme) 2) Base + typography 3) Buttons 4) Header + mobile menu 5) Hero + visual 6) Marquee 7) Sections + shared cards 8) Section-specific styles 9) Footer 10) Consultation popup 11) Responsive + reduced motion ============================================================ */ /* ---------- 1) COLOR VARIABLES ---------- */ :root { --bg-main: #030812; --bg-secondary: #07111F; --card-bg: #0B1727; --card-elevated: #0E1D30; --cyan: #22D3EE; --cyan-bright: #67E8F9; --blue: #3B82F6; --blue-deep: #1D4ED8; --text-main: #F8FAFC; --text-secondary: #94A3B8; --text-muted: #64748B; --card-border: rgba(148, 163, 184, 0.16); --cyan-border: rgba(34, 211, 238, 0.28); --cyan-glow: rgba(34, 211, 238, 0.16); /* themed surfaces that aren't a plain solid colour */ --header-bg: rgba(3, 8, 18, 0.75); --mobile-bg: rgba(3, 8, 18, 0.95); } /* ---------- LIGHT THEME (applied when ) ---------- */ /* Every rule uses these variables, so overriding them here re-themes the whole site. Accents are darkened slightly so they stay readable on light. */ html[data-theme="light"] { --bg-main: #EEF3F9; --bg-secondary: #FFFFFF; --card-bg: #FFFFFF; --card-elevated: #FFFFFF; --cyan: #0891B2; /* darker so accents/text read on light */ --cyan-bright: #06B6D4; --blue: #2563EB; --blue-deep: #1D4ED8; --text-main: #0B1727; --text-secondary: #475569; --text-muted: #64748B; --card-border: rgba(15, 23, 42, 0.10); --cyan-border: rgba(8, 145, 178, 0.35); --cyan-glow: rgba(34, 211, 238, 0.18); --header-bg: rgba(255, 255, 255, 0.80); --mobile-bg: rgba(255, 255, 255, 0.95); } /* keep the ambient background gentle on light */ html[data-theme="light"] .page-orb { opacity: 0.12; } html[data-theme="light"] .page-dot { opacity: 0.22; } /* ---------- 2) BASE + TYPOGRAPHY ---------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 90px; /* stops the sticky header covering anchors */ } body { margin: 0; background-color: var(--bg-main); color: var(--text-secondary); font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; /* no horizontal scroll ever */ } /* Smooth colour changes when switching between light and dark themes */ * { transition: background-color .4s ease, color .4s ease, border-color .4s ease; } /* ---------- PRELOADER (branded loading screen) ---------- */ .preloader { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; background: var(--bg-main); transition: opacity .5s ease, visibility .5s ease; } .preloader.loaded { opacity: 0; visibility: hidden; pointer-events: none; } .preloader-inner { display: flex; flex-direction: column; align-items: center; gap: 22px; } .preloader-logo { height: 52px; width: auto; } .preloader-spinner { width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--card-border); border-top-color: var(--cyan); border-right-color: var(--blue); box-shadow: 0 0 20px var(--cyan-glow); animation: spin 0.9s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ---------- CUSTOM SCROLLBAR (gradient that shifts on scroll) ---------- */ /* --sb-top and --sb-bottom are updated by main.js as you scroll, so the gradient smoothly travels through the theme's cyan and blue shades. */ :root { --sb-top: #67E8F9; --sb-bottom: #3B82F6; } /* Firefox (no gradient on the thumb, so it follows --sb-top) */ html { scrollbar-width: thin; scrollbar-color: var(--sb-top) var(--bg-secondary); } /* Chrome, Edge, Safari (and inner scroll areas like the popup form) */ ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: var(--bg-secondary); border-left: 1px solid var(--card-border); } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--sb-top), var(--sb-bottom)); border-radius: 999px; border: 3px solid var(--bg-secondary); /* inset padding makes the pill look slim */ box-shadow: 0 0 8px var(--cyan-glow); } ::-webkit-scrollbar-thumb:hover { box-shadow: 0 0 14px rgba(34, 211, 238, 0.5); } ::-webkit-scrollbar-corner { background: var(--bg-secondary); } .font-heading { font-family: 'Manrope', system-ui, sans-serif; } /* Simple color helper classes */ .text-main { color: var(--text-main); } .text-secondary { color: var(--text-secondary); } .text-muted { color: var(--text-muted); } .text-cyan { color: var(--cyan); } /* Cyan gradient text (used to highlight words) */ .text-gradient { background: linear-gradient(90deg, var(--cyan), var(--blue)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---------- HEADINGS: capitalised (UPPERCASE) across the whole site ---------- */ /* One place controls every section/card heading. To switch to Title Case instead, change `uppercase` to `capitalize`. */ .hero-title, .section-title, .service-title, .process-title, .price-title, .why-title, .footer-title { text-transform: uppercase; letter-spacing: 0.01em; } /* ---------- 3) BUTTONS ---------- */ .btn-primary { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 10px; font-size: 14px; font-weight: 600; color: #ffffff; /* white text (easy to read) */ background: linear-gradient(90deg, var(--cyan), var(--blue), var(--cyan)); background-size: 200% 100%; /* wider gradient so it can glide */ background-position: 0% 0; box-shadow: 0 8px 24px var(--cyan-glow); transition: background-position .6s ease, transform .25s ease, box-shadow .25s ease; cursor: pointer; border: none; text-decoration: none; } /* Smooth hover: the gradient glides across, the button lifts and glows */ .btn-primary:hover { background-position: 100% 0; transform: translateY(-2px) scale(1.02); box-shadow: 0 14px 34px rgba(34, 211, 238, 0.38); } .btn-primary:active { transform: translateY(0) scale(0.99); } .btn-secondary { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--text-main); /* adapts to light/dark for readability */ background: transparent; border: 1px solid var(--card-border); transition: border-color .25s ease, background .25s ease, transform .25s ease, box-shadow .25s ease; cursor: pointer; text-decoration: none; } /* Smooth hover: cyan border, soft cyan fill, gentle lift and glow */ .btn-secondary:hover { border-color: var(--cyan); background: rgba(34, 211, 238, 0.08); transform: translateY(-2px); box-shadow: 0 10px 26px var(--cyan-glow); } .btn-secondary:active { transform: translateY(0); } /* ---------- 3b) CUSTOM CURSOR (desktop mouse only) ---------- */ /* A small cyan dot sits on the pointer; a larger ring trails behind it. The ring grows and glows when hovering links and buttons. main.js creates these elements and moves them. */ .cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; border-radius: 999px; pointer-events: none; /* never blocks clicks */ z-index: 9999; transform: translate(-50%, -50%); opacity: 0; /* fades in on first mouse move */ } .cursor-dot { width: 7px; height: 7px; background: var(--cyan); transition: opacity .3s ease; } .cursor-ring { width: 34px; height: 34px; border: 1.5px solid var(--cyan-border); transition: width .25s ease, height .25s ease, background .25s ease, border-color .25s ease, opacity .3s ease; } /* Ring grows + glows over clickable things */ .cursor-ring.cursor-hover { width: 54px; height: 54px; background: var(--cyan-glow); border-color: var(--cyan); } /* Hide the native arrow while the custom cursor is active... */ body.custom-cursor-active, body.custom-cursor-active * { cursor: none !important; } /* ...but keep a normal text caret inside form fields */ body.custom-cursor-active input, body.custom-cursor-active textarea, body.custom-cursor-active select { cursor: auto !important; } /* ---------- 4) HEADER + MOBILE MENU ---------- */ .site-header { transition: background .3s ease, border-color .3s ease; border-bottom: 1px solid transparent; } .site-header.scrolled { background: var(--header-bg); backdrop-filter: blur(12px); border-bottom: 1px solid var(--card-border); } .nav-link { font-size: 14px; color: var(--text-secondary); text-decoration: none; transition: color .2s ease; } .nav-link:hover { color: var(--text-main); } .nav-link.active { color: var(--cyan); } .mobile-menu { background: var(--mobile-bg); backdrop-filter: blur(12px); border-bottom: 1px solid var(--card-border); } .mobile-link { padding: 14px 4px; font-size: 15px; color: var(--text-secondary); text-decoration: none; border-bottom: 1px solid var(--card-border); } .mobile-link:hover { color: var(--text-main); } .mobile-link.active { color: var(--cyan); } /* ---------- BRAND LOGO (larger, theme-aware, no text label) ---------- */ .brand-logo { height: 42px; width: auto; display: block; } .logo-light { display: none; } /* dark theme shows logo-main */ html[data-theme="light"] .logo-dark { display: none; } /* light theme shows logo-light */ html[data-theme="light"] .logo-light { display: block; } /* ---------- 5) HERO + VISUAL ---------- */ .hero { position: relative; overflow: hidden; background: transparent; } /* faint technical grid */ .hero-grid-bg { position: absolute; inset: 0; background-image: linear-gradient(var(--card-border) 1px, transparent 1px), linear-gradient(90deg, var(--card-border) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(circle at 60% 30%, #000 0%, transparent 70%); -webkit-mask-image: radial-gradient(circle at 60% 30%, #000 0%, transparent 70%); opacity: .5; } /* soft cyan light */ .hero-glow { position: absolute; top: -120px; right: -80px; width: 520px; height: 520px; background: radial-gradient(circle, var(--cyan-glow), transparent 70%); filter: blur(20px); pointer-events: none; } /* ---------- HERO ANIMATED BACKGROUND (pulsing rings + drifting dots) ---------- */ /* Sits behind the hero content (z-10) and never blocks clicks or text. Kept faint on purpose so it decorates without hurting readability. */ .hero-particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; /* above grid/glow, below the content */ } /* Slow pulsing concentric rings (top-right, behind the visual) */ .hero-ring { position: absolute; border: 1px solid var(--cyan-border); border-radius: 999px; opacity: 0; animation: ring-pulse 9s ease-out infinite; } .hero-ring-1 { width: 320px; height: 320px; top: 12%; right: 8%; animation-delay: 0s; } .hero-ring-2 { width: 460px; height: 460px; top: 4%; right: 2%; animation-delay: 3s; } .hero-ring-3 { width: 600px; height: 600px; top: -6%; right: -6%; animation-delay: 6s; } @keyframes ring-pulse { 0% { transform: scale(0.75); opacity: 0; } 30% { opacity: 0.45; } 100% { transform: scale(1.15); opacity: 0; } } /* Drifting dots spread across the hero */ .hero-dot { position: absolute; width: 5px; height: 5px; border-radius: 999px; background: var(--cyan); opacity: 0.35; box-shadow: 0 0 8px var(--cyan-glow); animation: dot-drift 12s ease-in-out infinite; } /* Each dot gets its own position, size, speed and delay */ .hero-dot:nth-child(4) { top: 20%; left: 12%; animation-duration: 11s; animation-delay: 0s; } .hero-dot:nth-child(5) { top: 68%; left: 22%; animation-duration: 14s; animation-delay: 1.5s; width: 4px; height: 4px; } .hero-dot:nth-child(6) { top: 40%; left: 46%; animation-duration: 13s; animation-delay: 3s; } .hero-dot:nth-child(7) { top: 78%; left: 58%; animation-duration: 15s; animation-delay: 2s; width: 6px; height: 6px; } .hero-dot:nth-child(8) { top: 16%; left: 70%; animation-duration: 12s; animation-delay: 4s; } .hero-dot:nth-child(9) { top: 55%; left: 82%; animation-duration: 16s; animation-delay: 1s; width: 4px; height: 4px; } .hero-dot:nth-child(10) { top: 30%; left: 88%; animation-duration: 13s; animation-delay: 5s; } .hero-dot:nth-child(11) { top: 88%; left: 40%; animation-duration: 14s; animation-delay: 2.5s; } .hero-dot:nth-child(12) { top: 8%; left: 34%; animation-duration: 12s; animation-delay: 3.5s; width: 4px; height: 4px; } @keyframes dot-drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(10px, -26px); } } /* ---------- PAGE-WIDE AMBIENT BACKGROUND (connects every section) ---------- */ /* One fixed layer sits behind the whole page. Because the sections are transparent, this continuous field shows through from top to bottom, so the homepage reads as one connected surface instead of separate blocks. It never blocks clicks and stays faint to protect readability. */ .page-bg { position: fixed; inset: 0; z-index: -1; /* behind all content, above the body colour */ overflow: hidden; pointer-events: none; } /* Big, soft, slowly drifting light orbs (the connective element) */ .page-orb { position: absolute; border-radius: 999px; filter: blur(70px); opacity: 0.16; } .page-orb-1 { width: 480px; height: 480px; top: -6%; left: -6%; background: radial-gradient(circle, var(--cyan), transparent 70%); animation: orb-float-1 34s ease-in-out infinite; } .page-orb-2 { width: 560px; height: 560px; top: 35%; right: -10%; background: radial-gradient(circle, var(--blue), transparent 70%); animation: orb-float-2 40s ease-in-out infinite; } .page-orb-3 { width: 420px; height: 420px; bottom: -8%; left: 30%; background: radial-gradient(circle, var(--cyan), transparent 70%); animation: orb-float-3 30s ease-in-out infinite; } @keyframes orb-float-1 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(60px, 40px); } } @keyframes orb-float-2 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-70px, -30px); } } @keyframes orb-float-3 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(30px, -50px); } } /* A faint field of drifting dots across the whole viewport (reuses the hero's dot-drift animation for a consistent feel) */ .page-dot { position: absolute; width: 4px; height: 4px; border-radius: 999px; background: var(--cyan); opacity: 0.28; animation: dot-drift 14s ease-in-out infinite; } .page-dot:nth-child(4) { top: 14%; left: 8%; animation-duration: 13s; animation-delay: 0s; } .page-dot:nth-child(5) { top: 26%; left: 62%; animation-duration: 16s; animation-delay: 2s; } .page-dot:nth-child(6) { top: 44%; left: 24%; animation-duration: 15s; animation-delay: 1s; } .page-dot:nth-child(7) { top: 58%; left: 78%; animation-duration: 18s; animation-delay: 3s; } .page-dot:nth-child(8) { top: 70%; left: 40%; animation-duration: 14s; animation-delay: 2.5s; } .page-dot:nth-child(9) { top: 82%; left: 14%; animation-duration: 17s; animation-delay: 1.5s; } .page-dot:nth-child(10) { top: 88%; left: 66%; animation-duration: 15s; animation-delay: 4s; } .page-dot:nth-child(11) { top: 34%; left: 90%; animation-duration: 16s; animation-delay: 0.5s; } .eyebrow { display: inline-block; font-size: 13px; font-weight: 600; color: var(--cyan); letter-spacing: .04em; margin-bottom: 18px; } .hero-title { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: clamp(2rem, 4.2vw, 3.2rem); line-height: 1.07; letter-spacing: -0.015em; /* tighter tracking keeps it to 3 lines max */ color: var(--text-main); margin: 0; } .hero-desc { font-size: clamp(1rem, 1.4vw, 1.15rem); color: var(--text-secondary); margin-top: 22px; max-width: 34rem; } .hero-trust { font-size: 13px; color: var(--text-muted); margin-top: 26px; letter-spacing: .02em; } /* glass cards (used in many places) */ .glass-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 16px; transition: transform .25s ease, border-color .25s ease, background-color .4s ease; } .hero-visual .glass-card { background: var(--card-elevated); } /* circular progress ring in hero */ .ring-bg { fill: none; stroke: var(--card-border); stroke-width: 3; } .ring-fill { fill: none; stroke: var(--cyan); stroke-width: 3; stroke-linecap: round; transform: rotate(-90deg); transform-origin: center; } /* ---------- 5b) HERO DESIGN STAGE (live website-building visual) ---------- */ .hero-visual { perspective: 1000px; } /* gives the tilt real depth */ .design-stage { position: relative; transform-style: preserve-3d; transition: transform .35s ease; /* smooth return after tilt */ will-change: transform; } /* Browser window */ .browser-window { position: relative; background: var(--card-elevated); border: 1px solid var(--card-border); border-radius: 16px; overflow: hidden; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45); } .browser-bar { display: flex; align-items: center; gap: 7px; padding: 12px 14px; background: var(--bg-secondary); border-bottom: 1px solid var(--card-border); } .browser-bar .dot { width: 10px; height: 10px; border-radius: 999px; } .dot-red { background: #ef4444; } .dot-amber { background: #f59e0b; } .dot-green { background: #22c55e; } .browser-url { flex: 1; margin-left: 10px; font-size: 11px; color: var(--text-muted); background: var(--bg-main); border: 1px solid var(--card-border); border-radius: 6px; padding: 5px 10px; } .browser-body { position: relative; padding: 18px; min-height: 252px; } /* The pieces of the "website" that build in one by one */ .build-banner { height: 62px; border-radius: 10px; background: linear-gradient(120deg, var(--cyan), var(--blue)); margin-bottom: 14px; } .build-line { height: 12px; border-radius: 6px; background: var(--card-border); margin-bottom: 10px; } .build-line-lg { width: 75%; background: rgba(148, 163, 184, 0.35); } .build-line-md { width: 55%; } .build-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0; } .build-card { height: 54px; border-radius: 10px; background: var(--card-bg); border: 1px solid var(--card-border); } .build-btn { display: inline-block; margin-top: 6px; padding: 9px 16px; border-radius: 8px; font-size: 12px; font-weight: 600; color: #fff; background: linear-gradient(90deg, var(--cyan), var(--blue)); } /* Fake designer cursor inside the browser */ .design-cursor { position: absolute; top: 74px; left: 26px; color: var(--text-main); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45)); pointer-events: none; } .design-cursor svg { width: 20px; height: 20px; } /* Floating palette card (top-right) */ .tool-card { position: absolute; top: -22px; right: -8px; display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--card-bg); border: 1px solid var(--cyan-border); border-radius: 12px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35); animation: float-soft 5s ease-in-out infinite; } .tool-swatch { width: 16px; height: 16px; border-radius: 5px; } .tool-swatch.sw1 { background: var(--cyan); } .tool-swatch.sw2 { background: var(--blue); } .tool-swatch.sw3 { background: #a78bfa; } .tool-label { font-size: 11px; color: var(--text-secondary); } /* Floating mobile/responsive card (bottom-left) */ .device-card { position: absolute; bottom: -22px; left: -12px; width: 74px; padding: 12px 10px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 14px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35); animation: float-soft 6s ease-in-out infinite reverse; } .device-line { height: 7px; border-radius: 4px; background: var(--card-border); margin-bottom: 7px; } .device-line.short { width: 60%; } .device-block { height: 30px; border-radius: 6px; background: linear-gradient(120deg, var(--cyan), var(--blue)); } /* gentle up-and-down float for the two small cards */ @keyframes float-soft { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } /* ---------- 5c) HERO GLOBE (rotating canvas) + floating labels ---------- */ .hero-globe { position: relative; width: 100%; max-width: 460px; aspect-ratio: 1 / 1; margin: 0 auto; } .globe-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } /* Orbiting service labels (built + cycled by main.js) */ .globe-labels { position: absolute; inset: 0; pointer-events: none; } .globe-labels.spin { animation: orbit-spin var(--orbit-dur, 72s) linear infinite; } .globe-labels.paused, .globe-labels.paused .globe-label { animation-play-state: paused; } .globe-slot { position: absolute; width: 0; height: 0; } .globe-labels.spin .globe-label { animation: orbit-spin-rev var(--orbit-dur, 72s) linear infinite; } .globe-label-box { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); padding: 6px 12px; font-size: 11px; font-weight: 600; color: var(--text-main); background: var(--card-bg); border: 1px solid var(--cyan-border); border-radius: 999px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), 0 0 12px var(--cyan-glow); white-space: nowrap; transition: opacity .3s ease; } .globe-label-box.fade { opacity: 0; } @keyframes orbit-spin { to { transform: rotate(360deg); } } @keyframes orbit-spin-rev { to { transform: rotate(-360deg); } } @media (max-width: 600px) { .hero-globe { max-width: 280px; } .globe-label-box { font-size: 10px; padding: 5px 10px; } } /* ---------- 6) MARQUEE ---------- */ .marquee-wrap { border-top: 1px solid var(--card-border); border-bottom: 1px solid var(--card-border); background: var(--bg-secondary); overflow: hidden; padding: 18px 0; } .marquee-track { display: flex; gap: 28px; white-space: nowrap; width: max-content; animation: marquee 30s linear infinite; color: var(--text-secondary); font-size: 14px; font-weight: 500; } .marquee-track span:not(:nth-child(even)) { color: var(--text-main); } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ---------- 7) SECTIONS + SHARED PIECES ---------- */ .section { padding: 64px 0; } .section-head { text-align: center; max-width: 40rem; margin: 0 auto 36px; } .section-title { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: clamp(1.7rem, 3.2vw, 2.6rem); line-height: 1.15; color: var(--text-main); margin: 8px 0 0; } .stat-number { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 1.9rem; color: var(--cyan); margin: 0; } .stat-label { font-size: 13px; color: var(--text-secondary); margin: 6px 0 0; } /* ---------- 8) SECTION-SPECIFIC ---------- */ /* Services */ .service-card { padding: 26px; } .service-card:hover { transform: translateY(-4px); border-color: var(--cyan-border); } .service-icon { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(34,211,238,0.10); color: var(--cyan); margin-bottom: 16px; } .service-icon svg { width: 22px; height: 22px; } .service-title { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 1.05rem; color: var(--text-main); margin: 0 0 8px; } .service-text { font-size: 14px; color: var(--text-secondary); margin: 0 0 16px; } .service-link { font-size: 13px; font-weight: 600; color: var(--cyan); text-decoration: none; } .service-link:hover { color: var(--cyan-bright); } /* What do you need */ .need-option { text-align: left; padding: 16px 18px; border-radius: 12px; background: var(--card-bg); border: 1px solid var(--card-border); color: var(--text-secondary); font-size: 14px; font-weight: 500; cursor: pointer; transition: all .2s ease; } .need-option:hover { border-color: var(--cyan-border); color: var(--text-main); } .need-option.active { border-color: var(--cyan-border); background: rgba(34,211,238,0.08); color: var(--text-main); } /* Portfolio / concept projects (reference-style: image on top, text centered below) */ .proj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 52px 30px; } .proj-card { display: block; text-align: center; text-decoration: none; transition: transform .3s ease; } .proj-card:hover { transform: translateY(-4px); } /* image area — borderless, mockup floats with a soft shadow */ .proj-thumb { aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center; overflow: hidden; } .proj-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.35)); transition: transform .4s ease, filter .3s ease; } .proj-card:hover .proj-thumb img { transform: translateY(-6px) scale(1.02); filter: drop-shadow(0 24px 36px rgba(34, 211, 238, 0.28)); } /* text underneath */ .proj-name { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 1.2rem; color: var(--text-main); letter-spacing: 0; margin: 22px 0 6px; } .proj-tag { display: inline-block; font-size: 14px; font-weight: 600; color: var(--cyan); transition: color .2s ease; } .proj-card:hover .proj-tag { color: var(--cyan-bright); } @media (max-width: 900px) { .proj-grid { grid-template-columns: repeat(2, 1fr); gap: 44px 26px; } } @media (max-width: 600px) { .proj-grid { grid-template-columns: 1fr; gap: 40px; max-width: 400px; margin: 0 auto; } } /* ---------- TECHNOLOGIES WE USE ---------- */ .tech-marquee { position: relative; overflow: hidden; margin: 10px 0 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .tech-marquee-track { display: flex; align-items: center; gap: 60px; width: max-content; animation: tech-marquee 48s linear infinite; } .tech-marquee:hover .tech-marquee-track { animation-play-state: paused; } .tech-marquee img { height: 46px; width: auto; flex: 0 0 auto; opacity: 0.55; transition: opacity .2s ease, transform .2s ease; } .tech-marquee img:hover { opacity: 1; transform: translateY(-3px); } @keyframes tech-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* logos are white marks — invert them to dark for the light theme */ html[data-theme="light"] .tech-marquee img { filter: invert(1); } @media (max-width: 640px) { .tech-marquee img { height: 34px; } .tech-marquee-track { gap: 40px; } } /* ---------- 7) PROCESS (timeline / flow) ---------- */ .process-flow { position: relative; margin-top: 10px; } /* Horizontal connecting line behind the nodes (desktop) */ .process-track { position: absolute; top: 28px; /* aligns with the node centres */ left: 12.5%; right: 12.5%; /* start/end at the first & last node */ height: 2px; border-radius: 2px; background: var(--card-border); } .process-track-fill { position: absolute; inset: 0; border-radius: 2px; background: linear-gradient(90deg, var(--cyan), var(--blue)); transform: scaleX(0); transform-origin: left; /* GSAP draws this in */ } .process-dot { position: absolute; top: 50%; left: 0; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--cyan-bright); box-shadow: 0 0 12px var(--cyan); animation: flow-x 3.5s linear infinite; /* travels along the line */ } @keyframes flow-x { from { left: 0; } to { left: 100%; } } .process-steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .process-step { display: flex; flex-direction: column; align-items: center; } /* Numbered node */ .process-node { position: relative; z-index: 2; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--card-elevated); border: 1px solid var(--cyan-border); box-shadow: 0 0 20px var(--cyan-glow); } .process-node::before { /* subtle pulsing ring */ content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--cyan-border); animation: node-pulse 3s ease-out infinite; } @keyframes node-pulse { 0% { transform: scale(0.9); opacity: 0.5; } 100% { transform: scale(1.35); opacity: 0; } } .process-node-num { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 1.1rem; background: linear-gradient(90deg, var(--cyan), var(--blue)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Card */ .process-card { margin-top: 24px; padding: 24px 22px; text-align: center; width: 100%; transition: transform .25s ease, border-color .25s ease, background-color .4s ease; } .process-card:hover { transform: translateY(-6px); border-color: var(--cyan-border); } .process-title { font-family: 'Manrope', sans-serif; font-weight: 700; color: var(--text-main); font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.02em; margin: 0 0 8px; } .process-text { font-size: 14px; color: var(--text-secondary); margin: 0; line-height: 1.6; } /* Mobile / tablet: vertical timeline */ @media (max-width: 900px) { .process-flow { max-width: 520px; margin: 0 auto; } .process-track { display: none; } .process-steps { grid-template-columns: 1fr; gap: 0; } .process-step { flex-direction: row; align-items: flex-start; gap: 18px; position: relative; padding-bottom: 30px; } .process-node { flex: 0 0 auto; } /* vertical connector down to the next node */ .process-step:not(:last-child)::after { content: ""; position: absolute; left: 28px; top: 56px; bottom: 0; width: 2px; transform: translateX(-1px); background: var(--card-border); } .process-card { margin-top: 0; text-align: left; } } /* ---------- 8) PRICING PACKAGES (tabbed) ---------- */ /* Tabs — dark glass bar, horizontally scrollable, scrollbar hidden */ .pkg-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 6px; margin: 0 auto 34px; max-width: max-content; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 14px; box-shadow: 0 0 24px var(--cyan-glow); scrollbar-width: none; /* hide scrollbar (Firefox) */ -ms-overflow-style: none; } .pkg-tabs::-webkit-scrollbar { display: none; } /* hide but keep scrolling */ .pkg-tab { flex: 0 0 auto; padding: 10px 16px; border: none; cursor: pointer; background: transparent; color: var(--text-secondary); font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; white-space: nowrap; border-radius: 10px; transition: background .2s ease, color .2s ease; } .pkg-tab:hover { color: var(--text-main); } .pkg-tab.active { color: #ffffff; background: linear-gradient(90deg, var(--cyan), var(--blue)); box-shadow: 0 6px 18px var(--cyan-glow); } .pkg-tab:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; } /* Panels + responsive grids */ .pkg-panel[hidden] { display: none; } .pkg-grid { display: grid; gap: 22px; align-items: stretch; } .pkg-grid.cols-1 { grid-template-columns: minmax(0, 420px); justify-content: center; } .pkg-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 840px; margin: 0 auto; } .pkg-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Card (equal heights via flex; CTA pinned to the bottom) */ .price-pkg { position: relative; padding: 28px 26px; display: flex; flex-direction: column; } .price-pkg:hover { transform: translateY(-6px); border-color: var(--cyan-border); } .price-pkg.popular { border-color: var(--cyan-border); box-shadow: 0 22px 50px var(--cyan-glow); } .pkg-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 5px 14px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: #ffffff; white-space: nowrap; background: linear-gradient(90deg, var(--cyan), var(--blue)); box-shadow: 0 6px 16px var(--cyan-glow); } .pkg-name { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 1.15rem; color: var(--text-main); text-transform: uppercase; letter-spacing: 0.01em; margin: 6px 0 0; } .pkg-desc { color: var(--text-secondary); font-size: 13.5px; line-height: 1.6; margin: 10px 0 14px; } .pkg-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; } .pkg-amount { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 2rem; color: var(--text-main); } .pkg-amount.sm { font-size: 1.4rem; } .pkg-duration { color: var(--text-muted); font-size: 13px; } .pkg-meta { color: var(--cyan); font-size: 12.5px; font-weight: 600; margin: 6px 0 0; } .pkg-features { list-style: none; padding: 0; margin: 16px 0 16px; } .pkg-features li { position: relative; padding-left: 24px; margin-bottom: 9px; font-size: 13.5px; color: var(--text-secondary); line-height: 1.5; } .pkg-features li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--cyan); font-weight: 700; } .pkg-more { align-self: flex-start; background: none; border: none; cursor: pointer; color: var(--cyan); font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; padding: 0; margin: 0 0 16px; } .pkg-more:hover { color: var(--cyan-bright); } .pkg-cta { margin-top: auto; width: 100%; justify-content: center; } /* Section footer */ .pkg-footer { text-align: center; margin-top: 42px; } .pkg-footer p { color: var(--text-secondary); margin-bottom: 16px; } /* Pricing responsive: one card per row on smaller screens */ @media (max-width: 900px) { .pkg-tabs { max-width: 100%; } .pkg-grid.cols-2, .pkg-grid.cols-3 { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } .pkg-grid.cols-1 { grid-template-columns: 1fr; max-width: 460px; } } /* Why choose */ .why-card { padding: 24px; } .why-title { font-family: 'Manrope', sans-serif; font-weight: 700; color: var(--text-main); font-size: 1rem; margin: 0 0 8px; } .why-text { font-size: 14px; color: var(--text-secondary); margin: 0; } /* Testimonials */ .testimonial-card { padding: 26px; } .stars { color: var(--cyan); letter-spacing: 2px; margin: 0 0 12px; } .testimonial-text { color: var(--text-main); font-size: 15px; line-height: 1.6; margin: 0 0 20px; } .testimonial-person { display: flex; align-items: center; gap: 12px; } .avatar { width: 42px; height: 42px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--cyan), var(--blue)); color: #041018; font-weight: 700; font-size: 14px; } .person-name { color: var(--text-main); font-weight: 600; font-size: 14px; margin: 0; } .person-role { color: var(--text-muted); font-size: 12px; margin: 0; } /* Hosting */ .hosting-card { padding: 40px; } /* FAQ */ .faq-item { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; overflow: hidden; } .faq-question { width: 100%; text-align: left; padding: 18px 20px; background: none; border: none; cursor: pointer; color: var(--text-main); font-size: 15px; font-weight: 500; display: flex; justify-content: space-between; align-items: center; gap: 12px; } .faq-icon { color: var(--cyan); font-size: 20px; transition: transform .2s ease; } .faq-item.active .faq-icon { transform: rotate(45deg); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height .3s ease; } .faq-answer p { padding: 0 20px 18px; margin: 0; font-size: 14px; color: var(--text-secondary); } /* Final CTA */ .final-cta { position: relative; overflow: hidden; padding: 60px 30px; } .final-cta-glow { position: absolute; inset: 0; background: radial-gradient(circle at 50% 0%, var(--cyan-glow), transparent 60%); pointer-events: none; } /* ---------- 9) FOOTER (modern, layered) ---------- */ .site-footer { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--bg-secondary), var(--bg-main)); border-top: 1px solid var(--card-border); padding: 72px 0 26px; } /* glowing hairline along the very top edge */ .footer-glow-top { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--cyan), transparent); opacity: 0.7; } /* soft cyan light rising from the bottom-left */ .site-footer::before { content: ""; position: absolute; bottom: -140px; left: 8%; width: 400px; height: 400px; background: radial-gradient(circle, var(--cyan-glow), transparent 70%); filter: blur(30px); pointer-events: none; } /* huge faint brand watermark behind everything */ .footer-watermark { position: absolute; left: 50%; bottom: -1.5%; transform: translateX(-50%); font-family: 'Manrope', sans-serif; font-weight: 800; font-size: clamp(4rem, 15vw, 11rem); letter-spacing: -0.03em; line-height: 1; white-space: nowrap; text-transform: uppercase; color: rgba(148, 163, 184, 0.045); pointer-events: none; user-select: none; } /* Top area: brand block + link columns */ .footer-main { display: grid; grid-template-columns: 1.25fr 2fr; gap: 48px; padding-bottom: 42px; border-bottom: 1px solid var(--card-border); } /* Brand block */ .footer-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; } .footer-tagline { color: var(--cyan); font-weight: 600; font-size: 14px; margin: 14px 0 0; } .footer-about { color: var(--text-secondary); font-size: 14px; line-height: 1.7; margin: 12px 0 0; max-width: 23rem; } .footer-socials { display: flex; gap: 10px; margin-top: 22px; } .footer-social { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--card-bg); border: 1px solid var(--card-border); color: var(--text-secondary); transition: transform .2s ease, border-color .2s ease, color .2s ease, background .2s ease; } .footer-social:hover { transform: translateY(-3px); border-color: var(--cyan-border); color: var(--cyan); background: rgba(34, 211, 238, 0.08); } .footer-social svg { width: 18px; height: 18px; } /* Link + contact columns */ .footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .footer-title { font-family: 'Manrope', sans-serif; font-weight: 700; color: var(--text-main); font-size: 13px; letter-spacing: 0.05em; margin: 0 0 16px; } .footer-links ul { list-style: none; padding: 0; margin: 0; } .footer-links li { margin-bottom: 11px; } .footer-link { color: var(--text-secondary); font-size: 14px; text-decoration: none; transition: color .2s ease; } .footer-link:hover { color: var(--cyan); } .footer-contact { display: flex; flex-direction: column; gap: 12px; } .footer-contact li { display: flex; align-items: flex-start; gap: 10px; line-height: 1.5; } .footer-contact svg { width: 16px; height: 16px; margin-top: 3px; color: var(--cyan); flex-shrink: 0; } .footer-contact a, .footer-contact span { overflow-wrap: anywhere; } .footer-cta { margin-top: 20px; } /* Bottom bar */ .footer-bottom { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; padding-top: 22px; font-size: 13px; color: var(--text-muted); } .footer-legal { display: flex; flex-wrap: wrap; gap: 20px; } .footer-top-link { color: var(--text-secondary); text-decoration: none; transition: color .2s ease; } .footer-top-link:hover { color: var(--cyan); } /* Footer responsive */ @media (max-width: 900px) { .footer-main { grid-template-columns: 1fr; gap: 36px; } } @media (max-width: 560px) { .footer-links { grid-template-columns: 1fr 1fr; gap: 24px; } .footer-bottom { flex-direction: column; align-items: flex-start; } } /* ---------- 10) CONSULTATION POPUP ---------- */ .popup-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(3, 8, 18, 0.8); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 20px; } .popup-box { width: 100%; max-width: 860px; background: var(--card-bg); border: 1px solid var(--cyan-border); border-radius: 18px; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; box-shadow: 0 30px 80px rgba(0,0,0,0.5); max-height: 92vh; } .popup-visual { position: relative; padding: 0; background: linear-gradient(160deg, var(--card-elevated), var(--bg-secondary)); overflow: hidden; } .popup-image { width: 100%; height: 100%; object-fit: cover; display: block; } .popup-form-area { position: relative; padding: 36px; overflow-y: auto; } .popup-close { position: absolute; top: 14px; right: 18px; background: none; border: none; cursor: pointer; color: var(--text-secondary); font-size: 28px; line-height: 1; } .popup-close:hover { color: var(--text-main); } /* form fields */ .field { width: 100%; padding: 11px 14px; border-radius: 10px; background: var(--bg-secondary); border: 1px solid var(--card-border); color: var(--text-main); font-size: 14px; font-family: 'Inter', sans-serif; } .field::placeholder { color: var(--text-muted); } .field:focus { outline: none; border-color: var(--cyan-border); } select.field { color: var(--text-secondary); } .form-message { padding: 12px 14px; border-radius: 10px; font-size: 14px; margin-bottom: 4px; } .form-message.success { background: rgba(34,211,238,0.10); border: 1px solid var(--cyan-border); color: var(--cyan-bright); } .form-message.error { background: rgba(239,68,68,0.10); border: 1px solid rgba(239,68,68,0.4); color: #fca5a5; } /* stop background scrolling while popup is open */ body.no-scroll { overflow: hidden; } /* ---------- 10b) LEFT CONTACT RAIL + EXPERT SLIDE-OUT PANEL ---------- */ /* Fixed, vertically-centered stack on the left edge */ .side-rail { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 45; display: flex; flex-direction: column; align-items: stretch; border: 1px solid var(--cyan-border); border-right: none; border-radius: 14px 0 0 14px; overflow: hidden; /* clips children into one rounded unit */ background: var(--card-bg); /* adapts to light/dark */ backdrop-filter: blur(10px); box-shadow: -10px 14px 40px rgba(0, 0, 0, 0.45), 0 0 22px var(--cyan-glow); } /* Gradient "header" tab with the vertical label */ .rail-btn { writing-mode: vertical-rl; transform: rotate(180deg); /* text reads bottom-to-top */ width: 100%; padding: 20px 13px; border: none; cursor: pointer; text-align: center; color: #ffffff; font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; font-family: 'Inter', sans-serif; background: linear-gradient(160deg, var(--cyan-bright), var(--cyan) 40%, var(--blue)); transition: filter .2s ease; } .rail-btn:hover { filter: brightness(1.08); } /* Call / Email icon buttons — same width, glassy, divided by hairlines */ .rail-icon { width: 100%; height: 48px; display: flex; align-items: center; justify-content: center; color: var(--cyan); background: transparent; border-top: 1px solid var(--card-border); transition: background .2s ease, color .2s ease; } .rail-icon:hover { background: rgba(34, 211, 238, 0.14); color: var(--cyan-bright); } .rail-icon svg { width: 19px; height: 19px; } /* ---------- THEME TOGGLE (fixed, left, vertically centered) ---------- */ .theme-toggle { position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 45; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--cyan); background: var(--card-bg); border: 1px solid var(--cyan-border); border-left: none; border-radius: 0 12px 12px 0; box-shadow: 10px 14px 40px rgba(0, 0, 0, 0.45), 0 0 22px var(--cyan-glow); transition: color .2s ease, transform .2s ease, background-color .4s ease; } .theme-toggle:hover { color: var(--cyan-bright); transform: translateY(-50%) translateX(2px); } .theme-toggle svg { width: 20px; height: 20px; } /* Show the right icon for the current theme */ .theme-toggle .icon-sun { display: block; } .theme-toggle .icon-moon { display: none; } html[data-theme="light"] .theme-toggle .icon-sun { display: none; } html[data-theme="light"] .theme-toggle .icon-moon { display: block; } .rail-icon svg { width: 18px; height: 18px; } /* Dark overlay behind the panel */ .expert-overlay { position: fixed; inset: 0; z-index: 90; background: rgba(3, 8, 18, 0.7); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s ease; } .expert-overlay.open { opacity: 1; visibility: visible; } /* The slide-out panel itself (attached to the left) */ .expert-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 95; width: 380px; max-width: 88vw; background: var(--bg-secondary); border-left: 1px solid var(--cyan-border); box-shadow: -20px 0 60px rgba(0, 0, 0, 0.5); transform: translateX(100%); /* hidden off-screen right */ transition: transform .4s cubic-bezier(0.22, 1, 0.36, 1); overflow-y: auto; } .expert-panel.open { transform: translateX(0); } /* slides in */ .expert-panel-inner { padding: 44px 28px; } .expert-close { position: absolute; top: 14px; right: 16px; background: none; border: none; cursor: pointer; color: var(--text-secondary); font-size: 28px; line-height: 1; } .expert-close:hover { color: var(--text-main); } .expert-title { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 1.5rem; color: var(--text-main); text-transform: uppercase; letter-spacing: 0.01em; margin: 8px 0 0; } .expert-sub { color: var(--text-secondary); font-size: 14px; margin: 8px 0 22px; } /* ---------- 11) RESPONSIVE + REDUCED MOTION ---------- */ @media (max-width: 768px) { .section { padding: 44px 0; } .popup-box { grid-template-columns: 1fr; } /* stack on mobile */ .popup-visual { display: none; } /* hide decorative panel */ .hosting-card, .final-cta { padding: 30px 22px; } .btn-primary, .btn-secondary { width: 100%; justify-content: center; } .hero-visual { margin-top: 10px; } .tool-card, .device-card { animation: none; } /* keep hero scene calm on phones */ .browser-body { min-height: 210px; } .rail-btn { padding: 16px 11px; font-size: 12px; } .rail-icon { height: 44px; } .expert-panel-inner { padding: 34px 22px; } } /* respect users who prefer less motion */ @media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } .tech-marquee-track { animation: none; } .tool-card, .device-card { animation: none; } .globe-labels, .globe-label { animation: none !important; } .design-stage { transition: none; } .hero-ring, .hero-dot { animation: none; } .page-orb, .page-dot { animation: none; } .preloader-spinner { animation: none; } .process-dot { animation: none; } .process-node::before { animation: none; } .process-track-fill { transform: scaleX(1); } * { scroll-behavior: auto; } } /* ============================================================ FLOATING BUTTONS: WhatsApp (bottom-left) + Back to top (bottom-right) ============================================================ */ .wa-float { position: fixed; left: 22px; bottom: 22px; z-index: 55; width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #25d366; color: #fff; box-shadow: 0 10px 28px rgba(37, 211, 102, 0.45); transition: transform .2s ease, box-shadow .2s ease; } .wa-float::before { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); animation: wa-pulse 2.4s ease-out infinite; } .wa-float:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 14px 34px rgba(37, 211, 102, 0.6); } .wa-float svg { width: 30px; height: 30px; position: relative; } @keyframes wa-pulse { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); } 70% { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); } } .back-to-top { position: fixed; right: 22px; bottom: 22px; z-index: 55; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--card-bg); border: 1px solid var(--cyan-border); color: var(--cyan); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35), 0 0 18px var(--cyan-glow); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .3s ease, transform .3s ease, visibility .3s ease, background .2s ease, color .2s ease; } .back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); } .back-to-top:hover { background: var(--cyan); color: #04121e; transform: translateY(-3px); } .back-to-top svg { width: 22px; height: 22px; } @media (max-width: 600px) { .wa-float { width: 48px; height: 48px; left: 16px; bottom: 16px; } .wa-float svg { width: 26px; height: 26px; } .back-to-top { width: 44px; height: 44px; right: 16px; bottom: 16px; } } @media (prefers-reduced-motion: reduce) { .wa-float::before { animation: none; } .back-to-top { transition: opacity .2s ease, visibility .2s ease; } } /* ============================================================ PORTFOLIO / WORK SHOWCASE (scroll-driven, sticky content) ============================================================ */ .work-showcase { padding: 64px 0; } .work-grid { display: grid; grid-template-columns: 1fr; gap: 0; } /* left sticky content (desktop only) */ .work-aside { display: none; } .work-aside-sticky { position: sticky; top: 120px; min-height: 340px; } .work-num { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 2.1rem; color: var(--cyan); line-height: 1; } .work-num-total { font-size: 0.95rem; color: var(--text-muted); font-weight: 600; } .work-title { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: clamp(1.55rem, 3.2vw, 2.3rem); line-height: 1.1; color: var(--text-main); text-transform: uppercase; letter-spacing: 0.01em; margin: 14px 0 12px; } .work-desc { color: var(--text-secondary); font-size: 15px; line-height: 1.7; max-width: 30rem; margin: 0 0 22px; } .work-cta { display: inline-flex; align-items: center; gap: 12px; font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cyan); text-decoration: none; } .work-cta svg { width: 16px; height: 16px; padding: 8px; box-sizing: content-box; border: 1px solid var(--cyan-border); border-radius: 50%; transition: transform .2s ease, background .2s ease, color .2s ease; } .work-cta:hover svg { background: var(--cyan); color: #04121e; transform: translateX(3px); } /* right screenshots */ .work-list { display: flex; flex-direction: column; gap: 40px; } .work-shot { border: 1px solid var(--card-border); border-radius: 16px; overflow: hidden; background: var(--card-elevated); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); } .work-browser-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--bg-secondary); border-bottom: 1px solid var(--card-border); } .wb-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--card-border); } .wb-url { margin-left: 8px; font-size: 11px; color: var(--text-muted); background: var(--bg-main); border: 1px solid var(--card-border); border-radius: 6px; padding: 3px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%; } .work-screen { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: linear-gradient(135deg, var(--card-elevated), var(--bg-secondary)); } .work-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transition: object-position 3.5s ease; } .work-item:hover .work-screen img { object-position: bottom center; } .work-inline { margin-top: 22px; } .work-more { text-align: center; margin-top: 48px; } /* desktop: two columns + sticky content */ @media (min-width: 992px) { .work-grid { grid-template-columns: 0.85fr 1.15fr; gap: 56px; } .work-aside { display: block; position: relative; } .work-inline { display: none; } .work-list { gap: 16vh; } .work-panel { position: absolute; top: 0; left: 0; right: 0; opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .5s ease, transform .5s ease; } .work-panel.active { opacity: 1; transform: none; pointer-events: auto; } } @media (prefers-reduced-motion: reduce) { .work-screen img, .work-panel { transition: none; } }