/* ============================================================================ premium-3d.css — premium 3D visuals layered on top of the original theme. 1) Hero: a tilted glass "code window" scene with floating brand chips. 2) About: portrait in an elegant tilted 3D frame with floating badges. 3) Fixed sidebar GitHub button centering fix. Theme tokens: --color-primary #247ba0, --color-secondary #0c4b75. Reduced-motion aware + responsive. ============================================================================ */ /* -------------------------------------------------------------------------- Load probe. index.html reads this custom property to confirm this file actually applied. If it didn't (dropped request / cache hiccup on the live server) the page re-requests the stylesheet instead of rendering the hero dashboards as unstyled raw text. Do not remove. -------------------------------------------------------------------------- */ :root { --p3d-loaded: 1; } /* !important so this always beats the inline "hidden" fallback in index.html, which sits further down the and would otherwise win on source order. */ .hd-scene, .hero-scene { visibility: visible !important; } /* ========================================================================== 1) HERO 3D SCENE ========================================================================== */ .hero-3d { position: relative; min-height: 540px; display: flex; align-items: center; justify-content: center; } .hero-3d__stage { position: relative; width: 440px; max-width: 100%; height: 480px; perspective: 1600px; transform-style: preserve-3d; } /* Ambient gradient glow + dotted grid */ .hero-3d__glow { position: absolute; inset: 6% 8%; background: radial-gradient(circle at 55% 42%, rgba(36,123,160,.5), rgba(12,75,117,.22) 46%, transparent 72%); filter: blur(26px); border-radius: 50%; z-index: 0; animation: heroGlow 9s ease-in-out infinite; } .hero-3d__grid { position: absolute; inset: 0; background-image: radial-gradient(rgba(36,123,160,.18) 1.5px, transparent 1.6px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(circle at 55% 45%, #000 35%, transparent 72%); mask-image: radial-gradient(circle at 55% 45%, #000 35%, transparent 72%); z-index: 0; opacity: .55; } /* Cards share tilt via 3D transforms directly (no reliance on flattening) */ .hero-3d__card { position: absolute; border-radius: 20px; transform-style: preserve-3d; } /* Back panel = depth */ .hero-3d__card--back { top: 58%; left: 52%; width: 300px; height: 250px; transform: translate(-50%,-50%) rotateY(-22deg) rotateX(9deg) translateZ(-60px); background: linear-gradient(135deg, rgba(36,123,160,.16), rgba(12,75,117,.10)); border: 1px solid rgba(36,123,160,.18); z-index: 1; } /* Main glass code window */ .hero-3d__card--main { top: 50%; left: 50%; width: 330px; transform: translate(-50%,-50%) rotateY(-22deg) rotateX(9deg); background: rgba(255,255,255,.94); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 45px 90px -22px rgba(12,75,117,.5), 0 10px 26px rgba(12,75,117,.16); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); overflow: hidden; z-index: 3; animation: heroFloat 6.5s ease-in-out infinite; } .h3d-bar { display: flex; align-items: center; gap: 7px; padding: 13px 16px; background: linear-gradient(90deg, var(--color-secondary,#0c4b75), var(--color-primary,#247ba0)); } .h3d-bar i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; opacity: .95; } .h3d-bar i:nth-child(1){ background:#ff5f57 } .h3d-bar i:nth-child(2){ background:#febc2e } .h3d-bar i:nth-child(3){ background:#28c840 } .h3d-bar span { margin-left:auto; font-size:11px; font-weight:700; color:rgba(255,255,255,.9); letter-spacing:.04em; font-family:'JetBrains Mono',monospace; } .h3d-code { padding: 20px 18px 22px; } .h3d-line { height: 9px; border-radius: 6px; margin-bottom: 13px; } .h3d-line.k { width: 42%; background: linear-gradient(90deg,var(--color-primary,#247ba0),#6bb6d6); } /* keyword */ .h3d-line.s { width: 78%; background:#dbe7ee; } /* string */ .h3d-line.v { width: 60%; background: linear-gradient(90deg,var(--color-secondary,#0c4b75),var(--color-primary,#247ba0)); } .h3d-line.c { width: 88%; background:#e7eef2; } .h3d-line.m { width: 50%; background:#dbe7ee; } .h3d-line.i { margin-left: 24px; } .h3d-line.i2{ margin-left: 44px; } /* Floating brand chips */ .hero-3d__chip { position: absolute; width: 62px; height: 62px; border-radius: 18px; display: grid; place-items: center; font-size: 25px; color:#fff; box-shadow: 0 20px 36px -12px rgba(12,75,117,.55); z-index: 4; animation: chipFloat 5s ease-in-out infinite; } .hero-3d__chip::after { /* subtle top gloss */ content:""; position:absolute; inset:0; border-radius:inherit; background: linear-gradient(160deg, rgba(255,255,255,.35), transparent 45%); } .hero-3d__chip.c1 { top: 4%; left: 6%; background: linear-gradient(135deg,#1f6f93,#2c86b8); animation-delay:0s; } .hero-3d__chip.c2 { top: -2%; right: 8%; background: linear-gradient(135deg,#5a8f2f,#7bb143); animation-delay:.7s; } .hero-3d__chip.c3 { bottom: 12%; left: 1%; background: linear-gradient(135deg,#0c4b75,#247ba0); animation-delay:1.5s; } .hero-3d__chip.c4 { bottom: 4%; right: 9%; background: linear-gradient(135deg,#6d3bd1,#9b6be6); animation-delay:2.1s; } /* Stat badge */ .hero-3d__stat { position: absolute; top: 40%; right: -4%; background:#fff; border-radius: 15px; padding: 12px 18px; text-align:center; box-shadow: 0 18px 36px -10px rgba(12,75,117,.4); z-index: 5; animation: chipFloat 6.5s ease-in-out infinite; animation-delay:1.1s; } .hero-3d__stat b { display:block; font-size:24px; color:var(--color-primary,#247ba0); line-height:1; font-weight:800; } .hero-3d__stat span { font-size:10px; font-weight:700; color:#90a4b0; text-transform:uppercase; letter-spacing:.06em; } /* Floor reflection to ground the scene */ .hero-3d__floor { position: absolute; left: 50%; bottom: 4%; width: 260px; height: 40px; transform: translateX(-50%); background: radial-gradient(ellipse at center, rgba(12,75,117,.28), transparent 70%); filter: blur(8px); z-index: 0; } @keyframes heroFloat { 0%,100% { transform: translate(-50%,-50%) rotateY(-22deg) rotateX(9deg) translateY(0); } 50% { transform: translate(-50%,-50%) rotateY(-18deg) rotateX(7deg) translateY(-14px); } } @keyframes chipFloat { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-15px) } } @keyframes heroGlow { 0%,100%{ transform:scale(1); opacity:.85 } 50%{ transform:scale(1.09); opacity:1 } } /* -------------------------------------------------------------------------- HERO — premium isometric scene: a live website mockup + floating UI. Fixed 3D angle (always reads as depth) with a gentle float. No scroll hijack. -------------------------------------------------------------------------- */ .hero-scene { position: absolute; inset: 0; transform-style: preserve-3d; display: flex; align-items: center; justify-content: center; animation: heroSceneFloat 7s ease-in-out infinite; } @keyframes heroSceneFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } /* Main browser window rendering a mini landing page */ .hs-browser { position: relative; width: 340px; height: 300px; border-radius: 16px; overflow: hidden; background: #fff; transform: rotateY(-20deg) rotateX(9deg); transform-style: preserve-3d; box-shadow: 0 50px 90px -26px rgba(12,75,117,.55), 0 12px 30px rgba(12,75,117,.18); border: 1px solid rgba(255,255,255,.9); z-index: 3; } .hs-topbar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: linear-gradient(90deg,#0c4b75,#247ba0); } .hs-topbar i { width: 10px; height: 10px; border-radius: 50%; } .hs-topbar i:nth-child(1){ background:#ff5f57 } .hs-topbar i:nth-child(2){ background:#febc2e } .hs-topbar i:nth-child(3){ background:#28c840 } .hs-topbar span { margin-left: auto; font: 600 11px/1 'JetBrains Mono', monospace; color: rgba(255,255,255,.9); } .hs-viewport { padding: 14px; height: calc(100% - 34px); background: linear-gradient(180deg,#f7fbfd,#eef4f8); } .hs-heroimg { height: 92px; border-radius: 10px; background: linear-gradient(120deg,#247ba0,#0c4b75); position: relative; overflow: hidden; } .hs-heroimg::after { content:""; position:absolute; inset:0; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform: translateX(-100%); animation: heroSheen 3.6s ease-in-out infinite; } @keyframes heroSheen { 0%,60%{ transform: translateX(-100%) } 100%{ transform: translateX(100%) } } .hs-title { height: 11px; width: 62%; border-radius: 5px; background: #123a52; margin: 12px 0 8px; } .hs-line { height: 7px; border-radius: 4px; background: #cddbe4; margin-bottom: 6px; } .hs-line.s { width: 88% } .hs-line.m { width: 70% } .hs-btns { display: flex; gap: 8px; margin-top: 11px; } .hs-btns b { display: block; height: 20px; width: 70px; border-radius: 20px; background: linear-gradient(90deg,#247ba0,#3f9fbe); } .hs-btns b.ghost { background: transparent; border: 1.5px solid #b9cdd8; } .hs-cards { display: flex; gap: 8px; margin-top: 12px; } .hs-cards div { flex: 1; height: 34px; border-radius: 8px; background: #fff; box-shadow: 0 4px 10px rgba(12,75,117,.08); border: 1px solid #e6eef3; } /* Depth card behind the browser */ .hs-behind { position: absolute; width: 300px; height: 250px; border-radius: 18px; background: linear-gradient(135deg, rgba(36,123,160,.2), rgba(12,75,117,.1)); border: 1px solid rgba(36,123,160,.22); transform: translate(24px,26px) rotateY(-20deg) rotateX(9deg) translateZ(-70px); z-index: 1; } /* Floating glass service chips */ .hs-chip { position: absolute; width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; color: #fff; font-size: 24px; box-shadow: 0 20px 34px -12px rgba(12,75,117,.55); z-index: 5; animation: chipFloat 5s ease-in-out infinite; } .hs-chip::after { content:""; position:absolute; inset:0; border-radius:inherit; background: linear-gradient(160deg, rgba(255,255,255,.4), transparent 45%); } .chip-wp { top: 2%; left: 8%; background: linear-gradient(135deg,#1f6f93,#2c86b8); transform: translateZ(60px); } .chip-shopify { top: 16%; right: 2%; background: linear-gradient(135deg,#5a8f2f,#7bb143); animation-delay:.8s; transform: translateZ(40px); } .chip-ghl { bottom: 8%; left: 0%; background: linear-gradient(135deg,#0c4b75,#247ba0); animation-delay:1.4s; transform: translateZ(50px); } .chip-mkt { bottom: 2%; right: 12%; background: linear-gradient(135deg,#6d3bd1,#9b6be6); animation-delay:2s; transform: translateZ(30px); } /* Floating info badges */ .hs-badge { position: absolute; background: #fff; border-radius: 14px; box-shadow: 0 18px 36px -12px rgba(12,75,117,.42); z-index: 6; padding: 11px 15px; animation: chipFloat 6.5s ease-in-out infinite; } .hs-exp { top: 34%; right: -4%; text-align: center; animation-delay: 1.1s; } .hs-exp b { display: block; font-size: 23px; font-weight: 800; color: #247ba0; line-height: 1; } .hs-exp span { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; color: #90a4b0; text-transform: uppercase; } .hs-analytics { bottom: 16%; left: -6%; display: flex; align-items: center; gap: 9px; animation-delay: .4s; } .hs-analytics .ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(135deg,#3f7d21,#7bb143); color: #fff; font-size: 14px; } .hs-analytics b { display: block; font-size: 15px; font-weight: 800; color: #123a52; line-height: 1; } .hs-analytics small { font-size: 9.5px; color: #90a4b0; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; } /* ========================================================================== 2) ABOUT — minimalistic 3D frame (clean & compact) ========================================================================== */ /* Neutralise the theme's big background blob + heavy spacing for a clean look */ .about-style-six .thumb::after { display: none !important; } .about-style-six .thumb { margin-bottom: 40px; } .about-3d { position: relative; max-width: 330px; margin: 0 auto; perspective: 1200px; } .about-3d__card { position: relative; z-index: 2; border-radius: 20px; overflow: hidden; background: #fff; border: 1px solid rgba(12,75,117,.08); box-shadow: 0 30px 60px -26px rgba(12,75,117,.42); transform: rotateY(-7deg) rotateX(3deg); transform-style: preserve-3d; transition: transform .55s ease, box-shadow .55s ease; animation: aboutFloat 7s ease-in-out infinite; } .about-3d__card img { display: block; width: 100%; height: auto; } .about-3d:hover .about-3d__card { transform: rotateY(0) rotateX(0); box-shadow: 0 42px 74px -28px rgba(12,75,117,.48); animation-play-state: paused; } /* Subtle depth layer behind = minimalistic 3D */ .about-3d__depth { position: absolute; inset: 15px -13px -15px 15px; border-radius: 22px; background: linear-gradient(135deg, rgba(36,123,160,.16), rgba(12,75,117,.09)); z-index: 1; } /* One small, clean floating pill */ .about-3d__pill { position: absolute; left: -12px; bottom: 24px; z-index: 5; background: #fff; border-radius: 12px; box-shadow: 0 12px 26px -8px rgba(12,75,117,.3); display: flex; align-items: center; gap: 9px; padding: 9px 14px; animation: chipFloat 6s ease-in-out infinite; } .about-3d__pill .ico { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: #fff; font-size: 14px; background: var(--bg-gradient, linear-gradient(135deg,#0c4b75,#247ba0)); } .about-3d__pill b { font-size: 15px; color: var(--color-heading,#202942); line-height: 1; } .about-3d__pill span { font-size: 10px; color: #90a4b0; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; } @keyframes aboutFloat { 0%,100% { transform: rotateY(-7deg) rotateX(3deg) translateY(0); } 50% { transform: rotateY(-5deg) rotateX(2deg) translateY(-8px); } } /* ========================================================================== 3) FIXED SIDEBAR — clean, perfectly centered GitHub button (self-contained, does NOT reuse .video-play-button so the theme's top:19px offset can't apply) ========================================================================== */ .header-fixed .video .gh-fixed { display: flex !important; align-items: center; justify-content: center; width: 56px; height: 56px; margin: 0 auto; border-radius: 50%; background: var(--color-primary, #247ba0); color: #fff; transition: .3s ease; } .header-fixed .video .gh-fixed i { position: static !important; top: auto !important; left: auto !important; font-size: 24px; line-height: 1; color: #fff; } .header-fixed .video .gh-fixed:hover { background: var(--color-secondary, #0c4b75); transform: translateY(-3px); box-shadow: 0 10px 22px -6px rgba(12,75,117,.5); } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 991px) { .hero-3d { min-height: 440px; margin-top: 40px; } .hero-3d__stage { transform: scale(.92); } .about-3d { max-width: 300px; } } @media (max-width: 575px) { .hero-3d__stage { transform: scale(.74); } .about-3d__card { transform: rotateY(-5deg) rotateX(2deg); } } /* ========================================================================== Reduced motion ========================================================================== */ @media (prefers-reduced-motion: reduce) { .hero-scene, .hs-chip, .hs-badge, .hs-heroimg::after, .hero-3d__glow, .about-3d__card, .about-3d__pill { animation: none !important; } } /* ============================================================================ HERO 3D DASHBOARD SCENE (namespace .hd-) Six realistic app dashboards — WordPress, Shopify, Canva, Meta Ads, Social/Media Management and Custom Code — plus floating service badges. Design rules: NO gloss / diagonal sheen overlays anywhere, no dark floor blob. Depth comes from a crisp hairline border + a whisper-soft shadow. ============================================================================ */ .hd-scene { position: absolute; inset: 0; display: block !important; animation: hdDrift 9s ease-in-out infinite; } @keyframes hdDrift { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} } .hd-box { position: absolute; top: 50%; left: 50%; width: 520px; height: 590px; transform: translate(-50%,-50%) scale(.88); transform-style: preserve-3d; } /* Bright ambient halo so the cluster pops off the page (blurred, not a shadow) */ .hd-box::before { content:""; position:absolute; z-index:0; left:6%; top:10%; right:6%; bottom:10%; background: radial-gradient(36% 38% at 26% 26%, rgba(123,97,255,.30), transparent 70%), radial-gradient(40% 42% at 74% 34%, rgba(46,197,255,.32), transparent 72%), radial-gradient(38% 38% at 52% 84%, rgba(0,168,120,.24), transparent 72%); filter: blur(34px); animation: hdHalo 10s ease-in-out infinite; } @keyframes hdHalo { 0%,100%{opacity:.8;transform:scale(1)} 50%{opacity:1;transform:scale(1.05)} } /* ---------------------------------------------------------------- panels -- */ .hd-panel { position: absolute; border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid rgba(16,42,67,.11); box-shadow: 0 2px 6px rgba(16,42,67,.06); transform: var(--tf); animation: hdFloat 7s ease-in-out infinite; } @keyframes hdFloat { 0%,100%{ transform: var(--tf) translateY(0) } 50%{ transform: var(--tf) translateY(-8px) } } /* window title bar */ .hd-bar { display:flex; align-items:center; gap:5px; padding:7px 10px; background:#f7f9fb; border-bottom:1px solid rgba(16,42,67,.09); } .hd-bar i { width:7px; height:7px; border-radius:50%; } .hd-bar i:nth-child(1){background:#ff5f57} .hd-bar i:nth-child(2){background:#febc2e} .hd-bar i:nth-child(3){background:#28c840} .hd-bar img { width:13px; height:13px; object-fit:contain; margin-left:3px; } .hd-bar span { margin-left:auto; font:700 8.5px 'JetBrains Mono',monospace; color:#7d8fa0; letter-spacing:.02em; } .hd-bar b { font:800 9px sans-serif; color:#16324a; margin-left:4px; } /* shared mini pieces */ .hd-stat3 { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; } .hd-stat3 > div { border-radius:6px; padding:4px 5px; background:#f4f8fc; } .hd-stat3 b { display:block; font:800 11px sans-serif; line-height:1; color:#16324a; } .hd-stat3 small { font:700 6.5px sans-serif; color:#93a6b3; text-transform:uppercase; letter-spacing:.04em; } .hd-rows { list-style:none; margin:7px 0 0; padding:0; } .hd-rows li { display:flex; align-items:center; gap:5px; margin-bottom:5px; } .hd-rows i { width:14px; height:14px; border-radius:4px; background:#dfe8f0; flex:0 0 14px; } .hd-rows em { height:5px; border-radius:3px; background:#e6edf3; flex:1; } .hd-rows li:nth-child(2) em { max-width:78%; } .hd-rows li:nth-child(3) em { max-width:62%; } /* ======================================================= 1. WORDPRESS ===== */ .hd-wp { top:64px; left:132px; width:248px; --tf: rotateY(-15deg) rotateX(8deg); z-index:5; } .hd-wp .hd-bar { background:linear-gradient(180deg,#2c3e50,#1d2327); border-bottom-color:rgba(0,0,0,.3); } .hd-wp .hd-bar span { color:#c7d6e2; } .hd-wp .hd-bar b { color:#fff; } .hd-wp__body { display:flex; height:158px; background:#f0f0f1; } .hd-wp__side { width:52px; background:#1d2327; padding:7px 0; } .hd-wp__side span { display:flex; align-items:center; gap:4px; padding:4px 7px; font:700 6.5px sans-serif; color:#a7aaad; } .hd-wp__side span::before { content:""; width:7px; height:7px; border-radius:2px; background:#6a7278; flex:0 0 7px; } .hd-wp__side span.is-on { background:#2271b1; color:#fff; } .hd-wp__side span.is-on::before { background:#fff; } .hd-wp__main { flex:1; padding:9px; } .hd-wp__title { font:800 10px sans-serif; color:#1d2327; margin-bottom:7px; } .hd-wp .hd-stat3 > div { background:#fff; border:1px solid #e0e3e6; } .hd-wp .hd-stat3 > div:nth-child(1) b { color:#2271b1; } .hd-wp .hd-stat3 > div:nth-child(2) b { color:#3858e9; } .hd-wp .hd-stat3 > div:nth-child(3) b { color:#00a32a; } .hd-wp .hd-rows i { background:#2271b1; opacity:.85; } /* ========================================================= 2. SHOPIFY ===== */ .hd-shop { top:352px; left:168px; width:210px; --tf: rotateY(-15deg) rotateX(8deg); z-index:8; animation-delay:1.1s; } .hd-shop .hd-bar { background:#f6f6f7; } .hd-shop__body { padding:9px; background:#fff; } .hd-shop__sales { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:7px; } .hd-shop__sales b { font:800 15px sans-serif; color:#0f1724; line-height:1; } .hd-shop__sales small { display:block; font:700 6.5px sans-serif; color:#8c9196; text-transform:uppercase; letter-spacing:.05em; margin-bottom:2px; } .hd-shop__sales em { font:800 8px sans-serif; color:#008060; background:#e3f1ec; border-radius:4px; padding:2px 5px; font-style:normal; } .hd-spark { width:100%; height:26px; display:block; } .hd-shop__list { margin-top:6px; } .hd-shop__list div { display:flex; align-items:center; gap:6px; margin-bottom:5px; } .hd-shop__list i { width:18px; height:18px; border-radius:5px; flex:0 0 18px; } .hd-shop__list div:nth-child(1) i { background:linear-gradient(135deg,#FFD98A,#F79B2C); } .hd-shop__list div:nth-child(2) i { background:linear-gradient(135deg,#9BE8AE,#3EA55E); } .hd-shop__list div:nth-child(3) i { background:linear-gradient(135deg,#AECBFF,#4E86EA); } .hd-shop__list em { height:5px; border-radius:3px; background:#eaecef; flex:1; } .hd-shop__list b { font:800 7.5px sans-serif; color:#008060; } /* =========================================================== 3. CANVA ===== */ .hd-canva { top:0; left:352px; width:168px; --tf: rotateY(-16deg) rotateX(9deg); z-index:3; animation-delay:.5s; } .hd-canva .hd-bar { background:linear-gradient(90deg,#7B61FF,#00C4CC); border-bottom-color:transparent; } .hd-canva .hd-bar b, .hd-canva .hd-bar span { color:#fff; } .hd-canva__body { display:flex; background:#fff; } .hd-canva__rail { width:22px; background:#f5f4fe; padding:6px 4px; display:flex; flex-direction:column; gap:5px; } .hd-canva__rail span { height:12px; border-radius:3px; background:#ded9fb; } .hd-canva__rail span:nth-child(1){background:#7B61FF} .hd-canva__rail span:nth-child(2){background:#00C4CC} .hd-canva__rail span:nth-child(3){background:#FF5F7E} .hd-canva__art { flex:1; margin:7px; height:84px; position:relative; border-radius:7px; overflow:hidden; background:linear-gradient(135deg,#dbe8ff 0%,#f0e2ff 48%,#d8fbff 100%); box-shadow: inset 0 0 0 1px rgba(16,42,67,.06); } .hd-canva__art u { position:absolute; left:9px; top:10px; width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg,#FFD84D,#FFA62B); } .hd-canva__art s { position:absolute; right:11px; top:13px; width:29px; height:29px; border-radius:8px; background:linear-gradient(135deg,#3BE0E6,#00A8BE); transform:rotate(12deg); } .hd-canva__art q { position:absolute; right:30px; bottom:9px; width:22px; height:22px; border-radius:6px; background:linear-gradient(135deg,#FF7A9C,#F4356B); } .hd-canva__art b { position:absolute; left:10px; bottom:7px; font:800 12px/1.05 sans-serif; color:#0f2f47; } .hd-canva__palette { display:flex; gap:4px; padding:0 9px 9px; } .hd-canva__palette i { width:11px; height:11px; border-radius:50%; } .hd-canva__palette i:nth-child(1){background:#7B61FF} .hd-canva__palette i:nth-child(2){background:#00C4CC} .hd-canva__palette i:nth-child(3){background:#FF5F7E} .hd-canva__palette i:nth-child(4){background:#FFC542} .hd-canva__palette i:nth-child(5){background:#2ECC71} /* ======================================================== 4. META ADS ===== */ .hd-meta { top:206px; left:-18px; width:192px; --tf: rotateY(-13deg) rotateX(8deg); z-index:7; animation-delay:.8s; } .hd-meta .hd-bar { background:#fff; } .hd-meta .hd-bar span { color:#12B76A; } .hd-meta__body { padding:8px 9px 9px; background:#fff; } .hd-meta .hd-stat3 > div { background:#f5f9fd; box-shadow:inset 0 0 0 1px rgba(24,119,242,.12); } .hd-meta .hd-stat3 > div:nth-child(1) b { color:#1877F2; } .hd-meta .hd-stat3 > div:nth-child(2) b { color:#12B76A; } .hd-meta .hd-stat3 > div:nth-child(3) b { color:#7B61FF; } .hd-bars { display:flex; align-items:flex-end; gap:3px; height:34px; margin-top:8px; } .hd-bars i { flex:1; border-radius:3px 3px 0 0; background:linear-gradient(to top,#1877F2 0%,#2EC5FF 72%,#5BE7D4 100%); } .hd-meta .hd-spark polyline { stroke:#8B5CF6; } /* ================================== 5. SOCIAL / MEDIA MANAGEMENT ========== */ .hd-social { top:412px; left:-6px; width:186px; --tf: rotateY(-13deg) rotateX(8deg); z-index:9; animation-delay:1.6s; } .hd-social .hd-bar { background:#fff; } .hd-social__body { padding:8px 9px 9px; background:#fff; } .hd-cal { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; } .hd-cal span { aspect-ratio:1; border-radius:3px; background:#eef2f6; } .hd-cal span.p1 { background:#1877F2; } /* facebook */ .hd-cal span.p2 { background:#E1306C; } /* instagram */ .hd-cal span.p3 { background:#00C4CC; } /* scheduled */ .hd-cal span.p4 { background:#12B76A; } /* published */ .hd-social__stats { display:flex; gap:6px; margin-top:8px; } .hd-social__stats div { flex:1; border-radius:6px; padding:4px 6px; background:#f6f4ff; } .hd-social__stats b { display:block; font:800 11px sans-serif; line-height:1; color:#7B61FF; } .hd-social__stats div:nth-child(2) b { color:#E1306C; } .hd-social__stats small { font:700 6.5px sans-serif; color:#93a6b3; text-transform:uppercase; letter-spacing:.04em; } /* ==================================================== 6. CUSTOM CODE ====== */ .hd-code { top:244px; left:358px; width:168px; --tf: rotateY(-16deg) rotateX(8deg); z-index:6; animation-delay:.3s; background:#0d1430; border-color:rgba(255,255,255,.10); } .hd-code .hd-bar { background:#0a1029; border-bottom-color:rgba(255,255,255,.08); } .hd-code .hd-bar b { color:#dbe3ff; } .hd-code .hd-bar span { color:#6E7EB8; } .hd-code__body { display:flex; padding:8px 9px 10px; } .hd-code__gutter { display:flex; flex-direction:column; gap:2px; padding-right:7px; } .hd-code__gutter span { font:600 8px/1.5 'JetBrains Mono',monospace; color:#3c4a80; } .hd-code pre { margin:0; flex:1; font:600 8px/1.5 'JetBrains Mono',monospace; color:#dbe3ff; white-space:pre; overflow:hidden; } .hd-code .k{color:#8FA4FF} .hd-code .g{color:#4FE3B0} .hd-code .y{color:#FFC46B} .hd-code .p{color:#FF8FD3} .hd-code .d{color:#6E7EB8} /* ------------------------------------------------- floating PNG badges --- */ .hd-badge { position:absolute; z-index:12; width:54px; height:54px; border-radius:16px; background:#fff; border:1px solid rgba(16,42,67,.10); box-shadow: 0 3px 10px rgba(16,42,67,.10); display:grid; place-items:center; animation: hdBadge 5.5s ease-in-out infinite; } .hd-badge img { width:34px; height:34px; object-fit:contain; } @keyframes hdBadge { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} } .hd-b-wp { top:2px; left:44px; animation-delay:0s; } .hd-b-canva { top:-16px; left:296px; animation-delay:.6s; } .hd-b-shop { top:192px; left:470px; animation-delay:1.2s; } .hd-b-smm { top:120px; left:-48px; animation-delay:1.8s; } .hd-b-media { top:534px; left:236px; animation-delay:2.3s; } .hd-b-custom { top:466px; left:456px; animation-delay:.9s; } /* ------------------------------------------------------------- pills ----- */ .hd-pill { position:absolute; z-index:13; display:flex; align-items:center; gap:9px; background:#fff; border:1px solid rgba(16,42,67,.10); border-radius:13px; padding:9px 13px; box-shadow: 0 3px 10px rgba(16,42,67,.10); animation: hdBadge 6.5s ease-in-out infinite; } .hd-traffic { top:112px; left:14px; animation-delay:.4s; } .hd-traffic .ic { width:28px; height:28px; border-radius:8px; display:grid; place-items:center; background:linear-gradient(135deg,#5FC22E,#2F7D18); color:#fff; font-size:12px; } .hd-traffic b { display:block; font:800 14px sans-serif; color:#16324a; line-height:1; } .hd-traffic small { font:700 8px sans-serif; color:#93a6b3; text-transform:uppercase; letter-spacing:.05em; } .hd-years { top:180px; left:390px; background:linear-gradient(150deg,#122055,#040836); border-color:transparent; } .hd-years b { font:900 19px sans-serif; color:#fff; line-height:1; } .hd-years span { font:700 8px/1.15 sans-serif; color:#b9c6ec; text-transform:uppercase; letter-spacing:.05em; } /* --------------------------------------------------------- responsive ---- */ @media (max-width:1199px){ .hd-box { transform:translate(-50%,-50%) scale(.80); } } @media (max-width:991px) { .hd-box { transform:translate(-50%,-50%) scale(.72); } } @media (max-width:767px) { .hd-box { transform:translate(-50%,-50%) scale(.60); } } @media (max-width:575px) { .hd-box { transform:translate(-50%,-50%) scale(.50); } } @media (prefers-reduced-motion: reduce){ .hd-scene, .hd-panel, .hd-badge, .hd-pill, .hd-box::before { animation:none !important; } } /* ============================================================================ HERO SCENE — REFINEMENT PASS * Kills every background wash/smudge behind the cluster (that was the "off" shadow: a big blurred blob showing between the white panels). * Tightens the cluster so the dashboards sit closer together. * Adds the VS Code editor panel. ============================================================================ */ .hd-box { width:500px; height:560px; } .hd-box::before { display:none !important; } /* no blurred halo smudge */ /* Panels: clean, uniform separation — crisp hairline + tight even shadow. No diagonal gloss, no blur, so adjacent white panels never merge. */ .hd-panel { border:1px solid rgba(16,42,67,.16); box-shadow: 0 1px 2px rgba(16,42,67,.09), 0 8px 18px -10px rgba(16,42,67,.24); } /* ------- tighter cluster (panels closer together) ------- */ .hd-canva { top:0; left:340px; width:168px; z-index:3; } .hd-wp { top:52px; left:118px; width:240px; z-index:5; } .hd-vscode { top:170px; left:344px; width:172px; z-index:6; --tf: rotateY(-16deg) rotateX(8deg); animation-delay:1.4s; } .hd-meta { top:188px; left:-12px; width:180px; z-index:7; } .hd-code { top:292px; left:352px; width:164px; z-index:6; } .hd-shop { top:308px; left:158px; width:190px; z-index:8; } .hd-social { top:362px; left:-14px; width:176px; z-index:9; } .hd-b-wp { top:-6px; left:26px; } .hd-b-canva { top:-18px; left:196px; } .hd-b-smm { top:118px; left:-56px; } .hd-b-custom { top:250px; left:-60px; } .hd-b-shop { top:430px; left:430px; } .hd-b-media { top:498px; left:186px; } .hd-traffic { top:96px; left:4px; } .hd-years { top:250px; left:250px; } /* ========================================================= 7. VS CODE ===== */ .hd-vscode { background:#1e1e2e; border-color:rgba(255,255,255,.12); } .hd-vscode .hd-bar { background:#181825; border-bottom-color:rgba(255,255,255,.07); } .hd-vscode .hd-bar b { color:#cdd6f4; } .hd-vscode .hd-bar span { color:#7f849c; } .hd-vs__body { display:flex; } .hd-vs__rail { width:20px; flex:0 0 20px; background:#11111b; padding:7px 0; display:flex; flex-direction:column; align-items:center; gap:6px; } .hd-vs__rail span { width:10px; height:10px; border-radius:3px; background:#45475a; } .hd-vs__rail span:nth-child(1){ background:#89B4FA; } .hd-vs__rail span:nth-child(2){ background:#A6E3A1; } .hd-vs__code { flex:1; min-width:0; } .hd-vs__tabs { display:flex; background:#181825; } .hd-vs__tabs em { font:700 6.5px sans-serif; font-style:normal; color:#6c7086; padding:4px 7px; border-right:1px solid #11111b; } .hd-vs__tabs em.on { background:#1e1e2e; color:#cdd6f4; box-shadow:inset 0 2px 0 #89B4FA; } .hd-vscode pre { margin:0; padding:7px 8px 8px; font:600 7.5px/1.55 'JetBrains Mono',monospace; color:#cdd6f4; white-space:pre; overflow:hidden; } .hd-vscode .k{color:#89B4FA} .hd-vscode .g{color:#A6E3A1} .hd-vscode .y{color:#F9E2AF} .hd-vscode .p{color:#F5C2E7} .hd-vscode .d{color:#6c7086} .hd-vs__status { display:flex; justify-content:space-between; padding:3px 8px; background:#89B4FA; } .hd-vs__status span { font:800 6.5px sans-serif; color:#11111b; } /* ============================================================================ HERO SCENE — RESPONSIVE SIZING The dashboards are scaled as large as each screen allows. Both the scale and the stage height move together, so a bigger cluster never spills sideways off the screen or vertically into the section below. ============================================================================ */ .hero-3d__stage { width: 100%; max-width: 520px; } @media (min-width: 1200px) { .hd-box { transform: translate(-50%, -50%) scale(.92); } } @media (max-width: 1199px) and (min-width: 992px) { .hd-box { transform: translate(-50%, -50%) scale(.74); } } /* Tablet — the hero column is full width here, so the cluster can be large */ @media (max-width: 991px) { .hero-3d { min-height: 700px; } .hero-3d__stage { height: 680px; max-width: 720px; } .hd-box { transform: translate(-50%, -50%) scale(1.12); } } @media (max-width: 767px) { .hero-3d { min-height: 620px; } .hero-3d__stage { height: 600px; } .hd-box { transform: translate(-50%, -50%) scale(.95); } } /* Phones — the outer badges tuck inward so the dashboards themselves can be drawn much larger without touching the screen edges. */ @media (max-width: 575px) { .hero-3d { min-height: 570px; } .hero-3d__stage { height: 550px; } .hd-box { transform: translate(-50%, -50%) scale(.90); } .hd-b-smm { left: -20px; } .hd-b-custom { left: -24px; } .hd-b-shop { left: 448px; } .hd-b-media { left: 196px; } } @media (max-width: 430px) { .hero-3d { min-height: 520px; } .hero-3d__stage { height: 500px; } .hd-box { transform: translate(-50%, -50%) scale(.82); } } @media (max-width: 390px) { .hero-3d { min-height: 470px; } .hero-3d__stage { height: 450px; } .hd-box { transform: translate(-50%, -50%) scale(.74); } } @media (max-width: 360px) { .hero-3d { min-height: 450px; } .hero-3d__stage { height: 430px; } .hd-box { transform: translate(-50%, -50%) scale(.70); } } @media (max-width: 320px) { .hero-3d { min-height: 410px; } .hero-3d__stage { height: 390px; } .hd-box { transform: translate(-50%, -50%) scale(.62); } }