/*==================================================================== ACMOBOOK OPPORTUNITIES MARKETPLACE ------------------------------------------------------------------ Version : 1.0 Author : ACMOBOOK Description : Complete UI System for Opportunities Marketplace Dependencies : Bootstrap 5 ====================================================================*/ /*==================================================================== 01. IMPORTS ====================================================================*/ /* Inter font: load via page if needed; inherit Poppins from global theme */ /*==================================================================== 02. ROOT VARIABLES ====================================================================*/ :root{ /*============================================================== BRAND COLORS ==============================================================*/ --op-primary:#6C63FF; --op-primary-dark:#564DFF; --op-primary-light:#F3F2FF; --op-secondary:#00C2FF; --op-secondary-light:#EAFBFF; --op-accent:#FF9D00; --op-accent-light:#FFF6E8; --op-success:#22C55E; --op-success-light:#ECFDF3; --op-danger:#EF4444; --op-danger-light:#FEF2F2; --op-warning:#F59E0B; --op-warning-light:#FFF8EB; --op-info:#0EA5E9; --op-info-light:#EFF8FF; /*============================================================== NEUTRAL COLORS ==============================================================*/ --op-white:#FFFFFF; --op-bg:#FAFBFF; --op-bg-light:#FFFFFF; --op-bg-soft:#F7F8FC; --op-bg-card:#FFFFFF; --op-border:#E9ECF4; --op-border-light:#F2F4F8; --op-text:#1D2939; --op-text-light:#667085; --op-text-muted:#98A2B3; --op-heading:#101828; /*============================================================== GRADIENTS ==============================================================*/ --op-gradient-primary: linear-gradient( 135deg, #6C63FF 0%, #7C4DFF 100%); --op-gradient-secondary: linear-gradient( 135deg, #00C2FF 0%, #4F8CFF 100%); --op-gradient-premium: linear-gradient( 135deg, #8B5CF6, #6366F1, #00C2FF); --op-gradient-light: linear-gradient( 180deg, #FFFFFF, #F8FAFF); --op-gradient-glass: linear-gradient( 135deg, rgba(255,255,255,.65), rgba(255,255,255,.35)); /*============================================================== TYPOGRAPHY ==============================================================*/ --op-font:'Inter',sans-serif; --op-display:64px; --op-h1:52px; --op-h2:40px; --op-h3:32px; --op-h4:26px; --op-h5:22px; --op-h6:18px; --op-body:16px; --op-small:14px; --op-xs:13px; --op-tiny:12px; /*============================================================== FONT WEIGHTS ==============================================================*/ --op-fw-300:300; --op-fw-400:400; --op-fw-500:500; --op-fw-600:600; --op-fw-700:700; --op-fw-800:800; /*============================================================== LINE HEIGHT ==============================================================*/ --op-line-tight:1.1; --op-line-normal:1.5; --op-line-relaxed:1.8; /*============================================================== SPACING ==============================================================*/ --op-space-2:2px; --op-space-4:4px; --op-space-6:6px; --op-space-8:8px; --op-space-10:10px; --op-space-12:12px; --op-space-16:16px; --op-space-20:20px; --op-space-24:24px; --op-space-30:30px; --op-space-40:40px; --op-space-50:50px; --op-space-60:60px; --op-space-80:80px; --op-space-100:100px; /*============================================================== BORDER RADIUS ==============================================================*/ --op-radius-sm:10px; --op-radius-md:16px; --op-radius-lg:22px; --op-radius-xl:28px; --op-radius-2xl:36px; --op-radius-round:999px; /*============================================================== SHADOWS ==============================================================*/ --op-shadow-sm: 0 5px 15px rgba(16,24,40,.05); --op-shadow-md: 0 12px 35px rgba(16,24,40,.08); --op-shadow-lg: 0 25px 70px rgba(16,24,40,.10); --op-shadow-xl: 0 40px 100px rgba(16,24,40,.12); /*============================================================== TRANSITIONS ==============================================================*/ --op-transition-fast:.20s ease; --op-transition:.35s ease; --op-transition-slow:.55s ease; /*============================================================== BLUR ==============================================================*/ --op-blur-sm:8px; --op-blur-md:16px; --op-blur-lg:30px; /*============================================================== LAYOUT ==============================================================*/ --op-container:1380px; --op-navbar:82px; --op-section-space:110px; /*============================================================== Z INDEX ==============================================================*/ --op-z-navbar:999; --op-z-dropdown:1000; --op-z-modal:9999; } /*==================================================================== 03. RESET ====================================================================*/ *, *::before, *::after{ margin:0; padding:0; box-sizing:border-box; } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; } body{ font-family:var(--op-font); font-size:var(--op-body); color:var(--op-text); background:var(--op-bg); line-height:var(--op-line-normal); overflow-x:hidden; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; } /*==================================================================== 04. SCROLLBAR ====================================================================*/ ::-webkit-scrollbar{ width:10px; } ::-webkit-scrollbar-track{ background:#F3F4F7; } ::-webkit-scrollbar-thumb{ background:#C6CAD5; border-radius:999px; } ::-webkit-scrollbar-thumb:hover{ background:var(--op-primary); } /*==================================================================== 05. SELECTION ====================================================================*/ ::selection{ background:var(--op-primary); color:#fff; } /*==================================================================== 06. LINKS ====================================================================*/ a{ color:inherit; text-decoration:none; transition:var(--op-transition); } a:hover{ text-decoration:none; } /*==================================================================== 07. IMAGES ====================================================================*/ img{ max-width:100%; display:block; } /*==================================================================== 08. LISTS ====================================================================*/ ul, ol{ list-style:none; } /*==================================================================== 09. BUTTON RESET ====================================================================*/ button{ border:none; outline:none; background:none; cursor:pointer; font-family:inherit; } /*==================================================================== 10. INPUT RESET ====================================================================*/ input, textarea, select{ font-family:inherit; outline:none; border:none; } /*==================================================================== END OF PART 1 ====================================================================*/ /*==================================================================== 11. CONTAINER SYSTEM ====================================================================*/ .acmo-op-container{ width:100%; max-width:var(--op-container); margin:auto; padding-inline:20px; } .acmo-op-container-sm{ max-width:1100px; margin:auto; padding-inline:20px; } .acmo-op-container-fluid{ width:100%; padding-inline:30px; } /*==================================================================== 12. SECTION SYSTEM ====================================================================*/ .acmo-op-section{ position:relative; padding:var(--op-section-space) 0; } .acmo-op-section-sm{ padding:70px 0; } .acmo-op-section-lg{ padding:150px 0; } .acmo-op-section-title{ font-size:var(--op-h2); font-weight:800; color:var(--op-heading); margin-bottom:16px; } .acmo-op-section-subtitle{ font-size:18px; color:var(--op-text-light); max-width:720px; line-height:1.7; } /*==================================================================== 13. GRID SYSTEM ====================================================================*/ .acmo-op-grid{ display:grid; gap:30px; } .acmo-op-grid-2{ grid-template-columns:repeat(2,1fr); } .acmo-op-grid-3{ grid-template-columns:repeat(3,1fr); } .acmo-op-grid-4{ grid-template-columns:repeat(4,1fr); } .acmo-op-grid-5{ grid-template-columns:repeat(5,1fr); } /*==================================================================== 14. FLEX SYSTEM ====================================================================*/ .acmo-op-flex{ display:flex; } .acmo-op-center{ display:flex; align-items:center; justify-content:center; } .acmo-op-between{ display:flex; align-items:center; justify-content:space-between; } .acmo-op-align{ display:flex; align-items:center; } .acmo-op-column{ display:flex; flex-direction:column; } /*==================================================================== 15. BUTTON SYSTEM ====================================================================*/ .acmo-op-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:15px 28px; border-radius:var(--op-radius-round); font-size:15px; font-weight:700; transition:var(--op-transition); cursor:pointer; white-space:nowrap; } .acmo-op-btn:hover{ transform:translateY(-3px); } .acmo-op-btn-primary{ background:var(--op-gradient-primary); color:#fff; box-shadow:var(--op-shadow-md); } .acmo-op-btn-primary:hover{ box-shadow:var(--op-shadow-lg); } .acmo-op-btn-outline{ border:1px solid var(--op-border); background:#fff; color:var(--op-heading); } .acmo-op-btn-outline:hover{ border-color:var(--op-primary); color:var(--op-primary); } .acmo-op-btn-light{ background:#fff; color:var(--op-primary); } .acmo-op-btn-icon{ width:48px; height:48px; border-radius:50%; padding:0; } /*==================================================================== 16. GLASS SYSTEM ====================================================================*/ .acmo-op-glass{ background:rgba(255,255,255,.60); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border:1px solid rgba(255,255,255,.50); } /*==================================================================== 17. UNIVERSAL CARD SYSTEM ====================================================================*/ .acmo-op-card{ position:relative; background:#fff; border-radius:28px; border:1px solid var(--op-border); overflow:hidden; transition:var(--op-transition); } .acmo-op-card:hover{ transform:translateY(-8px); box-shadow:var(--op-shadow-lg); } .acmo-op-card-body{ padding:28px; } .acmo-op-card-header{ margin-bottom:20px; } .acmo-op-card-footer{ margin-top:25px; display:flex; align-items:center; justify-content:space-between; } .acmo-op-card-premium{ background:var(--op-gradient-primary); color:#fff; border:none; } .acmo-op-card-glass{ background:rgba(255,255,255,.75); backdrop-filter:blur(20px); } /*==================================================================== 18. BADGES ====================================================================*/ .acmo-op-badge{ display:inline-flex; align-items:center; justify-content:center; padding:7px 14px; border-radius:999px; font-size:12px; font-weight:700; } .acmo-op-badge-primary{ background:var(--op-primary-light); color:var(--op-primary); } .acmo-op-badge-success{ background:var(--op-success-light); color:var(--op-success); } .acmo-op-badge-warning{ background:var(--op-warning-light); color:#B45309; } .acmo-op-badge-danger{ background:var(--op-danger-light); color:var(--op-danger); } .acmo-op-badge-premium{ background:linear-gradient(135deg,#8B5CF6,#EC4899); color:#fff; } /*==================================================================== 19. PILLS ====================================================================*/ .acmo-op-pill{ display:inline-flex; align-items:center; gap:8px; padding:9px 18px; border-radius:999px; background:#fff; border:1px solid var(--op-border); font-size:13px; font-weight:600; } /*==================================================================== 20. TAGS ====================================================================*/ .acmo-op-tag{ display:inline-flex; align-items:center; padding:6px 12px; border-radius:999px; background:#F8F9FD; color:var(--op-text-light); font-size:12px; font-weight:600; } /*==================================================================== 21. ICON BOX ====================================================================*/ .acmo-op-icon{ width:58px; height:58px; display:flex; align-items:center; justify-content:center; border-radius:18px; background:var(--op-primary-light); color:var(--op-primary); font-size:22px; } /*==================================================================== 22. AVATAR SYSTEM ====================================================================*/ .acmo-op-avatar{ width:56px; height:56px; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid var(--op-border); } .acmo-op-avatar img{ width:100%; height:100%; object-fit:cover; } /*==================================================================== 23. SHADOW UTILITIES ====================================================================*/ .acmo-op-shadow-sm{ box-shadow:var(--op-shadow-sm); } .acmo-op-shadow-md{ box-shadow:var(--op-shadow-md); } .acmo-op-shadow-lg{ box-shadow:var(--op-shadow-lg); } /*==================================================================== 24. HOVER UTILITIES ====================================================================*/ .acmo-op-hover{ transition:var(--op-transition); } .acmo-op-hover:hover{ transform:translateY(-8px); } .acmo-op-scale:hover{ transform:scale(1.03); } .acmo-op-rotate:hover{ transform:rotate(-2deg); } /*==================================================================== END OF PART 2 ====================================================================*/ /*==================================================================== 25. HERO SECTION ====================================================================*/ .acmo-op-hero{ position:relative; overflow:hidden; min-height:100vh; display:flex; align-items:center; background: radial-gradient(circle at top left,#EEF2FF 0%,transparent 35%), radial-gradient(circle at bottom right,#EAFBFF 0%,transparent 40%), linear-gradient(180deg,#FFFFFF 0%,#FAFBFF 100%); } .acmo-op-hero::before{ content:""; position:absolute; inset:0; background-image: linear-gradient(rgba(108,99,255,.03) 1px,transparent 1px), linear-gradient(90deg,rgba(108,99,255,.03) 1px,transparent 1px); background-size:70px 70px; pointer-events:none; } .acmo-op-hero-wrapper{ position:relative; z-index:2; } .acmo-op-hero-content{ display:grid; grid-template-columns:1.05fr .95fr; gap:80px; align-items:center; } /*==================================================================== HERO LEFT ====================================================================*/ .acmo-op-hero-label{ display:inline-flex; align-items:center; gap:10px; padding:10px 18px; border-radius:999px; background:rgba(108,99,255,.08); color:var(--op-primary); font-weight:700; font-size:13px; margin-bottom:24px; } .acmo-op-hero-title{ font-size:72px; font-weight:800; color:var(--op-heading); line-height:1.05; letter-spacing:-2px; margin-bottom:26px; } .acmo-op-hero-title span{ color:var(--op-primary); } .acmo-op-hero-subtitle{ font-size:20px; color:var(--op-text-light); line-height:1.8; max-width:650px; margin-bottom:40px; } /*==================================================================== HERO BUTTONS ====================================================================*/ .acmo-op-hero-buttons{ display:flex; gap:18px; margin-bottom:55px; flex-wrap:wrap; } /*==================================================================== HERO STATS ====================================================================*/ .acmo-op-hero-stats{ display:flex; gap:50px; flex-wrap:wrap; } .acmo-op-stat{ display:flex; flex-direction:column; } .acmo-op-stat-number{ font-size:42px; font-weight:800; color:var(--op-heading); line-height:1; } .acmo-op-stat-text{ margin-top:10px; color:var(--op-text-light); font-size:15px; } /*==================================================================== HERO RIGHT ====================================================================*/ .acmo-op-hero-right{ position:relative; min-height:760px; } /*==================================================================== FLOATING BLOBS ====================================================================*/ .acmo-op-blob{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.55; } .acmo-op-blob-one{ width:300px; height:300px; background:#6C63FF; top:20px; left:80px; } .acmo-op-blob-two{ width:260px; height:260px; background:#00C2FF; bottom:50px; right:40px; } .acmo-op-blob-three{ width:220px; height:220px; background:#FF9D00; top:300px; right:120px; } /*==================================================================== HERO DASHBOARD AREA ====================================================================*/ .acmo-op-hero-preview{ position:absolute; inset:60px; border-radius:34px; background:rgba(255,255,255,.72); backdrop-filter:blur(28px); border:1px solid rgba(255,255,255,.55); box-shadow:var(--op-shadow-xl); } /*==================================================================== FLOATING OPPORTUNITY CARDS ====================================================================*/ .acmo-op-floating-card{ position:absolute; width:280px; background:#fff; border-radius:24px; padding:22px; box-shadow:var(--op-shadow-lg); border:1px solid var(--op-border); } .acmo-op-floating-card h5{ font-size:18px; font-weight:700; margin-bottom:14px; } .acmo-op-floating-card p{ font-size:14px; color:var(--op-text-light); margin-bottom:12px; } .acmo-op-floating-budget{ color:var(--op-primary); font-weight:800; font-size:22px; } .acmo-op-floating-one{ top:20px; left:-20px; } .acmo-op-floating-two{ top:220px; right:-30px; } .acmo-op-floating-three{ bottom:30px; left:40px; } /*==================================================================== HERO TRUST BADGES ====================================================================*/ .acmo-op-trust{ display:flex; align-items:center; gap:14px; margin-top:50px; flex-wrap:wrap; } .acmo-op-trust-item{ display:flex; align-items:center; gap:10px; padding:12px 18px; border-radius:999px; background:#fff; box-shadow:var(--op-shadow-sm); border:1px solid var(--op-border); font-size:14px; font-weight:600; } /*==================================================================== HERO DECORATIONS ====================================================================*/ .acmo-op-circle{ position:absolute; border-radius:50%; border:1px dashed rgba(108,99,255,.18); } .acmo-op-circle-one{ width:520px; height:520px; right:-180px; top:-120px; } .acmo-op-circle-two{ width:320px; height:320px; left:-120px; bottom:-120px; } /*==================================================================== HERO RESPONSIVE ====================================================================*/ @media(max-width:1200px){ .acmo-op-hero-content{ grid-template-columns:1fr; gap:70px; } .acmo-op-hero-right{ min-height:620px; } .acmo-op-hero-title{ font-size:60px; } } @media(max-width:768px){ .acmo-op-hero{ padding-top:120px; min-height:auto; } .acmo-op-hero-title{ font-size:42px; letter-spacing:-1px; } .acmo-op-hero-subtitle{ font-size:17px; } .acmo-op-hero-buttons{ flex-direction:column; } .acmo-op-hero-stats{ justify-content:space-between; gap:25px; } .acmo-op-stat-number{ font-size:30px; } .acmo-op-hero-right{ display:none; } } /*==================================================================== 26. HERO SEARCH ====================================================================*/ .acmo-op-search{ position:relative; margin-top:55px; z-index:10; } .acmo-op-search-box{ display:flex; align-items:center; gap:18px; padding:18px; background:rgba(255,255,255,.82); backdrop-filter:blur(24px); border:1px solid rgba(255,255,255,.6); border-radius:30px; box-shadow:var(--op-shadow-xl); } .acmo-op-search-item{ flex:1; display:flex; align-items:center; gap:16px; padding:0 20px; border-right:1px solid var(--op-border); min-height:70px; } .acmo-op-search-item:last-child{ border-right:none; } .acmo-op-search-icon{ width:52px; height:52px; border-radius:18px; display:flex; align-items:center; justify-content:center; background:var(--op-primary-light); color:var(--op-primary); font-size:20px; flex-shrink:0; } .acmo-op-search-content{ display:flex; flex-direction:column; } .acmo-op-search-label{ font-size:12px; font-weight:700; color:var(--op-text-muted); text-transform:uppercase; letter-spacing:.6px; } .acmo-op-search-input{ width:100%; margin-top:6px; border:none; background:transparent; font-size:16px; font-weight:600; color:var(--op-heading); } .acmo-op-search-input::placeholder{ color:var(--op-text-light); } .acmo-op-search-select{ width:100%; margin-top:6px; background:transparent; border:none; font-size:16px; font-weight:600; color:var(--op-heading); cursor:pointer; } .acmo-op-search-btn{ width:72px; height:72px; border-radius:24px; display:flex; align-items:center; justify-content:center; background:var(--op-gradient-primary); color:#fff; font-size:24px; box-shadow:0 20px 40px rgba(108,99,255,.30); transition:var(--op-transition); flex-shrink:0; } .acmo-op-search-btn:hover{ transform:translateY(-4px) scale(1.04); } /*==================================================================== SEARCH QUICK TAGS ====================================================================*/ .acmo-op-search-tags{ display:flex; align-items:center; gap:12px; margin-top:24px; flex-wrap:wrap; } .acmo-op-search-tag{ display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:999px; background:#fff; border:1px solid var(--op-border); color:var(--op-text-light); font-size:14px; font-weight:600; transition:var(--op-transition); cursor:pointer; } .acmo-op-search-tag:hover{ background:var(--op-primary); color:#fff; border-color:var(--op-primary); } /*==================================================================== SEARCH SUGGESTIONS ====================================================================*/ .acmo-op-search-suggestions{ margin-top:20px; display:flex; align-items:center; flex-wrap:wrap; gap:14px; } .acmo-op-search-suggestions span{ font-size:14px; color:var(--op-text-muted); } .acmo-op-search-suggestions a{ font-size:14px; font-weight:600; color:var(--op-primary); } .acmo-op-search-suggestions a:hover{ text-decoration:underline; } /*==================================================================== MOBILE SEARCH ====================================================================*/ @media(max-width:992px){ .acmo-op-search-box{ flex-direction:column; padding:20px; } .acmo-op-search-item{ width:100%; border-right:none; border-bottom:1px solid var(--op-border); padding:18px 0; } .acmo-op-search-item:last-child{ border-bottom:none; } .acmo-op-search-btn{ width:100%; height:64px; border-radius:18px; margin-top:10px; } } @media(max-width:576px){ .acmo-op-search{ margin-top:35px; } .acmo-op-search-tags{ gap:10px; } .acmo-op-search-tag{ font-size:13px; padding:8px 14px; } } /*==================================================================== 27. BROWSE CATEGORIES ====================================================================*/ .acmo-op-categories{ position:relative; } .acmo-op-category-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:40px; } .acmo-op-category-slider{ display:flex; gap:22px; overflow-x:auto; scroll-behavior:smooth; padding-bottom:12px; scrollbar-width:none; } .acmo-op-category-slider::-webkit-scrollbar{ display:none; } /*==================================================================== CATEGORY CARD ====================================================================*/ .acmo-op-category-card{ position:relative; flex:0 0 220px; background:#fff; border:1px solid var(--op-border); border-radius:28px; padding:30px; transition:var(--op-transition); overflow:hidden; cursor:pointer; } .acmo-op-category-card:hover{ transform:translateY(-10px); box-shadow:var(--op-shadow-lg); border-color:rgba(108,99,255,.20); } .acmo-op-category-card::before{ content:""; position:absolute; width:120px; height:120px; border-radius:50%; background:rgba(108,99,255,.05); top:-40px; right:-40px; transition:var(--op-transition); } .acmo-op-category-card:hover::before{ transform:scale(1.4); } /*==================================================================== CATEGORY ICON ====================================================================*/ .acmo-op-category-icon{ width:74px; height:74px; border-radius:22px; display:flex; align-items:center; justify-content:center; background:var(--op-primary-light); color:var(--op-primary); font-size:30px; margin-bottom:24px; transition:var(--op-transition); } .acmo-op-category-card:hover .acmo-op-category-icon{ background:var(--op-gradient-primary); color:#fff; transform:rotate(-8deg); } /*==================================================================== CATEGORY TITLE ====================================================================*/ .acmo-op-category-title{ font-size:20px; font-weight:700; color:var(--op-heading); margin-bottom:8px; } /*==================================================================== CATEGORY COUNT ====================================================================*/ .acmo-op-category-count{ display:flex; align-items:center; gap:8px; font-size:14px; color:var(--op-text-light); margin-bottom:22px; } .acmo-op-category-count strong{ color:var(--op-success); } /*==================================================================== CATEGORY FOOTER ====================================================================*/ .acmo-op-category-footer{ display:flex; align-items:center; justify-content:space-between; } .acmo-op-category-link{ font-size:14px; font-weight:700; color:var(--op-primary); } .acmo-op-category-arrow{ width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--op-primary-light); color:var(--op-primary); transition:var(--op-transition); } .acmo-op-category-card:hover .acmo-op-category-arrow{ background:var(--op-primary); color:#fff; } /*==================================================================== CATEGORY COLORS ====================================================================*/ .acmo-op-category-actors{ --cat:#6C63FF; } .acmo-op-category-models{ --cat:#EC4899; } .acmo-op-category-singers{ --cat:#00C2FF; } .acmo-op-category-djs{ --cat:#F59E0B; } .acmo-op-category-dancers{ --cat:#8B5CF6; } .acmo-op-category-anchor{ --cat:#10B981; } .acmo-op-category-influencers{ --cat:#EF4444; } .acmo-op-category-photographers{ --cat:#3B82F6; } .acmo-op-category-videographers{ --cat:#14B8A6; } .acmo-op-category-speakers{ --cat:#F97316; } .acmo-op-category-card[class*="acmo-op-category-"] .acmo-op-category-icon{ background:color-mix(in srgb,var(--cat) 12%,white); color:var(--cat); } .acmo-op-category-card[class*="acmo-op-category-"]:hover .acmo-op-category-icon{ background:var(--cat); color:#fff; } /*==================================================================== CATEGORY NAVIGATION ====================================================================*/ .acmo-op-category-nav{ display:flex; gap:12px; } .acmo-op-category-btn{ width:48px; height:48px; border-radius:50%; background:#fff; border:1px solid var(--op-border); display:flex; align-items:center; justify-content:center; transition:var(--op-transition); } .acmo-op-category-btn:hover{ background:var(--op-primary); color:#fff; } /*==================================================================== RESPONSIVE ====================================================================*/ @media(max-width:992px){ .acmo-op-category-card{ flex:0 0 190px; padding:24px; } } @media(max-width:768px){ .acmo-op-category-card{ flex:0 0 170px; padding:22px; } .acmo-op-category-title{ font-size:18px; } .acmo-op-category-icon{ width:62px; height:62px; font-size:26px; } } @media(max-width:576px){ .acmo-op-category-card{ flex:0 0 155px; } } /*==================================================================== 28. DISCOVERY SECTION ====================================================================*/ .acmo-op-discovery{ position:relative; } .acmo-op-discovery + .acmo-op-discovery{ margin-top:90px; } .acmo-op-discovery-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:35px; } .acmo-op-discovery-left{ display:flex; align-items:center; gap:18px; } .acmo-op-discovery-icon{ width:58px; height:58px; border-radius:18px; display:flex; align-items:center; justify-content:center; background:var(--op-primary-light); color:var(--op-primary); font-size:24px; } .acmo-op-discovery-title{ font-size:32px; font-weight:800; color:var(--op-heading); margin-bottom:4px; } .acmo-op-discovery-subtitle{ font-size:15px; color:var(--op-text-light); } .acmo-op-discovery-more{ display:flex; align-items:center; gap:10px; color:var(--op-primary); font-weight:700; } /*==================================================================== CAROUSEL ====================================================================*/ .acmo-op-carousel{ display:flex; gap:24px; overflow-x:auto; scroll-behavior:smooth; scrollbar-width:none; padding-bottom:15px; } .acmo-op-carousel::-webkit-scrollbar{ display:none; } /*==================================================================== NAVIGATION ====================================================================*/ .acmo-op-carousel-nav{ display:flex; gap:12px; } .acmo-op-carousel-btn{ width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid var(--op-border); transition:var(--op-transition); box-shadow:var(--op-shadow-sm); } .acmo-op-carousel-btn:hover{ background:var(--op-primary); color:#fff; } /*==================================================================== UNIVERSAL OPPORTUNITY CARD ====================================================================*/ .acmo-opportunity-card{ flex:0 0 390px; background:#fff; border:1px solid var(--op-border); border-radius:30px; padding:30px; transition:var(--op-transition); position:relative; overflow:hidden; } .acmo-opportunity-card:hover{ transform:translateY(-10px); box-shadow:var(--op-shadow-xl); } .acmo-opportunity-card::before{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(108,99,255,.02), transparent); opacity:0; transition:var(--op-transition); } .acmo-opportunity-card:hover::before{ opacity:1; } /*==================================================================== CARD HEADER ====================================================================*/ .acmo-op-card-top{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:24px; } .acmo-op-company{ display:flex; align-items:center; gap:14px; } .acmo-op-company-logo{ width:54px; height:54px; border-radius:16px; background:var(--op-primary-light); display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:800; color:var(--op-primary); } .acmo-op-company-name{ font-size:16px; font-weight:700; color:var(--op-heading); } .acmo-op-posted{ font-size:13px; color:var(--op-text-muted); } /*==================================================================== TITLE ====================================================================*/ .acmo-op-job-title{ font-size:28px; font-weight:800; line-height:1.3; color:var(--op-heading); margin-bottom:20px; } /*==================================================================== INFO GRID ====================================================================*/ .acmo-op-meta{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-bottom:28px; } .acmo-op-meta-item{ display:flex; gap:12px; align-items:center; } .acmo-op-meta-icon{ width:42px; height:42px; border-radius:14px; background:var(--op-primary-light); display:flex; align-items:center; justify-content:center; color:var(--op-primary); } .acmo-op-meta-content{ display:flex; flex-direction:column; } .acmo-op-meta-label{ font-size:12px; color:var(--op-text-muted); } .acmo-op-meta-value{ font-size:15px; font-weight:700; } /*==================================================================== REQUIREMENT TAGS ====================================================================*/ .acmo-op-tags{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:30px; } /*==================================================================== FOOTER ====================================================================*/ .acmo-op-card-footer{ display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--op-border); padding-top:24px; } .acmo-op-card-stats{ display:flex; gap:18px; } .acmo-op-card-stat{ display:flex; align-items:center; gap:8px; color:var(--op-text-light); font-size:14px; } .acmo-op-card-actions{ display:flex; gap:12px; } /*==================================================================== FEATURED CARD ====================================================================*/ .acmo-opportunity-featured{ background: linear-gradient(135deg,#6C63FF,#8B5CF6); color:#fff; border:none; } .acmo-opportunity-featured .acmo-op-job-title, .acmo-opportunity-featured .acmo-op-company-name, .acmo-opportunity-featured .acmo-op-meta-value{ color:#fff; } .acmo-opportunity-featured .acmo-op-meta-label, .acmo-opportunity-featured .acmo-op-posted{ color:rgba(255,255,255,.75); } .acmo-opportunity-featured .acmo-op-company-logo{ background:rgba(255,255,255,.15); color:#fff; } .acmo-opportunity-featured .acmo-op-meta-icon{ background:rgba(255,255,255,.12); color:#fff; } /*==================================================================== RESPONSIVE ====================================================================*/ @media(max-width:992px){ .acmo-opportunity-card{ flex:0 0 340px; padding:26px; } } @media(max-width:768px){ .acmo-opportunity-card{ flex:0 0 300px; padding:24px; } .acmo-op-job-title{ font-size:22px; } .acmo-op-meta{ grid-template-columns:1fr; } } /*==================================================================== 29. OPPORTUNITY STATUS ====================================================================*/ .acmo-op-status{ position:absolute; top:24px; right:24px; display:flex; gap:8px; flex-wrap:wrap; } .acmo-op-status-pill{ display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:999px; font-size:12px; font-weight:700; } .acmo-op-status-verified{ background:#ECFDF3; color:#16A34A; } .acmo-op-status-featured{ background:#EEF2FF; color:#6C63FF; } .acmo-op-status-premium{ background:linear-gradient(135deg,#8B5CF6,#EC4899); color:#fff; } .acmo-op-status-urgent{ background:#FEF2F2; color:#DC2626; } .acmo-op-status-closing{ background:#FFF8EB; color:#B45309; } /*==================================================================== BUDGET ====================================================================*/ .acmo-op-budget{ display:flex; align-items:center; gap:12px; margin:28px 0; } .acmo-op-budget-icon{ width:54px; height:54px; border-radius:18px; background:var(--op-primary-light); display:flex; align-items:center; justify-content:center; color:var(--op-primary); font-size:22px; } .acmo-op-budget-price{ font-size:34px; font-weight:800; color:var(--op-primary); line-height:1; } .acmo-op-budget-label{ font-size:13px; color:var(--op-text-muted); } /*==================================================================== HIRING COUNTER ====================================================================*/ .acmo-op-hiring{ display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-radius:20px; background:#F8FAFD; margin-bottom:26px; } .acmo-op-hiring-left{ display:flex; gap:14px; align-items:center; } .acmo-op-hiring-icon{ width:48px; height:48px; border-radius:16px; background:#EEF2FF; display:flex; align-items:center; justify-content:center; color:#6C63FF; } .acmo-op-hiring-number{ font-size:22px; font-weight:800; } .acmo-op-hiring-label{ font-size:13px; color:var(--op-text-light); } /*==================================================================== DEADLINE ====================================================================*/ .acmo-op-deadline{ display:flex; align-items:center; gap:12px; margin-bottom:28px; padding:16px 18px; border-radius:18px; background:#FFF8EB; } .acmo-op-deadline-icon{ width:42px; height:42px; border-radius:14px; background:#fff; display:flex; align-items:center; justify-content:center; color:#F59E0B; } .acmo-op-deadline strong{ display:block; font-size:15px; } .acmo-op-deadline span{ font-size:13px; color:var(--op-text-light); } /*==================================================================== SAVE BUTTON ====================================================================*/ .acmo-op-save{ width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:1px solid var(--op-border); background:#fff; transition:.35s; } .acmo-op-save:hover{ background:#FEF2F2; color:#EF4444; border-color:#FECACA; } /*==================================================================== APPLY BUTTON ====================================================================*/ .acmo-op-apply{ flex:1; display:flex; align-items:center; justify-content:center; gap:10px; height:52px; border-radius:18px; background:var(--op-gradient-primary); color:#fff; font-weight:700; transition:.35s; } .acmo-op-apply:hover{ transform:translateY(-2px); box-shadow:var(--op-shadow-lg); } /*==================================================================== VIEW BUTTON ====================================================================*/ .acmo-op-view{ height:52px; padding:0 24px; border-radius:18px; border:1px solid var(--op-border); display:flex; align-items:center; justify-content:center; font-weight:700; transition:.35s; } .acmo-op-view:hover{ border-color:var(--op-primary); color:var(--op-primary); } /*==================================================================== ACTION AREA ====================================================================*/ .acmo-op-actions{ display:flex; gap:12px; margin-top:28px; } /*==================================================================== CARD HOVER ====================================================================*/ .acmo-opportunity-card{ cursor:pointer; } .acmo-opportunity-card:hover .acmo-op-budget-price{ transform:scale(1.05); } .acmo-op-budget-price{ transition:.35s; } .acmo-opportunity-card:hover .acmo-op-company-logo{ transform:rotate(-8deg); } .acmo-op-company-logo{ transition:.35s; } /*==================================================================== FEATURED RIBBON ====================================================================*/ .acmo-op-ribbon{ position:absolute; top:18px; left:-42px; width:170px; text-align:center; padding:10px 0; background:linear-gradient(135deg,#F59E0B,#FB923C); color:#fff; font-size:12px; font-weight:700; transform:rotate(-45deg); } /*==================================================================== COMPACT CARD ====================================================================*/ .acmo-opportunity-card-sm{ flex:0 0 300px; } .acmo-opportunity-card-sm .acmo-op-job-title{ font-size:22px; } .acmo-opportunity-card-sm .acmo-op-budget-price{ font-size:28px; } /*==================================================================== LARGE CARD ====================================================================*/ .acmo-opportunity-card-lg{ flex:0 0 520px; } .acmo-opportunity-card-lg .acmo-op-job-title{ font-size:34px; } .acmo-opportunity-card-lg .acmo-op-budget-price{ font-size:42px; } /*==================================================================== 30. WHY ACMOBOOK ====================================================================*/ .acmo-op-why{ position:relative; overflow:hidden; } .acmo-op-why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; } .acmo-op-feature{ position:relative; background:#fff; border-radius:30px; padding:40px; border:1px solid var(--op-border); transition:var(--op-transition); overflow:hidden; } .acmo-op-feature:hover{ transform:translateY(-10px); box-shadow:var(--op-shadow-xl); } .acmo-op-feature::before{ content:""; position:absolute; width:140px; height:140px; border-radius:50%; background:rgba(108,99,255,.04); top:-70px; right:-70px; } .acmo-op-feature-icon{ width:72px; height:72px; border-radius:22px; display:flex; align-items:center; justify-content:center; background:var(--op-primary-light); color:var(--op-primary); font-size:28px; margin-bottom:28px; transition:.4s; } .acmo-op-feature:hover .acmo-op-feature-icon{ background:var(--op-gradient-primary); color:#fff; transform:rotate(-8deg); } .acmo-op-feature-title{ font-size:24px; font-weight:800; margin-bottom:14px; color:var(--op-heading); } .acmo-op-feature-text{ color:var(--op-text-light); line-height:1.8; } @media(max-width:992px){ .acmo-op-why-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:768px){ .acmo-op-why-grid{ grid-template-columns:1fr; } } /*==================================================================== 31. HOW IT WORKS ====================================================================*/ .acmo-op-how{ position:relative; overflow:hidden; } .acmo-op-how-wrapper{ display:grid; grid-template-columns:repeat(2,1fr); gap:40px; } .acmo-op-flow{ position:relative; background:#fff; border:1px solid var(--op-border); border-radius:32px; padding:45px; transition:var(--op-transition); } .acmo-op-flow:hover{ transform:translateY(-10px); box-shadow:var(--op-shadow-xl); } .acmo-op-flow-header{ display:flex; align-items:center; gap:18px; margin-bottom:40px; } .acmo-op-flow-icon{ width:72px; height:72px; border-radius:22px; display:flex; align-items:center; justify-content:center; background:var(--op-primary-light); color:var(--op-primary); font-size:30px; } .acmo-op-flow-title{ font-size:28px; font-weight:800; color:var(--op-heading); } .acmo-op-steps{ position:relative; } .acmo-op-step{ position:relative; display:flex; align-items:flex-start; gap:22px; padding-bottom:36px; } .acmo-op-step:last-child{ padding-bottom:0; } .acmo-op-step:not(:last-child)::before{ content:""; position:absolute; left:21px; top:54px; width:2px; height:calc(100% - 18px); background:linear-gradient( to bottom, var(--op-primary), rgba(108,99,255,.12) ); } .acmo-op-step-number{ width:44px; height:44px; border-radius:50%; background:var(--op-gradient-primary); color:#fff; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; flex-shrink:0; } .acmo-op-step-content{ flex:1; } .acmo-op-step-title{ font-size:20px; font-weight:700; margin-bottom:8px; color:var(--op-heading); } .acmo-op-step-text{ font-size:15px; color:var(--op-text-light); line-height:1.8; } @media(max-width:992px){ .acmo-op-how-wrapper{ grid-template-columns:1fr; } } @media(max-width:768px){ .acmo-op-flow{ padding:30px; } .acmo-op-flow-title{ font-size:24px; } .acmo-op-step-title{ font-size:18px; } } /*==================================================================== 32. MARKETPLACE STATS ====================================================================*/ .acmo-op-stats{ position:relative; } .acmo-op-stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; } .acmo-op-stat-card{ position:relative; background:#fff; border:1px solid var(--op-border); border-radius:30px; padding:40px 30px; text-align:center; transition:var(--op-transition); } .acmo-op-stat-card:hover{ transform:translateY(-8px); box-shadow:var(--op-shadow-lg); } .acmo-op-stat-card::before{ content:""; position:absolute; inset:0; background:linear-gradient( 180deg, rgba(108,99,255,.02), transparent ); opacity:0; transition:.35s; } .acmo-op-stat-card:hover::before{ opacity:1; } .acmo-op-stat-icon{ width:74px; height:74px; border-radius:24px; display:flex; align-items:center; justify-content:center; margin:0 auto 24px; background:var(--op-primary-light); color:var(--op-primary); font-size:28px; } .acmo-op-stat-value{ font-size:46px; font-weight:800; color:var(--op-heading); line-height:1; margin-bottom:14px; } .acmo-op-stat-label{ color:var(--op-text-light); font-size:15px; } @media(max-width:992px){ .acmo-op-stats-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:576px){ .acmo-op-stats-grid{ grid-template-columns:1fr; } } /*==================================================================== 33. FINAL CTA ====================================================================*/ .acmo-op-cta{ position:relative; } .acmo-op-cta-box{ position:relative; overflow:hidden; border-radius:40px; padding:80px; background:var(--op-gradient-premium); color:#fff; } .acmo-op-cta-box::before{ content:""; position:absolute; width:520px; height:520px; border-radius:50%; background:rgba(255,255,255,.08); right:-180px; top:-180px; } .acmo-op-cta-box::after{ content:""; position:absolute; width:320px; height:320px; border-radius:50%; background:rgba(255,255,255,.06); left:-120px; bottom:-120px; } .acmo-op-cta-content{ position:relative; z-index:2; max-width:760px; } .acmo-op-cta-title{ font-size:54px; font-weight:800; line-height:1.1; margin-bottom:22px; } .acmo-op-cta-text{ font-size:20px; line-height:1.8; opacity:.92; margin-bottom:40px; } .acmo-op-cta-buttons{ display:flex; gap:18px; flex-wrap:wrap; } .acmo-op-cta .acmo-op-btn-primary{ background:#fff; color:var(--op-primary); } .acmo-op-cta .acmo-op-btn-outline{ background:transparent; border:1px solid rgba(255,255,255,.35); color:#fff; } .acmo-op-cta .acmo-op-btn-outline:hover{ background:#fff; color:var(--op-primary); } @media(max-width:768px){ .acmo-op-cta-box{ padding:50px 30px; } .acmo-op-cta-title{ font-size:38px; } .acmo-op-cta-text{ font-size:17px; } .acmo-op-cta-buttons{ flex-direction:column; } } /*==================================================================== 34. FOOTER ====================================================================*/ .acmo-op-footer{ position:relative; background:#FFFFFF; border-top:1px solid var(--op-border); margin-top:100px; } .acmo-op-footer-top{ padding:80px 0 50px; } .acmo-op-footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:50px; } .acmo-op-footer-logo{ margin-bottom:24px; } .acmo-op-footer-about{ color:var(--op-text-light); line-height:1.9; max-width:420px; } .acmo-op-footer-title{ font-size:18px; font-weight:700; color:var(--op-heading); margin-bottom:22px; } .acmo-op-footer-links{ display:flex; flex-direction:column; gap:14px; } .acmo-op-footer-links a{ color:var(--op-text-light); transition:.3s; } .acmo-op-footer-links a:hover{ color:var(--op-primary); padding-left:8px; } .acmo-op-footer-bottom{ border-top:1px solid var(--op-border); padding:25px 0; } .acmo-op-footer-bottom-content{ display:flex; align-items:center; justify-content:space-between; } .acmo-op-social{ display:flex; gap:14px; } .acmo-op-social a{ width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#F8FAFD; transition:.35s; } .acmo-op-social a:hover{ background:var(--op-primary); color:#fff; } @media(max-width:992px){ .acmo-op-footer-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:576px){ .acmo-op-footer-grid{ grid-template-columns:1fr; } .acmo-op-footer-bottom-content{ flex-direction:column; gap:20px; text-align:center; } } /*==================================================================== 35. ANIMATION LIBRARY ====================================================================*/ @keyframes acmoFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-18px); } } @keyframes acmoFloatSmall{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } } @keyframes acmoPulse{ 0%{ transform:scale(1); } 50%{ transform:scale(1.05); } 100%{ transform:scale(1); } } @keyframes acmoGlow{ 0%{ box-shadow:0 0 0 rgba(108,99,255,0); } 100%{ box-shadow:0 0 40px rgba(108,99,255,.25); } } @keyframes acmoGradient{ 0%{ background-position:0%; } 100%{ background-position:100%; } } @keyframes acmoFadeUp{ 0%{ opacity:0; transform:translateY(40px); } 100%{ opacity:1; transform:translateY(0); } } @keyframes acmoScale{ 0%{ transform:scale(.95); opacity:0; } 100%{ transform:scale(1); opacity:1; } } @keyframes acmoRotate{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } } .acmo-op-float{ animation:acmoFloat 6s ease-in-out infinite; } .acmo-op-float-sm{ animation:acmoFloatSmall 5s ease-in-out infinite; } .acmo-op-pulse{ animation:acmoPulse 2.5s infinite; } .acmo-op-glow{ animation:acmoGlow 3s infinite alternate; } .acmo-op-fade-up{ animation:acmoFadeUp .8s ease forwards; } .acmo-op-scale{ animation:acmoScale .6s ease forwards; } .acmo-op-rotate{ animation:acmoRotate 20s linear infinite; } /*==================================================================== 36. UTILITIES ====================================================================*/ .acmo-op-hidden{ display:none!important; } .acmo-op-overflow-hidden{ overflow:hidden; } .acmo-op-relative{ position:relative; } .acmo-op-absolute{ position:absolute; } .acmo-op-text-center{ text-align:center; } .acmo-op-text-left{ text-align:left; } .acmo-op-text-right{ text-align:right; } .acmo-op-w-100{ width:100%; } .acmo-op-h-100{ height:100%; } .acmo-op-rounded{ border-radius:var(--op-radius-lg); } .acmo-op-rounded-xl{ border-radius:var(--op-radius-2xl); } .acmo-op-bg-white{ background:#fff; } .acmo-op-bg-soft{ background:var(--op-bg-soft); } .acmo-op-border{ border:1px solid var(--op-border); } .acmo-op-shadow{ box-shadow:var(--op-shadow-lg); } .acmo-op-primary{ color:var(--op-primary); } .acmo-op-success{ color:var(--op-success); } .acmo-op-warning{ color:var(--op-warning); } .acmo-op-danger{ color:var(--op-danger); } .acmo-op-fw-500{ font-weight:500; } .acmo-op-fw-600{ font-weight:600; } .acmo-op-fw-700{ font-weight:700; } .acmo-op-fw-800{ font-weight:800; } /*==================================================================== 37. GLOBAL RESPONSIVE ====================================================================*/ @media(max-width:1400px){ :root{ --op-display:58px; --op-h1:48px; --op-h2:38px; } } @media(max-width:1200px){ :root{ --op-section-space:90px; } } @media(max-width:992px){ :root{ --op-display:46px; --op-h1:40px; --op-h2:34px; --op-h3:28px; } .acmo-op-grid-4{ grid-template-columns:repeat(2,1fr); } .acmo-op-grid-3{ grid-template-columns:repeat(2,1fr); } } @media(max-width:768px){ :root{ --op-section-space:70px; } .acmo-op-grid-2, .acmo-op-grid-3, .acmo-op-grid-4, .acmo-op-grid-5{ grid-template-columns:1fr; } .acmo-op-section-title{ font-size:32px; } .acmo-op-section-subtitle{ font-size:16px; } } @media(max-width:576px){ .acmo-op-container{ padding-inline:18px; } } /*==================================================================== 38. FILTER BAR ====================================================================*/ .acmo-op-filter-bar{ position:sticky; top:95px; z-index:80; margin-bottom:50px; } .acmo-op-filter-wrapper{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 24px; background:rgba(255,255,255,.92); backdrop-filter:blur(20px); border:1px solid var(--op-border); border-radius:28px; box-shadow:var(--op-shadow-md); } .acmo-op-filter-left{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; } .acmo-op-filter-right{ display:flex; align-items:center; gap:14px; } .acmo-op-filter-chip{ display:inline-flex; align-items:center; gap:10px; padding:12px 20px; border-radius:999px; background:#fff; border:1px solid var(--op-border); color:var(--op-text); font-weight:600; transition:.35s; cursor:pointer; } .acmo-op-filter-chip:hover{ border-color:var(--op-primary); color:var(--op-primary); } .acmo-op-filter-chip.active{ background:var(--op-gradient-primary); color:#fff; border-color:transparent; } .acmo-op-filter-chip i{ font-size:14px; } .acmo-op-filter-select{ min-width:180px; height:50px; border-radius:16px; border:1px solid var(--op-border); background:#fff; padding:0 18px; font-weight:600; } .acmo-op-filter-count{ display:flex; align-items:center; gap:10px; font-weight:700; color:var(--op-heading); } .acmo-op-filter-count span{ color:var(--op-primary); } @media(max-width:992px){ .acmo-op-filter-wrapper{ flex-direction:column; align-items:flex-start; } .acmo-op-filter-right{ width:100%; overflow:auto; } } @media(max-width:768px){ .acmo-op-filter-left{ overflow-x:auto; flex-wrap:nowrap; width:100%; scrollbar-width:none; } .acmo-op-filter-left::-webkit-scrollbar{ display:none; } } /*==================================================================== 39. PAGINATION ====================================================================*/ .acmo-op-pagination{ display:flex; justify-content:center; align-items:center; gap:12px; margin-top:80px; } .acmo-op-page{ width:50px; height:50px; border-radius:18px; display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid var(--op-border); font-weight:700; transition:.35s; } .acmo-op-page:hover{ border-color:var(--op-primary); color:var(--op-primary); } .acmo-op-page.active{ background:var(--op-gradient-primary); color:#fff; border:none; } .acmo-op-page-arrow{ width:56px; } /*==================================================================== 40. EMPTY STATES ====================================================================*/ .acmo-op-empty{ max-width:700px; margin:120px auto; text-align:center; } .acmo-op-empty-icon{ width:120px; height:120px; border-radius:36px; margin:auto; margin-bottom:35px; display:flex; align-items:center; justify-content:center; background:var(--op-primary-light); color:var(--op-primary); font-size:48px; } .acmo-op-empty-title{ font-size:34px; font-weight:800; margin-bottom:18px; } .acmo-op-empty-text{ color:var(--op-text-light); line-height:1.8; margin-bottom:35px; } /*==================================================================== 41. SKELETON ====================================================================*/ @keyframes acmoSkeleton{ 0%{ background-position:-250px; } 100%{ background-position:350px; } } .acmo-op-skeleton{ background:linear-gradient( 90deg, #F2F4F7 25%, #FFFFFF 50%, #F2F4F7 75% ); background-size:400px 100%; animation:acmoSkeleton 1.3s infinite linear; border-radius:14px; } .acmo-op-skeleton-title{ height:24px; width:70%; margin-bottom:18px; } .acmo-op-skeleton-text{ height:14px; margin-bottom:12px; } .acmo-op-skeleton-button{ width:160px; height:50px; }