/* CSS Variables - Orange & Black Theme with Modern Gradients */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/inter-latin.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/inter-latin.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/inter-latin.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/inter-latin.woff2') format('woff2'); } @font-face { font-family: 'Sora'; font-style: normal; font-weight: 300; font-display: swap; src: url('/fonts/sora-latin.woff2') format('woff2'); } @font-face { font-family: 'Sora'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/sora-latin.woff2') format('woff2'); } @font-face { font-family: 'Sora'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/sora-latin.woff2') format('woff2'); } @font-face { font-family: 'Sora'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/sora-latin.woff2') format('woff2'); } @font-face { font-family: 'Sora'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/sora-latin.woff2') format('woff2'); } @font-face { font-family: 'Press Start 2P'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/press-start-2p-latin.woff2') format('woff2'); } * { box-sizing: border-box; } html, body { overflow-x: hidden; width: 100%; max-width: 100%; position: relative; margin: 0; padding: 0; } img { max-width: 100%; height: auto; } video { max-width: 100%; } iframe { max-width: 100%; } :root { --brand-primary: #FF8C00; --brand-secondary: #1a1a1a; --text-header: #1a1a1a; --text-body: #333333; --brand-dark: #1a1a1a; --orange: #FF8C00; --orange-glow: rgba(255, 140, 0, 0.3); --dark-surface: #202020; --orange-dark: #8A4500; --orange-light: #996B3D; --black: #1a1a1a; --white: #FFFFFF; --light-grey: #F5F5F5; --dark-grey: #2C2C2C; --accent-gold: #d4af37; --accent-gold-border: rgba(212, 175, 55, 0.35); --accent-gold-highlight: rgba(255, 215, 128, 0.25); --google-blue: #4285F4; --rating-star: #FF8C00; --success-text: #9fffb2; --text-dark: #1b1b1b; --text-light: #666666; --shadow: rgba(0,0,0,0.1); --gradient-primary: linear-gradient(135deg, #FF8C00, #996B3D); --gradient-secondary: linear-gradient(135deg, #2C2C2C, #454545); --gradient-dark: linear-gradient(135deg, #1a1a1a, #313131); --gradient-glass: linear-gradient(135deg, rgba(255, 140, 0,0.1), rgba(255, 140, 0,0.05)); --glass-bg: rgba(255,255,255,0.05); --glass-border: rgba(255, 140, 0,0.2); --orange-bg: rgba(255, 140, 0,0.05); --surface-dark: rgba(32, 32, 32, 0.88); --surface-card: rgba(255,255,255,0.11); --text-muted: rgba(255, 255, 255, 0.7); --surface-main: #232323; --text-primary: #ffffff; --text-secondary: rgba(255,255,255,0.7); --bg-color: var(--surface-main); --text-color: var(--text-primary); --card-bg: var(--surface-card); --card-border: rgba(255, 255, 255, 0.10); --card-shadow: 0 18px 40px rgba(0, 0, 0, 0.40); --surface-strong: rgba(34, 34, 34, 0.86); --terminal-font: 'Press Start 2P', 'Courier New', monospace; --industrial-noise-svg: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0OCcgaGVpZ2h0PSc0OCcgdmlld0JveD0nMCAwIDQ4IDQ4Jz48ZyBmaWxsPSd3aGl0ZScgb3BhY2l0eT0nMC4wMyc+PHJlY3QgeD0nMScgeT0nMicgd2lkdGg9JzEnIGhlaWdodD0nMScvPjxyZWN0IHg9JzcnIHk9JzUnIHdpZHRoPScxJyBoZWlnaHQ9JzEnLz48cmVjdCB4PScxMicgeT0nMScgd2lkdGg9JzEnIGhlaWdodD0nMScvPjxyZWN0IHg9JzE3JyB5PSc2JyB3aWR0aD0nMScgaGVpZ2h0PScxJy8+PHJlY3QgeD0nMjMnIHk9JzMnIHdpZHRoPScxJyBoZWlnaHQ9JzEnLz48cmVjdCB4PScyOScgeT0nNycgd2lkdGg9JzEnIGhlaWdodD0nMScvPjxyZWN0IHg9JzM0JyB5PScyJyB3aWR0aD0nMScgaGVpZ2h0PScxJy8+PHJlY3QgeD0nNDEnIHk9JzUnIHdpZHRoPScxJyBoZWlnaHQ9JzEnLz48cmVjdCB4PSczJyB5PScxMicgd2lkdGg9JzEnIGhlaWdodD0nMScvPjxyZWN0IHg9JzknIHk9JzE2JyB3aWR0aD0nMScgaGVpZ2h0PScxJy8+PHJlY3QgeD0nMTUnIHk9JzExJyB3aWR0aD0nMScgaGVpZ2h0PScxJy8+PHJlY3QgeD0nMjEnIHk9JzE0JyB3aWR0aD0nMScgaGVpZ2h0PScxJy8+PHJlY3QgeD0nMjcnIHk9JzEwJyB3aWR0aD0nMScgaGVpZ2h0PScxJy8+PHJlY3QgeD0nMzMnIHk9JzE2JyB3aWR0aD0nMScgaGVpZ2h0PScxJy8+PHJlY3QgeD0nMzknIHk9JzEyJyB3aWR0aD0nMScgaGVpZ2h0PScxJy8+PHJlY3QgeD0nNDUnIHk9JzE1JyB3aWR0aD0nMScgaGVpZ2h0PScxJy8+PHJlY3QgeD0nMicgeT0nMjQnIHdpZHRoPScxJyBoZWlnaHQ9JzEnLz48cmVjdCB4PSc4JyB5PScyNycgd2lkdGg9JzEnIGhlaWdodD0nMScvPjxyZWN0IHg9JzE0JyB5PScyMicgd2lkdGg9JzEnIGhlaWdodD0nMScvPjxyZWN0IHg9JzIwJyB5PScyNicgd2lkdGg9JzEnIGhlaWdodD0nMScvPjxyZWN0IHg9JzI2JyB5PScyMycgd2lkdGg9JzEnIGhlaWdodD0nMScvPjxyZWN0IHg9JzMyJyB5PScyOCcgd2lkdGg9JzEnIGhlaWdodD0nMScvPjxyZWN0IHg9JzM4JyB5PScyMScgd2lkdGg9JzEnIGhlaWdodD0nMScvPjxyZWN0IHg9JzQ0JyB5PScyNScgd2lkdGg9JzEnIGhlaWdodD0nMScvPjxyZWN0IHg9JzQnIHk9JzM0JyB3aWR0aD0nMScgaGVpZ2h0PScxJy8+PHJlY3QgeD0nMTAnIHk9JzM5JyB3aWR0aD0nMScgaGVpZ2h0PScxJy8+PHJlY3QgeD0nMTYnIHk9JzMzJyB3aWR0aD0nMScgaGVpZ2h0PScxJy8+PHJlY3QgeD0nMjInIHk9JzM3JyB3aWR0aD0nMScgaGVpZ2h0PScxJy8+PHJlY3QgeD0nMjgnIHk9JzMyJyB3aWR0aD0nMScgaGVpZ2h0PScxJy8+PHJlY3QgeD0nMzQnIHk9JzM4JyB3aWR0aD0nMScgaGVpZ2h0PScxJy8+PHJlY3QgeD0nNDAnIHk9JzM1JyB3aWR0aD0nMScgaGVpZ2h0PScxJy8+PHJlY3QgeD0nNDYnIHk9JzQwJyB3aWR0aD0nMScgaGVpZ2h0PScxJy8+PHJlY3QgeD0nMScgeT0nNDQnIHdpZHRoPScxJyBoZWlnaHQ9JzEnLz48cmVjdCB4PSc3JyB5PSc0Nicgd2lkdGg9JzEnIGhlaWdodD0nMScvPjxyZWN0IHg9JzEzJyB5PSc0Mycgd2lkdGg9JzEnIGhlaWdodD0nMScvPjxyZWN0IHg9JzE5JyB5PSc0Nycgd2lkdGg9JzEnIGhlaWdodD0nMScvPjxyZWN0IHg9JzI1JyB5PSc0NCcgd2lkdGg9JzEnIGhlaWdodD0nMScvPjxyZWN0IHg9JzMxJyB5PSc0Nicgd2lkdGg9JzEnIGhlaWdodD0nMScvPjxyZWN0IHg9JzM3JyB5PSc0Micgd2lkdGg9JzEnIGhlaWdodD0nMScvPjxyZWN0IHg9JzQzJyB5PSc0Nycgd2lkdGg9JzEnIGhlaWdodD0nMScvPjwvZz48L3N2Zz4="); --industrial-noise-gradient: linear-gradient(145deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.035) 45%, rgba(255, 255, 255, 0.055) 100%); --industrial-noise-layer: var(--industrial-noise-gradient), var(--industrial-noise-svg); --industrial-noise-size: 100% 100%, 64px 64px; --industrial-noise-repeat: no-repeat, repeat; } [data-theme='light'] { --black: #FFFFFF; --white: #1b1b1b; --surface-main: var(--black); --surface-card: #ffffff; --text-primary: var(--white); --text-secondary: rgba(27, 27, 27, 0.7); --success-text: #2e7d32; --bg-color: var(--surface-main); --text-color: var(--text-primary); --card-bg: var(--surface-card); --card-border: rgba(29, 29, 31, 0.10); --card-shadow: 0 14px 34px rgba(0, 0, 0, 0.10); --surface-strong: rgba(255, 255, 255, 0.92); --text-muted: rgba(29, 29, 31, 0.68); --industrial-noise-layer: none; --industrial-noise-size: auto; --industrial-noise-repeat: no-repeat; } .stay-light, .stay-light * { color: var(--white) !important; } [data-theme='light'] .logo span { color: var(--text-color); } [data-theme='light'] .section { background: var(--card-bg); border: 1px solid var(--card-border); box-shadow: var(--card-shadow); } [data-theme='light'] .section-title { color: var(--text-color); text-shadow: none; background: none; -webkit-text-fill-color: var(--text-color); } [data-theme='light'] .section-title a { color: var(--text-color); background: none; -webkit-text-fill-color: var(--text-color); } [data-theme='light'] .section-subtitle { color: var(--text-muted); } [data-theme='light'] #services .card { background: var(--card-bg); border: 1px solid var(--card-border); box-shadow: var(--card-shadow); } [data-theme='light'] #services .card h3 { color: var(--text-color); } [data-theme='light'] #services .card p { color: var(--text-muted); } [data-theme='light'] #services .card, [data-theme='light'] #services .card a { color: var(--text-color); } [data-theme='light'] .stay-light, [data-theme='light'] .stay-light * { color: var(--white) !important; } html { scroll-padding-top: calc(84px + env(safe-area-inset-top, 0px)); } #services .services-grid .card { background: var(--card-bg); border: 1px solid var(--card-border); box-shadow: var(--card-shadow); } #services .services-grid .card h3 { color: var(--text-color); } #services .services-grid .card p { color: var(--text-muted); } [data-theme='light'] .showcase { background: transparent; } [data-theme='light'] .showcase::before { background: transparent; } [data-theme='light'] .showcase-content .section-title { color: var(--text-color); text-shadow: none; } [data-theme='light'] .showcase-content .section-subtitle { color: var(--text-muted); } [data-theme='light'] .showcase-empty { background: rgba(255, 255, 255, 0.85); color: rgba(29, 29, 31, 0.72); border-color: rgba(255, 140, 0, 0.30); } [data-theme='light'] .filter-btn { color: rgba(29, 29, 31, 0.78); } [data-theme='light'] .featured-work { background: transparent; } [data-theme='light'] .featured-work::after { background: linear-gradient(130deg, rgba(255, 140, 0, 0.10), rgba(255, 255, 255, 0.00)); opacity: 1; } [data-theme='light'] .featured-card { background: var(--card-bg); border: 1px solid rgba(255, 140, 0, 0.16); box-shadow: var(--card-shadow); } [data-theme='light'] .featured-card-title { color: var(--text-color); } [data-theme='light'] .featured-card-description { color: var(--text-muted); } [data-theme='light'] .showcase-overlay { background: linear-gradient(to top, rgba(245, 245, 247, 0.94), rgba(255, 140, 0, 0.28), transparent); } [data-theme='light'] .showcase-title { color: var(--text-color); } [data-theme='light'] .showcase-description { color: rgba(29, 29, 31, 0.72); } [data-theme='light'] .showcase-item { background: var(--card-bg); box-shadow: var(--card-shadow); border-color: rgba(29, 29, 31, 0.08); } [data-theme='light'] .project-category { background: rgba(255, 255, 255, 0.82); border-color: rgba(255, 140, 0, 0.22); } [data-theme='light'] .project-media-count { background: rgba(255, 255, 255, 0.88); color: #1a1a1a; border-color: rgba(255, 140, 0, 0.3); } [data-theme='light'] .project-media-count i { color: #FF8C00; } [data-theme='light'] .admin-panel { background: rgba(255, 255, 255, 0.96); color: rgba(29, 29, 31, 0.92); box-shadow: -18px 0 50px rgba(0, 0, 0, 0.18); } [data-theme='light'] .admin-tabs { background: rgba(29, 29, 31, 0.04); border-color: rgba(29, 29, 31, 0.08); } [data-theme='light'] .admin-tab { color: rgba(29, 29, 31, 0.86); } [data-theme='light'] .command-stat-card { background: rgba(255, 255, 255, 0.92); border-color: rgba(29, 29, 31, 0.08); } [data-theme='light'] .command-stat-label { color: rgba(29, 29, 31, 0.65); } [data-theme='light'] .command-stat-value { color: rgba(29, 29, 31, 0.92); } [data-theme='light'] .lead-card { background: rgba(255, 255, 255, 0.92); border-color: rgba(29, 29, 31, 0.10); color: rgba(29, 29, 31, 0.92); } [data-theme='light'] .lead-card small { color: rgba(29, 29, 31, 0.62); } [data-theme='light'] .review-admin-btn { border-color: rgba(255, 140, 0, 0.65); background: #FF8C00; color: rgba(29, 29, 31, 0.95); } [data-theme='light'] .review-admin-btn.delete { border-color: rgba(255, 140, 0, 0.45); background: rgba(255, 140, 0, 0.18); color: rgba(98, 54, 0, 0.95); } [data-theme='light'] .hero-review-counter, [data-theme='light'] .testimonials-review-counter { background: rgba(255, 255, 255, 0.9); background-image: none; border-color: rgba(255, 140, 0, 0.45); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); } [data-theme='light'] .hero-review-counter-label { color: rgba(98, 54, 0, 0.9); } [data-theme='light'] #heroReviewTotalCount, [data-theme='light'] .testimonials-review-counter, [data-theme='light'] .native-verified-badge { color: #cc6f00; text-shadow: none; } [data-theme='light'] .popup-form { background: rgba(255, 255, 255, 0.94); box-shadow: 0 18px 60px rgba(0, 0, 0, 0.18); } [data-theme='light'] .popup-header { color: var(--text-color); } [data-theme='light'] .popup-brand-name { color: var(--text-color); } [data-theme='light'] .popup-brand-tagline { color: rgba(29, 29, 31, 0.7); } [data-theme='light'] .popup-close { background: rgba(29, 29, 31, 0.06); color: var(--text-color); } [data-theme='light'] .popup-body { color: rgba(29, 29, 31, 0.92); background: rgba(29, 29, 31, 0.03); } [data-theme='light'] .popup-form-group label { color: rgba(29, 29, 31, 0.82); } [data-theme='light'] .popup-form-group input, [data-theme='light'] .popup-form-group select, [data-theme='light'] .popup-form-group textarea { background: rgba(29, 29, 31, 0.04); border-color: rgba(29, 29, 31, 0.12); color: rgba(29, 29, 31, 0.92); } [data-theme='light'] .popup-form-group input::placeholder, [data-theme='light'] .popup-form-group textarea::placeholder { color: rgba(29, 29, 31, 0.55); } [data-theme='light'] .review-modal { background: rgba(245, 245, 247, 0.82); } [data-theme='light'] .review-modal-dialog { background: rgba(255, 255, 255, 0.96); box-shadow: 0 20px 70px rgba(0, 0, 0, 0.18); } [data-theme='light'] .review-modal-header { color: rgba(29, 29, 31, 0.92); background: linear-gradient(135deg, rgba(255, 140, 0, 0.16), rgba(255, 255, 255, 0.92)); } [data-theme='light'] .review-modal-header p { color: rgba(29, 29, 31, 0.65); } [data-theme='light'] .review-modal-close { background: rgba(29, 29, 31, 0.06); color: rgba(29, 29, 31, 0.9); } [data-theme='light'] .review-modal-body { color: rgba(29, 29, 31, 0.92); background: rgba(29, 29, 31, 0.03); } [data-theme='light'] .review-form label { color: rgba(29, 29, 31, 0.9); } [data-theme='light'] .review-form input, [data-theme='light'] .review-form textarea { background: rgba(29, 29, 31, 0.04); border-color: rgba(29, 29, 31, 0.12); color: rgba(29, 29, 31, 0.92); } [data-theme='light'] .review-form input::placeholder, [data-theme='light'] .review-form textarea::placeholder { color: rgba(29, 29, 31, 0.55); } [data-theme='light'] .project-modal { background: rgba(245, 245, 247, 0.70); } [data-theme='light'] .project-modal-dialog { background: rgba(255, 255, 255, 0.96); box-shadow: 0 18px 60px rgba(0, 0, 0, 0.18); } [data-theme='light'] .project-modal-header { color: rgba(29, 29, 31, 0.92); } [data-theme='light'] .project-modal-title span { color: rgba(29, 29, 31, 0.65); } [data-theme='light'] .project-modal-close { background: rgba(29, 29, 31, 0.06); color: rgba(29, 29, 31, 0.9); } [data-theme='light'] .project-modal-body { color: rgba(29, 29, 31, 0.92); } [data-theme='light'] .project-modal-media { background: rgba(29, 29, 31, 0.03); border-color: rgba(29, 29, 31, 0.10); } [data-theme='light'] .project-modal-meta { background: rgba(29, 29, 31, 0.04); border-color: rgba(29, 29, 31, 0.12); box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12); } [data-theme='light'] .project-modal-meta h4 { color: rgba(29, 29, 31, 0.92); } [data-theme='light'] .project-modal-meta p { color: rgba(29, 29, 31, 0.70); } [data-theme='light'] .brilliant-chat-window, [data-theme='light'] .chatbot-container { background: rgba(255, 255, 255, 0.96); box-shadow: 0 18px 60px rgba(0, 0, 0, 0.18); } [data-theme='light'] .brilliant-chat-header, [data-theme='light'] .chatbot-header { background: rgba(255, 255, 255, 0.92); color: rgba(29, 29, 31, 0.92); } [data-theme='light'] .brilliant-chat-close, [data-theme='light'] .chatbot-close { background: rgba(29, 29, 31, 0.06); color: rgba(29, 29, 31, 0.90); } [data-theme='light'] .brilliant-chat-bubble, [data-theme='light'] .chatbot-messages .message { background: rgba(29, 29, 31, 0.04); border-color: rgba(29, 29, 31, 0.10); color: rgba(29, 29, 31, 0.92); } [data-theme='light'] .chatbot-input { background: rgba(29, 29, 31, 0.02); } [data-theme='light'] .chat-input { background: rgba(29, 29, 31, 0.04); border-color: rgba(29, 29, 31, 0.12); color: rgba(29, 29, 31, 0.92); } [data-theme='light'] .chat-input::placeholder { color: rgba(29, 29, 31, 0.55); } [data-theme='light'] select { background-color: rgba(29, 29, 31, 0.04); color: rgba(29, 29, 31, 0.92); color-scheme: light; border-color: rgba(29, 29, 31, 0.12); background-image: linear-gradient(45deg, transparent 50%, rgba(29, 29, 31, 0.9) 50%), linear-gradient(135deg, rgba(29, 29, 31, 0.9) 50%, transparent 50%), linear-gradient(to right, rgba(29, 29, 31, 0.10), rgba(29, 29, 31, 0.10)); } [data-theme='light'] select option { background-color: var(--surface-card); color: rgba(29, 29, 31, 0.92); } /* Smooth Scrolling */ html { scroll-behavior: smooth; scroll-padding-top: calc(84px + env(safe-area-inset-top, 0px)); } /* Reset & Base Styles */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Sora', 'Segoe UI', sans-serif; line-height: 1.6; color: var(--text-color); overflow-x: hidden; background-color: var(--bg-color); background-image: var(--industrial-noise-layer); background-size: var(--industrial-noise-size); background-repeat: var(--industrial-noise-repeat); background-attachment: scroll; padding-left: 0; padding-top: calc(84px + env(safe-area-inset-top, 0px)); transition: background-color 0.5s ease, color 0.5s ease; } @keyframes adminNoiseHandshakeGlow { 0% { box-shadow: inset 0 0 0 rgba(255, 140, 0, 0); background-position: 0 0, 0 0; } 24% { box-shadow: inset 0 0 120px rgba(255, 140, 0, 0.16), inset 0 0 36px rgba(255, 140, 0, 0.12); background-position: 0 0, 8px -6px; } 100% { box-shadow: inset 0 0 0 rgba(255, 140, 0, 0); background-position: 0 0, 0 0; } } html:not([data-theme='light']) body.admin-handshake-glow { background-image: radial-gradient(circle at 50% 12%, rgba(255, 140, 0, 0.22), rgba(255, 140, 0, 0) 58%), var(--industrial-noise-layer); background-size: 100% 100%, var(--industrial-noise-size); background-repeat: no-repeat, var(--industrial-noise-repeat); animation: adminNoiseHandshakeGlow 2s ease-in-out 1; } @keyframes adminRadialPulseSpread { 0% { opacity: 0.82; transform: scale(0.18); } 100% { opacity: 0; transform: scale(1.5); } } html:not([data-theme='light']) body.admin-handshake-radial::before { content: ''; position: fixed; inset: -18vmax; pointer-events: none; z-index: 9998; background: radial-gradient( circle at var(--admin-pulse-x, 50%) var(--admin-pulse-y, 10%), rgba(255, 140, 0, 0.72) 0%, rgba(255, 140, 0, 0.38) 12%, rgba(255, 140, 0, 0.16) 24%, rgba(255, 140, 0, 0) 46% ); transform-origin: var(--admin-pulse-x, 50%) var(--admin-pulse-y, 10%); animation: adminRadialPulseSpread 1.1s ease-out 1; } h1, h2, h3, h4, h5, h6 { font-family: 'Sora', 'Segoe UI', sans-serif; } h1, h2, h3 { font-weight: 700; letter-spacing: -0.02em; } [data-theme='light'] body { background-color: var(--bg-color); background-image: none; } html:not([data-theme='light']) { --orange: #FF8C00; --rating-star: #FF8C00; } html:not([data-theme='light']) section { background-color: var(--surface-main); background-image: var(--industrial-noise-layer); background-size: var(--industrial-noise-size); background-repeat: var(--industrial-noise-repeat); } html:not([data-theme='light']) .review-terminal, html:not([data-theme='light']) .featured-reviews, html:not([data-theme='light']) .live-system-feed, html:not([data-theme='light']) .modern-review-section .review-terminal, html:not([data-theme='light']) .modern-review-section .featured-reviews-feed { background-color: var(--surface-main); background-image: var(--industrial-noise-layer); background-size: var(--industrial-noise-size); background-repeat: var(--industrial-noise-repeat); } html:not([data-theme='light']) .review-terminal-box, html:not([data-theme='light']) .section, html:not([data-theme='light']) .modern-review-section, html:not([data-theme='light']) .showcase, html:not([data-theme='light']) .featured-work, html:not([data-theme='light']) .card, html:not([data-theme='light']) .showcase-item, html:not([data-theme='light']) .featured-card, html:not([data-theme='light']) .hailifu-review-card, html:not([data-theme='light']) .stats-card, html:not([data-theme='light']) .featured-review-card, html:not([data-theme='light']) .live-feed-card { background: rgba(36, 36, 36, 0.84); } @media (max-width: 768px) { html:not([data-theme='light']) { --industrial-noise-size: 100% 100%, 56px 56px; } } img { max-width: 100%; height: auto; } .quick-links { position: fixed; top: 20%; left: 0; width: 56px; background: rgba(255, 140, 0, 0.22); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); border-right: 1px solid rgba(255, 140, 0, 0.7); border-radius: 0 22px 22px 0; padding: 14px 6px; z-index: 1500; transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 0 18px rgba(255, 140, 0, 0.2); } .quick-links:hover { width: 240px; background: rgba(255, 140, 0, 0.32); box-shadow: 0 0 28px rgba(255, 140, 0, 0.45); } .quick-links-nav { display: flex; flex-direction: column; gap: 10px; } .quick-link { display: flex; align-items: center; justify-content: center; gap: 0; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(255, 140, 0, 0.12); background: rgba(255, 140, 0, 0.08); text-decoration: none; color: var(--text-primary); font-family: 'Sora', 'Segoe UI', sans-serif; font-weight: 500; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; position: relative; transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .quick-link svg { width: 20px; height: 20px; fill: var(--orange); flex-shrink: 0; transition: transform 0.3s ease; } .quick-link span { opacity: 0; white-space: nowrap; transform: translateX(-6px); transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s; } .quick-links:hover .quick-link { justify-content: flex-start; gap: 20px; padding-left: 22px; padding-right: 18px; } .quick-links:hover .quick-link span { opacity: 1; transform: translateX(0); } .quick-link:hover { background: rgba(255, 140, 0, 0.2); border-color: rgba(255, 140, 0, 0.45); box-shadow: 0 10px 22px rgba(255, 140, 0, 0.2); } .quick-link:hover svg { transform: translateX(3px); filter: drop-shadow(0 0 6px rgba(255, 140, 0, 0.55)); } /* Modern Glassmorphism Navigation Bar */ .main-nav { position: fixed; top: 10px; left: 50%; width: min(1360px, calc(100% - 26px)); z-index: 10000; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 20px; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 22px; box-shadow: none; box-sizing: border-box; transform: translate(-50%, 0); opacity: 1; transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, transform 0.28s ease, opacity 0.28s ease; } [data-theme='light'] .main-nav { background: transparent; border-color: rgba(0, 0, 0, 0.16); box-shadow: none; } [data-theme='light'] .main-nav .logo .whatsapp-logo { background: rgba(255, 255, 255, 0.92) !important; border-color: rgba(255, 140, 0, 0.45) !important; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12); } [data-theme='light'] .admin-entry-btn { background: transparent; color: #a24f00; border-color: rgba(255, 140, 0, 0.5); } .main-nav-actions { display: inline-flex; align-items: center; gap: 12px; justify-content: flex-end; margin-left: auto; padding: 3px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.24); background: transparent; } [data-theme='light'] .main-nav-actions { border-color: rgba(255, 140, 0, 0.35); background: transparent; } .admin-entry-btn { display: none; align-items: center; justify-content: center; height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255, 140, 0, 0.55); background: transparent; color: #FF8C00; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .admin-entry-btn.is-visible { display: inline-flex; } .admin-entry-btn:hover { transform: translateY(-1px); border-color: #FF8C00; box-shadow: 0 0 0 2px rgba(255, 140, 0, 0.25), 0 0 16px rgba(255, 140, 0, 0.4); } .admin-entry-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.35); } /* Sidebar navigation is intentionally disabled across all breakpoints. */ .side-menu-toggle, .side-menu, .side-menu-overlay { display: none !important; visibility: hidden !important; pointer-events: none !important; } .side-menu-toggle { position: fixed; top: 16px; right: 16px; z-index: 10001; width: 46px; height: 46px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--white); display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex-direction: column; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease; } .side-menu-toggle span { width: 20px; height: 2px; background: currentColor; border-radius: 999px; } .side-menu-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; z-index: 10000; } .side-menu-overlay.visible { opacity: 1; pointer-events: auto; } .side-menu { position: fixed; top: 0; right: -100%; width: min(280px, 70vw); height: 100vh; padding: 24px 20px; background: rgba(15, 15, 15, 0.8); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border-left: 1px solid rgba(255, 255, 255, 0.12); box-shadow: -18px 0 40px rgba(0, 0, 0, 0.55); z-index: 10002; display: flex; flex-direction: column; transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .side-menu.open { right: 0; } .side-menu-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; } .side-menu-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--orange); font-weight: 700; font-size: 1.1rem; } .side-menu-logo span { color: var(--white); } .side-menu-close { width: 36px; height: 36px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.08); color: var(--white); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .side-menu-links { display: flex; flex-direction: column; gap: 6px; } .side-menu-links a { display: block; padding: 14px 8px; text-decoration: none; color: var(--white); font-size: 1.05rem; font-weight: 500; border-bottom: 1px solid rgba(255, 255, 255, 0.08); transition: color 0.25s ease, background 0.25s ease; } .side-menu-links a:hover, .side-menu-links a.active { color: var(--orange); background: rgba(255, 255, 255, 0.05); } .theme-toggle { width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--orange); background: transparent; color: var(--orange); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; margin-left: 0; flex: 0 0 auto; -webkit-tap-highlight-color: transparent; transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease; } .theme-toggle:hover { transform: translateY(-1px); box-shadow: 0 0 0 4px rgba(255, 140, 0, 0.18), 0 0 18px rgba(255, 140, 0, 0.22); } .theme-toggle:active { transform: translateY(0) scale(0.98); } .theme-toggle:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(255, 140, 0, 0.35); } .theme-toggle-icon { position: relative; width: 18px; height: 18px; display: inline-block; } .theme-icon { position: absolute; inset: 0; display: inline-flex; align-items: center; justify-content: center; transition: opacity 0.25s ease; } .theme-icon--sun { opacity: 0; } .theme-icon--moon { opacity: 1; } [data-theme='light'] .theme-icon--sun { opacity: 1; } [data-theme='light'] .theme-icon--moon { opacity: 0; } .theme-toggle.is-rotating .theme-toggle-icon { animation: themeToggleSpin 0.6s ease; } @keyframes themeToggleSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .main-nav.is-scrolled { background: transparent; border-color: rgba(255, 140, 0, 0.3); box-shadow: none; } [data-theme='light'] .main-nav.is-scrolled { background: transparent; border-color: rgba(255, 140, 0, 0.32); box-shadow: none; } .main-nav.is-hidden { transform: translate(-50%, -130%); opacity: 0; pointer-events: none; } .logo { font-size: 1.65rem; font-weight: bold; color: var(--orange); text-decoration: none; transition: transform 0.3s ease; display: inline-flex; align-items: center; gap: 10px; margin-right: auto; } .logo:hover { transform: scale(1.05); } .logo span { color: var(--white); } .main-nav .logo { margin-right: 0; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.78); } .main-nav .logo .whatsapp-logo { position: relative; background: transparent !important; } .main-nav .site-share-btn, .main-nav .admin-entry-btn, .main-nav .theme-toggle { text-shadow: 0 2px 10px rgba(0, 0, 0, 0.72); } [data-theme='light'] .main-nav .logo, [data-theme='light'] .main-nav .logo span { color: #FFFFFF; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.72); } [data-theme='light'] .main-nav .site-share-btn, [data-theme='light'] .main-nav .admin-entry-btn, [data-theme='light'] .main-nav .theme-toggle { text-shadow: 0 2px 10px rgba(0, 0, 0, 0.58); } .ghost-admin-trigger { position: absolute; inset: 0; padding: 0; margin: 0; border: 0; background: transparent; opacity: 0; cursor: default; z-index: 4; } .header-logo { width: 46px; height: 46px; border-radius: 14px; border: 1px solid rgba(255, 140, 0, 0.25); background: rgba(255, 255, 255, 0.06); display: inline-flex; align-items: center; justify-content: center; margin-right: 10px; flex: 0 0 auto; } [data-theme='light'] .side-menu { background: rgba(255, 255, 255, 0.9); border-left-color: rgba(0, 0, 0, 0.08); box-shadow: -14px 0 32px rgba(0, 0, 0, 0.18); } [data-theme='light'] .side-menu-logo span { color: var(--text-color); } [data-theme='light'] .side-menu-links a { color: rgba(29, 29, 31, 0.9); border-bottom-color: rgba(0, 0, 0, 0.08); } [data-theme='light'] .side-menu-close { border-color: rgba(0, 0, 0, 0.12); background: rgba(0, 0, 0, 0.04); color: rgba(29, 29, 31, 0.9); } [data-theme='light'] .side-menu-toggle { border-color: rgba(0, 0, 0, 0.12); background: rgba(255, 255, 255, 0.75); color: rgba(29, 29, 31, 0.9); } .contact-btn { background: var(--gradient-primary); color: var(--white); padding: 0.7rem 1.5rem; border-radius: 30px; font-weight: bold; text-decoration: none; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); display: inline-flex; align-items: center; gap: 0.5rem; box-shadow: 0 8px 25px rgba(153, 64, 32, 0.4); position: relative; overflow: hidden; } .contact-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.6s; } .contact-btn:hover::before { left: 100%; } .contact-btn:hover { background: var(--gradient-primary); transform: translateY(-3px) scale(1.05); box-shadow: 0 12px 35px rgba(153, 64, 32, 0.6); } @media (max-width: 768px) { .main-nav { top: 8px; width: calc(100% - 14px); border-radius: 18px; padding: 12px 16px; gap: 12px; } .main-nav .logo { font-size: 1.1rem; } .side-menu-toggle { top: 12px; right: 12px; width: 42px; height: 42px; } .side-menu { width: min(280px, 78vw); } .main-nav-actions { margin-left: auto; } .admin-entry-btn { height: 32px; padding: 0 10px; font-size: 0.68rem; letter-spacing: 0.06em; } .theme-toggle { width: 34px; height: 34px; } } @media (max-width: 420px) { .main-nav { top: 6px; width: calc(100% - 10px); border-radius: 16px; padding: 10px 14px; gap: 10px; } .logo { font-size: 1rem; gap: 8px; } .whatsapp-logo { width: 40px !important; height: 40px !important; border-radius: 12px !important; } #admin-trigger { width: 26px !important; height: 26px !important; border-radius: 7px !important; } .theme-toggle { width: 34px; height: 34px; } .side-menu-toggle { width: 40px; height: 40px; } } /* Hero Section */ .hero { height: 100vh; height: 100svh; width: 100%; color: var(--white); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; position: relative; overflow: hidden; background: transparent !important; box-sizing: border-box; isolation: isolate; } .hero-video-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; min-height: 100%; z-index: -2; overflow: hidden; pointer-events: none; background-image: url('./logo.webp'); background-repeat: no-repeat; background-position: center; background-size: cover; filter: none; } .hero-video-container::after { content: none; display: none; background: none; } .hero-video-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; border: 0; opacity: 1; filter: none; } .hero-video-container iframe { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%) scale(1.15); z-index: -1; border: 0; } @keyframes fadeIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: none; z-index: 0; pointer-events: none; transition: background 0.35s ease, backdrop-filter 0.35s ease, -webkit-backdrop-filter 0.35s ease; display: none; } .hero.admin-reveal-blur::before { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; } .hero::after { content: none; position: absolute; inset: 0; background: none; mix-blend-mode: soft-light; opacity: 0; z-index: 1; pointer-events: none; display: none; } [data-theme='light'] .hero::before { background: none; } [data-theme='light'] .hero h1, [data-theme='light'] .hero-slogan, [data-theme='light'] .hero p, [data-theme='light'] .hero-slogan-sub { color: #FFFFFF; } [data-theme='light'] .hero h1 { color: #FF8C00; } [data-theme='light'] .brand-tagline { color: #FFFFFF; } [data-theme='light'] .hero h1, [data-theme='light'] .hero p, [data-theme='light'] .hero-slogan, [data-theme='light'] .hero-slogan-sub { text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.9), 0px 0px 20px rgba(0, 0, 0, 0.5); } [data-theme='light'] .hero-content { background: none; background-color: transparent; border: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; } [data-theme='light'] .hero-slogan { letter-spacing: 0.13em; } [data-theme='light'] .hero-security { color: #FF8C00; text-shadow: 0 0 8px rgba(255, 140, 0, 0.34); } [data-theme='light'] .hero-tag { background: none; background-color: transparent; color: #FF8C00; border-color: rgba(255, 140, 0, 0.42); box-shadow: none; } @media (max-width: 768px) { [data-theme='light'] .hero-content { background: none; background-color: transparent; border: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; } [data-theme='light'] .hero-slogan { letter-spacing: 0.11em; } } .hero-content { position: relative; z-index: 10; max-width: 800px; padding: 28px 36px; border-radius: 26px; border: none; background: none; background-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; animation: slideUp 1s ease-out 0.3s both; display: flex; flex-direction: column; align-items: center; gap: 6px; } .hero-content, .hero-text-box, .hero-tag, .service-chip, .hero-review-counter, .hero-slogan, .hero-slogan-sub { background: none; background-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; } .hero-tag { display: inline-flex; align-items: center; justify-content: center; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(255, 140, 0, 0.4); background: none; background-color: transparent; color: var(--orange); text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.65rem; font-weight: 700; box-shadow: none; margin-bottom: 12px; } @keyframes slideUp { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } } .hero h1 { font-size: 3rem; margin-bottom: 0.5rem; color: #FF8C00; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.96), 0 0 8px rgba(255, 140, 0, 0.58), 0 0 15px rgba(255, 140, 0, 0.42); font-weight: 700; animation: slideUp 1s ease-out 0.3s both; font-family: 'Sora', 'Segoe UI', sans-serif; text-transform: uppercase; letter-spacing: -0.02em; } .hero h2, .hero p { text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.9), 0px 0px 20px rgba(0, 0, 0, 0.5); } .hero-title-accent { color: #FF8C00; } .hero h2 { color: #FF8C00; text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.9), 0px 0px 20px rgba(0, 0, 0, 0.5); font-weight: 700; } .service-bar { width: min(760px, 100%); margin: 0 auto 12px; overflow: hidden; border-radius: 999px; -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); } .service-bar-inner { display: inline-flex; align-items: center; gap: 10px; width: max-content; white-space: nowrap; padding: 4px 0; animation: serviceBarScroll 24s linear infinite; } .service-bar:hover .service-bar-inner { animation-play-state: paused; } .service-chip { display: inline-flex; align-items: center; justify-content: center; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(255, 140, 0, 0.65); background: none; background-color: transparent; color: rgba(255, 200, 145, 0.98); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; box-shadow: none; } [data-theme='light'] .service-chip { background: none; background-color: transparent; color: #FF8C00; border-color: rgba(255, 140, 0, 0.58); box-shadow: none; } @keyframes serviceBarScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .hero-security { color: #FF8C00; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.92), 0 0 12px rgba(255, 140, 0, 0.74), 0 0 28px rgba(255, 140, 0, 0.45); } .brand-tagline { margin: 0 0 10px; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(255, 255, 255, 0.72); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.84); font-weight: 700; } .hero-slogan { font-size: clamp(1.12rem, 3.2vw, 1.72rem); color: #FFFFFF; font-weight: 800; margin-bottom: 0.55rem; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.97), 0 0 5px rgba(255, 140, 0, 0.55), 0 0 11px rgba(255, 140, 0, 0.38); font-style: normal; letter-spacing: 0.15em; line-height: 1.28; text-transform: uppercase; font-family: 'Inter', 'Montserrat', 'Sora', 'Segoe UI', sans-serif; display: block; text-align: center; max-width: min(860px, 100%); padding: 0; border-radius: 0; background: transparent; border: none; opacity: 0; animation: heroTaglineRise 1s cubic-bezier(0.4, 0, 0.2, 1) 0.6s both, pulse 3s ease-in-out 0.6s infinite; will-change: text-shadow; } .hero-slogan-sub { margin: 0 0 1rem; color: rgba(255, 255, 255, 0.9); font-size: clamp(0.8rem, 2.3vw, 1.02rem); font-weight: 700; letter-spacing: 0.04em; text-align: center; max-width: min(760px, 100%); font-family: 'Inter', 'Montserrat', 'Sora', 'Segoe UI', sans-serif; text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.9), 0px 0px 20px rgba(0, 0, 0, 0.5); } .hero-review-counter { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255, 140, 0, 0.55); background: none; background-color: transparent; background-image: none; background-size: auto; background-repeat: no-repeat; box-shadow: none; margin: 0 0 10px; } .hero-review-counter-label { color: rgba(255, 230, 204, 0.9); font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; } #heroReviewTotalCount { color: #FF8C00; font-size: clamp(1.1rem, 3.3vw, 1.4rem); font-weight: 900; letter-spacing: 0.04em; text-shadow: 0 0 12px rgba(255, 140, 0, 0.45); } .hero-slogan-accent { color: var(--orange); text-shadow: 0 0 15px rgba(255, 140, 0, 0.6); } @keyframes heroTaglineRise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse { 0%, 100% { text-shadow: 0 2px 6px rgba(0, 0, 0, 0.97), 0 0 5px rgba(255, 140, 0, 0.55), 0 0 10px rgba(255, 140, 0, 0.38); } 50% { text-shadow: 0 2px 6px rgba(0, 0, 0, 0.97), 0 0 15px rgba(255, 140, 0, 0.82), 0 0 28px rgba(255, 140, 0, 0.54); } } @media (max-width: 768px) { .hero { justify-content: center; padding-top: 0; padding-bottom: 0; padding-left: 16px; padding-right: 16px; } .hero-content { width: min(800px, 92vw); padding: 22px 20px; margin-top: 0; } .hero h1 { font-size: 2rem; } .hero-slogan { font-size: clamp(0.92rem, 4.4vw, 1.18rem); line-height: 1.35; } .hero-slogan-sub { font-size: clamp(0.74rem, 3.4vw, 0.9rem); font-weight: 700; letter-spacing: 0.03em; margin-bottom: 0.9rem; } .brand-tagline { font-weight: 700; } .service-bar { width: min(620px, 100%); margin-bottom: 10px; } .service-bar-inner { gap: 6px; padding: 2px 4px; } .service-chip { padding: 5px 10px; margin: 0 1px; font-size: 0.64rem; letter-spacing: 0.04em; white-space: nowrap; flex-shrink: 0; } } @media (max-width: 768px) and (max-height: 700px) { .hero-content { padding: 16px 16px; } .hero-slogan { margin-bottom: 1rem; } .hero p { margin-bottom: 1.25rem; } .btn { margin-top: 14px; } } @keyframes fadeInSlogan { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .service-bar-inner { animation: none; } } .hero p { font-size: clamp(1rem, 3.8vw, 1.4rem); margin-bottom: 2rem; color: #FFFFFF; text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.9), 0px 0px 20px rgba(0, 0, 0, 0.5); animation: slideUp 1s ease-out 0.5s both; } .hero h2, .hero p, .hero .hero-tag, .hero .hero-slogan, .hero .hero-slogan-sub, .hero .brand-tagline, .hero .hero-security, .hero .hero-review-counter-label, .hero #heroReviewTotalCount, .hero .service-chip { text-shadow: 2px 2px 10px rgba(0, 0, 0, 1), 0px 0px 20px rgba(0, 0, 0, 0.8); } .hero-actions { width: 100%; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 14px; } .btn { display: inline-block; background: var(--gradient-primary); color: var(--white); padding: 14px 28px; border-radius: 30px; text-decoration: none; font-weight: 600; margin-top: 20px; margin-left: 10px; margin-right: 10px; transition: all 0.3s ease; letter-spacing: 1px; text-transform: uppercase; border: none; cursor: pointer; position: relative; overflow: hidden; } .hero .btn { margin-left: 0; margin-right: 0; } @media (max-width: 600px) { .hero .btn { width: min(92vw, 360px); text-align: center; margin-left: 0; margin-right: 0; } } #heroQuoteBtn { background: var(--gradient-primary); border: none; color: var(--white); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.55); } #heroQuoteBtn:hover { background: var(--gradient-primary); color: var(--white); transform: translateY(-2px) scale(1.01); box-shadow: 0 20px 44px rgba(0, 0, 0, 0.6), 0 0 22px rgba(255, 140, 0, 0.55); } #heroQuoteBtn:focus-visible { outline: 2px solid rgba(255, 140, 0, 0.7); outline-offset: 3px; } .btn:hover { background: var(--gradient-primary); transform: translateY(-3px); box-shadow: 0 8px 30px rgba(153, 64, 32, 0.7); } /* Section Styles */ .main-nav { z-index: 10000; } section { position: relative; z-index: 1; background: transparent; width: 100%; } section[id], .section[id] { scroll-margin-top: 100px; } .section { padding: 100px 5% 80px 5%; width: min(1200px, 92%); margin: 60px auto; border-radius: 28px; background: var(--surface-card); border: 1px solid var(--card-border); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); backdrop-filter: blur(10px); } @media (max-width: 768px) { section[id], .section[id] { scroll-margin-top: 100px; } .section { padding: 100px 5% 60px 5% !important; } } .section-title { text-align: center; font-size: 2.8rem; letter-spacing: -1px; background: linear-gradient(to right, #fff, var(--orange)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 2rem; position: relative; display: inline-block; width: 100%; font-weight: 700; } .section-title a { color: inherit; text-decoration: none; background: inherit; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .section-title::after { content: none; } .section-subtitle { text-align: center; color: var(--text-muted); font-size: 1.1rem; margin: 20px auto 50px; max-width: 640px; } [data-theme='light'] .section-title, [data-theme='light'] .section-title a { color: #1a1a1a; background: none; -webkit-text-fill-color: #1a1a1a; text-shadow: none; } [data-theme='light'] .section-subtitle { color: rgba(27, 27, 27, 0.68); } /* About / Why Choose Us Section */ .about-section { position: relative; overflow: hidden; } .about-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; align-items: center; } .about-visual-panel { position: relative; background: linear-gradient(145deg, rgba(12, 12, 12, 0.96), rgba(4, 4, 4, 0.98)); border-radius: 26px; padding: 32px; border: 1px solid rgba(255, 140, 0, 0.25); box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55), 0 0 35px rgba(255, 140, 0, 0.18); overflow: hidden; isolation: isolate; } .about-visual-panel::before { content: ''; position: absolute; inset: -40% 40% 40% -35%; background: radial-gradient(circle, rgba(255, 140, 0, 0.35), transparent 60%); opacity: 0.8; z-index: 0; } .about-visual-panel::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(transparent 92%, rgba(255, 255, 255, 0.05) 92%), linear-gradient(90deg, transparent 92%, rgba(255, 255, 255, 0.05) 92%); background-size: 26px 26px; opacity: 0.35; z-index: 0; } .about-visual-panel > * { position: relative; z-index: 1; } .about-visual-panel .about-visual-image-wrap { position: relative; width: 100%; border-radius: 18px; overflow: hidden; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 140, 0, 0.25); min-height: 280px; } .about-visual-panel .about-visual-image-wrap::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 140, 0, 0.14) 45%, rgba(255, 255, 255, 0.04) 100%); background-size: 240% 100%; transform: translate3d(0, 0, 0); opacity: 0; transition: opacity 180ms ease; } .about-visual-panel.is-loading .about-visual-image-wrap::before { opacity: 1; animation: shimmerSweep 1.1s linear infinite; } .about-visual-panel .about-visual-image, .about-visual-panel .about-visual-video { width: 100%; height: auto; display: block; opacity: 1; transition: opacity 220ms ease; } .about-visual-panel .about-visual-video { min-height: 280px; object-fit: cover; } .about-visual-panel.is-loading .about-visual-image, .about-visual-panel.is-loading .about-visual-video { opacity: 0; } @keyframes shimmerSweep { 0% { background-position: 180% 0; } 100% { background-position: -60% 0; } } .about-visual-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 28px; } .about-visual-label { display: flex; flex-direction: column; gap: 6px; } .about-visual-eyebrow { text-transform: uppercase; letter-spacing: 1.5px; font-size: 0.75rem; color: rgba(255, 255, 255, 0.6); } .about-visual-title { font-size: 1.3rem; color: var(--white); } .about-visual-badge { padding: 6px 14px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; color: var(--orange); border: 1px solid rgba(255, 140, 0, 0.5); background: rgba(255, 140, 0, 0.12); } .about-visual-core { display: grid; place-items: center; position: relative; padding: 30px 0; } .about-visual-ring { width: min(220px, 65vw); aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(255, 140, 0, 0.35); box-shadow: inset 0 0 30px rgba(255, 140, 0, 0.2), 0 0 25px rgba(255, 140, 0, 0.35); display: grid; place-items: center; } .about-visual-ring-core { width: 48%; height: 48%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 140, 0, 0.55) 0%, rgba(255, 140, 0, 0.08) 70%); box-shadow: 0 0 24px rgba(255, 140, 0, 0.55); } .about-visual-lines { position: absolute; inset: 0; } .about-visual-lines span { position: absolute; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 140, 0, 0.6), transparent); } .about-visual-lines span:nth-child(1) { top: 35%; } .about-visual-lines span:nth-child(2) { top: 50%; } .about-visual-lines span:nth-child(3) { top: 65%; } .about-visual-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 24px; } .about-visual-stat { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 140, 0, 0.18); border-radius: 14px; padding: 12px 14px; text-align: center; } .about-visual-stat span { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; color: rgba(255, 255, 255, 0.6); } .about-visual-stat strong { display: block; font-size: 1.15rem; color: var(--white); margin-top: 4px; } [data-theme='light'] .about-visual-panel { background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(245, 245, 247, 0.96)); border-color: rgba(255, 140, 0, 0.24); box-shadow: 0 18px 34px rgba(0, 0, 0, 0.12); } [data-theme='light'] .about-visual-panel::after { background-image: linear-gradient(transparent 92%, rgba(27, 27, 27, 0.08) 92%), linear-gradient(90deg, transparent 92%, rgba(27, 27, 27, 0.08) 92%); opacity: 0.28; } [data-theme='light'] .about-visual-panel .about-visual-image-wrap { background: rgba(29, 29, 31, 0.04); border-color: rgba(255, 140, 0, 0.22); } [data-theme='light'] .about-visual-eyebrow { color: rgba(27, 27, 27, 0.62); } [data-theme='light'] .about-visual-title { color: var(--text-main); } [data-theme='light'] .about-visual-stat { background: rgba(29, 29, 31, 0.04); border-color: rgba(255, 140, 0, 0.2); } [data-theme='light'] .about-visual-stat span { color: rgba(27, 27, 27, 0.6); } [data-theme='light'] .about-visual-stat strong { color: var(--text-main); } .about-details .section-title, .about-details .section-subtitle { text-align: left; margin-left: 0; margin-right: 0; max-width: none; } .about-details .section-title { margin-bottom: 18px; } .about-details .section-subtitle { margin: 0 0 28px; } .about-benefits { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; } .about-benefits li { display: flex; gap: 16px; padding: 18px 20px; border-radius: 18px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 140, 0, 0.14); box-shadow: 0 16px 30px rgba(0, 0, 0, 0.35); align-items: flex-start; } .about-benefits i { font-size: 1.4rem; color: var(--orange); margin-top: 2px; filter: drop-shadow(0 0 8px rgba(255, 140, 0, 0.5)); } .about-benefit-content h3 { margin: 0 0 6px; font-size: 1.05rem; color: var(--white); } .about-benefit-content p { margin: 0; color: rgba(255, 255, 255, 0.72); line-height: 1.6; } @media (max-width: 980px) { .about-grid { grid-template-columns: 1fr; } .about-visual-panel { padding: 28px; } .about-details .section-title, .about-details .section-subtitle { text-align: center; } .about-details .section-subtitle { margin-bottom: 24px; } } @media (max-width: 600px) { .about-visual-panel { padding: 24px; } .about-visual-stats { grid-template-columns: 1fr; } .about-benefits li { padding: 16px; } } /* Services Section */ #services { position: relative; overflow: hidden; } #services .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 28px; } .services-empty { grid-column: 1 / -1; padding: 24px; border-radius: 16px; border: 1px dashed rgba(255, 140, 0, 0.35); background: rgba(0, 0, 0, 0.35); color: rgba(255, 255, 255, 0.75); text-align: center; font-weight: 600; } #services .card { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); padding: 40px 30px; min-height: 260px; border-radius: 20px; box-shadow: none; border: 1px solid rgba(255, 140, 0, 0.1); border-top: 4px solid var(--orange); transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); text-align: left; opacity: 0; animation: fadeInUp 0.6s ease-out forwards; position: relative; overflow: hidden; } #services .card::before { content: none; } #services .card:hover::before { left: 0; } #services .card:hover { transform: translateY(-10px); border-color: var(--orange); box-shadow: 0 15px 35px -5px var(--orange-glow), 0 0 15px rgba(255, 140, 0, 0.1); } #services .card-glow { position: absolute; inset: 0; border-radius: inherit; border: 1px solid rgba(255, 140, 0, 0.25); box-shadow: 0 0 18px rgba(255, 140, 0, 0.25); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; } #services .card:hover .card-glow { opacity: 1; } #services .services-grid .card { cursor: default; } #services .services-grid .card { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(15px) saturate(140%); -webkit-backdrop-filter: blur(15px) saturate(140%); padding: 26px 22px; min-height: 200px; border-radius: 16px; border: 1px solid rgba(255, 140, 0, 0.1); border-top: 4px solid var(--orange); box-shadow: none; transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); touch-action: manipulation; } #services .services-grid .card::before { content: none; } #services .services-grid .card:hover::before { left: 0; } #services .services-grid .card:hover { transform: translateY(-10px); border-color: var(--orange); box-shadow: 0 15px 35px -5px var(--orange-glow), 0 0 15px rgba(255, 140, 0, 0.1); } #services .services-grid .card:active { transform: translateY(-6px) scale(0.99); box-shadow: 0 12px 28px -6px var(--orange-glow), 0 0 12px rgba(255, 140, 0, 0.12); border-color: var(--orange); } #services .services-grid .card.highlight { border-color: rgba(255, 140, 0, 0.65); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.14), 0 0 0 3px rgba(255, 140, 0, 0.18), 0 0 32px rgba(255, 140, 0, 0.35); animation: hailifuServicePulse 1.25s ease-in-out 2; } #services .services-grid .card.highlight-service { border-color: rgba(255, 140, 0, 0.65); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.14), 0 0 0 3px rgba(255, 140, 0, 0.18), 0 0 32px rgba(255, 140, 0, 0.35); animation: hailifuServicePulse 1.25s ease-in-out 2; } @keyframes hailifuServicePulse { 0%, 100% { box-shadow: 0 18px 44px rgba(0, 0, 0, 0.14), 0 0 0 3px rgba(255, 140, 0, 0.18), 0 0 32px rgba(255, 140, 0, 0.35); transform: translateY(0); } 50% { box-shadow: 0 18px 44px rgba(0, 0, 0, 0.14), 0 0 0 5px rgba(255, 140, 0, 0.26), 0 0 46px rgba(255, 140, 0, 0.48); transform: translateY(-2px); } } .showcase-item.highlight { box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24), 0 0 0 3px rgba(255, 140, 0, 0.18), 0 0 32px rgba(255, 140, 0, 0.35); animation: hailifuShowcasePulse 1.25s ease-in-out 2; } @keyframes hailifuShowcasePulse { 0%, 100% { box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24), 0 0 0 3px rgba(255, 140, 0, 0.18), 0 0 32px rgba(255, 140, 0, 0.35); } 50% { box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24), 0 0 0 5px rgba(255, 140, 0, 0.26), 0 0 46px rgba(255, 140, 0, 0.48); } } #services .services-grid .card { position: relative; overflow: hidden; isolation: isolate; } #services .services-grid .card .service-media { position: absolute; inset: 0; z-index: 0; border-radius: inherit; overflow: hidden; pointer-events: none; background: color-mix(in srgb, var(--text-primary) 6%, transparent); } #services .services-grid .card .service-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.35) 45%, rgba(0,0,0,0.78) 100%); } #services .services-grid .card .service-media img, #services .services-grid .card .service-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } #services .services-grid .card .service-media video { pointer-events: none; } #services .services-grid .card > :not(.service-media):not(.card-glow) { position: relative; z-index: 1; } #services .services-grid .card:nth-child(1) { animation-delay: 0.1s; } #services .services-grid .card:nth-child(2) { animation-delay: 0.2s; } #services .services-grid .card:nth-child(3) { animation-delay: 0.3s; } #services .services-grid .card:nth-child(4) { animation-delay: 0.4s; } #services .services-grid .card:nth-child(5) { animation-delay: 0.5s; } #services .services-grid .card:nth-child(6) { animation-delay: 0.6s; } #services .services-grid .card:nth-child(7) { animation-delay: 0.7s; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } #services .card i { font-size: 2rem; margin-bottom: 20px; background: var(--gradient-primary); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 8px var(--orange-glow)); transition: transform 0.3s ease; } #services .card:hover i { transform: scale(1.1) rotate(5deg); } #services .services-grid .card i { font-size: 1.6rem; margin-bottom: 14px; background: var(--gradient-primary); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 8px var(--orange-glow)); transition: transform 0.3s ease; } #services .services-grid .card:hover i, #services .services-grid .card:active i { transform: scale(1.1) rotate(5deg); } #services .services-grid .card .curtain-brand-logo { transition: transform 0.22s ease, filter 0.22s ease; filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.22)); } #services .services-grid .card:hover .curtain-brand-logo, #services .services-grid .card:active .curtain-brand-logo { transform: translateY(-1px) scale(1.02); filter: drop-shadow(0 0 10px rgba(255, 140, 0, 0.45)); } #services .card h3 { font-size: 1.5rem; color: var(--text-primary); margin-bottom: 15px; } #services .services-grid .card h3 { color: var(--text-primary); font-size: 1.12rem; margin-bottom: 10px; font-weight: 700; } #services .card p { color: rgba(255, 255, 255, 0.7); line-height: 1.8; } #services .services-grid .card p { color: rgba(255, 255, 255, 0.7); line-height: 1.6; font-size: 0.95rem; } @media (max-width: 768px) { #services .services-grid { grid-template-columns: 1fr; gap: 0; } #services .services-grid .card { display: grid; grid-template-columns: 64px 1fr; column-gap: 16px; align-items: center; padding: 18px 16px; min-height: 0; border-radius: 16px; border: 1px solid rgba(255, 140, 0, 0.1); border-top: 4px solid var(--orange); box-shadow: none; background: rgba(255, 255, 255, 0.03); margin-bottom: 20px; } #services .services-grid .card:last-child { margin-bottom: 0; } #services .services-grid .card i, #services .services-grid .card .curtain-brand-logo { grid-column: 1; grid-row: 1 / span 4; align-self: center; justify-self: start; margin-bottom: 0; flex-shrink: 0; } #services .services-grid .card i { width: auto; height: auto; font-size: 1.6rem; border-radius: 0; background: var(--gradient-primary); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; border: none; box-shadow: none; filter: drop-shadow(0 0 8px var(--orange-glow)); } #services .services-grid .card .curtain-brand-logo { width: 54px; height: 54px; padding: 10px; box-sizing: border-box; border-radius: 999px; background: rgba(255, 140, 0, 0.14); border: 1px solid rgba(255, 140, 0, 0.22); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } #services .services-grid .card h3, #services .services-grid .card p, #services .services-grid .card .service-tagline { grid-column: 2; } #services .services-grid .card h3 { font-size: 1.08rem; margin: 0 0 6px; font-weight: 800; color: #ffffff; } #services .services-grid .card .service-tagline { margin: 0 0 6px; } #services .services-grid .card p { font-size: 0.9rem; line-height: 1.5; margin: 0; color: rgba(255, 255, 255, 0.7); } #services .services-grid .card:hover { transform: translate3d(0, -6px, 0); box-shadow: 0 12px 28px -6px var(--orange-glow), 0 0 12px rgba(255, 140, 0, 0.12); } #services .services-grid .card:active { transform: translateY(-1px) scale(0.995); } } #service-blindcurtain { border-top-color: var(--accent-gold); border: 1px solid var(--accent-gold-border); box-shadow: 0 18px 45px rgba(0, 0, 0, 0.12), 0 0 28px rgba(212, 175, 55, 0.2); } #service-blindcurtain::after { content: ''; position: absolute; inset: 8px; border-radius: 16px; border: 1px solid var(--accent-gold-highlight); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; } #service-blindcurtain:hover::after { opacity: 1; } .curtain-brand-logo { display: block; } .curtain-brand-panel { transform-origin: center; transition: transform 0.35s ease; } #service-blindcurtain .curtain-brand-logo { width: 78px; height: 60px; margin: 0 auto 18px; } #services #service-blindcurtain .curtain-brand-logo { width: 66px; height: 52px; margin: 0 auto 14px; } .showcase-placeholder .curtain-brand-logo { width: 52px; height: 40px; margin-bottom: 12px; } .project-category--curtain { display: inline-flex; align-items: center; gap: 6px; } .curtain-brand-logo--small { width: 22px; height: 16px; } .curtain-brand-logo:hover .curtain-brand-panel--left, #service-blindcurtain:hover .curtain-brand-panel--left, .showcase-item:hover .curtain-brand-panel--left, .project-category--curtain:hover .curtain-brand-panel--left { transform: translateX(-4px); } .curtain-brand-logo:hover .curtain-brand-panel--right, #service-blindcurtain:hover .curtain-brand-panel--right, .showcase-item:hover .curtain-brand-panel--right, .project-category--curtain:hover .curtain-brand-panel--right { transform: translateX(4px); } #service-blindcurtain .service-tagline { font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(153, 107, 61, 0.8); margin: -6px 0 14px; } /* Work Showcase Section */ .showcase { padding: 100px 5% 80px; background: var(--surface-card); border: 1px solid var(--card-border); box-shadow: var(--card-shadow); border-radius: 28px; width: min(1200px, 92%); margin: 60px auto; position: relative; } .showcase::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 10% 20%, rgba(255, 140, 0, 0.08), transparent 60%), radial-gradient(circle at 80% 10%, rgba(255, 140, 0, 0.06), transparent 55%); z-index: 0; } .showcase { overflow: hidden; } .showcase-content { width: min(1200px, 95%); margin: 0 auto; position: relative; z-index: 1; } .showcase-header { display: block; margin-bottom: 28px; } .showcase-heading { display: flex; flex-direction: column; gap: 8px; text-align: center; align-items: center; } .showcase-heading h2 { color: var(--text-primary); font-size: clamp(2rem, 3vw, 2.5rem); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; font-family: 'Montserrat', 'Inter', 'Segoe UI', sans-serif; margin: 0; position: relative; display: inline-block; padding: 0 0 12px; line-height: 1.1; background: linear-gradient(to right, #fff, var(--orange)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } [data-theme='light'] .showcase-heading h2 { color: #1a1a1a; background: none; -webkit-text-fill-color: #1a1a1a; } .showcase-heading .section-description { color: var(--text-muted); margin: 0 0 20px; font-weight: 400; font-size: 1.1rem; max-width: 640px; } .showcase-heading h2::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 64px; height: 3px; background: var(--brand-primary); transform: translateX(-50%); border-radius: 999px; } .showcase-filters { display: inline-flex; justify-content: center; gap: 8px; flex-wrap: wrap; } .filter-btn { background: transparent; color: rgba(255, 255, 255, 0.82); border: 1px solid rgba(255, 140, 0, 0.35); padding: 8px 16px; border-radius: 999px; font-size: 0.8rem; font-weight: 700; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); text-transform: uppercase; letter-spacing: 1px; } .filter-btn:hover { transform: translateY(-2px); border-color: rgba(255, 140, 0, 0.8); } .filter-btn.active { background: #FF8C00; color: #000000; border-color: rgba(255, 140, 0, 0.9); box-shadow: 0 0 15px rgba(255, 140, 0, 0.4); transform: translateY(-2px); } /* More specific active state */ .showcase-filters .filter-btn.active { background: #FF8C00 !important; color: #000000 !important; border-color: rgba(255, 140, 0, 0.9); box-shadow: 0 0 15px rgba(255, 140, 0, 0.4); } #showcase .showcase-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 50px; } .showcase-empty { grid-column: 1 / -1; padding: 30px; border-radius: 16px; border: 1px dashed rgba(255, 140, 0, 0.35); background: rgba(0, 0, 0, 0.35); color: rgba(255, 255, 255, 0.75); text-align: center; font-weight: 600; } @media (max-width: 768px) { #showcase .showcase-grid { grid-template-columns: 1fr; } } @media (max-width: 520px) { #showcase .showcase-grid { grid-template-columns: 1fr; } } .showcase-item { position: relative; overflow: hidden; border-radius: 15px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); aspect-ratio: 4 / 3; cursor: pointer; transition: opacity 0.35s ease, transform 0.35s ease, box-shadow 0.4s ease, border-color 0.4s ease; opacity: 1; animation: fadeInUp 0.6s ease-out forwards; background: #1a1a1a; border: 1px solid #333; touch-action: pan-y; } #showcase .card { position: relative; overflow: hidden; border-radius: 15px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); aspect-ratio: 4 / 3; cursor: pointer; transition: all 0.4s ease; opacity: 1; animation: fadeInUp 0.6s ease-out forwards; background: #1a1a1a; border: 1px solid #333; touch-action: pan-y; } .showcase-card { cursor: pointer; } .showcase-media { display: none; } .showcase-item .showcase-placeholder { position: relative; z-index: 1; } .showcase-item .project-category { position: absolute; z-index: 5; top: 14px; left: 14px; padding: 6px 12px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #FF8C00; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 140, 0, 0.45); box-shadow: 0 10px 18px rgba(0, 0, 0, 0.2); backdrop-filter: blur(4px); pointer-events: none; } .showcase-item .project-media-count { position: absolute; z-index: 5; top: 14px; right: 14px; padding: 6px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: #ffffff; background: rgba(0, 0, 0, 0.6); border: 1px solid rgba(255, 140, 0, 0.5); display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 10px 18px rgba(0, 0, 0, 0.2); backdrop-filter: blur(4px); pointer-events: none; } .showcase-item .project-media-count i { color: #FF8C00; font-size: 0.75rem; } .showcase-item .project-media-count.is-hidden { display: none; } .showcase-item .showcase-overlay { z-index: 4; pointer-events: none; } .showcase-item .showcase-bg { position: absolute; inset: 0; z-index: 0; } .showcase-item .showcase-bg img, .showcase-item .showcase-bg video { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1); filter: grayscale(20%); transition: transform 0.4s ease, filter 0.4s ease; will-change: transform; pointer-events: none; } .showcase-item.has-media .showcase-placeholder { display: flex; } .showcase-item.has-media .showcase-placeholder { background: none; } .showcase-item.is-hidden { opacity: 0; transform: scale(0.96); pointer-events: none; } .showcase-item.is-visible { opacity: 1; transform: scale(1); } .showcase-item:nth-child(1) { animation-delay: 0.1s; } .showcase-item:nth-child(2) { animation-delay: 0.2s; } .showcase-item:nth-child(3) { animation-delay: 0.3s; } .showcase-item:nth-child(4) { animation-delay: 0.4s; } .showcase-item:nth-child(5) { animation-delay: 0.5s; } .showcase-item:nth-child(6) { animation-delay: 0.6s; } .showcase-item:nth-child(7) { animation-delay: 0.7s; } .showcase-item:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 22px 44px rgba(0, 0, 0, 0.55); border-color: #FF8C00; } .showcase-card:hover .showcase-bg img, .showcase-card:hover .showcase-bg video { transform: scale(1.05); filter: grayscale(0%); } .showcase-item img, .showcase-item video { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease, filter 0.4s ease; filter: grayscale(20%); } .project-thumb img, .project-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; } .project-thumb-gallery { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 4px; width: 100%; height: 100%; } .project-thumb-tile { position: relative; overflow: hidden; border-radius: 10px; background: rgba(0, 0, 0, 0.5); } .project-thumb-tile img, .project-thumb-tile video { width: 100%; height: 100%; object-fit: cover; display: block; } .project-thumb-tile.is-empty::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 140, 0, 0.08), rgba(0, 0, 0, 0.6)); } .project-thumb-count { position: absolute; bottom: 8px; right: 8px; padding: 4px 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.75); border: 1px solid rgba(255, 140, 0, 0.5); color: var(--white); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; z-index: 2; } .showcase-item:hover img, .showcase-item:hover video { transform: scale(1.15); } /* Featured Work Section */ .featured-work { padding: 80px 5% 70px; background: radial-gradient(circle at top, rgba(24, 24, 24, 0.9) 0%, rgba(8, 8, 8, 0.95) 55%, rgba(2, 2, 2, 0.98) 100%); position: relative; overflow: visible; scroll-snap-type: none; } .featured-work::after { content: ''; position: absolute; inset: 0; background: linear-gradient(130deg, rgba(255, 140, 0, 0.08), rgba(0, 0, 0, 0.2)); opacity: 0.6; pointer-events: none; } .featured-work .section-title, .featured-work .section-subtitle { position: relative; z-index: 1; } .featured-bento { position: relative; z-index: 1; width: min(1200px, 95%); margin: 50px auto 0; display: block; min-height: clamp(260px, 40vw, 520px); scroll-snap-type: none; } .featured-loop { position: relative; width: 100%; scroll-snap-type: none; } .featured-loop-viewport { position: relative; width: 100%; border-radius: 18px; overflow: hidden; min-height: clamp(260px, 40vw, 520px); scroll-snap-type: none; } .featured-loop-track { position: relative; width: 100%; min-height: clamp(260px, 40vw, 520px); transform: translate3d(0, 0, 0); transition: transform 0.62s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-wrap: nowrap; } .featured-loop-slide { position: relative; inset: auto; width: 100%; flex: 0 0 100%; opacity: 0; transform: none; transition: opacity 0.5s ease; will-change: opacity; pointer-events: none; } .featured-loop-slide.is-active { opacity: 1; transform: none; pointer-events: auto; z-index: 1; } .featured-loop.no-transition .featured-loop-slide { transition: none; } .featured-loop.no-transition .featured-loop-track { transition: none; } .featured-loop .featured-card { width: 100%; min-height: clamp(260px, 40vw, 520px); } .featured-loop .featured-card:hover { transform: none; } .featured-loop-dots { display: flex; align-items: center; justify-content: center; gap: 10px; padding-top: 14px; } .featured-loop-dot { width: 8px; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.25); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); transition: transform 0.2s ease, background 0.2s ease; } .featured-loop-dot.active { background: var(--orange); transform: scale(1.15); } .featured-loop-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(255, 140, 0, 0.35); background: rgba(0, 0, 0, 0.55); color: rgba(255, 255, 255, 0.92); display: grid; place-items: center; cursor: pointer; z-index: 4; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0.7; transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease; } .featured-loop-nav.prev { left: 14px; } .featured-loop-nav.next { right: 14px; } .featured-loop-viewport:hover .featured-loop-nav { opacity: 1; } .featured-loop-nav:hover { background: rgba(255, 140, 0, 0.18); } .featured-card { position: relative; overflow: hidden; border-radius: 18px; background: rgba(0, 0, 0, 0.92); border: 1px solid rgba(255, 140, 0, 0.18); min-height: 220px; transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; display: flex; align-items: stretch; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .featured-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(140deg, rgba(255, 140, 0, 0.2), transparent 60%); opacity: 0.35; pointer-events: none; } .featured-card:hover { transform: translate3d(0, -6px, 0); border-color: var(--orange); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), 0 0 18px rgba(255, 140, 0, 0.45); } .featured-card-media { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.04); } .featured-card-media::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 55%; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.78) 100%); z-index: 2; pointer-events: none; } .featured-card-media::before { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255, 140, 0, 0.06), rgba(255, 255, 255, 0.06), rgba(255, 140, 0, 0.06)); opacity: 1; animation: featuredSkeletonPulse 1.6s ease-in-out infinite; z-index: 2; pointer-events: none; transition: opacity 0.35s ease; } .featured-card-media::after { content: ''; position: absolute; inset: -40% 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14), transparent); transform: translateX(-60%); animation: featuredSkeletonShimmer 1.6s linear infinite; opacity: 0.85; z-index: 3; pointer-events: none; transition: opacity 0.35s ease; } .featured-card-media.is-loaded::before, .featured-card-media.is-loaded::after { opacity: 0; animation: none; } @keyframes featuredSkeletonPulse { 0%, 100% { opacity: 0.78; } 50% { opacity: 0.98; } } @keyframes featuredSkeletonShimmer { 0% { transform: translateX(-60%); } 100% { transform: translateX(60%); } } .featured-card-media img, .featured-card-media video { width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s ease; position: relative; z-index: 1; } .featured-card-media iframe { width: 100%; height: 100%; border: 0; display: block; position: relative; z-index: 1; } .featured-card:hover img, .featured-card:hover video { transform: scale(1.05); } .featured-card-content { position: relative; z-index: 1; padding: 22px; margin-top: auto; width: 100%; background: linear-gradient(180deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.75) 70%, rgba(0, 0, 0, 0.92) 100%); } .featured-card-category { display: inline-flex; align-items: center; gap: 8px; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1.5px; color: rgba(255, 140, 0, 0.9); margin-bottom: 10px; } .featured-card-title { font-size: 1.4rem; font-weight: 700; color: var(--white); margin-bottom: 8px; } .featured-card-description { color: rgba(255, 255, 255, 0.75); font-size: 0.95rem; line-height: 1.5; } .featured-card .video-badge { position: absolute; top: 16px; right: 16px; background: rgba(0, 0, 0, 0.7); border: 1px solid rgba(255, 140, 0, 0.4); color: var(--orange); padding: 6px 10px; border-radius: 999px; font-size: 0.75rem; z-index: 2; } .featured-card.span-7 { grid-column: span 7; } .featured-card.span-5 { grid-column: span 5; } .featured-card.span-6 { grid-column: span 6; } .featured-card.span-4 { grid-column: span 4; } .featured-card.span-8 { grid-column: span 8; } .featured-card.span-12 { grid-column: span 12; } @media (max-width: 1024px) { .featured-card.span-7, .featured-card.span-8 { grid-column: span 6; } .featured-card.span-5, .featured-card.span-6, .featured-card.span-4 { grid-column: span 3; } } @media (max-width: 768px) { .featured-loop { width: 100%; max-width: 100%; transform: none; } .featured-bento { width: 100%; margin-top: 24px; } .featured-loop-viewport { width: 100%; margin-left: 0; margin-right: 0; border-radius: 0; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scroll-behavior: smooth; touch-action: pan-x pan-y; } .featured-loop-track { width: 100%; will-change: transform; transform: none; transition: none; } .featured-loop-slide { width: 100%; flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; padding: 0 12px; box-sizing: border-box; opacity: 1; transition: none; pointer-events: auto; } .featured-loop .featured-card { width: 100%; min-height: 400px; aspect-ratio: 4 / 3; min-height: 0; } .featured-card-content { padding: 18px; } .featured-card-title { font-size: 1.5rem; } .featured-card { grid-column: span 1 !important; } } @media (prefers-reduced-motion: reduce) { .featured-loop-track { transition: none; } .featured-loop-dot { transition: none; } .featured-loop-nav { transition: none; } } .showcase-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to top, rgba(255, 140, 0, 0.85) 0%, rgba(26, 26, 26, 0.82) 55%, rgba(0, 0, 0, 0) 100%); opacity: 0; transition: opacity 0.4s ease; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 25px; backdrop-filter: blur(2px); } .showcase-item:hover .showcase-overlay, .showcase-card:hover .showcase-overlay { opacity: 1; } .showcase-title { color: #ffffff; font-size: 1.3rem; font-weight: 700; margin-bottom: 0; transform: translateY(20px); transition: transform 0.4s ease; text-transform: uppercase; letter-spacing: 1px; } .showcase-description { color: #AAAAAA; font-size: 0.95rem; line-height: 1.5; margin: 0; transform: translateY(20px); transition: transform 0.4s ease 0.1s; } .showcase-item:hover .showcase-title, .showcase-item:hover .showcase-description, .showcase-card:hover .showcase-title, .showcase-card:hover .showcase-description { transform: translateY(0); } .showcase-item .showcase-overlay { padding-bottom: 22px; } .showcase-overlay::after { content: none; } @media (max-width: 960px) { .showcase-heading { text-align: center; } } .showcase-placeholder { background: linear-gradient(135deg, var(--black), var(--orange-dark)); width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--white); font-size: 1.2rem; font-weight: bold; text-align: center; padding: 20px; position: relative; overflow: hidden; } .showcase-placeholder::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(45deg, transparent, rgba(153, 64, 32, 0.1), transparent); animation: shimmer 3s infinite; } @keyframes shimmer { 0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); } 100% { transform: translateX(100%) translateY(100%) rotate(45deg); } } .showcase-placeholder i { font-size: 3.5rem; margin-bottom: 15px; color: var(--orange); z-index: 1; } .curtain-icon { font-size: 3rem; transform: scaleX(1.15); letter-spacing: 2px; } .showcase-placeholder span { z-index: 1; } .showcase-placeholder .curtain-brand-logo { z-index: 1; } .showcase-placeholder i, .showcase-placeholder span, .showcase-placeholder .curtain-brand-logo { transition: opacity 0.25s ease; } .showcase-item:hover .showcase-placeholder i, .showcase-item:hover .showcase-placeholder span, .showcase-item:hover .showcase-placeholder .curtain-brand-logo { opacity: 0; } .showcase-item:active .showcase-placeholder i, .showcase-item:active .showcase-placeholder span, .showcase-item:active .showcase-placeholder .curtain-brand-logo, .showcase-item:focus-within .showcase-placeholder i, .showcase-item:focus-within .showcase-placeholder span, .showcase-item:focus-within .showcase-placeholder .curtain-brand-logo { opacity: 0; } .video-badge { position: absolute; top: 15px; right: 15px; background: rgba(153, 64, 32, 0.95); color: var(--white); padding: 8px 15px; border-radius: 20px; font-size: 0.85rem; font-weight: bold; z-index: 3; display: flex; align-items: center; gap: 5px; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); } .project-category { position: absolute; top: 15px; left: 15px; background: rgba(26, 26, 26, 0.9); color: var(--orange); padding: 6px 12px; border-radius: 15px; font-size: 0.8rem; font-weight: 600; z-index: 3; text-transform: uppercase; letter-spacing: 1px; backdrop-filter: blur(10px); border: 1px solid rgba(153, 64, 32, 0.3); } .view-project-btn { position: absolute; right: 18px; bottom: 18px; z-index: 6; display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 140, 0, 0.95); color: #ffffff; text-decoration: none; font-size: 0.84rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0; transform: translateY(10px); transition: transform 0.3s ease, opacity 0.3s ease, background 0.3s ease, box-shadow 0.3s ease; pointer-events: auto; } .showcase-item:hover .view-project-btn, .showcase-card:hover .view-project-btn, .showcase-item:focus-within .view-project-btn { opacity: 1; transform: translateY(0); } .view-project-btn:hover { background: #E67300; box-shadow: 0 10px 22px rgba(255, 140, 0, 0.35); } /* Admin Panel Styles */ .admin-panel { position: fixed; top: 0; right: 0; width: 10px; height: 100vh; background: rgba(10, 10, 10, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: -12px 0 32px rgba(0, 0, 0, 0.55), 0 0 35px rgba(255, 140, 0, 0.12); transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1); z-index: 10001; overflow-x: hidden; overflow-y: auto; border-left: 1px solid rgba(255, 140, 0, 0.55); color: rgba(255, 255, 255, 0.92); transform: none !important; } body.light-mode .admin-panel { background: #f5f5f5; color: #1a1a1a; border-left: 1px solid rgba(0, 0, 0, 0.08); box-shadow: -12px 0 28px rgba(0, 0, 0, 0.15); } body.light-mode .admin-panel::before { background: radial-gradient(circle at 18% 18%, rgba(255, 140, 0, 0.16), transparent 55%), radial-gradient(circle at 78% 30%, rgba(0, 0, 0, 0.05), transparent 60%); opacity: 1; } body.light-mode .admin-tabs { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.08); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04); } body.light-mode .admin-tab { color: #2a2a2a; } body.light-mode .admin-tab.active { background: #ffffff; color: #1a1a1a; border-color: rgba(0, 0, 0, 0.1); } body.light-mode .admin-section { background: #ffffff; border-color: rgba(0, 0, 0, 0.08); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08); } body.light-mode .admin-section h3, body.light-mode .admin-section-heading h3, body.light-mode .admin-section-tag, body.light-mode .admin-title, body.light-mode .admin-subtitle, body.light-mode .admin-panel p { color: #1a1a1a; } body.light-mode .upload-form input, body.light-mode .upload-form select, body.light-mode .upload-form textarea { background: #ffffff; color: #1a1a1a; border-color: rgba(0, 0, 0, 0.15); } body.light-mode .upload-form input::placeholder, body.light-mode .upload-form textarea::placeholder { color: rgba(0, 0, 0, 0.45); } body.light-mode .admin-panel button, body.light-mode .admin-panel .project-visibility-save, body.light-mode .admin-panel .project-delete, body.light-mode .admin-panel .project-star { color: #1a1a1a; } body.light-mode .admin-panel .upload-btn { background: #FF8C00; color: #ffffff; } body.light-mode .gallery-queue { background: rgba(0, 0, 0, 0.03); border-color: rgba(0, 0, 0, 0.12); } body.light-mode .gallery-queue-item { background: #ffffff; border-color: rgba(0, 0, 0, 0.08); } body.light-mode .gallery-queue-meta strong { color: #1a1a1a; } body.light-mode .gallery-queue-meta span, body.light-mode .gallery-queue-empty { color: rgba(0, 0, 0, 0.6); } body.light-mode .gallery-queue-remove, body.light-mode .upload-btn--ghost { color: #1a1a1a; border-color: rgba(0, 0, 0, 0.2); } .admin-panel::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 12% 12%, rgba(255, 140, 0, 0.22), transparent 55%), radial-gradient(circle at 78% 28%, rgba(255, 255, 255, 0.04), transparent 60%), radial-gradient(circle at 30% 80%, rgba(255, 140, 0, 0.12), transparent 55%); pointer-events: none; opacity: 0.8; } .admin-panel > * { position: relative; z-index: 1; } .admin-panel.active { width: min(520px, calc(100vw - 32px)); } .admin-header, .admin-content { min-width: 350px; } @media (max-width: 768px) { .admin-panel.active { width: 95vw; } .admin-header, .admin-content { min-width: 0; } } .admin-tabs { display: flex; gap: 8px; margin: 0 0 18px; background: rgba(255, 255, 255, 0.03); padding: 8px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02); } .admin-tab { flex: 1 1 0; padding: 10px 8px; border-radius: 12px; border: 1px solid transparent; background: transparent; color: rgba(255, 255, 255, 0.9); cursor: pointer; font-weight: 800; font-size: 0.85rem; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.2s ease; letter-spacing: 0.02em; } .admin-tab.active { background: linear-gradient(135deg, rgba(255, 140, 0, 0.28), rgba(153, 107, 61, 0.18)); border-color: rgba(255, 140, 0, 0.35); color: var(--white); box-shadow: 0 8px 16px rgba(255, 140, 0, 0.18); } .admin-tab:not(.active):hover { background: rgba(255, 255, 255, 0.06); } .admin-tab-panel { display: none; } .admin-tab-panel.active { display: block; } .command-center-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; align-items: start; } .full-span { grid-column: 1 / -1; } .admin-section--metrics { grid-column: 1 / -1; } .admin-section--interest { grid-column: span 5; } .admin-section--preview { grid-column: span 7; } .admin-section--leads { grid-column: 1 / -1; } .admin-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; } .admin-section-heading h3 { margin-bottom: 0; } .admin-section-tag { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255, 140, 0, 0.45); background: rgba(255, 140, 0, 0.12); color: var(--orange); } .metrics-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .metrics-card { padding: 18px; border-radius: 16px; background: rgba(8, 8, 8, 0.72); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 18px 36px rgba(0, 0, 0, 0.45); display: flex; flex-direction: column; gap: 10px; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .metrics-card:hover { transform: translateY(-4px); border-color: rgba(255, 140, 0, 0.35); box-shadow: 0 22px 42px rgba(0, 0, 0, 0.55), 0 0 20px rgba(255, 140, 0, 0.2); } .metrics-card--accent { border-color: rgba(255, 140, 0, 0.45); box-shadow: 0 22px 42px rgba(0, 0, 0, 0.55), 0 0 24px rgba(255, 140, 0, 0.25); } .metrics-card--success { background: rgba(12, 12, 12, 0.8); border-color: rgba(255, 140, 0, 0.32); } .metrics-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.16em; color: rgba(255, 255, 255, 0.6); font-weight: 700; } .metrics-value { font-size: 1.85rem; font-weight: 900; color: rgba(255, 255, 255, 0.95); } .metrics-card--accent .metrics-value, .metrics-card--success .metrics-value { color: var(--orange); text-shadow: 0 0 12px rgba(255, 140, 0, 0.45); } .metrics-meta { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.58); font-weight: 600; } .interest-grid { display: flex; flex-direction: column; gap: 14px; } .action-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .action-tile { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(8, 8, 8, 0.78); color: rgba(255, 255, 255, 0.9); cursor: pointer; text-align: left; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .action-tile:hover { transform: translateY(-3px); border-color: rgba(255, 140, 0, 0.5); box-shadow: 0 18px 32px rgba(0, 0, 0, 0.5), 0 0 18px rgba(255, 140, 0, 0.25); } .action-icon { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 140, 0, 0.12); border: 1px solid rgba(255, 140, 0, 0.35); box-shadow: 0 0 18px rgba(255, 140, 0, 0.25); flex: 0 0 auto; } .action-icon i { color: var(--orange); text-shadow: 0 0 10px rgba(255, 140, 0, 0.65); } .action-details { display: flex; flex-direction: column; gap: 4px; } .action-details strong { font-size: 0.85rem; font-weight: 800; } .action-details span { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.6); } .admin-logs { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 14px; background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 140, 0, 0.08); font-family: var(--terminal-font); } .log-row { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; font-size: 0.55rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.78); } .log-time { color: rgba(255, 255, 255, 0.6); } .log-message { color: rgba(255, 255, 255, 0.85); } .log-status { display: inline-flex; align-items: center; gap: 6px; color: var(--orange); text-shadow: 0 0 10px rgba(255, 140, 0, 0.6); } .log-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 8px rgba(255, 140, 0, 0.9), 0 0 16px rgba(255, 140, 0, 0.6); } .command-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; } .command-stat-card { border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.04); padding: 14px; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18); backdrop-filter: blur(6px); } .command-stat-card.success { border-color: rgba(37, 211, 102, 0.35); } .command-stat-card.new { border-color: rgba(255, 140, 0, 0.35); } .command-stat-label { color: rgba(255, 255, 255, 0.72); font-weight: 800; font-size: 0.78rem; } .command-stat-value { margin-top: 8px; font-size: 1.7rem; font-weight: 900; color: rgba(255, 255, 255, 0.96); } .command-stat-card.success .command-stat-value { color: rgba(37, 211, 102, 0.95); } .command-stat-card.new .command-stat-value { color: rgba(255, 140, 0, 0.98); } .interest-row { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 12px; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 140, 0, 0.04); color: rgba(255, 255, 255, 0.86); font-weight: 700; font-size: 0.8rem; } .interest-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.72); } .interest-label strong { color: var(--orange); font-size: 0.9rem; } .interest-bar { height: 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); overflow: hidden; box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.45); } .interest-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, rgba(255, 140, 0, 0.95), rgba(153, 64, 32, 0.95)); width: 0%; box-shadow: 0 0 14px rgba(255, 140, 0, 0.55), 0 0 24px rgba(255, 140, 0, 0.35); transition: width 0.4s ease; } .admin-lead-row { border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.06); padding: 12px; margin-top: 10px; } .admin-lead-row strong { color: rgba(255, 255, 255, 0.95); } .admin-lead-row small { display: block; color: rgba(255, 255, 255, 0.72); margin-top: 6px; line-height: 1.4; } @media (max-width: 1024px) { .command-center-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } .admin-section--interest, .admin-section--preview { grid-column: 1 / -1; } .metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .metrics-grid { grid-template-columns: 1fr; } .action-tiles { grid-template-columns: 1fr; } .log-row { grid-template-columns: 1fr; gap: 6px; } } @media (max-width: 520px) { .admin-status { flex: 1 1 100%; margin-left: 0; justify-content: flex-start; } .command-stats { grid-template-columns: 1fr; } .admin-tabs { flex-wrap: wrap; } .admin-tab { flex: 1 1 calc(50% - 6px); } } .admin-header { background: linear-gradient(135deg, rgba(255, 140, 0, 0.12), rgba(255, 255, 255, 0.03)); padding: 18px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; overflow: hidden; } .admin-header::after { content: ''; position: absolute; left: 20px; bottom: 0; width: 60px; height: 2px; background: linear-gradient(90deg, rgba(255, 140, 0, 0.9), transparent); border-radius: 999px; pointer-events: none; } .admin-status { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(255, 140, 0, 0.4); background: rgba(0, 0, 0, 0.45); box-shadow: inset 0 0 0 1px rgba(255, 140, 0, 0.2), 0 0 18px rgba(255, 140, 0, 0.25); margin-left: auto; } .admin-status.is-online { border-color: rgba(255, 140, 0, 0.65); box-shadow: inset 0 0 0 1px rgba(255, 140, 0, 0.28), 0 0 20px rgba(255, 140, 0, 0.35); } .admin-status.is-checking { border-color: rgba(255, 140, 0, 0.5); } .admin-status.is-offline { border-color: rgba(148, 163, 184, 0.35); box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.18), 0 0 0 rgba(0, 0, 0, 0); } .status-pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--orange); position: relative; box-shadow: 0 0 8px rgba(255, 140, 0, 0.7), 0 0 16px rgba(255, 140, 0, 0.5); } .status-pulse::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid rgba(255, 140, 0, 0.35); animation: statusPulse 1.6s ease-out infinite; } .status-pulse.is-paused::after { animation: none; opacity: 0.35; } .status-pulse.is-blocked { background: #94a3b8; box-shadow: 0 0 6px rgba(148, 163, 184, 0.35); } .status-pulse.is-blocked::after { border-color: rgba(148, 163, 184, 0.3); } .status-text { display: flex; flex-direction: column; gap: 2px; } .status-label { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.18em; color: rgba(255, 255, 255, 0.6); font-weight: 700; } .status-value { font-size: 0.75rem; font-weight: 800; color: var(--orange); text-shadow: 0 0 10px rgba(255, 140, 0, 0.65); } .admin-status.is-offline .status-value { color: #cbd5e1; text-shadow: none; } @keyframes statusPulse { 0% { transform: scale(0.6); opacity: 0.6; } 70% { transform: scale(1.2); opacity: 0; } 100% { opacity: 0; } } .admin-brand { display: inline-flex; align-items: center; gap: 12px; min-width: 0; } .admin-logo-wrap { width: 42px; height: 42px; border-radius: 12px; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 140, 0, 0.35); display: grid; place-items: center; flex: 0 0 auto; overflow: hidden; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.3); } .admin-logo { width: 70%; height: 70%; object-fit: contain; display: block; } .admin-brand-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .admin-title { color: var(--white); font-weight: 800; font-size: 1rem; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.02em; } .admin-subtitle { color: rgba(255, 255, 255, 0.68); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .admin-header h2 { color: var(--white); font-size: 1.2rem; margin: 0; display: flex; align-items: center; gap: 10px; } .admin-toggle { background: transparent; border: none; color: var(--white); font-size: 1.2rem; cursor: pointer; padding: 5px; border-radius: 5px; transition: all 0.3s ease; position: relative; z-index: 2; pointer-events: auto; } .admin-toggle:hover { background: var(--glass-bg); color: var(--orange); } .admin-content { padding: 18px 20px 28px; display: flex; flex-direction: column; gap: 18px; } .admin-section { margin-bottom: 30px; background: rgba(12, 12, 12, 0.82); border-radius: 16px; padding: 18px; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 20px 36px rgba(0, 0, 0, 0.45); position: relative; overflow: hidden; backdrop-filter: blur(12px); } .admin-section::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at top right, rgba(255, 140, 0, 0.18), transparent 55%), radial-gradient(circle at bottom left, rgba(255, 255, 255, 0.04), transparent 60%); opacity: 0.6; pointer-events: none; } .admin-section:nth-child(odd) { background: rgba(15, 15, 15, 0.88); } .command-center-grid .admin-section { margin-bottom: 0; } .admin-section h3 { color: var(--white); font-size: 1rem; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; letter-spacing: 0.02em; text-transform: uppercase; font-weight: 800; } .admin-section h3 i { color: var(--orange); background: rgba(255, 140, 0, 0.12); border: 1px solid rgba(255, 140, 0, 0.25); width: 30px; height: 30px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 12px rgba(255, 140, 0, 0.45); text-shadow: 0 0 8px rgba(255, 140, 0, 0.65); } .admin-lazyloop { display: block; width: 100%; border-radius: 16px; } .admin-lazyloop-viewport { width: 100%; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.10); background: rgba(0, 0, 0, 0.35); box-shadow: 0 18px 32px rgba(0, 0, 0, 0.25); } .admin-lazyloop-track { display: flex; width: 100%; transform: translate3d(0, 0, 0); transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; } .admin-lazyloop-slide { flex: 0 0 100%; width: 100%; position: relative; isolation: isolate; min-height: 170px; } .admin-lazyloop-slide.is-empty { display: grid; place-items: center; min-height: 170px; background: rgba(0, 0, 0, 0.45); } .admin-lazyloop-media, .admin-lazyloop-slide img, .admin-lazyloop-slide video { display: block; width: 100%; height: 100%; min-height: 170px; object-fit: cover; transform: translate3d(0, 0, 0); will-change: transform; } .admin-lazyloop-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 14px; background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 20%, rgba(0, 0, 0, 0.70) 100%); opacity: 1; transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; } .admin-lazyloop-title { color: rgba(255, 255, 255, 0.95); font-weight: 900; letter-spacing: 0.02em; font-size: 0.95rem; line-height: 1.2; text-transform: uppercase; } .admin-lazyloop-subtitle { color: rgba(255, 255, 255, 0.72); font-weight: 700; font-size: 0.78rem; line-height: 1.35; } .admin-lazyloop-meta { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; color: rgba(255, 255, 255, 0.80); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } .admin-lazyloop-chip { display: inline-flex; align-items: center; justify-content: center; height: 22px; padding: 0 10px; border-radius: 999px; border: 1px solid rgba(255, 140, 0, 0.30); background: rgba(255, 140, 0, 0.12); color: rgba(255, 255, 255, 0.92); } .admin-lazyloop-dots { display: flex; align-items: center; justify-content: center; gap: 8px; padding-top: 10px; } .admin-lazyloop-dot { width: 8px; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.25); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); transition: transform 0.2s ease, background 0.2s ease; } .admin-lazyloop-dot.active { background: rgba(255, 140, 0, 0.95); transform: scale(1.15); } @media (prefers-reduced-motion: reduce) { .admin-lazyloop-track { transition: none; } .admin-lazyloop-overlay { transition: none; } } .upload-form .form-group { margin-bottom: 20px; } .upload-form label { display: block; color: var(--white); font-weight: 600; margin-bottom: 8px; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.06em; } .upload-form input, .upload-form select, .upload-form textarea { width: 100%; padding: 12px 15px; background: rgba(5, 5, 5, 0.6); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; color: var(--white); font-size: 0.9rem; transition: all 0.3s ease; } .upload-form input::placeholder, .upload-form textarea::placeholder { color: rgba(255, 255, 255, 0.45); } .upload-form input:focus, .upload-form select:focus, .upload-form textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(153, 64, 32, 0.1); } .upload-form textarea { resize: vertical; min-height: 80px; } .upload-controls { display: flex; flex-direction: column; gap: 15px; } .gallery-queue { border: 1px dashed var(--glass-border); border-radius: 12px; padding: 12px; background: rgba(255, 255, 255, 0.04); display: grid; gap: 10px; min-height: 70px; } .gallery-queue-empty { color: var(--text-light); font-size: 0.85rem; } .gallery-queue-item { display: flex; align-items: center; gap: 12px; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; padding: 10px 12px; } .gallery-queue-thumb { width: 58px; height: 42px; border-radius: 8px; object-fit: cover; background: rgba(0, 0, 0, 0.4); } .gallery-queue-thumb--icon { display: inline-flex; align-items: center; justify-content: center; color: var(--white); font-size: 1.1rem; } .gallery-queue-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; } .gallery-queue-meta strong { color: var(--white); font-size: 0.85rem; letter-spacing: 0.08em; } .gallery-queue-meta span { color: var(--text-light); font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gallery-queue-remove { background: transparent; border: 1px solid rgba(255, 255, 255, 0.2); color: var(--white); padding: 6px 12px; border-radius: 999px; font-size: 0.75rem; cursor: pointer; transition: all 0.2s ease; } .gallery-queue-remove:hover { border-color: var(--orange); color: var(--white); } .gallery-queue-actions { display: flex; gap: 10px; margin-top: 10px; } .gallery-queue-actions .upload-btn { width: 100%; padding: 12px; font-size: 0.9rem; } .media-type-toggle { display: flex; gap: 10px; } .media-btn { flex: 1; padding: 10px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; color: var(--light-grey); cursor: pointer; transition: all 0.3s ease; display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-size: 0.85rem; } .media-btn.active { background: var(--orange); color: var(--white); border-color: var(--orange); } .file-upload-area { border: 2px dashed var(--glass-border); border-radius: 10px; padding: 30px; text-align: center; cursor: pointer; transition: all 0.3s ease; background: var(--glass-bg); min-height: 48px; } .file-upload-area:hover, .file-upload-area.dragover { border-color: var(--orange); background: rgba(153, 64, 32, 0.1); } .upload-content i { font-size: 2.5rem; color: var(--orange); margin-bottom: 15px; } .upload-content p { color: var(--white); margin-bottom: 10px; font-weight: 600; } .file-types { color: var(--text-light); font-size: 0.8rem; } .upload-btn { width: 100%; background: var(--gradient-primary); color: var(--white); padding: 15px; border: none; border-radius: 10px; font-size: 1rem; font-weight: bold; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; gap: 10px; text-transform: uppercase; letter-spacing: 0.08em; box-shadow: 0 14px 30px rgba(255, 140, 0, 0.25); min-height: 48px; } @media (max-width: 768px) { .upload-form { display: flex; flex-direction: column; gap: 12px; } .admin-panel button { width: 100%; min-height: 55px; } .admin-panel input, .admin-panel textarea, .admin-panel select { font-size: 16px; } .project-visibility-controls { flex-direction: column; align-items: stretch; } .visibility-toggle { width: 100%; justify-content: space-between; } .upload-progress-row { flex-direction: column; align-items: center; text-align: center; } .upload-progress-text { font-size: 1.05rem; text-align: center; width: 100%; } } .upload-btn:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(255, 140, 0, 0.35); } .upload-progress { display: none; margin-top: 14px; padding: 14px; border-radius: 14px; background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: inset 0 0 0 1px rgba(255, 140, 0, 0.08); } .upload-progress.is-active { display: block; } .upload-progress-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; color: rgba(255, 255, 255, 0.88); font-weight: 700; } .upload-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.22); border-top-color: rgba(255, 140, 0, 0.95); animation: uploadSpin 0.9s linear infinite; flex: 0 0 auto; } @keyframes uploadSpin { to { transform: rotate(360deg); } } .upload-progress-text { font-size: 0.9rem; letter-spacing: 0.01em; } .upload-progress-bar { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); overflow: hidden; } .upload-progress-fill { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, rgba(255, 140, 0, 0.95), rgba(153, 64, 32, 0.95)); box-shadow: 0 0 0 1px rgba(255, 140, 0, 0.25); transition: width 0.15s ease; } .admin-fab { position: fixed; bottom: 30px; left: 30px; width: 60px; height: 60px; background: var(--gradient-primary); border: none; border-radius: 50%; color: var(--white); font-size: 1.5rem; cursor: pointer; box-shadow: 0 8px 25px rgba(153, 64, 32, 0.4); transition: all 0.3s ease; z-index: 10000; } .admin-fab:hover { transform: scale(1.1) rotate(90deg); box-shadow: 0 12px 35px rgba(153, 64, 32, 0.6); } .whatsapp-fab { position: fixed; bottom: 30px; right: 30px; width: 60px; height: 60px; background: var(--gradient-primary); border: none; border-radius: 50%; color: var(--white); font-size: 1.5rem; cursor: pointer; box-shadow: 0 8px 25px rgba(153, 64, 32, 0.4); transition: all 0.3s ease; z-index: 9999; text-decoration: none; display: flex; align-items: center; justify-content: center; } .whatsapp-fab:hover { transform: scale(1.1) rotate(15deg); box-shadow: 0 12px 35px rgba(153, 64, 32, 0.6); background: var(--gradient-primary); } /* Branded Pill-Shaped WhatsApp Button */ .whatsapp-fab-pill { position: fixed; bottom: 30px; right: calc(30px + env(safe-area-inset-right, 0px)); left: auto; width: 60px; height: 60px; padding: 0; background: var(--surface-strong); border: 4px solid rgba(255, 140, 0, 0.95); border-radius: 50%; display: grid; place-items: center; text-decoration: none; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.65), 0 0 22px rgba(255, 140, 0, 0.55); transition: all 0.35s ease; z-index: 9999; min-width: 0; } .whatsapp-content { display: flex; align-items: center; gap: 0; width: 100%; justify-content: center; } .whatsapp-logo { width: 40px; height: 40px; background: rgba(255, 255, 255, 0.08); border-radius: 12px; border: 1px solid rgba(255, 140, 0, 0.25); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .whatsapp-logo img { width: 30px; height: 30px; object-fit: cover; border-radius: 4px; } .whatsapp-text { display: flex; align-items: center; gap: 0; color: var(--orange); font-weight: 700; letter-spacing: 0; text-transform: none; white-space: nowrap; } .whatsapp-text i { color: var(--orange); font-size: 1.25rem; } .whatsapp-text span { display: none; } .whatsapp-fab-pill:hover { transform: translateY(-2px); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.7), 0 0 0 4px rgba(255, 140, 0, 0.22), 0 0 34px rgba(255, 140, 0, 0.75); border-color: rgba(255, 140, 0, 1); } .back-to-top { position: fixed; right: calc(30px + env(safe-area-inset-right, 0px)); bottom: calc(110px + env(safe-area-inset-bottom, 0px)); width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(0, 0, 0, 0.45); color: rgba(255, 255, 255, 0.75); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; z-index: 9997; } .back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); } .back-to-top:hover { box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5); color: #fff; } /* Mobile Responsive for WhatsApp Pill */ @media (max-width: 768px) { .whatsapp-fab-pill { right: calc(16px + env(safe-area-inset-right, 0px)); left: auto; bottom: 30px; width: 56px; height: 56px; border-width: 3px; } .whatsapp-logo { width: 35px; height: 35px; } .whatsapp-logo img { width: 25px; height: 25px; } .whatsapp-text { font-size: 0.8rem; } .whatsapp-text i { font-size: 1rem; } .back-to-top { right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(100px + env(safe-area-inset-bottom, 0px)); } } .projects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 15px;padding: 10px 0; scrollbar-width: thin; scrollbar-color: rgba(255, 140, 0, 0.6) rgba(255, 255, 255, 0.08); } .admin-empty { width: 100%; padding: 18px 14px; border-radius: 12px; border: 1px dashed rgba(255, 140, 0, 0.35); background: rgba(0, 0, 0, 0.35); color: rgba(255, 255, 255, 0.82); text-align: center; font-weight: 600; } .projects-grid.is-grouped { display: flex; flex-direction: column; gap: 18px; padding: 0; } .admin-project-group { border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; padding: 12px; background: rgba(6, 6, 6, 0.55); box-shadow: 0 16px 34px rgba(0, 0, 0, 0.35); } .admin-project-group-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .admin-project-group-title { color: var(--text-primary); font-weight: 800; font-size: 0.92rem; letter-spacing: 0.04em; text-transform: uppercase; } .admin-project-group-meta { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; } .admin-project-group-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; border: 1px solid rgba(255, 140, 0, 0.3); background: rgba(255, 140, 0, 0.12); color: rgba(255, 255, 255, 0.92); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; } .admin-project-group-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } @media (max-width: 768px) { .projects-grid { max-height: none; overflow-y: visible; } .admin-project-group-header { flex-direction: column; align-items: flex-start; } .admin-project-group-meta { justify-content: flex-start; } } .projects-grid::-webkit-scrollbar { width: 6px; } .projects-grid::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.08); border-radius: 999px; } .projects-grid::-webkit-scrollbar-thumb { background: rgba(255, 140, 0, 0.6); border-radius: 999px; } [data-theme='light'] .admin-project-group { background: rgba(255, 255, 255, 0.92); border-color: rgba(29, 29, 31, 0.12); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12); } [data-theme='light'] .admin-project-group-chip { color: rgba(29, 29, 31, 0.9); background: rgba(255, 140, 0, 0.14); border-color: rgba(255, 140, 0, 0.32); } [data-theme='light'] .admin-empty { background: rgba(255, 255, 255, 0.92); color: rgba(29, 29, 31, 0.82); border-color: rgba(255, 140, 0, 0.3); } [data-theme='light'] .admin-review-card { background: rgba(255, 255, 255, 0.95); background-image: none; border-color: rgba(255, 140, 0, 0.3); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12); color: rgba(29, 29, 31, 0.92); } [data-theme='light'] .admin-review-header strong, [data-theme='light'] .admin-review-card p { color: rgba(29, 29, 31, 0.92); } [data-theme='light'] .review-auth-status { color: rgba(29, 29, 31, 0.72); } [data-theme='light'] .review-auth-grid input { background: rgba(29, 29, 31, 0.04); background-image: none; border-color: rgba(255, 140, 0, 0.3); color: rgba(29, 29, 31, 0.92); } .project-thumb { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 1; background: var(--glass-bg); border: 1px solid var(--glass-border); cursor: pointer; transition: all 0.3s ease; contain: layout paint; } .project-thumb:hover { transform: scale(1.05); box-shadow: 0 5px 15px rgba(153, 64, 32, 0.3); } .project-thumb img, .project-thumb video { width: 100%; height: 100%; object-fit: cover; } .project-media-badge { position: absolute; top: 6px; left: 6px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 999px; border: 1px solid rgba(255, 140, 0, 0.38); background: rgba(0, 0, 0, 0.72); color: rgba(255, 255, 255, 0.94); font-size: 0.64rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; pointer-events: none; } [data-theme='light'] .project-thumb { background: rgba(255, 255, 255, 0.96); border-color: rgba(29, 29, 31, 0.12); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08); } [data-theme='light'] .project-meta { background: rgba(255, 255, 255, 0.7); border-radius: 12px; padding: 6px; border: 1px solid rgba(29, 29, 31, 0.08); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } [data-theme='light'] .project-title { background: rgba(29, 29, 31, 0.06); color: rgba(29, 29, 31, 0.95); border: 1px solid rgba(29, 29, 31, 0.12); } [data-theme='light'] .project-media-badge { background: rgba(255, 255, 255, 0.92); border-color: rgba(255, 140, 0, 0.4); color: rgba(29, 29, 31, 0.92); } .project-star { position: absolute; top: 8px; left: 8px; width: 32px; height: 32px; border-radius: 10px; border: 1px solid rgba(255, 140, 0, 0.35); background: rgba(0, 0, 0, 0.7); color: rgba(255, 255, 255, 0.7); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; z-index: 2; } .project-star.active { color: var(--orange); border-color: rgba(255, 140, 0, 0.6); box-shadow: 0 0 10px rgba(255, 140, 0, 0.4); } .project-thumb:hover .project-star { transform: translateY(-1px); } .project-delete { position: absolute; top: 5px; right: 5px; background: var(--surface-strong); color: var(--orange); border: 1px solid rgba(255, 140, 0, 0.4); border-radius: 50%; width: 28px; height: 28px; font-size: 0.8rem; cursor: pointer; opacity: 1; display: inline-flex; align-items: center; justify-content: center; z-index: 3; transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease; } .project-thumb:hover .project-delete { transform: translateY(-1px); box-shadow: 0 0 12px rgba(255, 140, 0, 0.4), 0 8px 16px rgba(0, 0, 0, 0.45); } .project-delete.is-deleting { width: auto; height: 28px; padding: 0 10px; border-radius: 999px; border-color: #FF8C00; color: #FF8C00; background: #000000; box-shadow: 0 0 12px rgba(255, 140, 0, 0.45); } .project-delete-label { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #FF8C00; } .project-feature-toggle { position: absolute; left: 8px; top: 46px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 999px; border: 1px solid rgba(255, 140, 0, 0.35); background: rgba(0, 0, 0, 0.7); color: rgba(255, 255, 255, 0.8); font-size: 0.65rem; font-weight: 600; cursor: pointer; z-index: 2; } .project-feature-toggle input { width: auto; accent-color: var(--orange); } .project-meta { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; flex-direction: column; gap: 6px; z-index: 2; } .project-media-caption { font-size: 0.72rem; color: rgba(255, 255, 255, 0.78); font-weight: 600; letter-spacing: 0.02em; } .media-surface-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 2px; } .media-surface-btn { border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(0, 0, 0, 0.55); color: rgba(255, 255, 255, 0.88); border-radius: 10px; padding: 8px 6px; font-size: 0.63rem; font-weight: 700; letter-spacing: 0.02em; cursor: pointer; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease; } .media-surface-btn:hover { transform: translateY(-1px); border-color: rgba(255, 140, 0, 0.45); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35); } .media-surface-btn.is-active { background: rgba(255, 140, 0, 0.22); border-color: rgba(255, 140, 0, 0.65); color: rgba(255, 255, 255, 0.95); box-shadow: 0 0 0 1px rgba(255, 140, 0, 0.25), 0 0 16px rgba(255, 140, 0, 0.28); } [data-theme='light'] .project-media-caption { color: rgba(29, 29, 31, 0.72); } [data-theme='light'] .media-surface-btn { background: rgba(255, 255, 255, 0.92); border-color: rgba(29, 29, 31, 0.14); color: rgba(29, 29, 31, 0.92); } [data-theme='light'] .media-surface-btn.is-active { background: rgba(255, 140, 0, 0.2); border-color: rgba(255, 140, 0, 0.55); color: rgba(29, 29, 31, 0.95); } .project-live-status { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 8px; border-radius: 10px; background: rgba(0, 0, 0, 0.55); font-size: 0.7rem; } .project-live-label { font-weight: 700; color: rgba(255, 255, 255, 0.75); } .project-live-pills { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; } .project-visibility-title { font-size: 0.65rem; font-weight: 700; color: rgba(255, 255, 255, 0.7); text-transform: uppercase; letter-spacing: 0.6px; padding-left: 2px; } .status-pill { padding: 2px 6px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.55); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.2px; text-transform: uppercase; } .status-pill.is-on { color: #fff; border-color: rgba(255, 140, 0, 0.6); background: rgba(255, 140, 0, 0.2); box-shadow: 0 0 10px rgba(255, 140, 0, 0.25); } .project-visibility-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 10px; background: rgba(0, 0, 0, 0.6); } .visibility-toggle { display: inline-flex; align-items: center; gap: 4px; font-size: 0.7rem; font-weight: 600; color: rgba(255, 255, 255, 0.85); } .visibility-toggle input { width: auto; accent-color: var(--orange); } .project-visibility-save { margin-left: auto; padding: 4px 10px; border-radius: 8px; border: 1px solid rgba(255, 140, 0, 0.6); background: rgba(255, 140, 0, 0.18); color: #fff; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; } .project-visibility-save:hover { transform: translateY(-1px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.35); } .project-visibility-save:disabled { opacity: 0.6; cursor: wait; } .project-title { font-size: 0.8rem; background: rgba(0, 0, 0, 0.55); padding: 6px 8px; border-radius: 10px; color: #fff; } /* Modern Client Reviews Section */ .modern-review-section { padding: 80px 5%; background: var(--surface-card); position: relative; overflow: hidden; } [data-theme='light'] .modern-review-section { background: linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(245, 245, 247, 0.96)); } .modern-review-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(255, 140, 0, 0.1), rgba(255, 140, 0, 0.05)); z-index: 0; } .modern-review-container { max-width: 1200px; margin: auto; position: relative; z-index: 1; } .modern-review-header { text-align: center; margin-bottom: 30px; } .modern-review-header .section-title { color: var(--text-color); margin-bottom: 15px; } .modern-review-header .section-subtitle { color: rgba(255, 255, 255, 0.72); font-size: 1.1rem; } [data-theme='light'] .modern-review-header .section-subtitle { color: var(--text-muted); } .review-command-bar { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; align-items: center; padding: 16px 20px; margin: 0 0 30px; border-radius: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--bg-primary) 88%, transparent), color-mix(in srgb, var(--bg-secondary) 92%, transparent)); border: 1px solid color-mix(in srgb, var(--orange) 25%, transparent); box-shadow: 0 16px 36px color-mix(in srgb, var(--bg-primary) 45%, transparent); font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: 0.16em; } .review-command-item { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 160px; } .review-command-label { font-size: 0.72rem; color: var(--text-dim); } .review-command-value { font-size: 1.8rem; font-weight: 700; color: var(--text-main); } .review-command-value--glow { color: var(--orange); text-shadow: 0 0 12px color-mix(in srgb, var(--orange) 60%, transparent); } .testimonials-review-counter { width: fit-content; margin: -10px auto 24px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255, 140, 0, 0.52); background-color: rgba(10, 10, 10, 0.85); background-image: var(--industrial-noise-layer); background-size: var(--industrial-noise-size); background-repeat: var(--industrial-noise-repeat); color: #FF8C00; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; font-family: 'JetBrains Mono', monospace; box-shadow: 0 10px 22px rgba(0, 0, 0, 0.3); } .google-business-placeholder { margin: 0 0 32px; padding: 18px 22px; border-radius: 18px; background: color-mix(in srgb, var(--bg-secondary) 88%, transparent); border: 1px dashed color-mix(in srgb, var(--orange) 35%, transparent); color: var(--text-dim); font-family: 'JetBrains Mono', monospace; letter-spacing: 0.08em; } .google-business-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 8px; } .google-business-label { text-transform: uppercase; font-size: 0.72rem; color: var(--text-main); } .google-business-status { padding: 4px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--orange) 45%, transparent); color: var(--orange); font-size: 0.68rem; background: transparent; cursor: pointer; font-weight: 700; transition: border-color var(--hover-duration) var(--hover-ease), color var(--hover-duration) var(--hover-ease), background-color var(--hover-duration) var(--hover-ease), box-shadow var(--hover-duration) var(--hover-ease), transform var(--hover-duration) var(--hover-ease); } .google-business-status:hover { transform: translateY(-1px); box-shadow: 0 0 12px color-mix(in srgb, var(--orange) 35%, transparent); } .google-business-status.is-active { color: #25d366; border-color: rgba(37, 211, 102, 0.45); background: rgba(37, 211, 102, 0.12); box-shadow: 0 0 12px rgba(37, 211, 102, 0.25); } [data-theme='light'] .google-business-status.is-active { color: #1f8f4a; border-color: rgba(31, 143, 74, 0.35); background: rgba(31, 143, 74, 0.1); box-shadow: none; } .featured-reviews-feed { margin: 36px 0 40px; padding: 22px; border-radius: 20px; background: linear-gradient(160deg, color-mix(in srgb, var(--bg-primary) 88%, transparent), color-mix(in srgb, var(--bg-secondary) 92%, transparent)); border: 1px solid color-mix(in srgb, var(--orange) 28%, transparent); box-shadow: 0 18px 40px color-mix(in srgb, var(--bg-primary) 55%, transparent); } .featured-reviews-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-main); } .featured-reviews-label { display: block; font-size: 0.8rem; } .featured-reviews-subtitle { display: block; font-size: 0.65rem; color: var(--text-dim); margin-top: 4px; } .featured-reviews-status { display: inline-flex; align-items: center; gap: 8px; font-size: 0.68rem; color: var(--orange); } .feed-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 10px color-mix(in srgb, var(--orange) 70%, transparent); animation: reviewPulse 2s infinite; } .featured-reviews-window { position: relative; margin-top: 18px; overflow: hidden; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--orange) 20%, transparent); background: color-mix(in srgb, var(--bg-primary) 90%, transparent); } .featured-reviews-window::before, .featured-reviews-window::after { content: ''; position: absolute; top: 0; bottom: 0; width: 70px; pointer-events: none; z-index: 1; } .featured-reviews-window::before { left: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--bg-primary) 92%, transparent), transparent); } .featured-reviews-window::after { right: 0; background: linear-gradient(270deg, color-mix(in srgb, var(--bg-primary) 92%, transparent), transparent); } .featured-reviews-track { display: flex; gap: 18px; padding: 18px; width: max-content; animation: featuredFeedScroll 26s linear infinite; } .featured-reviews-window:hover .featured-reviews-track { animation-play-state: paused; } .featured-review-card { min-width: 260px; max-width: 320px; padding: 16px; border-radius: 16px; background: linear-gradient(145deg, color-mix(in srgb, var(--bg-secondary) 86%, transparent), color-mix(in srgb, var(--bg-primary) 95%, transparent)); border: 1px solid color-mix(in srgb, var(--orange) 25%, transparent); color: var(--text-main); box-shadow: 0 12px 26px color-mix(in srgb, var(--bg-primary) 45%, transparent); } .featured-review-meta { display: flex; gap: 10px; flex-wrap: wrap; font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim); margin-bottom: 10px; } .featured-review-stars { color: var(--orange); letter-spacing: 3px; text-shadow: 0 0 10px color-mix(in srgb, var(--orange) 55%, transparent); margin-bottom: 10px; } @keyframes featuredFeedScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-40%); } } @media (max-width: 768px) { .review-command-bar { gap: 12px; } .featured-reviews-feed { padding: 18px; } .featured-review-card { min-width: 220px; } } .modern-review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; margin-bottom: 60px; } .review-stats-card { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 140, 0, 0.3); border-radius: 20px; padding: 32px; backdrop-filter: blur(10px); transition: all var(--hover-duration) var(--hover-ease); display: flex; flex-direction: column; gap: 22px; } [data-theme='light'] .review-stats-card { background: rgba(255, 255, 255, 0.92); border-color: rgba(255, 140, 0, 0.22); box-shadow: var(--card-shadow); } .review-stats-card:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(255, 140, 0, 0.2); } .review-stats-header { display: flex; align-items: center; gap: 20px; padding: 16px 18px; border-radius: 16px; background: rgba(10, 10, 10, 0.55); border: 1px solid rgba(255, 255, 255, 0.08); } [data-theme='light'] .review-stats-header { background: rgba(29, 29, 31, 0.04); border-color: rgba(29, 29, 31, 0.10); } .google-logo-large { width: 60px; height: 60px; background: var(--google-blue); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--white); font-size: 1.5rem; } .rating-info .rating-number-large { font-size: 2.25rem; font-weight: bold; color: var(--orange); } .rating-info .rating-stars-large { font-size: 1.5rem; color: var(--orange); margin: 5px 0; letter-spacing: 3px; text-shadow: 0 0 10px color-mix(in srgb, var(--orange) 55%, transparent); } .header-star-rating { text-shadow: 0 0 12px color-mix(in srgb, var(--orange) 50%, transparent); } @keyframes reviewPulse { 0%, 100% { opacity: 1; filter: brightness(1); } 50% { opacity: 0.55; filter: brightness(1.2); } } .rating-info .review-count-large { color: rgba(255, 255, 255, 0.72); font-size: 0.88rem; text-transform: uppercase; letter-spacing: 0.6px; } [data-theme='light'] .rating-info .review-count-large { color: var(--text-muted); } .rating-info { display: flex; flex-direction: column; gap: 4px; } .review-metrics { display: flex; flex-direction: column; gap: 15px; background: rgba(0, 0, 0, 0.35); padding: 16px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.08); } [data-theme='light'] .review-metrics { background: rgba(29, 29, 31, 0.04); border-color: rgba(29, 29, 31, 0.10); } .metric-row { display: flex; align-items: center; gap: 15px; } .metric-label { color: rgba(255, 255, 255, 0.72); font-size: 0.9rem; min-width: 28px; } [data-theme='light'] .metric-label { color: var(--text-muted); } .metric-bar { flex: 1; height: 8px; background: rgba(255, 255, 255, 0.1); border-radius: 4px; overflow: hidden; } .metric-fill { height: 100%; border-radius: 4px; background: var(--orange); border-radius: 4px; transition: width var(--hover-duration) var(--hover-ease); } .metric-value { color: var(--orange); font-weight: bold; min-width: 30px; text-align: right; } .hailifu-review-panel { background: linear-gradient(135deg, rgba(15, 15, 15, 0.92), rgba(10, 10, 10, 0.75)); border: 1px solid rgba(255, 140, 0, 0.35); border-radius: 20px; padding: 35px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; gap: 25px; } .hailifu-review-header { text-align: center; } .hailifu-review-header h3 { color: var(--text-primary); font-size: 1.9rem; margin-bottom: 10px; } .hailifu-review-header h3 .reviews-headline-rating { color: var(--orange); text-shadow: 0 0 10px color-mix(in srgb, var(--orange) 45%, transparent); } .hailifu-review-header h3 .reviews-headline-meta { color: var(--text-primary); } .hailifu-review-header h3 .reviews-headline-count { color: rgba(255, 255, 255, 0.72); } [data-theme='light'] .hailifu-review-header h3 .reviews-headline-meta { color: var(--text-main); } [data-theme='light'] .hailifu-review-header h3 .reviews-headline-count { color: var(--text-muted); } html:not([data-theme='light']) .hailifu-review-panel { background: rgba(255, 255, 255, 0.08); background-image: none; border-color: rgba(255, 140, 0, 0.3); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .hailifu-review-stars { font-size: 2.2rem; color: var(--rating-star); letter-spacing: 4px; text-shadow: 0 0 10px color-mix(in srgb, var(--orange) 45%, transparent); } .review-terminal { margin-top: 18px; padding: 18px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--orange) 28%, transparent); background: linear-gradient(150deg, color-mix(in srgb, var(--bg-secondary) 90%, transparent), color-mix(in srgb, var(--bg-primary) 92%, transparent)); box-shadow: 0 16px 40px color-mix(in srgb, var(--bg-primary) 55%, transparent); } .review-terminal-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px; } .review-terminal-labels { font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-main); } .review-terminal-label { display: block; font-size: 0.8rem; } .review-terminal-subtitle { display: block; font-size: 0.65rem; color: var(--text-dim); margin-top: 4px; } .review-terminal-controls { display: flex; gap: 10px; flex-wrap: wrap; } .review-terminal-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--orange) 35%, transparent); background: color-mix(in srgb, var(--bg-primary) 75%, transparent); color: var(--text-main); font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: transform var(--hover-duration) var(--hover-ease), box-shadow var(--hover-duration) var(--hover-ease), color var(--hover-duration) var(--hover-ease); } .review-terminal-btn:hover { color: var(--orange); transform: translateY(-1px); box-shadow: 0 0 14px color-mix(in srgb, var(--orange) 35%, transparent); } .review-terminal-card { transition: opacity 0.32s ease, transform 0.32s ease; } .review-terminal-card.is-fading { opacity: 0; transform: translateY(4px); } .hailifu-review-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } @media (max-width: 768px) { .hailifu-review-grid { grid-template-columns: 1fr; } } .hailifu-review-card { background: linear-gradient(140deg, color-mix(in srgb, var(--bg-secondary) 85%, transparent), color-mix(in srgb, var(--bg-primary) 92%, transparent)); border: 1px solid color-mix(in srgb, var(--orange) 28%, transparent); border-radius: 16px; padding: 18px; color: var(--text-secondary); font-size: 0.95rem; line-height: 1.6; flex: 1 1 220px; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25); backdrop-filter: blur(10px); position: relative; overflow: hidden; } .hailifu-review-card .owner-reply { margin-top: 14px; padding: 12px 14px; border-radius: 12px; border: 1px dashed color-mix(in srgb, var(--orange) 45%, transparent); background: linear-gradient(150deg, color-mix(in srgb, var(--bg-primary) 92%, transparent), color-mix(in srgb, var(--bg-secondary) 85%, transparent)); font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); box-shadow: inset 0 0 16px color-mix(in srgb, var(--orange) 12%, transparent); } .owner-reply-label { display: block; font-size: 0.65rem; letter-spacing: 0.18em; color: var(--orange); margin-bottom: 6px; } .owner-reply p { margin: 0; text-transform: none; letter-spacing: 0.02em; color: var(--text-main); } .hailifu-review-card::before { content: ''; position: absolute; inset: 0; border-top: 2px solid color-mix(in srgb, var(--orange) 45%, transparent); opacity: 0.6; pointer-events: none; } .review-cta-section { text-align: center; display: flex; flex-direction: column; gap: 14px; } .review-cta-section.stats-dashboard { gap: 20px; } .review-cta-section h3 { color: var(--text-primary); font-size: 1.8rem; } .review-cta-section p { color: var(--text-secondary); } .stats-dashboard-grid { width: min(100%, 980px); margin: 6px auto 4px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; } .stats-action-shell { width: min(100%, 980px); margin: 2px auto 4px; display: flex; flex-direction: column; gap: 12px; text-align: left; } .stats-action-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .stats-action-head h4 { margin: 0; font-size: 1.08rem; letter-spacing: 0.02em; color: var(--text-primary); } .stats-action-tag { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255, 140, 0, 0.45); background: rgba(255, 140, 0, 0.12); color: var(--orange); } .review-cta-section .stats-action-shell .action-tile { background: linear-gradient(135deg, rgba(0, 0, 0, 0.78), rgba(255, 140, 0, 0.09)); border-color: rgba(255, 255, 255, 0.14); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28); } .stats-card { position: relative; padding: 22px 20px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.12); background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 140, 0, 0.08)); box-shadow: 0 18px 34px rgba(0, 0, 0, 0.35); display: flex; flex-direction: column; gap: 8px; overflow: hidden; transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.42s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.32s ease, background-color 0.32s ease; transform: translate3d(0, 0, 0); transform-origin: center bottom; will-change: transform, box-shadow; backface-visibility: hidden; } .integrity-card { background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .stats-icon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: rgba(255, 140, 0, 0.16); color: var(--orange-light); box-shadow: inset 0 0 0 1px rgba(255, 140, 0, 0.28); font-size: 1.2rem; } .stats-card::after { content: ''; position: absolute; inset: -45% 10% auto 10%; height: 140%; background: radial-gradient(circle, rgba(255, 170, 80, 0.4), transparent 70%); opacity: 0; transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; } .stats-card:hover { transform: translate3d(0, -8px, 0) scale(1.015); border-color: rgba(255, 140, 0, 0.55); box-shadow: 0 28px 54px rgba(0, 0, 0, 0.48), 0 0 30px rgba(255, 140, 0, 0.4); z-index: 2; } .stats-card:hover::after { opacity: 1; } .stats-label { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.78rem; color: var(--text-secondary); } .stats-value { font-family: 'JetBrains Mono', 'Press Start 2P', monospace; font-size: 2.4rem; color: var(--orange-light); letter-spacing: 0.02em; line-height: 1.05; font-variant-numeric: tabular-nums lining-nums; } .stats-meta { color: rgba(255, 255, 255, 0.6); font-size: 0.9rem; } .stats-stars { color: var(--rating-star); font-size: 1.1rem; letter-spacing: 0.28em; } .stats-value { text-shadow: 0 0 12px rgba(255, 140, 0, 0.32); } .stats-stars { text-shadow: 0 0 12px rgba(255, 140, 0, 0.42); animation: statsGlowPulse 2.2s ease-in-out infinite; } .stats-icon { animation: statsIconFloat 3.2s ease-in-out infinite; } @keyframes statsGlowPulse { 0%, 100% { opacity: 1; text-shadow: 0 0 10px rgba(255, 140, 0, 0.4); } 50% { opacity: 0.8; text-shadow: 0 0 18px rgba(255, 140, 0, 0.7); } } @keyframes statsIconFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } } @media (prefers-reduced-motion: reduce) { .stats-value, .stats-stars, .stats-icon { animation: none; } } .cta-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; } .primary-cta-btn, .secondary-cta-btn { display: inline-flex; align-items: center; gap: 10px; border-radius: 999px; padding: 14px 26px; font-weight: 700; text-decoration: none; border: none; cursor: pointer; transition: transform var(--hover-duration) var(--hover-ease), box-shadow var(--hover-duration) var(--hover-ease), background var(--hover-duration) var(--hover-ease); } .review-cta-section .primary-cta-btn { position: relative; overflow: hidden; background: linear-gradient(135deg, #FF8C00, #f27f00 45%, #ff9f2e 100%); box-shadow: 0 0 0 1px rgba(255, 140, 0, 0.5), 0 22px 46px rgba(255, 140, 0, 0.45), 0 0 32px rgba(255, 140, 0, 0.55); text-shadow: 0 0 16px rgba(255, 255, 255, 0.35); filter: brightness(1) saturate(1); color: #000000; } .review-cta-section .primary-cta-btn::after { content: ''; position: absolute; inset: -60% 0; background: radial-gradient(circle, rgba(255, 210, 150, 0.55), transparent 60%); opacity: 0; transition: opacity var(--hover-duration) var(--hover-ease); } .review-cta-section .primary-cta-btn:hover::after { opacity: 1; } .review-cta-section .primary-cta-btn:hover { animation: reviewCtaDimToBright 0.62s cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes reviewCtaDimToBright { 0% { filter: brightness(0.58) saturate(0.78); } 38% { filter: brightness(0.9) saturate(0.95); } 100% { filter: brightness(1.16) saturate(1.08); } } .primary-cta-btn { background: #FF8C00; color: #000000; box-shadow: 0 12px 30px rgba(255, 140, 0, 0.28); } .primary-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(255, 140, 0, 0.35); } .review-cta-section .primary-cta-btn.is-auth-loading { pointer-events: none; cursor: wait; animation: reviewAuthHandshakePulse 1.45s ease-in-out infinite; filter: saturate(0.9); } .review-cta-section .primary-cta-btn.is-auth-loading::after { opacity: 1; } @keyframes reviewAuthHandshakePulse { 0%, 100% { box-shadow: 0 0 0 1px rgba(255, 140, 0, 0.45), 0 10px 24px rgba(255, 140, 0, 0.16); } 50% { box-shadow: 0 0 0 1px rgba(255, 140, 0, 0.78), 0 18px 32px rgba(255, 140, 0, 0.32); } } .secondary-cta-btn { background: rgba(255, 255, 255, 0.08); color: var(--text-primary); border: 1px solid rgba(255, 255, 255, 0.2); } .secondary-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.3); } @media (max-width: 640px) { .stats-action-head { flex-direction: column; align-items: flex-start; } } .review-modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; padding: 24px; background-color: rgba(0, 0, 0, 0.88); background-image: var(--industrial-noise-layer); background-size: var(--industrial-noise-size); background-repeat: var(--industrial-noise-repeat); z-index: 10010; } .review-modal.active { display: flex; } .review-modal-dialog { width: min(560px, 100%); border-radius: 18px; overflow: hidden; background-color: #000000; background-image: var(--industrial-noise-layer); background-size: var(--industrial-noise-size); background-repeat: var(--industrial-noise-repeat); border: 1px solid #FF8C00; box-shadow: 0 26px 76px rgba(0, 0, 0, 0.72), 0 0 0 1px rgba(255, 140, 0, 0.08) inset; max-height: 90vh; display: flex; flex-direction: column; } .review-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; background-color: #000000; background-image: linear-gradient(145deg, rgba(255, 140, 0, 0.16), rgba(0, 0, 0, 0.94)), var(--industrial-noise-layer); background-size: cover, var(--industrial-noise-size); background-repeat: no-repeat, var(--industrial-noise-repeat); border-bottom: 1px solid rgba(255, 140, 0, 0.28); color: #ffffff; flex-shrink: 0; } .review-modal-header h3 { margin: 0 0 4px; color: #ffffff; } .review-modal-header p { margin: 0; color: rgba(255, 255, 255, 0.75); font-size: 0.9rem; } .review-modal-title-echo { margin: 0 0 4px; font-size: 0.9rem; letter-spacing: 0.08em; color: #FF8C00; } .review-modal-public-disclaimer { margin: 0; color: rgba(255, 140, 0, 0.95); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; } .review-modal-identity-overlay { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; margin-right: 10px; } .review-modal-identity-avatar { width: 40px; height: 40px; border-radius: 50%; border: 2px solid #FF8C00; object-fit: cover; background: rgba(0, 0, 0, 0.6); flex: 0 0 auto; } .review-modal-identity-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .review-modal-identity-copy strong { color: #ffffff; font-size: 0.9rem; letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 230px; } .review-modal-identity-copy span { color: rgba(214, 214, 214, 0.84); font-size: 0.76rem; letter-spacing: 0.01em; text-transform: none; } .review-modal-identity-overlay.is-guest-mode .review-modal-identity-copy span, .review-modal-identity-copy span.review-modal-identity-meta--guest { color: #FF8C00; font-weight: 700; text-shadow: 0 0 8px rgba(255, 140, 0, 0.28); } .review-modal-identity-overlay.is-guest-mode .review-modal-identity-avatar { display: none; } .review-modal-close { width: 40px; height: 40px; border-radius: 12px; border: 1px solid rgba(255, 140, 0, 0.36); background: rgba(0, 0, 0, 0.84); color: #FF8C00; cursor: pointer; transition: transform 180ms ease, box-shadow 180ms ease; } .review-modal-close:hover, .review-modal-close:focus-visible { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(255, 140, 0, 0.45), 0 0 12px rgba(255, 140, 0, 0.25); outline: none; } .review-modal-body { padding: 18px; color: #ffffff; overflow-y: auto; background: rgba(0, 0, 0, 0.82); background-image: var(--industrial-noise-layer); background-size: var(--industrial-noise-size); background-repeat: var(--industrial-noise-repeat); } .review-form .form-group { margin-bottom: 18px; } .review-public-identity { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255, 140, 0, 0.46); background: rgba(0, 0, 0, 0.72); background-image: var(--industrial-noise-layer); background-size: var(--industrial-noise-size); background-repeat: var(--industrial-noise-repeat); } .review-public-avatar { width: 36px; height: 36px; border-radius: 50%; border: 2px solid #FF8C00; object-fit: cover; background: rgba(0, 0, 0, 0.5); flex: 0 0 auto; } .review-public-copy { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; } .review-public-copy strong { font-size: 0.88rem; color: #ffffff; letter-spacing: 0.01em; } .review-public-copy span { font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 140, 0, 0.95); } .verified-client-badge { margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255, 140, 0, 0.66); background: rgba(0, 0, 0, 0.74); background-image: var(--industrial-noise-layer); background-size: var(--industrial-noise-size); background-repeat: var(--industrial-noise-repeat); display: flex; align-items: center; gap: 10px; } .verified-client-avatar { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #FF8C00; object-fit: cover; background: rgba(0, 0, 0, 0.5); flex: 0 0 auto; } .verified-client-check { display: inline-flex; align-items: center; gap: 8px; color: #FF8C00; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; font-family: 'JetBrains Mono', monospace; font-weight: 700; } .review-flow-shell { border-radius: 12px; border: 1px solid rgba(255, 140, 0, 0.28); background: rgba(0, 0, 0, 0.78); background-image: var(--industrial-noise-layer); background-size: var(--industrial-noise-size); background-repeat: var(--industrial-noise-repeat); box-shadow: inset 0 0 0 1px rgba(255, 140, 0, 0.08); padding: 14px; } .review-oauth-gate, .review-shared-fields, .review-composer { transition: opacity 260ms ease, transform 260ms ease, max-height 320ms ease; transform-origin: top center; } .review-form.is-auth-gate .review-oauth-gate { opacity: 1; transform: translateY(0); max-height: 240px; pointer-events: auto; overflow: visible; } .review-form.is-auth-gate .review-shared-fields, .review-form.is-auth-gate .review-composer { opacity: 0; transform: translateY(8px); max-height: 0; pointer-events: none; overflow: hidden; margin: 0; } .review-form.is-composer-ready .review-oauth-gate, .review-form.is-legacy-manual .review-oauth-gate { opacity: 0; transform: translateY(-8px); max-height: 0; pointer-events: none; overflow: hidden; margin: 0; } .review-form.is-composer-ready .review-shared-fields, .review-form.is-composer-ready .review-composer { opacity: 1; transform: translateY(0); max-height: 620px; pointer-events: auto; overflow: visible; } .review-form.is-legacy-manual .review-shared-fields { opacity: 1; transform: translateY(0); max-height: 240px; pointer-events: auto; overflow: visible; } .review-form.is-legacy-manual .review-composer { opacity: 0; transform: translateY(8px); max-height: 0; pointer-events: none; overflow: hidden; margin: 0; } .review-google-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 12px; border: 1px solid rgba(255, 140, 0, 0.58); background: linear-gradient(145deg, rgba(255, 140, 0, 0.95), rgba(228, 116, 0, 0.94)); color: #000000; font-family: 'JetBrains Mono', monospace; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.84rem; padding: 12px 14px; cursor: pointer; box-shadow: 0 14px 26px rgba(255, 140, 0, 0.22); transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease; } .review-google-btn i { font-size: 1rem; } .review-google-btn:hover, .review-google-btn:focus-visible { transform: translateY(-1px); box-shadow: 0 18px 30px rgba(255, 140, 0, 0.3); filter: brightness(1.05); outline: none; } .review-google-btn:disabled { cursor: not-allowed; filter: saturate(0.35); opacity: 0.68; transform: none; box-shadow: none; } .review-oauth-copy { margin: 10px 0 2px; color: rgba(255, 255, 255, 0.72); font-size: 0.78rem; letter-spacing: 0.03em; text-align: center; } .review-identity-banner { margin: 0 0 14px; padding: 11px 13px; border-radius: 10px; border: 1px solid rgba(255, 140, 0, 0.32); background: rgba(0, 0, 0, 0.76); color: rgba(255, 255, 255, 0.78); font-size: 0.84rem; line-height: 1.45; display: flex; align-items: center; gap: 10px; } .review-identity-banner.is-error { border-color: rgba(255, 140, 0, 0.7); box-shadow: inset 0 0 0 1px rgba(255, 140, 0, 0.3); } .review-identity-banner.is-ready { color: #ffffff; border-color: rgba(255, 140, 0, 0.72); box-shadow: inset 0 0 0 1px rgba(255, 140, 0, 0.28), 0 0 12px rgba(255, 140, 0, 0.16); } .review-identity-banner.is-loading { border-color: rgba(255, 140, 0, 0.62); box-shadow: inset 0 0 0 1px rgba(255, 140, 0, 0.26); } .review-identity-banner.is-missing { border-color: rgba(255, 140, 0, 0.48); color: #ffd7ab; } .review-identity-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 140, 0, 0.2); border-top-color: #FF8C00; animation: reviewIdentitySpin 0.8s linear infinite; display: none; flex: 0 0 auto; } .review-identity-banner.is-loading .review-identity-spinner { display: inline-block; } .review-identity-avatar { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #FF8C00; object-fit: cover; display: none; flex: 0 0 auto; background: rgba(0, 0, 0, 0.5); } .review-identity-banner.is-ready .review-identity-avatar { display: inline-block; } .review-identity-text { min-width: 0; flex: 1 1 auto; } .review-identity-retry-btn { display: none; margin-left: auto; padding: 6px 12px; border-radius: 999px; border: 1px solid #FF8C00; background: #FF8C00; color: #000000; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; transition: filter 160ms ease, transform 160ms ease; flex: 0 0 auto; } .review-identity-retry-btn:hover, .review-identity-retry-btn:focus-visible { filter: brightness(1.05); transform: translateY(-1px); outline: none; } .review-identity-banner.is-error .review-identity-retry-btn { display: inline-flex; align-items: center; } @keyframes reviewIdentitySpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .review-form label { display: block; color: #ffffff; margin-bottom: 8px; font-weight: 600; font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78rem; } .review-questionnaire-section { margin-bottom: 16px; } .review-tag-group { display: flex; flex-wrap: wrap; gap: 8px; } .review-tag-btn { border: 1px solid rgba(255, 140, 0, 0.55); background: #000000; color: #ffffff; border-radius: 999px; padding: 8px 12px; font-size: 0.76rem; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.04em; cursor: pointer; transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease, color 160ms ease; } .review-tag-btn:hover, .review-tag-btn:focus-visible { outline: none; transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(255, 140, 0, 0.35); } .review-tag-btn.is-selected { background: #FF8C00; color: #000000; border-color: #FF8C00; box-shadow: 0 10px 18px rgba(255, 140, 0, 0.25); } .review-service-grid { display: grid; gap: 8px; } .review-service-option { display: flex; align-items: center; gap: 10px; border: 1px solid rgba(255, 140, 0, 0.32); border-radius: 10px; padding: 10px 12px; background: #000000; cursor: pointer; transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease; } .review-service-option input[type='checkbox'] { width: 16px; height: 16px; accent-color: #FF8C00; margin: 0; flex: 0 0 auto; } .review-service-option span { color: #ffffff; font-size: 0.86rem; } .review-service-option.is-selected { border-color: #FF8C00; background: rgba(255, 140, 0, 0.12); box-shadow: 0 0 0 1px rgba(255, 140, 0, 0.25); } .review-photo-btn { border: 1px solid #FF8C00; background: #000000; color: #FF8C00; border-radius: 10px; padding: 10px 12px; font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease; } .review-photo-btn:hover, .review-photo-btn:focus-visible { outline: none; transform: translateY(-1px); background: rgba(255, 140, 0, 0.14); box-shadow: 0 10px 20px rgba(255, 140, 0, 0.2); } .review-photo-status { margin-top: 8px; color: rgba(255, 255, 255, 0.72); font-size: 0.74rem; letter-spacing: 0.03em; } .review-form input, .review-form textarea { width: 100%; padding: 12px 15px; border: 1px solid rgba(255, 140, 0, 0.35); border-radius: 10px; font-size: 1rem; font-family: inherit; transition: border-color var(--hover-duration) var(--hover-ease), box-shadow var(--hover-duration) var(--hover-ease), background-color var(--hover-duration) var(--hover-ease); background: rgba(0, 0, 0, 0.78); color: #ffffff; } .review-form input::placeholder, .review-form textarea::placeholder { color: rgba(255, 255, 255, 0.6); } .review-form textarea { resize: vertical; min-height: 120px; } .review-form .submit-btn { font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.88rem; border: 1px solid #FF8C00; background: #FF8C00; color: #000000; box-shadow: 0 12px 26px rgba(255, 140, 0, 0.24); } .review-form .submit-btn:hover { box-shadow: 0 18px 34px rgba(255, 140, 0, 0.32); } .review-form input:focus, .review-form textarea:focus { outline: none; border-color: #FF8C00; box-shadow: 0 0 0 1px rgba(255, 140, 0, 0.7), 0 0 18px rgba(255, 140, 0, 0.34); } .review-legacy-toggle-wrap { margin-top: 12px; text-align: center; } .review-legacy-toggle { border: 0; background: transparent; color: rgba(255, 140, 0, 0.96); font-size: 0.76rem; letter-spacing: 0.03em; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 0; } .review-legacy-toggle:hover, .review-legacy-toggle:focus-visible { color: #ffc37b; outline: none; } .review-legacy-panel { margin-top: 12px; padding: 14px; border-radius: 12px; border: 1px solid rgba(255, 140, 0, 0.35); background: rgba(0, 0, 0, 0.74); background-image: var(--industrial-noise-layer); background-size: var(--industrial-noise-size); background-repeat: var(--industrial-noise-repeat); animation: reviewLegacyReveal 260ms ease; } .review-form.is-identity-locked .form-group--legacy-identity { display: none; } .review-legacy-cancel { margin-top: 8px; border: 0; background: transparent; color: rgba(255, 140, 0, 0.95); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: 0.76rem; letter-spacing: 0.03em; padding: 0; } .review-legacy-cancel:hover, .review-legacy-cancel:focus-visible { color: #ffc37b; outline: none; } @keyframes reviewLegacyReveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .form-success { margin-top: 16px; color: #ffc37b; display: none; text-align: center; } body.modal-open { overflow: hidden; } body.modal-open .review-cta-section .primary-cta-btn { animation: none; filter: none; text-shadow: none; box-shadow: 0 10px 24px rgba(255, 140, 0, 0.2); } body.modal-open .review-cta-section .primary-cta-btn::after { opacity: 0 !important; } .hailifu-review-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; font-weight: 600; color: var(--text-primary); font-size: 0.9rem; gap: 12px; } .hailifu-review-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); } .review-source-icon { width: 20px; height: 20px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--bg-primary) 75%, transparent); border: 1px solid color-mix(in srgb, var(--orange) 40%, transparent); color: var(--orange); font-size: 0.6rem; } .field-report-label { padding: 4px 8px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--orange) 38%, transparent); background: color-mix(in srgb, var(--bg-primary) 78%, transparent); color: var(--text-main); } .review-terminal-card, .modern-review-section .featured-reviews-feed .featured-review-card { position: relative; } .review-terminal-card .hailifu-review-card-header, .modern-review-section .featured-reviews-feed .featured-review-meta { padding-right: 44px; } .review-share-btn { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 999px; border: 1px solid rgba(255, 140, 0, 0.55); background: #000000; color: #FF8C00; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; z-index: 3; transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; } .review-share-btn i { font-size: 0.8rem; pointer-events: none; } .review-share-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 18px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(255, 140, 0, 0.2); } .review-share-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(255, 140, 0, 0.85); } .review-share-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(10px); padding: 8px 12px; border-radius: 10px; border: 1px solid #FF8C00; background: #000000; color: #FF8C00; font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; z-index: 10030; } .review-share-toast.active { opacity: 1; transform: translateX(-50%) translateY(0); } @media (max-width: 768px) { .review-share-btn { top: 10px; right: 10px; } } .hailifu-review-meta .hailifu-reviewer { color: var(--text-main); } .review-verified { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--orange); color: var(--orange); background: color-mix(in srgb, var(--orange) 12%, transparent); } .hailifu-review-score { color: var(--rating-star); text-shadow: 0 0 8px color-mix(in srgb, var(--orange) 55%, transparent); } .hailifu-review-link { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--gradient-primary); color: var(--white); padding: 14px 24px; border-radius: 999px; font-weight: 700; text-decoration: none; text-transform: uppercase; letter-spacing: 0.5px; transition: all var(--hover-duration) var(--hover-ease); } .hailifu-review-link:hover { background: var(--gradient-primary); transform: translateY(-2px); box-shadow: 0 12px 24px rgba(255, 140, 0, 0.35); } /* Form Group Styles */ .leave-review-form .form-group { margin-bottom: 20px; } .leave-review-form label { display: block; color: var(--text-main); margin-bottom: 8px; font-weight: 600; } [data-theme='light'] .leave-review-form label { color: var(--text-main); } .leave-review-form input::placeholder, .leave-review-form textarea::placeholder { color: var(--text-dim); } .leave-review-form input:focus, .leave-review-form textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 2px rgba(255, 140, 0, 0.2); } .submit-review-btn:hover { background: var(--gradient-primary); transform: translateY(-2px); box-shadow: 0 5px 20px rgba(255, 140, 0, 0.4); } .site-footer { background: var(--surface-main); border-top: 1px solid rgba(255, 140, 0, 0.18); } [data-theme='light'] .site-footer { background: var(--surface-main); border-top-color: rgba(255, 140, 0, 0.22); } .site-footer .footer-content { max-width: 1200px; margin: 0 auto; padding: 60px 5% 30px; display: grid; grid-template-columns: 1.4fr repeat(2, 1fr); gap: 40px; } .site-footer .footer-logo { width: 76px; height: 76px; border-radius: 20px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 140, 0, 0.22); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); margin-bottom: 16px; } .site-footer .footer-logo-img { width: 54px; height: 54px; border-radius: 14px; display: block; margin-bottom: 0; } .site-footer .footer-brand h3 { color: var(--orange); margin-bottom: 12px; font-size: 1.4rem; letter-spacing: 0.2px; } .site-footer .footer-tagline { margin: 0 0 8px; color: rgba(255, 255, 255, 0.75); text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.78rem; } .site-footer .footer-brand p { color: rgba(255, 255, 255, 0.72); line-height: 1.6; margin-bottom: 20px; } .site-footer .footer-status { display: inline-flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(46, 204, 113, 0.35); box-shadow: 0 14px 26px rgba(0, 0, 0, 0.35), 0 0 18px rgba(46, 204, 113, 0.2); } .site-footer .status-dot { width: 10px; height: 10px; border-radius: 50%; background: #2ecc71; box-shadow: 0 0 10px rgba(46, 204, 113, 0.9), 0 0 20px rgba(46, 204, 113, 0.45); } .site-footer .status-label { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1.4px; color: rgba(255, 255, 255, 0.6); } .site-footer .footer-status strong { display: block; font-size: 0.95rem; color: var(--white); } [data-theme='light'] .site-footer .footer-brand p { color: var(--text-muted); } .site-footer .footer-social { display: flex; align-items: center; gap: 12px; } .site-footer .social-link { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 140, 0, 0.25); color: var(--text-color); text-decoration: none; transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease; } .site-footer .social-link:hover { transform: translateY(-2px); background: rgba(255, 140, 0, 0.14); box-shadow: 0 10px 24px rgba(255, 140, 0, 0.18); } .site-footer .footer-section h4 { color: var(--text-primary); margin-bottom: 20px; font-size: 1.1rem; } .site-footer .footer-links, .site-footer .footer-services { display: flex; flex-direction: column; gap: 10px; } .site-footer .footer-links a, .site-footer .footer-services a { color: rgba(255, 255, 255, 0.75); text-decoration: none; transition: color 0.25s ease, transform 0.25s ease; } [data-theme='light'] .site-footer .footer-links a, [data-theme='light'] .site-footer .footer-services a { color: rgba(27, 27, 27, 0.78); } .site-footer .footer-links a:hover, .site-footer .footer-services a:hover { color: var(--orange); transform: translateX(2px); } .site-footer .footer-contact { display: flex; flex-direction: column; gap: 14px; } .site-footer .contact-item { display: flex; align-items: flex-start; gap: 12px; } .site-footer .contact-item i { color: var(--orange); margin-top: 4px; } .site-footer .footer-contact-label { color: var(--text-secondary); font-size: 0.9rem; display: block; } .site-footer .footer-contact-value { display: block; color: var(--text-primary); text-decoration: none; transition: color 0.25s ease; } .site-footer .footer-contact-value:hover { color: var(--orange); } [data-theme='light'] .site-footer .footer-status { background: rgba(46, 204, 113, 0.12); border-color: rgba(46, 204, 113, 0.45); } [data-theme='light'] .site-footer .status-label { color: rgba(27, 27, 27, 0.55); } [data-theme='light'] .site-footer .footer-status strong { color: var(--text-primary); } .site-footer .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.08); background: rgba(0, 0, 0, 0.2); padding: 20px 5%; } [data-theme='light'] .site-footer .footer-bottom { border-top-color: rgba(29, 29, 31, 0.10); background: rgba(255, 255, 255, 0.75); } .site-footer .footer-bottom-content { max-width: 1200px; margin: 0 auto; text-align: center; color: rgba(255, 255, 255, 0.7); font-size: 0.95rem; } [data-theme='light'] .site-footer .footer-bottom-content { color: rgba(27, 27, 27, 0.7); } .site-footer .footer-bottom-tagline { color: var(--orange); margin-top: 5px; } @media (max-width: 980px) { .site-footer .footer-content { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .site-footer .footer-content { grid-template-columns: 1fr; gap: 28px; } } .review-form-section { padding: 80px 5%; background: var(--surface-main); } .review-form-container { max-width: 800px; margin: auto; background: rgba(255, 255, 255, 0.08); padding: 50px; border-radius: 20px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 140, 0, 0.3); backdrop-filter: blur(10px); } .review-form-container .form-group { margin-bottom: 25px; } .review-form-container .form-group label { display: block; margin-bottom: 8px; color: var(--text-primary); font-weight: 600; font-size: 1rem; } .review-form-container .form-group input, .review-form-container .form-group textarea { width: 100%; padding: 12px 15px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 10px; font-size: 1rem; font-family: inherit; transition: all 0.3s ease; background: rgba(255, 255, 255, 0.06); color: var(--text-primary); } [data-theme='light'] .review-form-container .form-group input, [data-theme='light'] .review-form-container .form-group textarea { border-color: rgba(29, 29, 31, 0.18); background: rgba(255, 255, 255, 0.92); } .review-form-container .form-group input::placeholder, .review-form-container .form-group textarea::placeholder { color: rgba(255, 255, 255, 0.6); } .review-form-container .form-group input:focus, .review-form-container .form-group textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 2px rgba(255, 140, 0, 0.2); } .review-form-container .form-group textarea { resize: vertical; min-height: 120px; } .star-rating { display: flex; gap: 20px; margin-top: 10px; flex-direction: row-reverse; justify-content: flex-end; } .star-rating input { display: none; } .star-rating label { font-size: clamp(2.3rem, 7vw, 3rem); color: rgba(255, 255, 255, 0.25); cursor: pointer; transition: color 0.2s ease, transform 0.2s ease, text-shadow 0.2s ease; margin: 0; } .star-rating label:hover, .star-rating label:hover ~ label, .star-rating input:checked ~ label { color: #FF8C00; transform: translateY(-2px) scale(1.05); text-shadow: 0 0 12px rgba(255, 140, 0, 0.72); } .submit-btn { width: 100%; background: var(--gradient-primary); color: var(--white); border: none; padding: 15px; border-radius: 10px; font-size: 1.05rem; font-weight: 700; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; gap: 10px; } .submit-btn:hover { background: var(--gradient-primary); transform: translateY(-2px); box-shadow: 0 8px 30px rgba(255, 140, 0, 0.35); } .form-success { display: none; margin-top: 20px; padding: 15px; border-radius: 10px; background: rgba(76, 175, 80, 0.15); border: 1px solid rgba(76, 175, 80, 0.35); color: var(--text-primary); text-align: center; } .brilliant-chat-btn, .chatbot-toggle { position: fixed; right: 30px; width: 42px; height: 42px; border-radius: 50%; border: 3px solid rgba(255, 140, 0, 0.95); background: var(--surface-strong); color: var(--orange); cursor: pointer; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55), 0 0 18px rgba(255, 140, 0, 0.45); transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), filter 0.25s cubic-bezier(0.4, 0, 0.2, 1); z-index: 10002; } .share-portfolio-fab { position: fixed; right: 30px; bottom: 86px; width: 46px; height: 46px; border-radius: 50%; border: 3px solid rgba(255, 140, 0, 0.95); background: var(--surface-strong); color: var(--orange); cursor: pointer; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55), 0 0 18px rgba(255, 140, 0, 0.45); transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), filter 0.25s cubic-bezier(0.4, 0, 0.2, 1); z-index: 10002; display: inline-flex; align-items: center; justify-content: center; } .share-portfolio-fab:hover { transform: translateY(-2px); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.65), 0 0 28px rgba(255, 140, 0, 0.65); filter: brightness(1.03); } .chatbot-toggle, .share-portfolio-fab { display: none; } .brilliant-chat-btn { display: none; } .share-portfolio-toast { position: fixed; right: 30px; bottom: 96px; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(255, 140, 0, 0.35); background: rgba(15, 15, 15, 0.92); color: rgba(255, 255, 255, 0.92); box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); z-index: 10004; } .share-portfolio-toast.active { opacity: 1; transform: translateY(0); } .admin-media-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(8px); padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(255, 140, 0, 0.35); background: rgba(8, 8, 8, 0.94); color: rgba(255, 255, 255, 0.94); box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); opacity: 0; pointer-events: none; transition: opacity 0.25s var(--hover-ease), transform 0.25s var(--hover-ease), border-color 0.25s var(--hover-ease), color 0.25s var(--hover-ease); z-index: 10020; } .admin-media-toast.active { opacity: 1; transform: translateX(-50%) translateY(0); } .admin-media-toast.is-success { border-color: rgba(37, 211, 102, 0.55); color: rgba(187, 255, 214, 0.95); } .admin-media-toast.is-warning { border-color: #FF8C00; color: #FF8C00; text-shadow: 0 0 10px rgba(255, 140, 0, 0.45); } .admin-media-toast.is-error { border-color: rgba(255, 77, 79, 0.65); color: rgba(255, 202, 203, 0.95); } [data-theme='light'] .admin-media-toast { background: rgba(255, 255, 255, 0.96); color: rgba(29, 29, 31, 0.95); border-color: rgba(29, 29, 31, 0.22); box-shadow: 0 14px 44px rgba(0, 0, 0, 0.2); } .brilliant-chat-btn { bottom: 30px; } .chatbot-toggle { bottom: 30px; } .brilliant-chat-btn:hover, .chatbot-toggle:hover { transform: translateY(-2px); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.65), 0 0 28px rgba(255, 140, 0, 0.65); filter: brightness(1.03); } .brilliant-chat-window { position: fixed; right: 30px; bottom: 110px; width: min(380px, 90vw); max-height: 520px; max-height: min(620px, calc(100vh - 220px)); background: rgba(15, 15, 15, 0.92); border: 1px solid rgba(255, 140, 0, 0.25); border-radius: 18px; box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); overflow: hidden; display: none; z-index: 10003; } .brilliant-chat-window.active { display: flex; flex-direction: column; } .brilliant-chat-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; background: var(--surface-strong); border-bottom: 1px solid rgba(255, 140, 0, 0.45); color: var(--orange); gap: 10px; } .brilliant-chat-header span { font-size: 0.92rem; font-weight: 800; letter-spacing: 0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brilliant-chat-close { width: 32px; height: 32px; border-radius: 12px; border: 1px solid rgba(255, 140, 0, 0.45); background: rgba(0, 0, 0, 0.35); color: var(--orange); cursor: pointer; } .brilliant-chat-messages { padding: 14px; overflow: auto; display: flex; flex-direction: column; gap: 10px; } .brilliant-chat-message { display: flex; } .brilliant-chat-message.user { justify-content: flex-end; } .brilliant-chat-bubble { max-width: 85%; min-width: 100px; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.92); font-size: 0.92rem; line-height: 1.5; width: fit-content; white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word; } .brilliant-chat-message.user .brilliant-chat-bubble { background: rgba(255, 140, 0, 0.18); border-color: rgba(255, 140, 0, 0.3); } .brilliant-quick-actions { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; } .brilliant-quick-btn { border: 1px solid rgba(255, 140, 0, 0.25); background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.9); border-radius: 999px; padding: 8px 12px; font-weight: 600; cursor: pointer; transition: transform 0.2s ease, background 0.2s ease; } .brilliant-quick-btn:hover { transform: translateY(-1px); background: rgba(255, 140, 0, 0.14); } [data-theme='light'] .brilliant-quick-btn { background: rgba(29, 29, 31, 0.04); color: rgba(29, 29, 31, 0.9); border-color: rgba(29, 29, 31, 0.14); } [data-theme='light'] .brilliant-quick-btn:hover { background: rgba(255, 140, 0, 0.16); border-color: rgba(255, 140, 0, 0.35); } select { background-color: var(--surface-card); color: var(--text-primary); color-scheme: dark; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 12px; padding: 12px 44px 12px 14px; appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, 0.9) 50%), linear-gradient(135deg, rgba(255, 255, 255, 0.9) 50%, transparent 50%), linear-gradient(to right, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.14)); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%, calc(100% - 2.6em) 50%; background-size: 5px 5px, 5px 5px, 1px 1.6em; background-repeat: no-repeat; } select option { background-color: var(--surface-card); color: var(--text-primary); } [data-theme='light'] select { color-scheme: light; border-color: rgba(29, 29, 31, 0.18); } select:focus { outline: none; border-color: rgba(255, 140, 0, 0.55); box-shadow: 0 0 0 2px rgba(255, 140, 0, 0.18); } .chatbot-container { position: fixed; right: 30px; bottom: 110px; width: min(360px, 92vw); max-height: calc(100vh - 220px); max-height: min(620px, calc(100vh - 220px)); display: none; flex-direction: column; overflow: hidden; border-radius: 18px; background: rgba(15, 15, 15, 0.92); border: 1px solid rgba(255, 140, 0, 0.25); box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); z-index: 10003; } .chatbot-container.active { display: flex; } .chatbot-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; background: var(--surface-strong); border-bottom: 1px solid rgba(255, 140, 0, 0.45); color: var(--orange); gap: 10px; } .chatbot-header h3 { font-size: 0.92rem; margin: 0; display: flex; align-items: center; gap: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0; } .chatbot-logo { width: 26px; height: 26px; flex-shrink: 0; object-fit: contain; } .brilliant-chat-title { display: flex; align-items: center; gap: 8px; } .chatbot-status { font-size: 0.78rem; gap: 6px; flex: 0 0 auto; } .chatbot-status .status-dot { width: 8px; height: 8px; } .chatbot-close { width: 32px; height: 32px; border-radius: 12px; border: 1px solid rgba(255, 140, 0, 0.45); background: rgba(0, 0, 0, 0.35); color: var(--orange); cursor: pointer; } .chatbot-messages { padding: 14px; overflow: auto; color: rgba(255, 255, 255, 0.9); display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; min-height: 0; } .chatbot-messages .message { padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.06); font-size: 0.92rem; line-height: 1.5; max-width: 85%; min-width: 100px; width: fit-content; white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word; } @media (min-width: 900px) { .chatbot-container { width: 420px; } .chatbot-messages { padding: 20px 22px; gap: 14px; } .chatbot-messages .message { max-width: 96%; } } .chatbot-messages .message.user { align-self: flex-end; background: rgba(255, 140, 0, 0.18); border-color: rgba(255, 140, 0, 0.3); } .chatbot-messages .message.bot { align-self: flex-start; } .chatbot-input { padding: 12px 14px 14px; border-top: 1px solid rgba(255, 140, 0, 0.18); background: rgba(0, 0, 0, 0.18); } [data-theme='light'] .chatbot-input { background: rgba(255, 255, 255, 0.62); } .chat-input-wrapper { display: flex; gap: 10px; align-items: center; } .chat-input { flex: 1 1 auto; min-width: 0; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.92); outline: none; } .chat-input::placeholder { color: rgba(255, 255, 255, 0.55); } [data-theme='light'] .chat-input { background: rgba(29, 29, 31, 0.04); border-color: rgba(29, 29, 31, 0.14); color: rgba(29, 29, 31, 0.92); } [data-theme='light'] .chat-input::placeholder { color: rgba(29, 29, 31, 0.55); } .chat-send-btn { width: 44px; height: 44px; border-radius: 14px; border: 1px solid rgba(255, 140, 0, 0.25); background: rgba(255, 140, 0, 0.18); color: var(--white); cursor: pointer; } .chat-send-btn:hover { background: rgba(255, 140, 0, 0.26); } [data-theme='light'] .chat-send-btn { background: rgba(255, 140, 0, 0.2); color: rgba(29, 29, 31, 0.95); border-color: rgba(255, 140, 0, 0.42); } .chatbot-action-btn { width: 100%; margin-top: 10px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(37, 211, 102, 0.35); background: rgba(37, 211, 102, 0.16); color: rgba(255, 255, 255, 0.95); font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px; } .upload-btn--ghost { background: transparent; border: 1px solid rgba(255, 255, 255, 0.2); color: var(--white); } .upload-btn--ghost:hover { border-color: var(--orange); box-shadow: 0 0 12px rgba(255, 140, 0, 0.25); } .chatbot-action-btn:hover { background: rgba(37, 211, 102, 0.22); } [data-theme='light'] .chatbot-action-btn { background: rgba(37, 211, 102, 0.2); border-color: rgba(37, 211, 102, 0.5); color: rgba(29, 29, 31, 0.92); } @media (max-width: 768px) { .chatbot-container { right: 20px; bottom: 120px; width: min(360px, calc(100vw - 40px)); max-height: calc(100vh - 220px); } .chatbot-header { flex-wrap: wrap; gap: 10px; } .chatbot-header h3 { flex: 1 1 100%; font-size: 0.95rem; } .chatbot-messages .message { max-width: 100%; } .brilliant-chat-window { right: 20px; width: min(360px, calc(100vw - 40px)); } .chatbot-toggle { right: 16px; bottom: 30px; } .share-portfolio-fab { right: 16px; } .share-portfolio-toast { right: 16px; } } .lead-card { padding: 12px; border-radius: 12px; border: 1px solid var(--glass-border); background: var(--glass-bg); color: rgba(255, 255, 255, 0.9); } .lead-card strong { display: block; margin-bottom: 6px; } .lead-card small { color: rgba(255, 255, 255, 0.65); } .admin-review-module { display: grid; gap: 16px; } .admin-review-stack { display: grid; gap: 12px; } .admin-review-card { padding: 14px; border-radius: 14px; border: 1px solid rgba(255, 140, 0, 0.30); background-color: rgba(11, 11, 11, 0.9); background-image: var(--industrial-noise-layer); background-size: var(--industrial-noise-size); background-repeat: var(--industrial-noise-repeat); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35); } .admin-review-header { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; } .admin-review-header strong { flex: 1 1 auto; min-width: 120px; color: rgba(255, 255, 255, 0.94); } .admin-review-status { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; border: 1px solid rgba(255, 140, 0, 0.5); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 214, 168, 0.95); background: rgba(255, 140, 0, 0.14); } .admin-review-status--pending { border-color: rgba(255, 140, 0, 0.55); background: rgba(255, 140, 0, 0.16); } .admin-review-status--published { border-color: rgba(255, 140, 0, 0.72); background: rgba(255, 140, 0, 0.24); } .admin-section--review-auth { border-color: rgba(255, 140, 0, 0.35); } .review-auth-status { margin: 0 0 10px; color: rgba(255, 255, 255, 0.82); font-size: 0.84rem; line-height: 1.45; } .review-auth-form { display: grid; gap: 10px; } .review-auth-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .review-auth-grid input { width: 100%; border-radius: 10px; border: 1px solid rgba(255, 140, 0, 0.28); background-color: rgba(16, 16, 16, 0.86); background-image: var(--industrial-noise-layer); background-size: var(--industrial-noise-size); background-repeat: var(--industrial-noise-repeat); color: rgba(255, 255, 255, 0.94); padding: 10px 12px; outline: none; } .review-auth-grid input:focus { border-color: rgba(255, 140, 0, 0.82); box-shadow: 0 0 0 2px rgba(255, 140, 0, 0.18); } .review-admin-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; } .review-admin-btn { flex: 1 1 140px; border: 1px solid rgba(255, 140, 0, 0.72); background: #FF8C00; color: #131313; padding: 10px 12px; border-radius: 12px; font-weight: 800; cursor: pointer; transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease; } .review-admin-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 16px rgba(255, 140, 0, 0.28); filter: brightness(1.04); } .review-admin-btn:disabled { opacity: 0.58; cursor: not-allowed; transform: none; box-shadow: none; filter: none; } .review-admin-btn.delete { border-color: rgba(255, 140, 0, 0.5); background: rgba(255, 140, 0, 0.16); color: rgba(255, 216, 170, 0.96); } @media (max-width: 680px) { .review-auth-grid { grid-template-columns: 1fr; } } .popup-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); display: none; align-items: center; justify-content: center; padding: 24px; z-index: 10005; opacity: 0; transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1); overflow-y: auto; -webkit-overflow-scrolling: touch; } .popup-overlay.active { display: flex; opacity: 1; } .popup-overlay.active .popup-form { opacity: 1; transform: translateY(0) scale(1); } .popup-form.is-active { opacity: 1; transform: translateY(0) scale(1); } .popup-form { width: min(400px, 100%); max-height: calc(100vh - 48px); background: rgba(15, 15, 15, 0.92); border: 1px solid rgba(255, 140, 0, 0.25); border-radius: 18px; overflow: hidden; box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); display: flex; flex-direction: column; transform: translateY(10px) scale(0.98); opacity: 0; transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1); min-height: 0; } .popup-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px; border-bottom: 1px solid rgba(255, 140, 0, 0.18); } .popup-header-text { display: flex; flex-direction: column; gap: 10px; } .popup-brand { display: flex; align-items: center; gap: 12px; } .popup-brand-logo { width: 38px; height: 38px; border-radius: 12px; border: 1px solid rgba(255, 140, 0, 0.35); background: rgba(255, 255, 255, 0.04); } .popup-brand-copy { display: flex; flex-direction: column; gap: 4px; } .popup-brand-name { font-weight: 700; color: var(--white); font-size: 0.95rem; } .popup-brand-tagline { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.16em; color: rgba(255, 255, 255, 0.6); } .share-portfolio-toast { right: 16px; } .popup-header h2 { font-size: 1.05rem; margin: 0; } .popup-close { width: 36px; height: 36px; border-radius: 12px; border: 1px solid rgba(255, 140, 0, 0.25); background: rgba(255, 255, 255, 0.06); color: var(--text-primary); cursor: pointer; } .popup-body { padding: 16px; color: rgba(255, 255, 255, 0.92); overflow-y: auto; flex: 1 1 auto; min-height: 0; -webkit-overflow-scrolling: touch; background: rgba(0, 0, 0, 0.18); } .popup-form-group { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; } .popup-form-group label { display: block; margin-bottom: 0; font-weight: 600; color: rgba(255, 255, 255, 0.85); } .popup-form-group input, .popup-form-group select, .popup-form-group textarea { width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.92); font-family: inherit; box-sizing: border-box; } .popup-form-group select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-color: #FF8C00 !important; border-color: #FF8C00 !important; color: #000000 !important; font-weight: 700; padding-right: 42px; outline: none; -webkit-tap-highlight-color: transparent; background-image: linear-gradient(45deg, transparent 50%, #000000 50%), linear-gradient(135deg, #000000 50%, transparent 50%), linear-gradient(to right, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)); background-position: calc(100% - 20px) calc(1em + 4px), calc(100% - 14px) calc(1em + 4px), calc(100% - 2.5em) 0.5em; background-size: 6px 6px, 6px 6px, 1px 1.8em; background-repeat: no-repeat; } .popup-form-group select:focus, .popup-form-group select:focus-visible { outline: none; border-color: #FF8C00 !important; box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.35); } .popup-form-group select:hover, .popup-form-group select:active { outline: none; border-color: #FF8C00 !important; box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.2); } .popup-form-group select:invalid { color: rgba(0, 0, 0, 0.7); } .popup-form-group select option { color: #000000 !important; background: #ffffff !important; } [data-theme='light'] .popup-form-group select { background-color: #FF8C00 !important; border-color: #FF8C00 !important; color: #000000 !important; } .custom-select { position: relative; } .custom-select-native { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; } .custom-select-button { width: 100%; min-height: 50px; border-radius: 14px; border: 1px solid #FF8C00; background: #FF8C00; color: #000000; font-weight: 700; padding: 12px 42px 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; } .custom-select-button i { color: #000000; } .custom-select.is-open .custom-select-button { box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.35); } .custom-select-list { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: #0f0f0f; border: 1px solid rgba(255, 140, 0, 0.3); border-radius: 12px; box-shadow: 0 16px 30px rgba(0, 0, 0, 0.5); padding: 6px; display: none; max-height: 220px; overflow-y: auto; z-index: 20; } .custom-select.is-open .custom-select-list { display: block; } .custom-select-option { width: 100%; text-align: left; border: none; background: transparent; color: rgba(255, 255, 255, 0.92); padding: 10px 12px; border-radius: 10px; cursor: pointer; } .custom-select-option:hover { background: rgba(255, 140, 0, 0.18); } .custom-select-option.is-selected { background: rgba(255, 140, 0, 0.3); color: #ffffff; } .custom-select-option:disabled { color: rgba(255, 255, 255, 0.5); cursor: not-allowed; } [data-theme='light'] .custom-select-list { background: #ffffff; border-color: rgba(0, 0, 0, 0.15); box-shadow: 0 16px 30px rgba(0, 0, 0, 0.12); } [data-theme='light'] .custom-select-option { color: #1a1a1a; } [data-theme='light'] .custom-select-option:hover { background: rgba(255, 140, 0, 0.2); } .popup-form-group input::placeholder, .popup-form-group textarea::placeholder { color: rgba(255, 255, 255, 0.55); } .popup-form-group input:focus, .popup-form-group select:focus, .popup-form-group textarea:focus { outline: none; border-color: rgba(255, 140, 0, 0.7); box-shadow: 0 0 0 2px rgba(255, 140, 0, 0.2); } .popup-form-group textarea { min-height: 110px; resize: vertical; } .popup-submit-btn { width: 100%; margin-top: 18px; background: linear-gradient(135deg, rgba(255, 140, 0, 0.95), rgba(138, 69, 0, 0.95)); color: var(--white); border: none; padding: 14px 16px; border-radius: 14px; font-weight: 800; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease; } .popup-submit-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(255, 140, 0, 0.22); filter: brightness(1.03); } .popup-success { display: none; margin-top: 14px; padding: 12px; border-radius: 12px; background: rgba(76, 175, 80, 0.15); border: 1px solid rgba(76, 175, 80, 0.35); } .project-modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 10006; overflow-y: auto; -webkit-overflow-scrolling: touch; } .project-modal.active { display: flex; } .project-modal[aria-hidden="true"] { display: none !important; pointer-events: none; } .project-modal[aria-hidden="false"] { display: flex !important; pointer-events: all; opacity: 1; visibility: visible; } .project-modal.is-showcase-fullscreen { padding: 0; align-items: stretch; justify-content: stretch; } .project-modal.is-showcase-fullscreen .project-modal-dialog { width: 100%; height: 100vh; height: 100dvh; max-height: 100dvh; border-radius: 0; } .project-modal-dialog { width: min(920px, 100%); border-radius: 18px; overflow: hidden; background: rgba(15, 15, 15, 0.94); border: 1px solid rgba(255, 140, 0, 0.25); box-shadow: 0 20px 70px rgba(0, 0, 0, 0.65); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); max-height: calc(100vh - 48px); display: flex; flex-direction: column; } .project-modal.is-compact .project-modal-dialog { width: min(680px, 100%); max-height: min(78vh, 620px); } .project-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; background: rgba(0, 0, 0, 0.14); border-bottom: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); color: var(--white); } .project-modal.is-showcase-fullscreen .project-modal-header { transition: transform 0.24s ease, opacity 0.24s ease, margin-bottom 0.24s ease; will-change: transform, opacity; } .project-modal.is-showcase-fullscreen.is-header-hidden .project-modal-header { transform: translateY(-110%); opacity: 0; pointer-events: none; margin-bottom: -70px; } .project-modal-title { display: flex; flex-direction: column; gap: 2px; } .project-modal-title strong { font-size: 1.05rem; } .project-modal-title span { font-size: 0.85rem; color: var(--text-secondary); } .project-modal-close { width: 40px; height: 40px; border-radius: 12px; border: 1px solid rgba(255, 140, 0, 0.25); background: rgba(255, 255, 255, 0.06); color: var(--text-primary); cursor: pointer; } .project-modal-body { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 18px; padding: 16px; color: rgba(255, 255, 255, 0.92); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; min-height: 0; } .project-modal.is-compact .project-modal-body { grid-template-columns: 1fr; } .project-modal.is-showcase-fullscreen .project-modal-body { grid-template-columns: 1fr; flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 14px; } .project-modal-media { border-radius: 16px; overflow: hidden; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); min-height: 320px; display: flex; align-items: center; justify-content: center; } .project-modal-meta { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 140, 0, 0.2); border-radius: 12px; padding: 16px; box-shadow: 0 16px 30px rgba(0, 0, 0, 0.35); align-self: start; } .project-modal.has-gallery .project-modal-media { display: block; min-height: auto; background: transparent; border: 0; } .project-modal.is-showcase-fullscreen .project-modal-media { display: flex; flex-direction: column; height: 100%; min-height: 0; border-radius: 0; } .project-modal.is-showcase-fullscreen .project-modal-meta { display: none; } .project-modal-gallery-wrap { display: flex; flex-direction: column; gap: 14px; height: 100%; min-height: 0; } .project-modal.is-showcase-fullscreen .project-modal-gallery-wrap { flex: 1 1 auto; min-height: 0; overflow: hidden; } .project-modal-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; align-content: start; align-items: stretch; gap: 14px; max-height: min(64vh, 680px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; scrollbar-gutter: stable both-edges; padding: 8px 10px 10px; } .project-modal.is-showcase-fullscreen .project-modal-gallery { flex: 1 1 auto; min-height: 0; max-height: none; height: auto; overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(170px, calc((100vh - 210px) / 2)); grid-auto-rows: minmax(170px, calc((100dvh - 210px) / 2)); gap: 14px; padding: 10px 14px 12px; } .project-modal.is-showcase-fullscreen .project-modal-tile, .project-modal.is-showcase-fullscreen .project-modal-tile.is-hero { aspect-ratio: auto; height: 100%; min-height: 0; } .project-modal-gallery-controls { display: flex; justify-content: center; align-items: center; padding-bottom: 2px; } .project-modal-view-more { border: 1px solid rgba(255, 140, 0, 0.45); background: rgba(255, 140, 0, 0.14); color: #fff; border-radius: 999px; padding: 10px 18px; font-weight: 700; font-size: 0.9rem; cursor: pointer; } .project-modal-view-more:hover { background: rgba(255, 140, 0, 0.25); border-color: rgba(255, 140, 0, 0.7); } @media (max-width: 900px) { .project-modal-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 8px; } .project-modal.is-showcase-fullscreen .project-modal-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(130px, calc((100vh - 190px) / 2)); grid-auto-rows: minmax(130px, calc((100dvh - 190px) / 2)); padding: 8px; } } @media (max-width: 620px) { .project-modal-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 6px 6px 8px; } .project-modal.is-showcase-fullscreen .project-modal-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; grid-template-rows: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(120px, calc((100vh - 180px) / 2)); grid-auto-rows: minmax(120px, calc((100dvh - 180px) / 2)); padding: 6px 6px 8px; } .project-modal-tile.is-hero { grid-column: span 1; grid-row: span 1; aspect-ratio: 16 / 11; } } .project-modal-tile { position: relative; display: block; width: 100%; line-height: 0; appearance: none; -webkit-appearance: none; padding: 0; border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 14px; overflow: hidden; background: rgba(0, 0, 0, 0.35); cursor: pointer; transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; transform: none; aspect-ratio: 16 / 11; box-shadow: 0 10px 22px rgba(0, 0, 0, 0.30); } .gallery-viewer .native-gallery-tile { border-color: rgba(255, 140, 0, 0.28); background: rgba(0, 0, 0, 0.42); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.30), inset 0 0 0 1px rgba(255, 140, 0, 0.08); } .project-modal-tile.is-hero { grid-column: span 1; grid-row: span 1; aspect-ratio: 16 / 11; } .project-modal-tile.is-hidden { display: none; } .project-modal-tile:hover { transform: none; border-color: var(--orange); box-shadow: 0 12px 24px rgba(255, 140, 0, 0.14); } @media (hover: none), (pointer: coarse) { .project-modal-tile:hover { transform: none; border-color: rgba(255, 255, 255, 0.10); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.30); } } .project-modal-tile img, .project-modal-tile video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; } .project-modal-tile-badge { position: absolute; right: 10px; top: 10px; width: 34px; height: 34px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 140, 0, 0.35); color: var(--white); pointer-events: none; } .project-modal.is-compact .project-modal-media { min-height: 240px; } .project-modal-media img, .project-modal-media video { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 8px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); } .project-modal-media iframe { width: 100%; height: 100%; border: 0; display: block; } .media-lightbox { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; padding: 0; background: rgba(0, 0, 0, 0.96); z-index: 10060; } .media-lightbox.active { display: flex; } .media-lightbox-close { position: absolute; top: max(12px, env(safe-area-inset-top, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); width: 44px; height: 44px; border-radius: 14px; border: 1px solid rgba(255, 140, 0, 0.35); background: rgba(0, 0, 0, 0.55); color: var(--white); cursor: pointer; z-index: 3; } .media-lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 16px; border: 1px solid rgba(255, 140, 0, 0.35); background: rgba(0, 0, 0, 0.55); color: var(--white); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; z-index: 1; } .media-lightbox-prev { left: max(12px, env(safe-area-inset-left, 0px)); } .media-lightbox-next { right: max(12px, env(safe-area-inset-right, 0px)); } .media-lightbox-content { width: 100%; height: 100vh; height: 100dvh; border-radius: 0; overflow: hidden; background: #000; border: 0; box-shadow: none; display: flex; align-items: center; justify-content: center; position: relative; isolation: isolate; padding: clamp(54px, 8vh, 86px) clamp(12px, 3vw, 34px) clamp(64px, 10vh, 108px); box-sizing: border-box; } .media-lightbox-content::before { content: ''; position: absolute; inset: 0; background-image: var(--lightbox-bg, none); background-size: cover; background-position: center; filter: blur(26px) brightness(0.45); transform: scale(1.08); z-index: 0; opacity: 0.9; display: none; } .media-lightbox-caption { position: absolute; left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); bottom: max(12px, env(safe-area-inset-bottom, 0px)); padding: 10px 14px; border-radius: 14px; background: rgba(0, 0, 0, 0.58); border: 1px solid rgba(255, 140, 0, 0.22); color: rgba(255, 255, 255, 0.92); font-weight: 700; text-align: center; pointer-events: none; } .media-lightbox-content img, .media-lightbox-content video { width: auto; height: auto; max-width: 100%; max-height: 100%; border: 0; display: block; object-fit: contain; object-position: center center; background: transparent; position: relative; z-index: 1; margin: 0 auto; } .media-lightbox-content iframe { width: min(100%, 1320px); height: auto; max-height: 100%; aspect-ratio: 16 / 9; border: 0; display: block; position: relative; z-index: 1; margin: 0 auto; } @media (min-width: 900px) { .media-lightbox-content { padding: clamp(62px, 7vh, 90px) clamp(52px, 6vw, 108px) clamp(72px, 9vh, 118px); } } .project-modal-meta h4 { margin: 0 0 10px; color: var(--text-primary); } .project-modal-meta p { margin: 0; color: rgba(255, 255, 255, 0.78); line-height: 1.6; } @media (max-width: 860px) { .project-modal-body { grid-template-columns: 1fr; } } @media (min-width: 769px) { .glass-panel, .animate-on-scroll { opacity: 1; pointer-events: auto; } } /* Premium Admin Panel Upgrade */ .admin-panel { font-family: 'Montserrat', 'Segoe UI', sans-serif; background: radial-gradient(circle at 12% 12%, rgba(255, 140, 0, 0.18), transparent 55%), radial-gradient(circle at 80% 10%, rgba(255, 255, 255, 0.04), transparent 60%), linear-gradient(160deg, rgba(6, 6, 6, 0.98), rgba(14, 14, 14, 0.96)); border-left: 1px solid rgba(255, 140, 0, 0.45); } .admin-header { background: linear-gradient(135deg, rgba(255, 140, 0, 0.2), rgba(255, 140, 0, 0.04)); border-bottom: 1px solid rgba(255, 140, 0, 0.2); } .admin-title { font-size: 1.05rem; letter-spacing: 0.05em; } .admin-subtitle { color: rgba(255, 255, 255, 0.55); } .admin-tabs { background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(255, 140, 0, 0.18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02); } .admin-tab { border: 1px solid rgba(255, 255, 255, 0.06); letter-spacing: 0.04em; text-transform: uppercase; } .admin-tab.active { background: linear-gradient(135deg, rgba(255, 140, 0, 0.35), rgba(153, 107, 61, 0.12)); border-color: rgba(255, 140, 0, 0.5); box-shadow: 0 10px 22px rgba(255, 140, 0, 0.22); } .admin-section { background: linear-gradient(140deg, rgba(12, 12, 12, 0.92), rgba(6, 6, 6, 0.92)); border: 1px solid rgba(255, 255, 255, 0.06); box-shadow: 0 22px 50px rgba(0, 0, 0, 0.55); } .admin-section::after { opacity: 0.35; } .admin-section h3 { letter-spacing: 0.08em; } .upload-form input, .upload-form select, .upload-form textarea { background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 140, 0, 0.06); border-radius: 12px; } .admin-panel button, .admin-panel .project-visibility-save, .admin-panel .project-delete, .admin-panel .project-star { border-radius: 12px; } .admin-panel .upload-btn { background: linear-gradient(135deg, rgba(255, 140, 0, 0.95), rgba(153, 107, 61, 0.9)); box-shadow: 0 12px 28px rgba(255, 140, 0, 0.25); } .admin-panel .upload-btn--ghost { border: 1px solid rgba(255, 255, 255, 0.16); } .project-thumb { background: rgba(8, 8, 8, 0.85); border: 1px solid rgba(255, 255, 255, 0.06); box-shadow: 0 18px 36px rgba(0, 0, 0, 0.5); } body.light-mode .admin-panel { background: linear-gradient(160deg, rgba(255, 255, 255, 0.95), rgba(245, 245, 245, 0.98)); border-left: 1px solid rgba(0, 0, 0, 0.08); } body.light-mode .admin-tabs { background: rgba(255, 140, 0, 0.08); border-color: rgba(0, 0, 0, 0.08); } body.light-mode .admin-tab { border-color: rgba(0, 0, 0, 0.08); } body.light-mode .admin-section { background: #ffffff; border-color: rgba(0, 0, 0, 0.06); box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08); } /* Light mode services card text */ [data-theme='light'] #services .services-grid .card h3 { color: var(--text-color); } [data-theme='light'] #services .services-grid .card p, [data-theme='light'] #services .services-grid .card .service-tagline { color: var(--text-muted); } [data-theme='light'] #services .services-grid .card.has-media h3, [data-theme='light'] #services .services-grid .card.has-media p, [data-theme='light'] #services .services-grid .card.has-media .service-tagline, [data-theme='light'] #services .services-grid .card.has-media .request-quote-btn { color: #ffffff; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55); } body.light-mode .upload-form input, body.light-mode .upload-form select, body.light-mode .upload-form textarea { background: #ffffff; border-color: rgba(0, 0, 0, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 140, 0, 0.08); } [data-theme='light'] .admin-panel { background: linear-gradient(160deg, rgba(255, 255, 255, 0.95), rgba(245, 245, 245, 0.98)); color: #1a1a1a; border-left: 1px solid rgba(0, 0, 0, 0.08); } [data-theme='light'] .admin-header { background: linear-gradient(135deg, rgba(255, 140, 0, 0.12), rgba(0, 0, 0, 0.02)); border-bottom: 1px solid rgba(0, 0, 0, 0.08); } [data-theme='light'] .admin-title, [data-theme='light'] .admin-subtitle { color: #1a1a1a; } [data-theme='light'] .admin-tabs { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.08); } [data-theme='light'] .admin-tab { color: #1a1a1a; border-color: rgba(0, 0, 0, 0.08); } [data-theme='light'] .admin-tab.active { background: #ffffff; color: #1a1a1a; border-color: rgba(0, 0, 0, 0.12); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08); } [data-theme='light'] .admin-section { background: #ffffff; border-color: rgba(0, 0, 0, 0.08); box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08); } [data-theme='light'] .admin-section h3, [data-theme='light'] .admin-panel p { color: #1a1a1a; } [data-theme='light'] .upload-form input, [data-theme='light'] .upload-form select, [data-theme='light'] .upload-form textarea { background: #ffffff; color: #1a1a1a; border-color: rgba(0, 0, 0, 0.12); } [data-theme='light'] .admin-panel button, [data-theme='light'] .admin-panel .project-visibility-save, [data-theme='light'] .admin-panel .project-delete, [data-theme='light'] .admin-panel .project-star, [data-theme='light'] .admin-panel .upload-btn--ghost { color: #1a1a1a; border-color: rgba(0, 0, 0, 0.2); } [data-theme='light'] .admin-panel .upload-btn { background: #FF8C00; color: #ffffff; } [data-theme='light'] .admin-panel .project-delete.is-deleting { border-color: #FF8C00; color: #FF8C00; background: #000000; box-shadow: 0 0 12px rgba(255, 140, 0, 0.3); } /* Dark Mode Admin Noise Finish */ html:not([data-theme='light']) .admin-panel { background-color: #111111; background-image: var(--industrial-noise-layer); background-size: var(--industrial-noise-size); background-repeat: var(--industrial-noise-repeat); border-left: 1px solid rgba(255, 140, 0, 0.45); } .admin-panel.admin-login-modal { background-color: #000000; background-image: var(--industrial-noise-layer); background-size: var(--industrial-noise-size); background-repeat: var(--industrial-noise-repeat); border: 1px solid #FF8C00; opacity: 0; visibility: hidden; transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.32s ease, visibility 0.32s ease; display: none; } [data-theme='light'] .admin-panel.admin-login-modal { background: linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(245, 245, 245, 0.98)); background-image: none; color: #1a1a1a; border: 1px solid rgba(0, 0, 0, 0.12); border-left: 1px solid rgba(0, 0, 0, 0.12); box-shadow: -12px 0 30px rgba(0, 0, 0, 0.16); } [data-theme='light'] .admin-panel.admin-login-modal::before { background: radial-gradient(circle at 18% 18%, rgba(255, 140, 0, 0.14), transparent 56%), radial-gradient(circle at 78% 30%, rgba(0, 0, 0, 0.05), transparent 62%); opacity: 1; } .admin-panel.admin-login-modal.active { opacity: 1; visibility: visible; } .admin-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.28); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity 0.28s ease; z-index: 10000; } [data-theme='light'] .admin-backdrop { background: rgba(255, 255, 255, 0.2); } .admin-backdrop.active { opacity: 1; pointer-events: auto; } html:not([data-theme='light']) .admin-panel::before { background: radial-gradient(circle at 12% 12%, rgba(255, 140, 0, 0.16), transparent 58%), var(--industrial-noise-layer); background-size: 100% 100%, var(--industrial-noise-size); background-repeat: no-repeat, var(--industrial-noise-repeat); opacity: 0.85; } html:not([data-theme='light']) .admin-header, html:not([data-theme='light']) .admin-tabs, html:not([data-theme='light']) .admin-section, html:not([data-theme='light']) .admin-tab:not(.active), html:not([data-theme='light']) .metrics-card, html:not([data-theme='light']) .lead-card, html:not([data-theme='light']) .admin-project-group, html:not([data-theme='light']) .project-thumb, html:not([data-theme='light']) .gallery-queue, html:not([data-theme='light']) .gallery-queue-item, html:not([data-theme='light']) .upload-form input, html:not([data-theme='light']) .upload-form select, html:not([data-theme='light']) .upload-form textarea { background-color: rgba(17, 17, 17, 0.9); background-image: var(--industrial-noise-layer); background-size: var(--industrial-noise-size); background-repeat: var(--industrial-noise-repeat); } html:not([data-theme='light']) .admin-tab:not(.active) { border-color: rgba(255, 255, 255, 0.1); } html:not([data-theme='light']) .modern-review-section::before, html:not([data-theme='light']) .showcase::before, html:not([data-theme='light']) .featured-work::after { content: none; } html:not([data-theme='light']) .modern-review-section .featured-reviews-feed { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 140, 0, 0.3); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); background-image: none; } html:not([data-theme='light']) .modern-review-section .featured-reviews-window { background: rgba(36, 36, 36, 0.84); background-image: none; } html:not([data-theme='light']) .modern-review-section .featured-reviews-window::before, html:not([data-theme='light']) .modern-review-section .featured-reviews-window::after { content: none; } /* Review Terminal */ .review-terminal { background: #000000; padding: 70px 0; } .review-terminal-inner { width: min(1200px, 92%); margin: 0 auto; text-align: center; } .review-terminal-header h2 { color: #ffffff; font-size: clamp(1.8rem, 2.6vw, 2.6rem); font-weight: 800; margin: 0 0 12px; } .review-terminal-stars { display: inline-flex; gap: 8px; margin-bottom: 10px; } .review-terminal-stars svg { width: 22px; height: 22px; fill: #FF8C00; filter: drop-shadow(0 0 5px #FF8C00); } .review-terminal-subtitle { color: rgba(255, 255, 255, 0.7); font-size: 0.95rem; display: inline-flex; align-items: center; gap: 8px; letter-spacing: 0.08em; text-transform: uppercase; } .review-terminal-subtitle i { color: #FF8C00; } .review-terminal-box { margin: 30px auto 20px; background: #0a0a0a; border: 1px solid #FF8C00; border-radius: 18px; padding: 20px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6); } .review-terminal-window { min-height: 140px; } .review-terminal-slide { color: #ffffff; transition: opacity 0.25s ease, transform 0.25s ease; } .review-terminal-slide.is-transitioning { opacity: 0; transform: translateY(6px); } .review-terminal-name { font-weight: 700; font-size: 1.1rem; color: #ffffff; margin-bottom: 6px; } .review-terminal-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(255, 140, 0, 0.4); color: #FF8C00; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 10px; } .review-terminal-stars-inline { color: #FF8C00; margin-bottom: 10px; } .review-terminal-stars-inline svg { width: 18px; height: 18px; fill: #FF8C00; filter: drop-shadow(0 0 5px #FF8C00); } .review-terminal-text { font-family: 'Courier New', 'Roboto Mono', monospace; color: rgba(255, 255, 255, 0.8); line-height: 1.6; font-size: 0.98rem; } .review-terminal-nav { width: 38px; height: 38px; border-radius: 50%; border: 1px solid #FF8C00; background: transparent; color: #FF8C00; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; } .review-terminal-nav:hover { transform: translateY(-1px); box-shadow: 0 0 12px rgba(255, 140, 0, 0.4); } .review-terminal-cta { display: inline-flex; align-items: center; justify-content: center; padding: 12px 22px; border-radius: 999px; border: 1px solid #FF8C00; color: #ffffff; text-decoration: none; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; transition: background 0.2s ease, color 0.2s ease; } .review-terminal-cta:hover { background: #FF8C00; color: #000000; } @media (max-width: 768px) { .review-terminal-box { grid-template-columns: 1fr; } .review-terminal-nav { justify-self: center; } } /* Featured Reviews */ .featured-reviews { background: #000000; padding: 60px 0; } .featured-reviews-inner { width: min(1200px, 92%); margin: 0 auto; } .featured-reviews h2 { color: #ffffff; font-size: clamp(1.8rem, 2.4vw, 2.4rem); margin: 0 0 24px; text-transform: none; letter-spacing: 0.5px; font-weight: 700; } .featured-reviews-carousel { overflow: hidden; position: relative; } .featured-reviews-track { display: flex; gap: 20px; width: max-content; animation: featuredReviewScroll 28s linear infinite; } .featured-reviews-carousel:hover .featured-reviews-track { animation-play-state: paused; } .featured-review-card { min-width: 260px; max-width: 320px; background: #0f0f0f; border: 1px solid rgba(255, 140, 0, 0.25); border-radius: 16px; padding: 18px; color: #ffffff; box-shadow: 0 14px 28px rgba(255, 140, 0, 0.12); } .featured-review-stars { color: #FF8C00; margin-bottom: 10px; } .featured-review-card p { margin: 0 0 12px; color: rgba(255, 255, 255, 0.85); line-height: 1.5; } .featured-review-name { font-weight: 700; color: #FF8C00; letter-spacing: 0.4px; } @keyframes featuredReviewScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* Live System Feed */ .live-system-feed { background: #000000; padding: 70px 0; color: #ffffff; position: relative; overflow: hidden; } .live-system-feed::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px); background-size: 40px 40px; opacity: 0.15; pointer-events: none; } .live-feed-inner { position: relative; width: min(1200px, 92%); margin: 0 auto; font-family: 'Courier New', 'Roboto Mono', monospace; } .live-feed-inner h2 { color: #ffffff; margin: 0 0 24px; font-size: clamp(1.6rem, 2.2vw, 2.2rem); letter-spacing: 1px; } .live-feed-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; } .live-feed-card { border: 1px solid #FF8C00; border-radius: 14px; padding: 16px; background: rgba(0, 0, 0, 0.7); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.45); } .live-feed-label { color: rgba(255, 255, 255, 0.7); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.75rem; margin-bottom: 10px; } .live-feed-value { font-size: 1.05rem; font-weight: 700; color: #ffffff; display: inline-flex; align-items: center; gap: 8px; animation: liveFlicker 4s infinite; } .status-dot-live { width: 10px; height: 10px; border-radius: 50%; background: #2ecc71; box-shadow: 0 0 10px rgba(255, 140, 0, 0.6); animation: statusPulse 1.6s ease-in-out infinite; } @keyframes statusPulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 8px rgba(255, 140, 0, 0.5); } 50% { transform: scale(1.2); box-shadow: 0 0 16px rgba(255, 140, 0, 0.8); } } @keyframes liveFlicker { 0%, 100% { opacity: 1; } 8% { opacity: 0.85; } 10% { opacity: 1; } 20% { opacity: 0.9; } 22% { opacity: 1; } 55% { opacity: 0.95; } 57% { opacity: 1; } 72% { opacity: 0.9; } 74% { opacity: 1; } } @media (max-width: 768px) { .featured-review-card { min-width: 220px; } } /* Modern Review Terminal Visibility Fixes */ .modern-review-section .review-terminal { margin-top: 18px; padding: 18px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--orange) 28%, transparent); background: linear-gradient(150deg, color-mix(in srgb, var(--bg-secondary) 90%, transparent), color-mix(in srgb, var(--bg-primary) 92%, transparent)); box-shadow: 0 16px 40px color-mix(in srgb, var(--bg-primary) 55%, transparent); } .modern-review-section .review-terminal-subtitle { color: var(--text-dim); } .modern-review-section .review-terminal-labels { color: var(--text-main); } [data-theme='light'] .modern-review-section .hailifu-review-panel { background: linear-gradient(140deg, rgba(255, 255, 255, 0.96), rgba(246, 246, 248, 0.95)); border-color: rgba(255, 140, 0, 0.28); box-shadow: 0 18px 34px rgba(0, 0, 0, 0.12); } [data-theme='light'] .modern-review-section .review-terminal { background: linear-gradient(150deg, rgba(255, 255, 255, 0.96), rgba(248, 248, 250, 0.95)); border-color: rgba(255, 140, 0, 0.24); box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12); } [data-theme='light'] .modern-review-section .review-terminal-btn { background: rgba(29, 29, 31, 0.04); border-color: rgba(255, 140, 0, 0.24); color: var(--text-main); } [data-theme='light'] .modern-review-section .hailifu-review-card { background: linear-gradient(150deg, rgba(255, 255, 255, 0.97), rgba(247, 247, 248, 0.95)); border-color: rgba(255, 140, 0, 0.24); color: var(--text-main); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1); } [data-theme='light'] .modern-review-section .hailifu-review-meta, [data-theme='light'] .modern-review-section .review-terminal-subtitle, [data-theme='light'] .modern-review-section .owner-reply { color: var(--text-dim); } [data-theme='light'] .modern-review-section .stats-card { background: linear-gradient(145deg, rgba(255, 255, 255, 0.97), rgba(247, 247, 249, 0.95)); border-color: rgba(255, 140, 0, 0.28); box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12); } [data-theme='light'] .modern-review-section .stats-icon { background: rgba(255, 140, 0, 0.14); color: #c86a00; box-shadow: inset 0 0 0 1px rgba(255, 140, 0, 0.28); } [data-theme='light'] .modern-review-section .stats-label { color: rgba(27, 27, 27, 0.72); } [data-theme='light'] .modern-review-section .stats-value { color: #c86a00; text-shadow: 0 0 10px rgba(255, 140, 0, 0.24); } [data-theme='light'] .modern-review-section .stats-meta { color: rgba(27, 27, 27, 0.74); } [data-theme='light'] .modern-review-section .stats-stars { color: #d58500; text-shadow: 0 0 12px rgba(255, 140, 0, 0.3); } /* Modern Featured Reviews + Live Feed Light Mode Fixes */ .modern-review-section .featured-reviews-feed .featured-reviews-track { animation: featuredFeedScroll 26s linear infinite; } .modern-review-section .featured-reviews-feed .featured-reviews-window:hover .featured-reviews-track, .modern-review-section .featured-reviews-feed .featured-reviews-window:focus-within .featured-reviews-track { animation-play-state: paused !important; } .modern-review-section .featured-reviews-feed .featured-review-card { min-width: 260px; max-width: 320px; min-height: 220px; max-height: 220px; padding: 16px; display: flex; flex-direction: column; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--orange) 25%, transparent); color: var(--text-main); overflow: hidden; } .modern-review-section .featured-reviews-feed .featured-review-card p { margin: 0; color: var(--text-main); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .modern-review-section .featured-reviews-feed .featured-review-response { margin-top: 10px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--orange) 24%, transparent); } .modern-review-section .featured-reviews-feed .featured-review-response-label { display: inline-block; margin-bottom: 4px; font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: #FF8C00; } .modern-review-section .featured-reviews-feed .featured-review-response p { margin: 0; color: var(--text-dim); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .modern-review-section .owner-reply, .modern-review-section .featured-review-response { display: none !important; } .modern-review-section .featured-reviews-feed .featured-review-meta { color: var(--text-dim); } .modern-review-section .featured-reviews-feed .featured-review-meta .review-source, .modern-review-section .featured-reviews-feed .featured-review-meta .reviewer-name, .modern-review-section .featured-reviews-feed .featured-review-meta .review-time { white-space: normal; overflow-wrap: anywhere; word-break: break-word; } .modern-review-section .featured-reviews-feed .featured-review-stars { color: var(--orange); text-shadow: 0 0 10px color-mix(in srgb, var(--orange) 50%, transparent); } .modern-review-section .rating-stars-large, .modern-review-section .hailifu-review-stars, .modern-review-section .hailifu-review-score, .modern-review-section .featured-review-stars, .modern-review-section .stats-stars { color: #FF8C00 !important; } [data-theme='light'] .modern-review-section .featured-reviews-feed { background: linear-gradient(160deg, rgba(255, 255, 255, 0.97), rgba(246, 246, 248, 0.96)); border-color: rgba(255, 140, 0, 0.24); box-shadow: 0 16px 34px rgba(0, 0, 0, 0.1); } [data-theme='light'] .modern-review-section .featured-reviews-feed .featured-reviews-header { color: var(--text-main); } [data-theme='light'] .modern-review-section .featured-reviews-feed .featured-reviews-subtitle { color: rgba(27, 27, 27, 0.62); } [data-theme='light'] .modern-review-section .featured-reviews-feed .featured-reviews-window { background: rgba(255, 255, 255, 0.95); border-color: rgba(255, 140, 0, 0.2); } [data-theme='light'] .modern-review-section .featured-reviews-feed .featured-reviews-window::before { background: linear-gradient(90deg, rgba(255, 255, 255, 0.92), transparent); } [data-theme='light'] .modern-review-section .featured-reviews-feed .featured-reviews-window::after { background: linear-gradient(270deg, rgba(255, 255, 255, 0.92), transparent); } [data-theme='light'] .modern-review-section .featured-reviews-feed .featured-review-card { background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(247, 247, 249, 0.96)); border-color: rgba(255, 140, 0, 0.24); color: var(--text-main); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1); } [data-theme='light'] .modern-review-section .featured-reviews-feed .featured-review-card p { color: rgba(27, 27, 27, 0.86); } [data-theme='light'] .modern-review-section .featured-reviews-feed .featured-review-meta { color: rgba(27, 27, 27, 0.62); } /* Featurable Review Data Wrapper */ .featurable-data-proxy { position: relative; width: 100%; max-width: 100%; min-height: 4px; max-height: 4px; overflow: hidden; opacity: 0.01; pointer-events: none; transform: translateZ(0); } .hailifu-review-avatar { width: 34px; height: 34px; border-radius: 50%; border: 1px solid #FF8C00; object-fit: cover; background: #000000; flex: 0 0 auto; } .hailifu-review-avatar--placeholder { padding: 6px; object-fit: contain; } .featured-review-meta { justify-content: space-between; align-items: flex-start; } .featured-review-identity { display: inline-flex; align-items: center; gap: 10px; min-width: 0; } .featured-review-meta-copy { display: flex; flex-direction: column; gap: 3px; } .reviewer-name-row { display: inline-flex; align-items: center; gap: 6px; } .native-verified-badge { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 999px; border: 1px solid rgba(255, 140, 0, 0.72); background: rgba(255, 140, 0, 0.16); color: #FF8C00; font-size: 0.56rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .native-verified-badge--fallback { gap: 5px; background: rgba(255, 140, 0, 0.24); } .native-verified-icon { display: inline-flex; align-items: center; justify-content: center; font-size: 0.62rem; font-weight: 900; line-height: 1; color: #FF8C00; text-shadow: 0 0 8px rgba(255, 140, 0, 0.38); } .review-verified--native { border-color: rgba(255, 140, 0, 0.72); background: rgba(255, 140, 0, 0.2); color: #FF8C00; } .review-verified--native-fallback { display: inline-flex; align-items: center; gap: 6px; } .hailifu-review-meta .hailifu-reviewer, .featured-review-meta .reviewer-name, .review-name { color: #FF8C00 !important; } .hailifu-reviewer.is-verified-name, .featured-review-meta .reviewer-name.is-verified-name, .review-name.is-verified-name { color: #FF8C00 !important; text-shadow: 0 0 8px rgba(255, 140, 0, 0.35); } .featured-review-meta .review-time { font-family: 'JetBrains Mono', monospace; color: var(--text-dim); white-space: nowrap; } .featured-review-avatar { width: 38px; height: 38px; border-radius: 50%; border: 1px solid #FF8C00; object-fit: cover; background: #000000; flex: 0 0 auto; } .featured-review-avatar--fallback { display: inline-flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; font-weight: 700; color: #FF8C00; background: rgba(255, 140, 0, 0.12); } .featured-review-avatar--placeholder { padding: 7px; object-fit: contain; } html:not([data-theme='light']) .modern-review-section .review-terminal-card, html:not([data-theme='light']) .modern-review-section .featured-reviews-feed .featured-review-card { background-color: #000000; background-image: var(--industrial-noise-layer); background-size: var(--industrial-noise-size); background-repeat: var(--industrial-noise-repeat); border-color: rgba(255, 140, 0, 0.55); } html:not([data-theme='light']) .modern-review-section .hailifu-review-avatar, html:not([data-theme='light']) .modern-review-section .featured-review-avatar { border-color: #FF8C00; box-shadow: 0 0 0 1px rgba(255, 140, 0, 0.18); } html:not([data-theme='light']) .modern-review-section .featured-reviews-feed .featured-review-card p, html:not([data-theme='light']) .modern-review-section .review-terminal-card p, html:not([data-theme='light']) .modern-review-section .featured-reviews-feed .featured-review-meta, html:not([data-theme='light']) .modern-review-section .hailifu-review-meta, html:not([data-theme='light']) .modern-review-section .review-terminal-subtitle, html:not([data-theme='light']) .modern-review-section .featured-reviews-feed .featured-review-meta .review-time { color: rgba(255, 255, 255, 0.9); } [data-theme='light'] .featured-review-meta .review-time { color: rgba(27, 27, 27, 0.62); } @media (max-width: 768px) { .featured-review-meta { align-items: center; gap: 8px; } } /* Tech Gallery Module */ .tech-gallery-section { width: min(1200px, 92%); margin: 64px auto; padding: 72px 5%; border: 1px solid rgba(255, 140, 0, 0.32); border-radius: 0; background: linear-gradient(180deg, rgba(255, 140, 0, 0.08), rgba(255, 140, 0, 0.02)), linear-gradient(120deg, rgba(0, 0, 0, 0.96), rgba(7, 7, 7, 0.92)); box-shadow: 0 20px 48px rgba(0, 0, 0, 0.5); position: relative; overflow: hidden; } .tech-gallery-section::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 140, 0, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 140, 0, 0.08) 1px, transparent 1px); background-size: 36px 36px; opacity: 0.22; pointer-events: none; } .tech-gallery-section > * { position: relative; z-index: 1; } .tech-gallery-grid { margin-top: 30px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .tech-gallery-card { position: relative; padding: 0; margin: 0; border: 1px solid rgba(255, 140, 0, 0.28); border-radius: 0; background: #000; cursor: pointer; overflow: hidden; text-align: left; transition: border-color 0.26s ease, box-shadow 0.26s ease; } .tech-gallery-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform 0.36s ease; transform: scale(1); } .tech-gallery-label { position: absolute; left: 0; top: 0; padding: 8px 10px; font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #fff; background: rgba(0, 0, 0, 0.68); border-right: 1px solid rgba(255, 140, 0, 0.46); border-bottom: 1px solid rgba(255, 140, 0, 0.46); } .tech-gallery-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.26s ease; background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } .tech-gallery-overlay-chip { background: #FF8C00; color: #000000; border: 1px solid #FF8C00; border-radius: 0; padding: 10px 16px; font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35) inset; } .tech-gallery-card:hover { border-color: #FF8C00; box-shadow: 0 0 0 1px rgba(255, 140, 0, 0.75), 0 0 18px rgba(255, 140, 0, 0.24); } .tech-gallery-card:hover img { transform: scale(1.1); } .tech-gallery-card:hover .tech-gallery-overlay { opacity: 1; } .tech-gallery-lightbox { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(0, 0, 0, 0.86); z-index: 10100; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.34s ease, visibility 0.34s ease; } .tech-gallery-lightbox.active { opacity: 1; visibility: visible; pointer-events: auto; } .tech-gallery-lightbox-panel { width: auto; height: auto; max-width: 95vw; max-height: 94vh; max-height: 94dvh; border: 0; border-radius: 0; background: transparent; position: relative; box-shadow: none; overflow: visible; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 56px; box-sizing: border-box; opacity: 0; transform: translateY(10px) scale(0.985); transition: opacity 0.34s ease, transform 0.34s ease; } .tech-gallery-lightbox.active .tech-gallery-lightbox-panel { opacity: 1; transform: translateY(0) scale(1); } .tech-gallery-lightbox-close { position: absolute; top: 0; right: 0; width: 46px; height: 46px; border: 2px solid #FF8C00; border-radius: 0; background: #FF8C00; color: #000; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; transition: filter 0.2s ease; } .tech-gallery-lightbox-close:hover { filter: brightness(1.06); } .tech-gallery-lightbox-panel img { width: auto; height: auto; max-width: 95vw; max-height: calc(94vh - 128px); max-height: calc(94dvh - 128px); object-fit: contain; object-position: center center; display: block; background: #000; border: 4px solid #FF8C00; border-radius: 0; box-shadow: 0 0 0 1px rgba(255, 140, 0, 0.45), 0 22px 50px rgba(0, 0, 0, 0.62); } .tech-gallery-lightbox-caption { position: static; margin: 12px auto 0; padding: 10px 14px; color: #FF8C00; border: 1px solid rgba(255, 140, 0, 0.46); background: rgba(0, 0, 0, 0.76); font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; text-align: center; white-space: normal; max-width: min(95vw, 980px); overflow-wrap: anywhere; pointer-events: none; } @media (max-width: 768px) { .tech-gallery-grid { grid-template-columns: 1fr; } .tech-gallery-section { padding: 56px 5%; } } @media (min-width: 1024px) { .section, .showcase, .showcase-content, .featured-bento, .review-terminal-inner, .featured-reviews-inner, .live-feed-inner, .modern-review-container { width: min(1360px, 94%) !important; max-width: 100%; } }