/* ============================================================ Portfolio Showcase Pro v2 Elementor-safe: all rules scoped to .psp-* classes. Modal appended to — outside Elementor DOM. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;700&family=DM+Sans:wght@300;400;500&display=swap'); /* ── CSS Variables ──────────────────────────────────────────── */ :root { --psp-bg: #0d0d0d; --psp-surface: #161616; --psp-surface2: #1e1e1e; --psp-border: #2a2a2a; --psp-accent: #c9a84c; --psp-accent2: #e8c97a; --psp-text: #f0ede6; --psp-muted: #888; --psp-radius: 6px; --psp-radius-lg: 12px; --psp-trans: 0.3s cubic-bezier(0.4,0,0.2,1); --psp-shadow: 0 8px 40px rgba(0,0,0,.6); --psp-font-h: 'Playfair Display', Georgia, serif; --psp-font-b: 'DM Sans', system-ui, sans-serif; } /* ============================================================ PORTFOLIO WRAP — scoped reset so Elementor can't bleed in ============================================================ */ .psp-portfolio-wrap { font-family: var(--psp-font-b) !important; color: var(--psp-text) !important; box-sizing: border-box !important; } .psp-portfolio-wrap *, .psp-portfolio-wrap *::before, .psp-portfolio-wrap *::after { box-sizing: border-box; } /* ── Filter Bar ─────────────────────────────────────────────── */ .psp-portfolio-wrap .psp-filter-bar { display: flex !important; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; padding-bottom: 24px; border-bottom: 1px solid var(--psp-border); } .psp-portfolio-wrap .psp-filter-btn { font-family: var(--psp-font-b) !important; font-size: 11px !important; font-weight: 500 !important; letter-spacing: .12em !important; text-transform: uppercase !important; color: var(--psp-muted) !important; background: transparent !important; border: 1px solid var(--psp-border) !important; border-radius: 2px !important; padding: 7px 18px !important; cursor: pointer !important; transition: color var(--psp-trans), background var(--psp-trans), border-color var(--psp-trans) !important; line-height: 1 !important; text-decoration: none !important; } .psp-portfolio-wrap .psp-filter-btn:hover, .psp-portfolio-wrap .psp-filter-btn:focus-visible { color: var(--psp-text) !important; border-color: var(--psp-accent) !important; outline: none !important; } .psp-portfolio-wrap .psp-filter-btn.active { color: #0d0d0d !important; background: var(--psp-accent) !important; border-color: var(--psp-accent) !important; } /* ── Grid ───────────────────────────────────────────────────── */ .psp-portfolio-wrap .psp-grid { display: grid !important; grid-template-columns: repeat(var(--psp-cols, 3), 1fr) !important; gap: 20px !important; } @media (max-width: 1024px) { .psp-portfolio-wrap .psp-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 640px) { .psp-portfolio-wrap .psp-grid { grid-template-columns: 1fr !important; gap: 14px !important; } } /* ── Card ───────────────────────────────────────────────────── */ .psp-portfolio-wrap .psp-card { background: transparent !important; border: none !important; border-radius: 0 !important; overflow: visible !important; cursor: pointer !important; transition: opacity var(--psp-trans) !important; display: flex !important; flex-direction: column !important; text-decoration: none !important; -webkit-user-select: none; user-select: none; } .psp-portfolio-wrap .psp-card:hover, .psp-portfolio-wrap .psp-card:focus-visible { opacity: 0.92 !important; outline: none !important; } .psp-portfolio-wrap .psp-card.psp-hidden { display: none !important; } /* Thumbnail — slightly rounded like the reference, 16:10 ratio */ .psp-portfolio-wrap .psp-card-thumb { position: relative !important; aspect-ratio: 16 / 10 !important; overflow: hidden !important; background: #1a1a1a !important; border-radius: 4px !important; } .psp-portfolio-wrap .psp-card-thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.55s cubic-bezier(0.4,0,0.2,1) !important; } .psp-portfolio-wrap .psp-card:hover .psp-card-thumb img { transform: scale(1.05) !important; } /* Subtle dark overlay on hover */ .psp-portfolio-wrap .psp-card-overlay { position: absolute !important; inset: 0 !important; background: rgba(0,0,0,0.25) !important; opacity: 0 !important; transition: opacity var(--psp-trans) !important; pointer-events: none !important; border-radius: 4px !important; } .psp-portfolio-wrap .psp-card:hover .psp-card-overlay { opacity: 1 !important; } /* No-image fallback */ .psp-portfolio-wrap .psp-card-no-img { width: 100%; height: 100%; background: #1a1a1a; display: flex; align-items: center; justify-content: center; } .psp-portfolio-wrap .psp-card-no-img span { font-family: var(--psp-font-h); font-size: 2.4rem; color: var(--psp-accent); text-transform: uppercase; } /* Card body — text sits below the image, no bg */ .psp-portfolio-wrap .psp-card-body { padding: 12px 0 0 0 !important; display: flex !important; flex-direction: column !important; gap: 4px !important; } /* Bold project name — matches "Project 01" weight in reference */ .psp-portfolio-wrap .psp-card-title { font-family: var(--psp-font-b) !important; font-size: 1rem !important; font-weight: 700 !important; color: #ffffff !important; margin: 0 !important; line-height: 1.3 !important; letter-spacing: 0.01em !important; } /* Smaller muted subtitle — "Downtown, Dubai Marina, UAE" style */ .psp-portfolio-wrap .psp-card-subtitle { font-family: var(--psp-font-b) !important; font-size: 12.5px !important; font-weight: 400 !important; color: #888888 !important; margin: 0 !important; line-height: 1.5 !important; } .psp-portfolio-wrap .psp-tag, .psp-modal .psp-tag { font-size: 10px !important; font-weight: 500 !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: var(--psp-muted) !important; background: var(--psp-surface2) !important; border: 1px solid var(--psp-border) !important; padding: 2px 9px !important; border-radius: 2px !important; } .psp-portfolio-wrap .psp-no-results, .psp-portfolio-wrap .psp-no-projects { text-align: center; color: var(--psp-muted); font-size: 15px; padding: 48px 0; } /* ============================================================ MODAL — appended to , fully isolated from Elementor ============================================================ */ #psp-modal.psp-modal { position: fixed !important; inset: 0 !important; z-index: 999999 !important; display: none; /* JS toggles to flex */ align-items: center !important; justify-content: center !important; font-family: var(--psp-font-b) !important; } #psp-modal.psp-modal * { box-sizing: border-box; } /* Backdrop */ #psp-modal .psp-modal-backdrop { position: absolute !important; inset: 0 !important; background: rgba(0,0,0,.88) !important; backdrop-filter: blur(8px); cursor: pointer !important; } /* Container */ #psp-modal .psp-modal-container { position: relative !important; z-index: 1 !important; background: var(--psp-surface) !important; border: 1px solid var(--psp-border) !important; border-radius: var(--psp-radius-lg) !important; width: min(92vw, 1060px) !important; max-height: 90vh !important; height: 90vh !important; overflow: hidden !important; box-shadow: var(--psp-shadow) !important; animation: pspSlideUp .32s cubic-bezier(0.34, 1.56, 0.64, 1) !important; display: flex !important; flex-direction: column !important; } /* Close button */ #psp-modal .psp-modal-close { position: absolute !important; top: 14px !important; right: 14px !important; z-index: 10 !important; width: 34px !important; height: 34px !important; background: var(--psp-surface2) !important; border: 1px solid var(--psp-border) !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; color: var(--psp-text) !important; padding: 0 !important; transition: background var(--psp-trans), border-color var(--psp-trans) !important; } #psp-modal .psp-modal-close:hover { background: var(--psp-accent) !important; border-color: var(--psp-accent) !important; color: #0d0d0d !important; } /* Inner grid — media top fills all space, info bottom is fixed height */ #psp-modal .psp-modal-inner { display: flex !important; flex-direction: column !important; flex: 1 1 0 !important; min-height: 0 !important; overflow: hidden !important; } /* ── Media panel ────────────────────────────────────────────── */ #psp-modal .psp-modal-media { display: flex !important; flex-direction: column !important; background: #0a0a0a !important; border-bottom: 1px solid var(--psp-border) !important; overflow: hidden !important; min-height: 0 !important; flex: 1 1 auto !important; } /* Tabs */ #psp-modal .psp-media-tabs { display: flex !important; border-bottom: 1px solid var(--psp-border) !important; background: var(--psp-surface2) !important; flex-shrink: 0 !important; } #psp-modal .psp-media-tab { display: flex !important; align-items: center !important; gap: 6px !important; padding: 11px 20px !important; font-family: var(--psp-font-b) !important; font-size: 11px !important; font-weight: 500 !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: var(--psp-muted) !important; background: transparent !important; border: none !important; border-bottom: 2px solid transparent !important; cursor: pointer !important; transition: color var(--psp-trans), border-color var(--psp-trans) !important; line-height: 1 !important; } #psp-modal .psp-media-tab:hover { color: var(--psp-text) !important; } #psp-modal .psp-media-tab.active { color: var(--psp-accent) !important; border-bottom-color: var(--psp-accent) !important; } /* Tab panels */ #psp-modal .psp-tab-panel { display: none !important; flex-direction: column !important; flex: 1 1 0 !important; min-height: 0 !important; overflow: hidden !important; } #psp-modal .psp-tab-panel.active { display: flex !important; } /* Lightbox */ #psp-modal .psp-lightbox { display: flex !important; align-items: stretch !important; flex: 1 1 0 !important; min-height: 0 !important; overflow: hidden !important; position: relative !important; } #psp-modal .psp-lb-main { flex: 1 !important; overflow: hidden !important; position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #0a0a0a !important; min-height: 0 !important; cursor: zoom-in !important; } #psp-modal .psp-lb-main.psp-zoomed { cursor: zoom-out !important; overflow: auto !important; align-items: flex-start !important; justify-content: flex-start !important; } #psp-modal #psp-lb-img { display: block !important; /* Fill width fully, height scales naturally */ width: 100% !important; height: auto !important; max-height: 100% !important; object-fit: contain !important; transition: opacity .22s ease, transform .3s ease !important; transform-origin: center center !important; user-select: none !important; -webkit-user-select: none !important; } #psp-modal .psp-lb-main.psp-zoomed #psp-lb-img { width: auto !important; height: auto !important; max-width: none !important; max-height: none !important; transform: scale(2) !important; transform-origin: var(--psp-zoom-x, 50%) var(--psp-zoom-y, 50%) !important; cursor: zoom-out !important; } /* Zoom hint badge */ #psp-modal .psp-zoom-hint { position: absolute !important; bottom: 12px !important; right: 12px !important; background: rgba(0,0,0,.55) !important; color: #aaa !important; font-size: 10px !important; letter-spacing: .08em !important; text-transform: uppercase !important; padding: 4px 10px !important; border-radius: 20px !important; pointer-events: none !important; font-family: var(--psp-font-b) !important; transition: opacity .3s ease !important; } #psp-modal .psp-lb-counter { position: absolute !important; bottom: 12px !important; left: 50% !important; transform: translateX(-50%) !important; background: rgba(0,0,0,.6) !important; color: #fff !important; font-size: 11px !important; padding: 3px 14px !important; border-radius: 20px !important; font-family: var(--psp-font-b) !important; pointer-events: none !important; z-index: 2 !important; } #psp-modal .psp-lb-prev, #psp-modal .psp-lb-next { position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; z-index: 3 !important; width: 42px !important; height: 42px !important; border-radius: 50% !important; background: rgba(0,0,0,.5) !important; border: 1px solid rgba(255,255,255,.15) !important; color: #fff !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; transition: background var(--psp-trans), border-color var(--psp-trans) !important; padding: 0 !important; flex-shrink: 0 !important; } #psp-modal .psp-lb-prev { left: 12px !important; } #psp-modal .psp-lb-next { right: 12px !important; } #psp-modal .psp-lb-prev:hover, #psp-modal .psp-lb-next:hover { background: rgba(201,168,76,.5) !important; border-color: var(--psp-accent) !important; } /* Thumbnail strip */ #psp-modal .psp-lb-thumbs { display: flex !important; gap: 6px !important; padding: 10px 12px !important; overflow-x: auto !important; background: #111 !important; flex-shrink: 0 !important; scrollbar-width: thin; scrollbar-color: var(--psp-accent) #000; } #psp-modal .psp-lb-thumbs::-webkit-scrollbar { height: 3px; } #psp-modal .psp-lb-thumbs::-webkit-scrollbar-track { background: #000; } #psp-modal .psp-lb-thumbs::-webkit-scrollbar-thumb { background: var(--psp-accent); } #psp-modal .psp-lb-thumb { width: 56px !important; height: 42px !important; object-fit: cover !important; flex-shrink: 0 !important; cursor: pointer !important; border: 2px solid transparent !important; border-radius: 3px !important; opacity: .5 !important; transition: opacity var(--psp-trans), border-color var(--psp-trans) !important; display: block !important; } #psp-modal .psp-lb-thumb:hover { opacity: .85 !important; } #psp-modal .psp-lb-thumb.active { border-color: var(--psp-accent) !important; opacity: 1 !important; } /* Video panel */ #psp-modal .psp-video-wrap { flex: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #000 !important; min-height: 280px !important; overflow: hidden !important; } /* ── Info panel — compact fixed strip at bottom ─────────────── */ #psp-modal .psp-modal-info { padding: 16px 24px !important; flex: 0 0 auto !important; overflow-x: auto !important; overflow-y: hidden !important; display: flex !important; flex-direction: row !important; align-items: center !important; gap: 20px !important; flex-wrap: nowrap !important; border-top: 1px solid var(--psp-border) !important; background: var(--psp-surface) !important; min-height: 60px !important; } #psp-modal .psp-modal-cats { display: none !important; /* hide category badges in bottom bar — keep it clean */ } #psp-modal .psp-modal-excerpt { display: none !important; /* no excerpt in compact bottom bar */ } #psp-modal .psp-modal-tags { display: none !important; /* clean compact bar */ } /* Divider dot between title and client */ #psp-modal .psp-info-divider { color: var(--psp-border) !important; font-size: 18px !important; line-height: 1 !important; flex-shrink: 0 !important; } #psp-modal .psp-modal-title { font-family: var(--psp-font-h) !important; font-size: 1.25rem !important; font-weight: 700 !important; color: var(--psp-text) !important; line-height: 1.25 !important; margin: 0 !important; flex-shrink: 0 !important; } #psp-modal .psp-modal-meta { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 6px !important; padding: 0 !important; border: none !important; } #psp-modal .psp-client-label { font-weight: 500 !important; font-size: 11px !important; letter-spacing: .07em !important; text-transform: uppercase !important; color: var(--psp-muted) !important; font-family: var(--psp-font-b) !important; } #psp-modal .psp-client-value { font-size: 13px !important; color: var(--psp-accent) !important; font-family: var(--psp-font-b) !important; font-weight: 500 !important; } #psp-modal .psp-modal-excerpt { font-size: 14px !important; line-height: 1.75 !important; color: #aaa !important; font-family: var(--psp-font-b) !important; margin: 0 !important; } #psp-modal .psp-modal-tags { display: flex !important; flex-wrap: wrap !important; gap: 5px !important; } #psp-modal .psp-modal-cta:hover { background: var(--psp-accent2) !important; transform: translateY(-2px) !important; color: #0d0d0d !important; text-decoration: none !important; } /* ── Animations ─────────────────────────────────────────────── */ @keyframes pspSlideUp { from { opacity: 0; transform: translateY(28px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } } @media (prefers-reduced-motion: reduce) { .psp-portfolio-wrap .psp-card, #psp-modal .psp-modal-container, transition: none !important; animation: none !important; } }